@progress/kendo-angular-dialog/dialog/dialog.component.d.ts

Dialog Package for Angular

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterContentInit, AfterViewInit, EventEmitter, OnInit, OnDestroy, ElementRef, TemplateRef, Renderer2, ChangeDetectorRef, NgZone, QueryList } from '@angular/core';
import { AnimationBuilder } from '@angular/animations';
import { DialogActionsComponent } from './dialog-actions.component';
import { DialogTitleBarComponent } from './dialog-titlebar.component';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { ActionsLayout } from '../common/actions-layout';
import { DialogAction } from './models/dialog-action';
import { DialogAnimation } from './models/dialog-animation';
import { DialogThemeColor } from './models';
import * as i0 from "@angular/core";
/**
 * Represents the [Kendo UI Dialog component for Angular]({% slug overview_dialog_dialogs %}).
 *
 * Use this component to display modal dialog windows in your application.
 *
 * @example
 * ```ts
 * import { Component } from '@angular/core';
 *
 * @Component({
 *   selector: 'my-app',
 *   template: `
 *     <kendo-dialog title="Example Dialog">
 *       <p>Dialog content goes here.</p>
 *     </kendo-dialog>
 *   `
 * })
 * export class AppComponent {}
 * ```
 *
 * @remarks
 * Supported children components are: {@link DialogTitleBarComponent}, {@link DialogActionsComponent}, {@link CustomMessagesComponent}.
 */
export declare class DialogComponent implements AfterContentInit, AfterViewInit, OnInit, OnDestroy {
    private wrapper;
    private renderer;
    private cdr;
    private ngZone;
    private builder;
    /**
     * Specifies the action buttons to render in the Dialog.
     *
     * @type {DialogAction[]}
     */
    actions: DialogAction[];
    /**
     * Sets the layout of the action buttons in the Dialog. Applies only if you specify action buttons through the `actions` option.
     *
     * @type {ActionsLayout}
     * @default 'stretched'
     */
    actionsLayout: ActionsLayout;
    /**
     * Sets the query selector for the element to receive initial focus. ([See examples.]({% slug initial_focus_dialog %}))
     *
     * @type {string}
     */
    autoFocusedElement: string;
    /**
     * Sets the text in the Dialog title bar.
     *
     * @type {string}
     */
    title: string;
    /**
     * Sets the width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
     *
     * @type {number | string}
     */
    width: number | string;
    /**
     * Sets the minimum width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
     *
     * @type {number | string}
     */
    minWidth: number | string;
    /**
     * Sets the maximum width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
     *
     * @type {number | string}
     */
    maxWidth: number | string;
    /**
     * Sets the height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
     *
     * @type {number | string}
     */
    height: number | string;
    /**
     * Sets the minimum height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
     *
     * @type {number | string}
     */
    minHeight: number | string;
    /**
     * Sets the maximum height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
     *
     * @type {number | string}
     */
    maxHeight: number | string;
    /**
     * Configures the Dialog opening animation ([see example]({% slug animations_dialog %})).
     * The default animation type is `translate` and the duration is `300ms`.
     *
     * @type {boolean | DialogAnimation}
     * @default true
     */
    animation: boolean | DialogAnimation;
    /**
     * Sets a predefined theme color for the Dialog. The color applies to the title bar background and border, and updates the text color.
     *
     * @type {DialogThemeColor}
     */
    set themeColor(themeColor: DialogThemeColor);
    get themeColor(): DialogThemeColor;
    /**
     * @hidden
     */
    set htmlAttributes(attributes: {
        [key: string]: string;
    });
    get htmlAttributes(): {
        [key: string]: string;
    };
    /**
     * @hidden
     */
    set cssClass(classes: any);
    get cssClass(): any;
    /**
     * @hidden
     */
    contentTemplate: TemplateRef<any>;
    /**
     * @hidden
     */
    titleId: string;
    /**
     * @hidden
     */
    contentId: string;
    /**
     * @hidden
     */
    closeTitle: string;
    /**
     * @hidden
     */
    showLicenseWatermark: boolean;
    /**
     * Emits when the user clicks an action button in the Dialog. Fires only if you specify action buttons through the `actions` option.
     *
     * @type {EventEmitter<DialogAction>}
     */
    action: EventEmitter<DialogAction>;
    /**
     * Emits when the user clicks the **Close** button or presses the `ESC` key.
     *
     * @type {EventEmitter<any>}
     */
    close: EventEmitter<any>;
    get dir(): string;
    tabIndex: number;
    titlebarContent: QueryList<DialogTitleBarComponent>;
    titlebarView: QueryList<DialogTitleBarComponent>;
    actionsView: DialogActionsComponent;
    dialog: ElementRef;
    private _htmlAttributes;
    private _cssClass;
    private _themeColor;
    private direction;
    private subscriptions;
    private domSubs;
    constructor(wrapper: ElementRef, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, ngZone: NgZone, builder: AnimationBuilder);
    ngAfterContentInit(): void;
    ngAfterViewInit(): void;
    ngOnInit(): void;
    ngOnDestroy(): void;
    /**
     * Focuses the wrapper of the Dialog component.
     */
    focus(): void;
    private initDomEvents;
    private onKeyDown;
    private setServiceClasses;
    /**
     * @hidden
     */
    private handleInitialFocus;
    /**
     * @hidden
     */
    private findPrimary;
    /**
     * @hidden
     */
    private handleActionButtonFocus;
    /**
     * @hidden
     */
    private keepFocusWithinComponent;
    /**
     * @hidden
     */
    private shouldFocusPrimary;
    /**
     * @hidden
     */
    private getAllFocusableChildren;
    /**
     * @hidden
     */
    private getFirstAndLastFocusable;
    /**
     * @hidden
     */
    private generateTitleId;
    /**
     * @hidden
     */
    private generateContentId;
    get wrapperClass(): boolean;
    get styles(): any;
    private bubble;
    private handleThemeColorClass;
    static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "kendo-dialog", ["kendoDialog"], { "actions": { "alias": "actions"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "autoFocusedElement": { "alias": "autoFocusedElement"; "required": false; }; "title": { "alias": "title"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "height": { "alias": "height"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; }, { "action": "action"; "close": "close"; }, ["titlebarContent"], ["kendo-dialog-titlebar", "*", "kendo-dialog-actions"], true, never>;
}