igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
154 lines (153 loc) • 5.96 kB
TypeScript
import { LitElement, type PropertyValues } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
export interface IgcDialogComponentEventMap {
igcClosing: CustomEvent<void>;
igcClosed: CustomEvent<void>;
}
declare const IgcDialogComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDialogComponentEventMap>> & Constructor<LitElement>;
/**
* A modal dialog component built on the native `<dialog>` element.
*
* The dialog traps focus while open and blocks interaction with the rest
* of the page (modal semantics). It supports animated open/close
* transitions, an optional backdrop overlay, and multiple content areas
* through named slots.
*
* The component integrates with the
* [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):
* an Ignite button or a native `<button>` with `command="--show"` / `"--hide"` / `"--toggle"`
* and `commandfor` pointing to this element will call the corresponding method
* declaratively without any JavaScript.
*
* @element igc-dialog
*
* @fires igcClosing - Emitted just before the dialog closes. Cancelable —
* call `event.preventDefault()` to abort the closing sequence.
* @fires igcClosed - Emitted after the dialog has fully closed and its
* exit animation has completed.
*
* @slot - General-purpose content area. Also the target for any
* `<form method="dialog">` placed inside the dialog.
* @slot title - Content rendered in the dialog header. Falls back to the
* `title` attribute when empty.
* @slot message - A dedicated message/body area rendered above the default
* slot. Hidden when no content is assigned.
* @slot footer - Content rendered in the dialog footer. When empty, a
* default "OK" close button is shown (unless `hide-default-action` is set).
*
* @csspart base - The native `<dialog>` element.
* @csspart title - The `<header>` element wrapping the title slot.
* @csspart content - The `<section>` element wrapping the message and default slots.
* @csspart footer - The `<footer>` element wrapping the footer slot.
* @csspart backdrop - The decorative backdrop overlay element.
* @csspart animating - Applied to the backdrop while an animation is running.
*/
export default class IgcDialogComponent extends IgcDialogComponent_base {
static readonly tagName = "igc-dialog";
static styles: import("lit").CSSResult[];
static register(): void;
private readonly _titleId;
private readonly _slots;
private readonly _dialogRef;
private readonly _player;
/**
* Backdrop animation helper.
*/
private _animating;
private get _dialog();
/**
* When set, pressing the `Escape` key will not close the dialog.
*
* By default the browser closes a modal dialog on `Escape`. Enable this
* option when the dialog guards unsaved work and should require an explicit
* user action to dismiss.
* @attr keep-open-on-escape
* @default false
*/
keepOpenOnEscape: boolean;
/**
* When set, clicking on the backdrop area outside the dialog surface
* will close it (emitting close events).
*
* Has no effect when the dialog is not yet open.
* @attr close-on-outside-click
* @default false
*/
closeOnOutsideClick: boolean;
/**
* When set, the built-in "OK" close button in the footer is not rendered.
*
* Has no effect when content is projected into the `footer` slot, since
* the slot content replaces the default button entirely.
* @attr hide-default-action
* @default false
*/
hideDefaultAction: boolean;
/**
* Whether the dialog is open.
*
* Setting this property programmatically will open or close the dialog
* without animation and without emitting close events.
* Prefer the `show()`, `hide()`, and `toggle()` methods for animated
* transitions.
* @attr open
* @default false
*/
open: boolean;
/**
* The title displayed in the dialog header.
*
* Overridden by any content projected into the `title` slot.
* @attr title
*/
title: string;
/**
* The return value of the dialog.
*
* Automatically set to the `value` of the submitter element when a
* `<form method="dialog">` inside the dialog is submitted. Can also
* be set programmatically before calling `hide()`.
*/
returnValue?: string;
constructor();
protected updated(properties: PropertyValues<this>): void;
protected _handleFormSubmit(event: SubmitEvent): void;
private _handleCancel;
private _handleClose;
private _handleClick;
private _hide;
private _emitClosing;
private _closeWithEvent;
/**
* Opens the dialog with an animated fade-in transition.
*
* Returns `true` when the dialog was successfully opened, or `false` if
* it was already open.
*/
show(): Promise<boolean>;
/**
* Closes the dialog with an animated fade-out transition.
*
* Returns `true` when the dialog was successfully closed, or `false` if
* it was already closed.
*/
hide(): Promise<boolean>;
/**
* Toggles the dialog open or closed depending on its current state.
*
* Equivalent to calling `show()` when closed and `hide()` when open.
* Returns `true` when the transition completed successfully.
*/
toggle(): Promise<boolean>;
protected _renderBackdrop(): import("lit-html").TemplateResult<1>;
protected _renderHeader(): import("lit-html").TemplateResult<1>;
protected _renderContent(): import("lit-html").TemplateResult<1>;
protected _renderFooter(): import("lit-html").TemplateResult<1>;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-dialog': IgcDialogComponent;
}
}
export {};