@outbook/webcomponents-modal-dialog

This package provides a web component for displaying modal dialogs with configurable content, titles, and scroll behavior.

Installation

npm install @outbook/webcomponents-modal-dialog

Usage

As a Lit Element

import {html} from 'lit';
import {ModalDialog} from '@outbook/webcomponents-modal-dialog';

function openExampleModal() {
  ModalDialog({
    title: 'Example Modal',
    view: ({closeDialog}) => html`
      <p>This is the content of the modal dialog.</p>
      <button @click="${closeDialog}">Close</button>
    `
  });
}

function render() {
  return html`
    <button @click="${openExampleModal}">Open Modal</button>
  `;
}

Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined. Note that direct HTML usage for outbook-modal-dialog is primarily for rendering by the ModalDialog wrapper function.

import '@outbook/webcomponents-modal-dialog';

<!-- The outbook-modal-dialog element is typically created and managed by the ModalDialog wrapper -->
<!-- You would usually interact with the ModalDialog function in JavaScript to display modals. -->

Component: outbook-modal-dialog

This is the underlying web component. It is primarily designed to be used via the ModalDialog JavaScript function, which handles its lifecycle and content injection.

Properties (via ModalDialog function)

The ModalDialog function accepts an object with the following properties:

| Property | Type | Default | Description | |------------------------------|-------------|-------------|---------------------------------------------------------------------------------------------------------| | title | String | '' | The title displayed in the modal dialog's header. | | view | Function | null | A function that returns the content to be displayed in the modal body. Receives closeDialog as an argument. | | tabs | Array | [] | An array of tab configurations ({ label, content }) to display tabbed content. Overrides view if present. | | hasScroll | Boolean | true | If true, the content area will be scrollable. Ignored if tabs are used. | | extraClasses | String | undefined | Additional CSS classes to apply to the dialog's host element. |

Slots

The content of the modal is dynamically rendered based on the view or tabs property provided to the ModalDialog function. The outbook-modal-dialog component itself uses this injected content.

Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

Custom Properties

Can be used with css light-dark function.

| Custom Property | Description | |------------------------------------------------------|-----------------------------------------------| | --outbook-modal-dialog--max-width | The maximum width of the modal dialog. | | --outbook-modal-dialog--height | The height of the modal dialog. | | --outbook-modal-dialog--button-close-text-display | Controls the display of the close button text. | | --outbook-modal-dialog--main-text-color | The main text color within the modal. | | --outbook-modal-dialog--main-background-color | The main background color of the modal. | | --outbook-modal-dialog--header-background-color | The background color of the modal header. |

License

This component is licensed under the Apache-2.0 License.