@vonage/vwc-dialog NPM | npm.io

2.45.0 • Published 3 months ago

Install

Weekly downloads

-

License

ISC

Repository

Last release

3 months ago

vwc-dialog

This component is an extension of

API

Slots

Name	Description
`icon`	A slot meant for an icon. Appears above the heading.
`primaryAction`	A focusable and clickable target. Typically a button such as `<mwc-button>`. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.
`secondaryAction`	A focusable and clickable target. Typically a button such as `<mwc-button>`. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.
default	Content to display in the dialog's content area.

Properties/Attributes

Name	Type	Description
`open`	`boolean`	Whether the dialog should open.
`hideActions`	`boolean`	Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.
`stacked`	`boolean`	Whether to stack the action buttons.
`heading`	`string`	Heading text of the dialog.
`scrimClickAction`	`string`	Default: 'close' – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked.
`escapeKeyAction`	`string`	Default: 'close' – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed.
`defaultAction`	`string`	Default: 'close' – Action to be emitted with the `closing` and `closed` events when `<mwc-dialog>.open` is toggled.
`actionAttribute`	`string`	Default: 'dialogAction' – Attribute to read in light dom of dialog for closing action value.
`initialFocusAttribute`	`string`	Default: 'dialogInitialFocus' – Attribute to search for in light dom for initial focus on dialog open.
`closeButton`	`boolean`	Default: 'false' - show/hide the dismiss button
`topPosition`	`string`	Default: 'unset' - override the dialog centering to the screen and allow setting a unique top. Can get: `small`, `medium`, `large`, `xlarge`

Methods

Name	Description
`forceLayout() => void`	Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.
`focus() => void`	Focuses on the initial focus element if defined.
`blur() => void`	Blurs the active element.
`show() => void`	Opens the dialog.
`close() => void`	Closes the dialog.

Listeners

Event Name	Target	Description
`click`	root element	Detects if clicked target is a dialog action.
`resize`	`window`	Performs dialog layout (passive).
`orientationchange`	`window`	Performs dialog layout (passive).
`keydown`	`mwc-dialog`	Listens for the enter key to click the default button (passive).
`keydown`	`document`	Listens for the escape key to close the dialog (see `escapeKeyAction`).

Events

Event Name	Target	Detail	Description
`opening`	`mwc-dialog`	`{}`	Fired when the dialog is beginning to open.
`opened`	`mwc-dialog`	`{}`	Fired once the dialog is finished opening (after animation).
`closing`	`mwc-dialog`	`{action: string}`	Fired when the dialog is is beginning to close. Detail is the action that closed the dialog.
`closed`	`mwc-dialog`	`{action: string}`	Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog.

@material/mwc-dialog @vonage/vvd-core @vonage/vvd-style-coupling @vonage/vvd-typography lit-element tslib

@infinitebrahmanuniverse/nolb-_von @everything-registry/sub-chunk-991 @zalastax/nolb-_von @vonage/vivid-react

3 months ago

8 months ago

10 months ago

9 months ago

10 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago