@progress/kendo-angular-dialog 19.1.2-develop.2 → 19.1.2-develop.4

package/dialog/models/dialog-settings.d.ts

@@ -9,106 +9,95 @@ import { DialogRef } from "./dialog-ref";
 import { DialogResult } from "./dialog-result";
 import { DialogThemeColor } from "./theme-color";
 /**
- * The settings that can be used when the Dialog is opened through `DialogService`.
- * ([see example]({% slug api_dialog_dialogservice %}#toc-open)).
+ * Represents the settings for opening a Dialog through the `DialogService`.
+ * ([See example.]({% slug api_dialog_dialogservice %}#toc-open))
+ *
  */
 export declare class DialogSettings {
     /**
-     * Defines a predicate that verifies if the pressed dialog action should be prevented. Returning true from the predicate prevents the dialog from closing.
-     * If the **Close** button of the title bar is clicked, `DialogResult` is a `DialogCloseResult` instance.
-     * If the Dialog is closed through the action buttons, `DialogResult` contains the object that was passed when the Dialog was opened. ([see example](slug:service_dialog#toc-dialog-close-prevention))
-     * @param {DialogResult} ev
-     * @param {DialogRef} [dialogRef] - provided only when the dialog is created using a component.
-     * @returns
+     * Use the `preventAction` callback to check if the pressed Dialog action should be prevented. If `true`, the Dialog does not close.
+     * If the **Close** button in the title bar is clicked, `DialogResult` is a `DialogCloseResult` instance.
+     * If the action buttons are used to close the Dialog, `DialogResult` contains the object passed when opening the Dialog. ([See example.](slug:service_dialog#toc-dialog-close-prevention))
+     * @param {DialogResult} ev The Dialog result.
+     * @param {DialogRef} [dialogRef] The Dialog reference, provided only when you create the Dialog using a component.
+     * @returns Returns `true` to prevent closing the Dialog.
      */
     preventAction?: (ev: DialogResult, dialogRef?: DialogRef) => boolean;
     /**
-     * Sets the title of the Dialog. If `title` is omitted,
-     * the Dialog will not render a **Close** button.
+     * Sets the Dialog `title`. If you omit `title`, the Dialog does not render a **Close** button.
      */
     title?: string;
     /**
-     * Sets the CSS classes that will be rendered on the Dialog wrapper element.
-     * Supports the union type of values that NgClass accepts [ngClass](link:site.data.urls.angular['ngclassapi']).
+     * Sets the CSS classes for the Dialog wrapper element. Accepts any value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     cssClass?: any;
     /**
-     * Configures the Dialog opening animation ([see example]({% slug animations_dialog %})).
-     * By default the animation type is set to `translate` and its duration is `300ms`.
+     * Configures the Dialog opening `animation` ([see example]({% slug animations_dialog %})).
+     * @default { type: 'translate', duration: 300 }
      */
     animation?: boolean | DialogAnimation;
     /**
-     * Sets the HTML attributes of the Dialog wrapper element.
-     * The property accepts string key-value based pairs.
+     * Sets the HTML attributes for the Dialog wrapper element. Accepts string key-value pairs.
      */
     htmlAttributes?: {
         [key: string]: string;
     };
     /**
-     * Defines the content of the Dialog.
-     * ([see example](slug:service_dialog#toc-rendering-the-content-area)).
+     * Defines the Dialog `content`. ([See example.](slug:service_dialog#toc-rendering-the-content-area))
      */
     content?: string | TemplateRef<any> | Function;
     /**
-     * Specifies the width of the Dialog.
-     * A numeric value sets the width in pixels.
-     * A string value sets the width in arbitrary units&mdash;for example, `50%`.
+     * Sets the width of the Dialog.
+     * Use a number for pixels or a string for other units, for example, `50%`.
      */
     width?: number | string;
     /**
-     * Specifies the minimum width of the Dialog.
-     * A numeric value sets the minimum width in pixels.
-     * A string value sets the minimum width in arbitrary units&mdash;for example, `50%`.
+     * Sets the minimum width of the Dialog.
+     * Use a number for pixels or a string for other units, for example, `50%`.
      */
     minWidth?: number | string;
     /**
-     * Specifies the maximum width of the Dialog.
-     * A numeric value sets the maximum width in pixels.
-     * A string value sets the maximum width in arbitrary units&mdash;for example, `50%`.
+     * Sets the maximum width of the Dialog.
+     * Use a number for pixels or a string for other units, for example, `50%`.
      */
     maxWidth?: number | string;
     /**
-     * Specifies the height of the Dialog.
-     * A numeric value sets the height in pixels.
-     * A string value sets the height in arbitrary units&mdash;for example, `50%`.
+     * Sets the height of the Dialog.
+     * Use a number for pixels or a string for other units, for example, `50%`.
      */
     height?: number | string;
     /**
-     * Specifies the minimum height of the Dialog.
-     * A numeric value sets the minimum height in pixels.
-     * A string value sets the minimum height in arbitrary units&mdash;for example, `50%`.
+     * Sets the minimum height of the Dialog.
+     * Use a number for pixels or a string for other units, for example, `50%`.
      */
     minHeight?: number | string;
     /**
-     * Specifies the maximum height of the Dialog.
-     * A numeric value sets the maximum height in pixels.
-     * A string value sets the maximum height in arbitrary units&mdash;for example, `50%`.
+     * Sets the maximum height of the Dialog.
+     * Use a number for pixels or a string for other units, for example, `50%`.
      */
     maxHeight?: number | string;
     /**
-     * Defines the container in which the Dialog will be inserted.
-     * Specifying this option changes the place in the page hierarchy where the Dialog will be inserted.
-     * The styling of the component will remain the same.
+     * Defines the container where the Dialog is inserted. This changes the place in the page hierarchy where the Dialog appears. The component styling stays the same.
      */
     appendTo?: ViewContainerRef;
     /**
-     * Specifies the title of the close button.
+     * Sets the `closeTitle` for the **Close** button.
      */
     closeTitle?: string;
     /**
-     * Sets the action buttons of the Dialog.
+     * Sets the Dialog `actions` buttons.
      */
     actions?: any[] | TemplateRef<any>;
     /**
-     * Specifies the layout of the action buttons in the Dialog.
+     * Sets the layout of the Dialog action buttons with `actionsLayout`.
      */
     actionsLayout?: ActionsLayout;
     /**
-     * Sets the focused element query selector.
+     * Sets the query selector for the element to focus automatically with `autoFocusedElement`.
      */
     autoFocusedElement?: string;
     /**
-     * Specifies the theme color of the Dialog.
+     * Sets the theme color of the Dialog.
      */
     themeColor?: DialogThemeColor;
 }

