{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eff0753b11e1fc8409d3480f4520c80d24da304c","tarball":"https://registry.npmjs.org/@material/dialog/-/dialog-0.35.0.tgz","fileCount":11,"integrity":"sha512-iqdVszLqm6Hoddu5LYPoRkYycyOy5nA/78pcX4kaLS389enFr+tbUgVLtZFbg1uO3BQtQg5jnME64fWfN7xHEA==","signatures":[{"sig":"MEQCIAYP62SEvDStWk1cVKe3CbNqWLIixH8VUUuVj1D0X6zvAiA83abE1kSUlPdOL25KdsmA6kEqtHBpgP7Vss54mEtWCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":166555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDJCRA9TVsSAnZWagAAcWAP+weA31X6BTSX6Ycev6jc\n4m2qVzfuj4mWyqIQCdTuF8qs5iD+Mi8nXvin3Sim5tyAv05GBXuBHqJWG2BD\nsajPvvOzyd5RCEqiJkGjcjCh1CQfzIiEFGzhXXAZNo6+7D2CVkMLrzZ5HyZQ\nDLNV+DjvTpgJd6qwcfK+eKBUZwMTMRNI1UIW3tw4jO2YMsr7Bzk1EzXdCfTw\nrEYVGtMG8LgYpAoiup/pHGQjKTT3xsBs3baADfFVUCzQEVsxccBZ3ecRka/+\nEiKvdI7xWLvN2v8iGOuTa+lAo0d6XWPPEPJJC6Z2q9hCNHxkL+pBgZaFZ1cc\nBhce2n24AHZfx/ncqEsgsOPq5UC9/f6BqtUg3Sc5+YXjHB200OLzensYbbHz\nj6qpM+UmfuLzaRLvSGGVzh8m1O7j1BrZ/0Axd1hCUXtmoKp6ItJVbJgBfiX+\nEY3Satfv8G2iMAsdGIGm42h+RRa0rAaa+/bT9T9+Knolah0yr22qgK2z2SrG\nis58UWY1WrK9r6lLGb4tWE0/nfZ22awYGDC8Lm8JidG8wM3vPN+CBMqVVJ+J\n947QUfPPmXCHwhjI42nshj7lMnzURFin8wt+x3hLLLtShMu33X1kGmAYJs6z\nvUHnTvoHpLTD/iQoBAi8o+abhxxDodbGeYizUZmFIF0QgeJjUIL5jjHvFVEZ\nBm6K\r\n=Q7d1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/dialog","readme":"\n\n# Dialogs\n\n\n\nThe MDC Dialog component is a spec-aligned dialog component adhering to the\n[Material Design dialog pattern](https://material.io/guidelines/components/dialogs.html).\nIt implements a modal dialog window. You may notice that full screen components outlined in the dialog spec\ndo not appear in MDC Dialog. This is because they have been deemed to be outside of the scope of what\na dialog should be.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/dialog\n```\n\n## Dialog usage\n\nDialogs inform users about a specific task and may contain critical information or require decisions.\n\n```html\n\n```\n\nIn the example above, we've created a dialog box in an `aside` element. Note that you can place content inside\nthe dialog. There are two types: dialog & dialogs with scrollable content. These are declared using CSS classes.\n\nIn most cases, dialog content should be able to fit without scrolling. However, certain special cases call for the\nability to scroll the dialog's contents (see \"Scrollable content exception\" under\n[Behavior](https://material.io/guidelines/components/dialogs.html#dialogs-behavior)). For these special cases, there is\na `mdc-dialog__body--scrollable` modifier to allow scrolling in the dialog.\n\n> **Note**: The body of a scrollable dialog is styled with a default max-height; this can be overridden as necessary via\n> the `.mdc-dialog__body--scrollable` selector.\n\n```html\n \n```\n\nNote that unlike the css classnames, the specific ID names used do not have to be _exactly_ the same as listed above.\nThey only need to match the values set for their corresponding aria attributes.\n\n### Dialog Action Color ###\n\nDialog actions use system colors by default, but you can use a contrasting color, such as the palette’s secondary color, to distinguish dialog actions from dialog content. To emphasize an action from other contents, add `mdc-dialog__action` to `mdc-button` to apply secondary color.\n\n```html\n\n```\n\n### Using the Component\n\nMDC Dialog ships with a Component / Foundation combo which allows for frameworks to richly integrate the\ncorrect dialog behaviors into idiomatic components.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCDialog, MDCDialogFoundation, util} from '@material/dialog';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcDialog = require('@material/dialog');\nconst MDCDialog = mdcDialog.MDCDialog;\nconst MDCDialogFoundation = mdcDialog.MDCDialogFoundation;\nconst util = mdcDialog.util;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/@material/dialog'], mdcDialog => {\n const MDCDialog = mdcDrawer.MDCDialog;\n const MDCDialogFoundation = mdcDialog.MDCDialogFoundation;\n const util = mdcDialog.util;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCDialog = mdc.dialog.MDCDialog;\nconst MDCDialogFoundation = mdc.dialog.MDCDialogFoundation;\nconst util = mdc.dialog.util;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the dialog, simply call `attachTo()`\nand pass it a DOM element. This however, is only useful if you do not need to pass a callback to the dialog\nwhen the user selects Accept or Cancel.\n\n```javascript\nmdc.dialog.MDCDialog.attachTo(document.querySelector('#my-mdc-dialog'));\n```\n\n#### Manual Instantiation\n\nDialogs can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCDialog} from '@material/dialog';\n\nconst dialog = new MDCDialog(document.querySelector('#my-mdc-dialog'));\n```\n\n#### Using the dialog component\n```js\nvar dialog = new mdc.dialog.MDCDialog(document.querySelector('#mdc-dialog-default'));\n\ndialog.listen('MDCDialog:accept', function() {\n console.log('accepted');\n})\n\ndialog.listen('MDCDialog:cancel', function() {\n console.log('canceled');\n})\n\ndocument.querySelector('#default-dialog-activation').addEventListener('click', function (evt) {\n dialog.lastFocusedTarget = evt.target;\n dialog.show();\n})\n```\n\n### Dialog component API\n\n#### MDCDialog.open\n\nBoolean. True when the dialog is shown, false otherwise.\n\n#### MDCDialog.show() => void\n\nShows the dialog\n\n#### MDCDialog.close() => void\n\nCloses the dialog\n\n### Dialog Events\n\n#### MDCDialog:accept\n\nBroadcast when a user actions on the `.mdc-dialog__footer__button--accept` element.\n\n#### MDCDialog:cancel\n\nBroadcast when a user actions on the `.mdc-dialog__footer__button--cancel` element.\n\n### Using the Foundation Class\n\nMDC Dialog ships with an `MDCDialogFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\n\n> **NOTE**: Components themselves must manage adding ripples to dialog buttons, should they choose to\ndo so. We provide instructions on how to add ripples to buttons within the [mdc-button README](../mdc-button#adding-ripples-to-buttons).\n\n### Adapter API\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| `setStyle(propertyName: string, value: string) => void` | Sets a style property `propertyName` on the root element to the `value` specified |\n| `addBodyClass(className: string) => void` | Adds a class to the body. |\n| `removeBodyClass(className: string) => void` | Removes a class from the body. |\n| `eventTargetHasClass(target: EventTarget, className: string) => boolean` | Returns true if target has className, false otherwise. |\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| `registerSurfaceInteractionHandler(evt: string, handler: EventListener) => void` | Registers an event handler on the dialog surface element. |\n| `deregisterSurfaceInteractionHandler(evt: string, handler: EventListener) => void` | Deregisters an event handler from the dialog surface element. |\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| `registerTransitionEndHandler: (handler: EventListener) => void` | Registers an event handler to be called when a transitionend event is triggered on the dialog 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| `notifyAccept() => {}` | Broadcasts an event denoting that the user has accepted the dialog. |\n| `notifyCancel() => {}` | Broadcasts an event denoting that the user has cancelled the dialog. |\n| `isDialog(el: Element) => boolean` | Returns boolean indicating whether the provided element is the dialog surface element. |\n| `trapFocusOnSurface() => {}` | Sets up the DOM which the dialog is contained in such that focusability is restricted to the elements on the dialog surface (see [Handling Focus Trapping](#handling-focus-trapping) below for more details). |\n| `untrapFocusOnSurface() => {}` | Removes any affects of focus trapping on the dialog surface from the DOM (see [Handling Focus Trapping](#handling-focus-trapping) below for more details). |\n\n#### Handling Focus Trapping\n\nIn order for dialogs to be fully accessible, they must conform to the guidelines outlined in\nhttps://www.w3.org/TR/wai-aria-practices/#dialog_modal. The main implication of these guidelines is\nthat the only focusable elements are those contained within a dialog surface.\n\nTrapping focus correctly for a modal dialog requires a complex set of events and interaction\npatterns that we feel is best not duplicated within the logic of this component. Furthermore,\nframeworks and libraries may have their own ways of trapping focus that framework authors may want\nto make use of. For this reason, we have two methods on the adapter that should be used to handle\nfocus trapping:\n\n- *trapFocusOnSurface()* is called when the dialog is open and should set up focus trapping adhering\n to the ARIA practices in the link above.\n- *untrapFocusOnSurface()* is called when the dialog is closed and should tear down any focus\n trapping set up when the dialog was open.\n\nIn our `MDCDialog` component, we use the [focus-trap](https://github.com/davidtheclark/focus-trap)\npackage to handle this. **You can use [util.createFocusTrapInstance](#mdcdialog-util-api) to easily\ncreate a focus trapping solution for your component code.**\n\n### The full foundation API\n\n#### MDCDialogFoundation.open() => void\n\nOpens the dialog, registers appropriate event listeners, sets aria attributes, focuses elements.\n\n#### MDCDialogFoundation.close() => void\n\nCloses the dialog, deregisters appropriate event listeners, resets aria attributes, focuses\nelements.\n\n#### MDCDialogFoundation.accept(notifyChange = false) => void\n\nCloses the dialog. If `notifyChange` is true, calls the adapter's `notifyAccept()` method.\n\n#### MDCDialogFoundation.cancel(notifyChange = false) => void\n\nCloses the dialog. If `notifyChange` is true, calls the adapter's `notifyCancel()` method.\n\n#### MDCDialogFoundation.isOpen() => Boolean\n\nReturns true if the dialog is open, false otherwise.\n\n### MDCDialog Util API\n\n#### util.createFocusTrapInstance(surfaceEl, acceptButtonEl, focusTrapFactory = require('focus-trap')) => {activate: () => {}, deactivate: () => {}};\n\nGiven a dialog surface element, an accept button element, and an optional focusTrap factory\nfunction, creates a properly configured [focus-trap](https://github.com/davidtheclark/focus-trap)\ninstance such that:\n\n- The focus is trapped within the `surfaceEl`\n- The `acceptButtonEl` receives focus when the focus trap is activated\n- Pressing the `escape` key deactivates focus\n- Clicking outside the dialog deactivates focus\n- Focus is returned to the previously focused element before the focus trap was activated\n\nThis focus trap instance can be used to implement the `trapFocusOnSurface` and\n`untrapFocusOnSurface` adapter methods by calling `instance.activate()` and `instance.deactivate()`\nrespectively within those methods.\n\nThe `focusTrapFactory` can be used to override the `focus-trap` function used to create the focus\ntrap. It's API is the same as focus-trap's [createFocusTrap](https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions) (which is what it defaults to). You can pass in a custom function for mocking out the\nactual function within tests, or to modify the arguments passed to the function before it's called.\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","dialog","modal"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components Web dialog 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":{"focus-trap":"^2.3.0","@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0","@material/typography":"^0.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/dialog_0.35.0_1524523207319_0.6940050378168774","host":"s3://npm-registry-packages"},"_id":"@material/dialog@0.35.0","version":"0.35.0"}