{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d5e45f780b980764e08165daf7b367b104c65ad","tarball":"https://registry.npmjs.org/@material/dialog/-/dialog-1.0.0-0.tgz","fileCount":35,"integrity":"sha512-320Z/2Blwxw3DEYFrK91BEMXPt9dOMIhMcT2N6PITKgLgP9D78r+RJlJHINjyfZQgmGxY5oyVVAolKsWuhB71Q==","signatures":[{"sig":"MEYCIQDTPhnTFE6IaDwqmpAOFMAZezEtwixqMWs2SmzDg3EFVgIhALKZ6g6GlTTVNmcjL3H9x9VHiV/zfkVLURnOlg3SXiQu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRlCRA9TVsSAnZWagAArtEQAJQL5BNiR2hyUVMUUfxh\nL2fBLNPSuwWnRlPL6sU/bMKOgVDWd9nrpZzhCRiBDD7kgTW8qw7cAf3v/eUM\nFdi0U/hVO6gwzX2B1gHq2186hJJoM767J+2NP5q8gdSvr6Z44lYVWm+AtDc2\ncaACqc5CBSQ2hltOv1memEv9aGCEuwu8U8gHxUgR/vq05rWn49UZxvzXIyt7\npJHjN8c73WP4A//ZGQq9GLHRJEb+ycFpwxgSRcwFMJTAns3fF/Xozmugm2C1\nBkT+UhmpPd9PIo0O0+OXbowJh2Xdus1VSkrhvn2cf4RjPHqSvPqZPNM/+r/n\nv5wP5sCV7RsVL7oMbgzBgMb4E3pzMoPPXA+hG7krhHRqDix7dLorZ8I0XnHc\nN1pHAKjSoKHTYb6NCbCrPhob0sst1VjCJsxZg308BMo6goFxFoS4clPT5Zx6\nJMIvFJeV2qmSX48gMNuVVLCTs4tJ39DGOIc+GxXeYW+BuNplIOPsReHUq2TH\nS6N8n4K5x+w8pLygzFPx7Vvh/EfqjqX1NkmF+ck3DdpfVyHGFFvOUgNqfqDW\nMY2QsmCATxuYJf7YB4j/ABuQLxPYjUeuIY5b9PFyN6UY69Q++phrmrugcBbU\ngW1nJ648H3yIeJ4AWcGRPKe28AnHje9aF4+kAxyC/Yzd5EhxApG0wowbaJxs\nXCbd\r\n=SL70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.dialog.js","name":"@material/dialog","types":"dist/mdc.dialog.d.ts","module":"index.js","readme":"\n\n# Dialog\n\n\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/dialog\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n \n

Dialog Title

\n
\n Dialog body text goes here.\n
\n
\n \n \n
\n
\n
\n
\n
\n```\n\n> *NOTE*: Titles cannot contain leading whitespace due to how `mdc-typography-baseline-top()` works.\n\n### Styles\n\n```scss\n@import \"@material/dialog/mdc-dialog\";\n```\n\n> *NOTE*: Styles for any components you intend to include within dialogs (e.g. List, Checkboxes, etc.) must also be\n> imported.\n\n### JavaScript Instantiation\n\n```js\nimport {MDCDialog} from '@material/dialog';\nconst dialog = new MDCDialog(document.querySelector('.mdc-dialog'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nMDC Dialog makes no assumptions about what will be added to the `mdc-dialog__content` element. Any List, Checkboxes,\netc. must also be instantiated. If your dialog contains any layout-sensitive components, you should wait until\n`MDCDialog:opened` is emitted to instantiate them (or call `layout` on them) so that the dialog's transition finishes\nfirst.\n\nFor example, to instantiate an MDC List inside of a Simple or Confirmation Dialog:\n\n```js\nimport {MDCList} from '@material/list';\nconst list = new MDCList(document.querySelector('.mdc-dialog .mdc-list'));\n\ndialog.listen('MDCDialog:opened', () => {\n list.layout();\n});\n```\n\n> *NOTE*: Mispositioned or incorrectly-sized elements (e.g. ripples, floating labels, notched outlines) are a strong\n> indication that child components are being instantiated before the dialog has finished opening.\n\n## Variants\n\n### Simple Dialog\n\nThe Simple Dialog contains a list of potential actions. It does not contain buttons.\n\n```html\n
\n
\n
\n \n

Choose a Ringtone

\n
\n
    \n
  • \n None\n
    • \n
  • \n Callisto\n
    • \n \n
\n
\n
\n
\n
\n
\n```\n\n> Note the inclusion of the `mdc-list--avatar-list` class, which aligns with the Simple Dialog spec.\n\n### Confirmation Dialog\n\nThe Confirmation Dialog contains a list of choices, and buttons to confirm or cancel. Choices are accompanied by\nradio buttons (indicating single selection) or checkboxes (indicating multiple selection).\n\n```html\n
\n
\n
\n \n

Choose a Ringtone

\n
\n
    \n
  • \n \n
    \n \n
    \n
    \n
    \n
    \n
    \n     \n \n
    • \n \n
\n
\n
\n \n \n
\n
\n
\n
\n
\n```\n\n> *NOTE*: In the example above, the Cancel button intentionally has the `close` action to align with the behavior of\n> clicking the scrim or pressing the Escape key, allowing all interactions involving dismissal without taking an action\n> to be detected the same way.\n\n### Additional Information\n\n#### Dialog Actions\n\nAll dialog variants support the concept of dialog actions. Any element within a dialog may include the\n`data-mdc-dialog-action` attribute to indicate that interacting with it should close the dialog with the specified action.\nThis action is then reflected via `event.detail.action` in the `MDCDialog:closing` and `MDCDialog:closed` events.\n\nAdditionally, two interactions have defined actions by default:\n\n* Clicking on the scrim\n* Pressing the Escape key within the dialog\n\nBoth of these map to the `close` action by default. This can be accessed and customized via the component's\n`scrimClickAction` and `escapeKeyAction` properties, respectively.\n\nSetting either of these properties to an empty string will result in that interaction being disabled (i.e. the dialog\nwill no longer close in response to the interaction). Exercise caution when doing this - it should always be possible\nfor a user to dismiss the dialog.\n\nAny action buttons within the dialog which equate strictly to a dismissal with no further action should also use the\n`close` action; this will make it easy to handle all such interactions consistently, while separately handling other\nactions.\n\n#### Action Button Arrangement\n\nAs indicated in the [Dialog design article](https://material.io/design/components/dialogs.html#anatomy), buttons within\nthe `mdc-dialog__actions` element are arranged horizontally by default, with the confirming action _last_.\n\nIn cases where the button text is too long for all buttons to fit on a single line, the buttons are stacked vertically,\nwith the confirming action _first_.\n\nMDC Dialog detects and handles this automatically by default, reversing the buttons when applying the stacked layout.\nThis automatic behavior can be disabled by setting `autoStackButtons` to `false` on the component instance:\n\n```js\ndialog.autoStackButtons = false;\n```\n\nThis will also be disabled if the `mdc-dialog--stacked` modifier class is applied manually to the root element before the\ncomponent is instantiated, but note that dialog action button labels are recommended to be short enough to fit on a\nsingle line if possible.\n\n#### Default Action Button\n\nMDC Dialog supports indicating that one of its action buttons represents the default action, triggered by pressing the\nEnter key. This can be used e.g. for single-choice Confirmation Dialogs to accelerate the process of making a selection,\navoiding the need to tab through to the appropriate button to confirm the choice.\n\nTo indicate that a button represents the default action, add the `mdc-dialog__button--default` modifier class.\nFor example:\n\n```html\n...\n\n...\n```\n\n#### Actions and Selections\n\nDialogs which require making a choice via selection controls should initially disable any button which performs an\naction if no choice is selected by default. MDC Dialog does not include built-in logic for this, since it aims to remain\nas unopinionated as possible regarding dialog contents, aside from relaying information on which action is taken.\n\n#### Accessibility\n\n##### Using `aria-hidden` as a fallback for `aria-modal`\n\n`aria-modal` is part of the ARIA 1.1 specification, and indicates to screen readers that they should confine themselves\nto a single element. MDC Dialog recommends adding `aria-modal=\"true\"` to the root element of its DOM structure; however,\nnot all user agents and screen readers properly honor this attribute.\n\nThe fallback is to apply `aria-hidden=\"true\"` to all static content behind the dialog, when the dialog is open. This will\nbe easiest to achieve if all non-modal elements are under a single common ancestor under the body, so that `aria-hidden`\ncan be applied to one element.\n\n```js\ndialog.listen('MDCDialog:opened', function() {\n // Assuming contentElement references a common parent element with the rest of the page's content\n contentElement.setAttribute('aria-hidden', 'true');\n});\n\ndialog.listen('MDCDialog:closing', function() {\n contentElement.removeAttribute('aria-hidden');\n});\n```\n\n> Note: The example above intentionally listens to the **opened** (not opening) event and the **closing** (not closed)\n> event in order to avoid additional jumping between elements by screen readers due to one element becoming hidden\n> before others become visible.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-dialog` | Mandatory. The root DOM element containing the surface and the container.\n`mdc-dialog__scrim` | Mandatory. Semitransparent backdrop that displays behind a dialog.\n`mdc-dialog__container` | Mandatory. Wrapper element needed to ensure flexbox behavior in IE 11.\n`mdc-dialog__surface` | Mandatory. The bounding box for the dialog's content.\n`mdc-dialog__title` | Optional. Brief summary of the dialog's purpose.\n`mdc-dialog__content` | Optional. Primary content area. May contain a list, a form, or prose.\n`mdc-dialog__actions` | Optional. Footer area containing the dialog's action buttons.\n`mdc-dialog__button` | Optional. Individual action button. Typically paired with [`mdc-button`](../mdc-button).\n`mdc-dialog--open` | Optional. Indicates that the dialog is open and visible.\n`mdc-dialog--opening` | Optional. Applied automatically when the dialog is in the process of animating open.\n`mdc-dialog--closing` | Optional. Applied automatically when the dialog is in the process of animating closed.\n`mdc-dialog--scrollable` | Optional. Applied automatically when the dialog has overflowing content to warrant scrolling.\n`mdc-dialog--stacked` | Optional. Applied automatically when the dialog's action buttons can't fit on a single line and must be stacked.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-dialog-container-fill-color($color)` | Sets the fill color of the dialog.\n`mdc-dialog-scrim-color($color, $opacity)` | Sets the color of the scrim behind the dialog.\n`mdc-dialog-title-ink-color($color, $opacity)` | Sets the color of the dialog's title text.\n`mdc-dialog-content-ink-color($color, $opacity)` | Sets the color of the dialog's content text.\n`mdc-dialog-scroll-divider-color($color, $opacity)` | Sets the color of the dividers which display around scrollable content.\n`mdc-dialog-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to dialog surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-dialog-min-width($min-width)` | Sets the minimum width of the dialog (defaults to 280px).\n`mdc-dialog-max-width($max-width, $margin)` | Sets the maximum width of the dialog (defaults to 560px max width and 16px margins).\n`mdc-dialog-max-height($max-height, $margin)` | Sets the maximum height of the dialog (defaults to no max height and 16px margins).\n\n> *NOTE*: The `max-width` and `max-height` mixins only apply their maximum when the viewport is large enough to accommodate the specified value when accounting for the specified margin on either side. When the viewport is smaller, the dialog is sized such that the given margin is retained around the edges.\n\n## `MDCDialog` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Proxies to the foundation's `isOpen` method.\n`escapeKeyAction` | `string` | Proxies to the foundation's `getEscapeKeyAction` and `setEscapeKeyAction` methods.\n`scrimClickAction` | `string` | Proxies to the foundation's `getScrimClickAction` and `setScrimClickAction` methods.\n`autoStackButtons` | `boolean` | Proxies to the foundation's `getAutoStackButtons` and `setAutoStackButtons` methods.\n\nMethod Signature | Description\n--- | ---\n`layout() => void` | Recalculates layout and automatically adds/removes modifier classes like `--scrollable`.\n`open() => void` | Opens the dialog.\n`close(action: string?) => void` | Closes the dialog, optionally with the specified action indicating why it was closed.\n\n### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCDialog:opening` | `{}` | Indicates when the dialog begins its opening animation.\n`MDCDialog:opened` | `{}` | Indicates when the dialog finishes its opening animation.\n`MDCDialog:closing` | `{action: string?}` | Indicates when the dialog begins its closing animation. `action` represents the action which closed the dialog.\n`MDCDialog:closed` | `{action: string?}` | Indicates when the dialog finishes its closing animation. `action` represents the action which closed the dialog.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Dialog for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDialogAdapter`\n\nMethod 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 whether the given class exists on the root element.\n`addBodyClass(className: string) => void` | Adds a class to the ``.\n`removeBodyClass(className: string) => void` | Removes a class from the ``.\n`eventTargetMatches(target: EventTarget \\| null, selector: string) => void` | Returns `true` if the target element matches the given CSS selector, otherwise `false`.\n`trapFocus() => void` | Sets up the DOM such that keyboard navigation is restricted to focusable elements within the dialog surface (see [Handling Focus Trapping](#handling-focus-trapping) below for more details).\n`releaseFocus() => void` | Removes any effects of focus trapping on the dialog surface (see [Handling Focus Trapping](#handling-focus-trapping) below for more details).\n`isContentScrollable() => boolean` | Returns `true` if `mdc-dialog__content` can be scrolled by the user, otherwise `false`.\n`areButtonsStacked() => boolean` | Returns `true` if `mdc-dialog__action` buttons (`mdc-dialog__button`) are stacked vertically, otherwise `false` if they are side-by-side.\n`getActionFromEvent(event: Event) => string \\| null` | Retrieves the value of the `data-mdc-dialog-action` attribute from the given event's target, or an ancestor of the target.\n`clickDefaultButton() => void` | Invokes `click()` on the `mdc-dialog__button--default` element, if one exists in the dialog.\n`reverseButtons() => void` | Reverses the order of action buttons in the `mdc-dialog__actions` element. Used when switching between stacked and unstacked button layouts.\n`notifyOpening() => void` | Broadcasts an event denoting that the dialog has just started to open.\n`notifyOpened() => void` | Broadcasts an event denoting that the dialog has finished opening.\n`notifyClosing(action: string) {}` | Broadcasts an event denoting that the dialog has just started closing. If a non-empty `action` is passed, the event's `detail` object should include its value in the `action` property.\n`notifyClosed(action: string) {}` | Broadcasts an event denoting that the dialog has finished closing. If a non-empty `action` is passed, the event's `detail` object should include its value in the `action` property.\n\n### `MDCDialogFoundation`\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the dialog.\n`close(action: string)` | Closes the dialog, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the dialog is open.\n`layout()` | Recalculates layout and automatically adds/removes modifier classes e.g. `--scrollable`.\n`getEscapeKeyAction() => string` | Returns the action reflected when the Escape key is pressed.\n`setEscapeKeyAction(action: string)` | Sets the action reflected when the Escape key is pressed. Setting to `''` disables closing the dialog via Escape key.\n`getScrimClickAction() => string` | Returns the action reflected when the scrim is clicked.\n`setScrimClickAction(action: string)` | Sets the action reflected when the scrim is clicked. Setting to `''` disables closing the dialog via scrim click.\n`getAutoStackButtons() => boolean` | Returns whether stacked/unstacked action button layout is automatically handled during layout logic.\n`setAutoStackButtons(autoStack: boolean) => void` | Sets whether stacked/unstacked action button layout is automatically handled during layout logic.\n`handleInteraction(event: Event)` | Handles `click` and `keydown` events on or within the dialog's root element\n`handleDocumentKeydown(event: Event)` | Handles `keydown` events on or within the document while the dialog is open\n\n#### Event Handlers\n\nWhen wrapping the Dialog foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`click` | `.mdc-dialog` (root) | `handleInteraction` | During initialization | During destruction\n`keydown` | `document` | `handleDocumentKeydown` | On `MDCDialog:opening` | On `MDCDialog:closing`\n`resize` | `window` | `layout` | On `MDCDialog:opening` | On `MDCDialog:closing`\n`orientationchange` | `window` | `layout` | On `MDCDialog:opening` | On `MDCDialog:closing`\n\n### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`createFocusTrapInstance(surfaceEl: Element, focusTrapFactory: function(): !FocusTrap, initialFocusEl: ?Element) => !FocusTrap` | Creates a properly configured [focus-trap][] instance.\n`isScrollable(el: Element \\| null) => boolean` | Determines if the given element is scrollable.\n`areTopsMisaligned(els: Element[]) => boolean` | Determines if two or more of the given elements have different `offsetTop` values.\n\n### Handling Focus Trapping\n\nIn order for dialogs to be fully accessible, they must conform to the guidelines outlined in:\n\n* https://www.w3.org/TR/wai-aria-practices/#dialog_modal\n* https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html\n* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role\n\nThe main implication of these guidelines is that the only focusable elements are those contained within a dialog\nsurface.\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* `trapFocus()` is called when the dialog is open and should set up focus trapping adhering\n to the ARIA practices in the link above.\n* `releaseFocus()` is called when the dialog is closed and should tear down any focus\n trapping set up when the dialog was open.\n\nThe `MDCDialog` component uses the [focus-trap][] package to handle this.\n**You can use `util.createFocusTrapInstance()` (see below) to easily create\na focus trapping solution for your component code.**\n\n[focus-trap]: https://github.com/davidtheclark/focus-trap\n\n> NOTE: iOS platform doesn't seem to register currently focused element via `document.activeElement` which causes releasing\n> focus to last focused element fail.\n\n#### `createFocusTrapInstance()`\n\n```js\nconst {activate, deactivate} =\n util.createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl);\n```\n\nGiven a dialog surface element an optional `focusTrap` factory function, and an optional initial element to focus,\nsuch that:\n\n* The focus is trapped within the `surfaceEl`\n* The `initialFocusEl` receives focus when the focus trap is activated\n - If omitted, defaults to the first focusable element in `surfaceEl`\n* Closing the dialog in any way (including pressing Escape or clicking outside the dialog) deactivates focus trapping\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 `trapFocus` and `releaseFocus` adapter methods by calling\n`instance.activate()` and `instance.deactivate()` respectively within those methods.\n\nThe `focusTrapFactory` can be used to override the `focus-trap` function used to create the focus trap. Its API is the\nsame as focus-trap's [createFocusTrap](https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions)\n(which is what it defaults to). You can pass in a custom function for mocking out the actual function within tests,\nor to modify the arguments passed to the function before it's called.\n","license":"MIT","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.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":"6.8.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":"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"}],"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","focus-trap":"^4.0.2","@material/dom":"^1.0.0-0","@material/rtl":"^0.42.0","@material/base":"^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"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/dialog_1.0.0-0_1551311972521_0.5154687343990201","host":"s3://npm-registry-packages"},"_id":"@material/dialog@1.0.0-0","version":"1.0.0-0"}