package/dialog/models/theme-color.d.ts

@@ -3,11 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the possible theme colors of the Dialog.
+ * Represents the possible theme colors for the Dialog.
+ *
+ * Use the `DialogThemeColor` type to set the color theme for Dialog components. The possible values are:
+ * - `primary` —Applies coloring based on the `primary` theme color.
+ * - `light`— Applies coloring based on the `light` theme color.
+ * - `dark`— Applies coloring based on the `dark` theme color.
  *
- * The possible values are:
- * * `primary` —Applies coloring based on the `primary` theme color.
- * * `light`— Applies coloring based on the `light` theme color.
- * * `dark`— Applies coloring based on the `dark` theme color.
  */
 export type DialogThemeColor = 'primary' | 'light' | 'dark';

package/dialog.module.d.ts

@@ -9,25 +9,23 @@ import * as i3 from "./dialog/dialog-container.directive";
 import * as i4 from "./dialog/dialog-actions.component";
 import * as i5 from "./localization/custom-messages.component";
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Dialog component that includes all Dialog components and directives.
- * Imports `DialogModule` into the [root module](link:site.data.urls.angular['ngmodules']#angular-modularity)
- * of your application or into any other sub-module that will use the Dialog component.
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the Dialog component.
+ *
+ * Use the `DialogModule` to include all Dialog components and directives in your application.
  *
  * @example
- * ```ts-no-run
+ * ```typescript
  * import { NgModule } from '@angular/core';
  * import { BrowserModule } from '@angular/platform-browser';
  * import { DialogModule } from '@progress/kendo-angular-dialog';
  * import { AppComponent } from './app.component';
  *
- * _@NgModule({
+ * @NgModule({
  *     bootstrap:    [AppComponent],
  *     declarations: [AppComponent],
  *     imports:      [BrowserModule, DialogModule]
  * })
- * export class AppModule {
- * }
+ * export class AppModule {}
  * ```
  */
 export declare class DialogModule {

package/dialogs.module.d.ts

@@ -16,28 +16,24 @@ import * as i10 from "./window/actions/window-restore-action.directive";
 import * as i11 from "./window/window-titlebar.component";
 import * as i12 from "./window/window-container.directive";
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Dialogs components.
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the Dialogs components.
  *
- * @example
+ * Use the `DialogsModule` to include all Dialog and Window components and services in your application.
  *
- * ```ts
+ * @example
+ * ```typescript
  * import { DialogsModule } from '@progress/kendo-angular-dialog';
- *
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { NgModule } from '@angular/core';
- *
  * import { AppComponent } from './app.component';
  *
- * _@NgModule({
+ * @NgModule({
  *     declarations: [AppComponent],
  *     imports:      [BrowserModule, DialogsModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
  *
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export declare class DialogsModule {

package/directives.d.ts

@@ -15,14 +15,62 @@ import { WindowContainerDirective } from "./window/window-container.directive";
 import { WindowTitleBarComponent } from "./window/window-titlebar.component";
 import { WindowComponent } from "./window/window.component";
 /**
-* Utility array that contains all `Dialog` related components and directives.
-*/
+ * Represents the utility array that that contains all `Dialog`-related components and directives.
+ *
+ * Use `KENDO_DIALOG` to import all Dialog components and directives at once.
+ *
+ * @example
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { KENDO_DIALOG } from '@progress/kendo-angular-dialog';
+ *
+ * @Component({
+ *   selector: 'my-dialog-app',
+ *   standalone: true,
+ *   imports: [KENDO_DIALOG],
+ *   template: `...`
+ * })
+ * export class DialogAppComponent {}
+ * ```
+ */
 export declare const KENDO_DIALOG: readonly [typeof DialogComponent, typeof DialogTitleBarComponent, typeof DialogContainerDirective, typeof DialogActionsComponent, typeof CustomMessagesComponent];
 /**
-* Utility array that contains all `Window` related components and directives.
-*/
+ * Represents the utility array that contains all `Window`-related components and directives.
+ *
+ * Use `KENDO_WINDOW` to import all Window components and directives at once.
+ *
+ * @example
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { KENDO_WINDOW } from '@progress/kendo-angular-dialog';
+ *
+ * @Component({
+ *   selector: 'my-window-app',
+ *   standalone: true,
+ *   imports: [KENDO_WINDOW],
+ *   template: `...`
+ * })
+ * export class WindowAppComponent {}
+ * ```
+ */
 export declare const KENDO_WINDOW: readonly [typeof WindowComponent, typeof WindowCloseActionDirective, typeof WindowMinimizeActionDirective, typeof WindowMaximizeActionDirective, typeof WindowRestoreActionDirective, typeof WindowTitleBarComponent, typeof WindowContainerDirective, typeof DialogActionsComponent, typeof CustomMessagesComponent];
 /**
-* Utility array that contains all `@progress/kendo-angular-dialog` related components and directives.
-*/
+ * Represents the utility array that contains all `@progress/kendo-angular-dialog`-related components and directives.
+ *
+ * Use `KENDO_DIALOGS` to import all Dialog and Window components and directives at once.
+ *
+ * @example
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { KENDO_DIALOGS } from '@progress/kendo-angular-dialog';
+ *
+ * @Component({
+ *   selector: 'my-app',
+ *   standalone: true,
+ *   imports: [KENDO_DIALOGS],
+ *   template: `...`
+ * })
+ * export class AppComponent {}
+ * ```
+ */
 export declare const KENDO_DIALOGS: readonly [typeof DialogComponent, typeof DialogTitleBarComponent, typeof DialogContainerDirective, typeof DialogActionsComponent, typeof CustomMessagesComponent, typeof WindowComponent, typeof WindowCloseActionDirective, typeof WindowMinimizeActionDirective, typeof WindowMaximizeActionDirective, typeof WindowRestoreActionDirective, typeof WindowTitleBarComponent, typeof WindowContainerDirective, typeof DialogActionsComponent, typeof CustomMessagesComponent];

package/esm2022/common/preventable-event.mjs

@@ -2,6 +2,10 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/**
+ * Represents a preventable event in Dialog and Window components.
+ *
+ */
 export class PreventableEvent {
     prevented = false;
     /**

package/esm2022/dialog/dialog-actions.component.mjs

@@ -8,13 +8,14 @@ import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
 /**
- * Specifies the action buttons of the Dialog
- * ([see example]({% slug actionbuttons_dialog %})).
+ * Represents the action buttons of the Dialog.
+ * ([See example.]({% slug actionbuttons_dialog %}))
+ *
  */
 export class DialogActionsComponent {
     el;
     /**
-     * Allows the declarative specification of the actions.
+     * Allows the declarative specification of the Dialog `actions`.
      */
     set actions(value) {
         if (value instanceof TemplateRef) {
@@ -36,7 +37,7 @@ export class DialogActionsComponent {
      */
     actionsTemplate;
     /**
-     * Specifies the possible layout of the action buttons.
+     * Sets the possible layout of the action buttons.
      * @default 'stretched'
      */
     layout = 'stretched';

package/esm2022/dialog/dialog-container.directive.mjs

@@ -7,12 +7,11 @@ import { DialogContainerService } from './dialog-container.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./dialog-container.service";
 /**
- * Provides an insertion point for the Dialogs which are created through the
- * Dialog service ([see example]({% slug api_dialog_dialogservice %}#toc-open)).
- * Created Dialogs will be mounted after that element.
+ * Represents an insertion point for Dialogs created through the Dialog service.
+ * The created Dialogs mount after this element. ([See example.]({% slug api_dialog_dialogservice %}#toc-open))
  *
  * @example
- * ```html-no-run
+ * ```html
  * <div kendoDialogContainer></div>
  * ```
  */

package/esm2022/dialog/dialog-content-base.mjs

@@ -10,8 +10,9 @@ import { filter } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "./models/dialog-ref";
 /**
- * The base class  which will be extended by a component that is provided as content through `content`
- * ([see example](slug:service_dialog#toc-single-component-rendering)).
+ * Serves as the base class for a component provided as Dialog content through the `content` property.
+ * ([See example.](slug:service_dialog#toc-single-component-rendering)).
+ *
  */
 export class DialogContentBase {
     dialog;

package/esm2022/dialog/dialog-titlebar.component.mjs

@@ -15,14 +15,15 @@ import * as i1 from "@progress/kendo-angular-l10n";
 /**
  * Represents the [Kendo UI DialogTitleBar component for Angular]({% slug api_dialog_dialogtitlebarcomponent %}).
  *
- * It is used as part of the Dialog content when the component is created dynamically by using an [Angular service]({% slug service_dialog %}).
+ * Use this component as part of the Dialog content when you create the Dialog dynamically with an [Angular service]({% slug service_dialog %}).
+ *
  */
 export class DialogTitleBarComponent {
     zone;
     hostElement;
     localizationService;
     /**
-     * Fires when the close button of the title-bar is clicked.
+     * Fires when the close button in the title bar is clicked.
      */
     close = new EventEmitter();
     /**

package/esm2022/dialog/dialog.component.mjs

@@ -25,6 +25,23 @@ import * as i2 from "@angular/animations";
 const DEFAULT_ANIMATION_CONFIG = { duration: 300, type: 'translate' };
 /**
  * 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 {}
+ * ```
  */
 export class DialogComponent {
     wrapper;
@@ -33,75 +50,78 @@ export class DialogComponent {
     ngZone;
     builder;
     /**
-     * Specifies the action buttons that will be rendered.
+     * Specifies the action buttons to render in the Dialog.
+     *
+     * @type {DialogAction[]}
      */
     actions;
     /**
-     * Specifies the layout of the action buttons in the Dialog.
-     * This option is only applicable if the action buttons are specified through the `actions` options.
+     * 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 = 'stretched';
     /**
-     * Specifies the query selector used to set the initial focus ([see examples]({% slug initial_focus_dialog %})).
+     * Sets the query selector for the element to receive initial focus. ([See examples.]({% slug initial_focus_dialog %}))
+     *
+     * @type {string}
      */
     autoFocusedElement;
     /**
-     * Specifies the text that is rendered in the title bar.
+     * Sets the text in the Dialog title bar.
+     *
+     * @type {string}
      */
     title;
     /**
-     * Specifies the width of the Dialog.
-     * A numeric value sets the width in pixels.
-     * A string value sets the width in arbitrary units&mdash;for example, `50%`.
+     * Sets the width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
+     *
+     * @type {number | string}
      */
     width;
     /**
-     * Specifies the minimum width of the Dialog.
-     * A numeric value sets the minimum width in pixels.
-     * A string value sets the minimum width in arbitrary units&mdash;for example, `50%`.
+     * Sets the minimum width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
+     *
+     * @type {number | string}
      */
     minWidth;
     /**
-     * Specifies the maximum width of the Dialog.
-     * A numeric value sets the maximum width in pixels.
-     * A string value sets the maximum width in arbitrary units&mdash;for example, `50%`.
+     * Sets the maximum width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
+     *
+     * @type {number | string}
      */
     maxWidth;
     /**
-     * Specifies the height of the Dialog.
-     * A numeric value sets the height in pixels.
-     * A string value sets the height in arbitrary units&mdash;for example, `50%`.
+     * Sets the height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
+     *
+     * @type {number | string}
      */
     height;
     /**
-     * Specifies the minimum height of the Dialog.
-     * A numeric value sets the minimum height in pixels.
-     * A string value sets the minimum height in arbitrary units&mdash;for example, `50%`.
+     * Sets the minimum height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
+     *
+     * @type {number | string}
      */
     minHeight;
     /**
-     * Specifies the maximum height of the Dialog.
-     * A numeric value sets the maximum height in pixels.
-     * A string value sets the maximum height in arbitrary units&mdash;for example, `50%`.
+     * Sets the maximum height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
+     *
+     * @type {number | string}
      */
     maxHeight;
     /**
      * Configures the Dialog opening animation ([see example]({% slug animations_dialog %})).
-     * By default the animation type is set to `translate` and its duration is `300ms`.
+     * The default animation type is `translate` and the duration is `300ms`.
      *
+     * @type {boolean | DialogAnimation}
      * @default true
      */
     animation = true;
     /**
-     * The Dialog allows you to specify predefined theme colors.
-     * The theme color will be applied as a background and border color to the titlebar while also amending the text color accordingly.
+     * Sets a predefined theme color for the Dialog. The color applies to the title bar background and border, and updates the text color.
      *
-     * The possible values are:
-     * * `primary`
-     * * `dark`
-     * * `light`
+     * @type {DialogThemeColor}
      */
     set themeColor(themeColor) {
         this.handleThemeColorClass(this.themeColor, themeColor);
@@ -160,12 +180,15 @@ export class DialogComponent {
      */
     showLicenseWatermark = false;
     /**
-     * Fires when the user clicks an action button of the Dialog.
-     * The event is fired only when the action buttons are specified through the `actions` options.
+     * 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 = new EventEmitter();
     /**
-     * Fires when the user clicks the **Close** button of the Dialog or the **ESC** key.
+     * Emits when the user clicks the **Close** button or presses the `ESC` key.
+     *
+     * @type {EventEmitter<any>}
      */
     close = new EventEmitter();
     get dir() {

package/esm2022/dialog/dialog.service.mjs

@@ -31,8 +31,7 @@ class DialogInjector {
     }
 }
 /**
- * A service for opening Dialog windows dynamically
- * ([see example]({% slug service_dialog %})).
+ * Provides a service for opening Dialog windows dynamically ([see example]({% slug service_dialog %})).
  */
 export class DialogService {
     resolver;
@@ -48,45 +47,25 @@ export class DialogService {
     /**
      * Opens a Dialog window. Requires an element in the application that uses the
      * [`kendoDialogContainer`]({% slug api_dialog_dialogcontainerdirective %}) directive.
-     * Created Dialogs will be mounted in the DOM directly after that element.
+     * The created Dialog mounts in the DOM directly after that element.
      *
      * @param {DialogAction} options - The options that define the Dialog.
-     * @returns {DialogRef} - A reference to the Dialog object and the convenience properties.
+     * @returns {DialogRef} - A reference to the Dialog object and its convenience properties.
      *
      * @example
-     *
-     * ```ts-no-run
-     * _@Component({
-     *   selector: 'my-app',
-     *   template: `
-     *     <button kendoButton (click)="open()">Harmless button</button>
-     *     <div kendoDialogContainer></div>
-     *   `
-     * })
-     * export class AppComponent {
-     *     constructor( private dialogService: DialogService ) {}
-     *
-     *     public open() {
-     *         var dialog = this.dialogService.open({
-     *           title: "Please confirm",
-     *           content: "Are you sure?",
-     *           actions: [
-     *             { text: "No" },
-     *             { text: "Yes", themeColor: 'primary' }
-     *           ]
-     *         });
-     *
-     *         dialog.result.subscribe((result) => {
-     *           if (result instanceof DialogCloseResult) {
-     *             console.log("close");
-     *           } else {
-     *             console.log("action", result);
-     *           }
-     *         });
-     *     }
-     * }
+     * ```typescript
+     * const dialog = this.dialogService.open({
+     *   title: 'Confirm',
+     *   content: 'Are you sure?',
+     *   actions: [
+     *     { text: 'No' },
+     *     { text: 'Yes', themeColor: 'primary' }
+     *   ]
+     * });
+     * dialog.result.subscribe(result => {
+     *   // handle result
+     * });
      * ```
-     *
      */
     open(options) {
         const factory = this.resolver.resolveComponentFactory(DialogComponent);