{"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","name":"@material/drawer","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","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","navigation","drawer"],"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":{},"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"}],"_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"},"_id":"@material/drawer@0.35.0","version":"0.35.0"}