@zebra-fed/zeta-web

    Class ZetaDialog

    A reusable dialog or modal window with a customizable interface and functionality.

    A dialog should popup either in response to user action or to get the users attention.

    The dialog can be shown either as a modal or non-modal dialog. Modal is recommended for most uses. To show the dialog, call showModal() or show() method:

      (document.querySelector("#dialog1") as ZetaDialog)?.showModal();

    When shown as a modal, clicking the background barrier will close the modal by default; this can be changed with the closeOnBarrierClicked property.

    • Body of dialog; typically text.

    confirm - Button used in footer. Must be of type zeta-button.

    cancel - Button used in footer. Must be of type zeta-button.

    other - Button used in footer. Must be of type zeta-button.

    body - Styles the dialog body

    footer - Styles the dialog footer

    header - Styles the dialog header

    --dialog-width - Width of the dialog. Defaults to 480px.

    --dialog-max-height - Max height of the dialog. Defaults to 80vh.

    --dialog-title-font-size - Font size of the dialog title. Defaults to 1.25rem.

    --dialog-title-line-height - Line height of the dialog title. Defaults to 1.5rem.

    https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=229-14&node-type=canvas&m=dev

    https://design.zebra.com/web/storybook/?path=/docs/components-dialog--docs

    Hierarchy

    • ContourableInterface<this> & LitElement<this> & PopupInterface<this>
      • ZetaDialog
    Index

    Other

    constructor cancelBtn centered closeOnBarrierClicked confirmBtn confirmButtonFlavor flavor hide initialOpen onBarrierClicked open otherBtn returnValue rounded show showModal shadowRootOptions styles title

    Other

    cancelBtn: NodeList

    Action button 2 (Cancel).

    centered: boolean = false

    Whether header text should be centered. Feature is deprecated.

    closeOnBarrierClicked: boolean
    confirmBtn: NodeList

    Action button 1 (Confirm).

    confirmButtonFlavor: "primary" | "positive" | "negative" = "primary"

    Colour of the confirm button.

    Possible values are:

    • primary: Blue background.
    • positive: Green background.
    • negative: Red background.
    'primary'
    flavor: DialogFlavor = "default"

    What type of dialog box to show. This will change the icon and icon colour shown in the header.

    Possible values are:

    • default: Shows black block icon.
    • info: Shows purple info icon.
    • success: Shows green verified icon.
    • warning: Shows yellow warning icon.
    • error: Shows red error icon.
    'default'
    hide: (returnValue?: string) => Promise<void>
    initialOpen: boolean = false

    Whether the modal is initially open.

    onBarrierClicked: (e: Event) => void
    open: boolean
    otherBtn: NodeList

    Action button 3 (Learn more/Other).

    returnValue: string
    rounded: boolean
    show: () => Promise<void>
    showModal: () => Promise<void>
    shadowRootOptions: { delegatesFocus: boolean } = ...
    styles: CSSResultGroup[] = ...

    rendering

    • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

      Returns TemplateResult<1>

    Settings

    Member Visibility

    On This Page

    Other
    rendering
    MMNEPVFCICPMFPCPTTAAATR