@progress/kendo-angular-dialog 6.0.2 → 7.0.0-dev.202204191040

package/{dist/es/localization/dialog-localization.service.js → dialog/models/index.d.ts}

@@ -2,8 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { InjectionToken } from '@angular/core';
-/**
- * @hidden
- */
-export var DIALOG_LOCALIZATION_SERVICE = new InjectionToken('Dialog LocalizationService');
+export * from './dialog-action';
+export * from './dialog-close-result';
+export * from './dialog-ref';
+export * from './dialog-result';
+export * from './dialog-settings';

package/{dist/es2015/dialog.module.d.ts → dialog.module.d.ts}

@@ -2,6 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import * as i0 from "@angular/core";
+import * as i1 from "./dialog/dialog.component";
+import * as i2 from "./dialog/dialog-titlebar.component";
+import * as i3 from "./dialog/dialog-container.directive";
+import * as i4 from "./shared.module";
+import * as i5 from "./dialog/dialog-actions.component";
+import * as i6 from "./localization/custom-messages.component";
+import * as i7 from "./localization/localized-messages.directive";
 /**
  * @hidden
  */
@@ -29,4 +37,7 @@ export declare const DIALOG_DIRECTIVES: any[];
  * ```
  */
 export declare class DialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DialogModule, [typeof i1.DialogComponent, typeof i2.DialogTitleBarComponent, typeof i3.DialogContainerDirective], [typeof i4.SharedModule], [typeof i1.DialogComponent, typeof i2.DialogTitleBarComponent, typeof i5.DialogActionsComponent, typeof i6.CustomMessagesComponent, typeof i7.LocalizedMessagesDirective, typeof i3.DialogContainerDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DialogModule>;
 }

package/{dist/es2015/dialogs.module.d.ts → dialogs.module.d.ts}

@@ -2,6 +2,9 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import * as i0 from "@angular/core";
+import * as i1 from "./dialog.module";
+import * as i2 from "./window.module";
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Dialogs components.
@@ -28,4 +31,7 @@
  * ```
  */
 export declare class DialogsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DialogsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DialogsModule, never, never, [typeof i1.DialogModule, typeof i2.WindowModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DialogsModule>;
 }

package/{dist/es2015 → esm2015}/common/actions-layout.js

@@ -2,3 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+export {};

package/{dist/es2015 → esm2015}/common/preventable-event.js

@@ -2,10 +2,10 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
 export class PreventableEvent {
+    /**
+     * @hidden
+     */
     constructor() {
         this.prevented = false;
     }

package/{dist/es2015 → esm2015}/common/util.js

@@ -13,7 +13,6 @@ export const isPresent = (value) => value !== null && value !== undefined;
  */
 export const isTruthy = (value) => !!value;
 const toClassList = (classNames) => String(classNames).trim().split(' ');
-const ɵ0 = toClassList;
 const focusableRegex = /^(?:a|input|select|textarea|button|object)$/i;
 /**
  * @hidden
@@ -112,7 +111,6 @@ const parseObjectClassNames = (value) => {
     });
     return classes;
 };
-const ɵ1 = parseObjectClassNames;
 const parseStringClassNames = (value) => {
     const classes = [];
     const classesArray = splitStringToArray(value);
@@ -121,7 +119,6 @@ const parseStringClassNames = (value) => {
     });
     return classes;
 };
-const ɵ2 = parseStringClassNames;
 const parseArrayClassNames = (value) => {
     const classes = [];
     value.forEach((className) => {
@@ -132,7 +129,6 @@ const parseArrayClassNames = (value) => {
     });
     return classes;
 };
-const ɵ3 = parseArrayClassNames;
 /**
  * @hidden
  */
@@ -207,4 +203,3 @@ export const findPrimaryButton = (buttons) => {
         }
     }
 };
-export { ɵ0, ɵ1, ɵ2, ɵ3 };

package/esm2015/dialog/dialog-actions.component.js

@@ -0,0 +1,115 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, HostBinding, TemplateRef, Input, Output } from '@angular/core';
+import { parseCSSClassNames } from '../common/util';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * Specifies the action buttons of the Dialog
+ * ([see example]({% slug actionbuttons_dialog %})).
+ */
+export class DialogActionsComponent {
+    constructor(el) {
+        this.el = el;
+        /**
+         * Specifies the possible layout of the action buttons.
+         */
+        this.layout = 'stretched';
+        /**
+         * Fires when the user clicks an action button.
+         */
+        this.action = new EventEmitter();
+        this.buttonGroupClassName = true;
+    }
+    /**
+     * Allows the declarative specification of the actions.
+     */
+    set actions(value) {
+        if (value instanceof TemplateRef) {
+            this.actionsTemplate = value;
+        }
+        else if (Array.isArray(value)) {
+            this.actionsArray = value;
+        }
+        else {
+            throw new Error('"actions" must be either TemplateRef or DialogAction[] instance.');
+        }
+    }
+    get className() {
+        return this.layout === 'stretched';
+    }
+    /**
+     * @hidden
+     */
+    onButtonClick(action, _e) {
+        this.action.emit(action);
+    }
+    /**
+     * @hidden
+     */
+    buttonClass(action) {
+        let classes = ['k-button k-button-md k-rounded-md'];
+        const fillMode = action.fillMode ? action.fillMode : 'solid';
+        const themeColor = action.themeColor ? action.themeColor : 'base';
+        const cssClasses = action.cssClass ? parseCSSClassNames(action.cssClass) : [];
+        classes.push(`k-button-${fillMode} k-button-${fillMode}-${themeColor}`);
+        if (cssClasses.length > 0) {
+            classes = classes.concat(cssClasses);
+        }
+        return classes.join(' ');
+    }
+}
+DialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogActionsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: { actions: "actions", layout: "layout" }, outputs: { action: "action" }, host: { properties: { "class.k-dialog-buttongroup": "this.buttonGroupClassName", "class.k-actions": "this.buttonGroupClassName", "class.k-actions-stretched": "this.className" } }, ngImport: i0, template: `
+        <ng-content *ngIf="!actions"></ng-content>
+        <ng-container *ngIf="actionsArray; else actionTemplate">
+            <button
+                type="button"
+                *ngFor="let action of actionsArray"
+                [ngClass]="buttonClass(action)"
+                (click)="onButtonClick(action, $event)"
+                [attr.aria-label]="action.text"
+            >
+                {{ action.text }}
+            </button>
+        </ng-container>
+        <ng-template #actionTemplate [ngTemplateOutlet]="actionsTemplate"></ng-template>
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-dialog-actions',
+                    template: `
+        <ng-content *ngIf="!actions"></ng-content>
+        <ng-container *ngIf="actionsArray; else actionTemplate">
+            <button
+                type="button"
+                *ngFor="let action of actionsArray"
+                [ngClass]="buttonClass(action)"
+                (click)="onButtonClick(action, $event)"
+                [attr.aria-label]="action.text"
+            >
+                {{ action.text }}
+            </button>
+        </ng-container>
+        <ng-template #actionTemplate [ngTemplateOutlet]="actionsTemplate"></ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { actions: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], buttonGroupClassName: [{
+                type: HostBinding,
+                args: ['class.k-dialog-buttongroup']
+            }, {
+                type: HostBinding,
+                args: ['class.k-actions']
+            }], className: [{
+                type: HostBinding,
+                args: ['class.k-actions-stretched']
+            }] } });

package/esm2015/dialog/dialog-container.directive.js

@@ -0,0 +1,30 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+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.
+ *
+ * @example
+ * ```html-no-run
+ * <div kendoDialogContainer></div>
+ * ```
+ */
+export class DialogContainerDirective {
+    constructor(container, service) {
+        service.container = container;
+    }
+}
+DialogContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContainerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i1.DialogContainerService }], target: i0.ɵɵFactoryTarget.Directive });
+DialogContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DialogContainerDirective, selector: "[kendoDialogContainer]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDialogContainer]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.DialogContainerService }]; } });

package/esm2015/dialog/dialog-container.service.js

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class DialogContainerService {
+    set container(container) {
+        DialogContainerService.container = container;
+    }
+    get container() {
+        return DialogContainerService.container;
+    }
+}
+DialogContainerService.container = null;
+DialogContainerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DialogContainerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContainerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContainerService, decorators: [{
+            type: Injectable
+        }] });

package/{dist/es2015 → esm2015}/dialog/dialog-content-base.js

@@ -2,11 +2,12 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
 import { DialogActionsComponent } from './dialog-actions.component';
 import { DialogTitleBarComponent } from './dialog-titlebar.component';
-import { ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 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-passing-title-content-and-actions-as-a-single-component)).
@@ -32,11 +33,18 @@ export class DialogContentBase {
         }
     }
 }
-tslib_1.__decorate([
-    ViewChild(DialogTitleBarComponent, { static: false }),
-    tslib_1.__metadata("design:type", DialogTitleBarComponent)
-], DialogContentBase.prototype, "dialogTitleBar", void 0);
-tslib_1.__decorate([
-    ViewChild(DialogActionsComponent, { static: false }),
-    tslib_1.__metadata("design:type", DialogActionsComponent)
-], DialogContentBase.prototype, "dialogActions", void 0);
+DialogContentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContentBase, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogContentBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialogContentBase, selector: "kendo-dialog-content-base", viewQueries: [{ propertyName: "dialogTitleBar", first: true, predicate: DialogTitleBarComponent, descendants: true }, { propertyName: "dialogActions", first: true, predicate: DialogActionsComponent, descendants: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContentBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    selector: 'kendo-dialog-content-base'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }]; }, propDecorators: { dialogTitleBar: [{
+                type: ViewChild,
+                args: [DialogTitleBarComponent, { static: false }]
+            }], dialogActions: [{
+                type: ViewChild,
+                args: [DialogActionsComponent, { static: false }]
+            }] } });

package/esm2015/dialog/dialog-titlebar.component.js

@@ -0,0 +1,136 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, HostBinding, Output, Input, Optional } from '@angular/core';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { take } from 'rxjs/operators';
+import { PreventableEvent } from '../common/preventable-event';
+import { TitleBarLocalizationService } from '../localization/titlebar-localization.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../localization/localized-messages.directive";
+/**
+ * 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 %}).
+ */
+export class DialogTitleBarComponent {
+    constructor(zone, hostElement, localizationService) {
+        this.zone = zone;
+        this.hostElement = hostElement;
+        this.localizationService = localizationService;
+        /**
+         * Fires when the close button of the title-bar is clicked.
+         */
+        this.close = new EventEmitter();
+    }
+    get className() {
+        return true;
+    }
+    get closeButtonTitle() {
+        return this.closeTitle || this.localizationService.get('closeTitle');
+    }
+    ngAfterViewInit() {
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            const element = this.hostElement.nativeElement.querySelector('.k-dialog-title');
+            element.setAttribute('id', this.id);
+        });
+    }
+    /**
+     * @hidden
+     */
+    onCloseClick(e) {
+        e.preventDefault();
+        const eventArgs = new PreventableEvent();
+        this.close.emit(eventArgs);
+    }
+}
+DialogTitleBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogTitleBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.LocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DialogTitleBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: { id: "id", closeTitle: "closeTitle" }, outputs: { close: "close" }, host: { properties: { "class.k-window-titlebar": "this.className", "class.k-dialog-titlebar": "this.className" } }, providers: [
+        TitleBarLocalizationService,
+        {
+            provide: LocalizationService,
+            useExisting: TitleBarLocalizationService
+        },
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.dialog'
+        }
+    ], ngImport: i0, template: `
+         <ng-container
+            kendoDialogTitleBarLocalizedMessages
+            i18n-closeTitle="kendo.dialog.closeTitle|The title of the close button"
+            closeTitle="Close"
+        >
+            <div class="k-window-title k-dialog-title">
+                <ng-content></ng-content>
+            </div>
+
+            <div class="k-window-actions k-dialog-actions">
+                <button
+                    role="button"
+                    [attr.title]="closeButtonTitle"
+                    [attr.aria-label]="closeButtonTitle"
+                    class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-window-action k-dialog-action k-dialog-close"
+                    (click)="onCloseClick($event)"
+                >
+                    <span class="k-button-icon k-icon k-i-x"></span>
+                </button>
+            </div>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i2.LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogTitleBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-dialog-titlebar',
+                    providers: [
+                        TitleBarLocalizationService,
+                        {
+                            provide: LocalizationService,
+                            useExisting: TitleBarLocalizationService
+                        },
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.dialog'
+                        }
+                    ],
+                    template: `
+         <ng-container
+            kendoDialogTitleBarLocalizedMessages
+            i18n-closeTitle="kendo.dialog.closeTitle|The title of the close button"
+            closeTitle="Close"
+        >
+            <div class="k-window-title k-dialog-title">
+                <ng-content></ng-content>
+            </div>
+
+            <div class="k-window-actions k-dialog-actions">
+                <button
+                    role="button"
+                    [attr.title]="closeButtonTitle"
+                    [attr.aria-label]="closeButtonTitle"
+                    class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-window-action k-dialog-action k-dialog-close"
+                    (click)="onCloseClick($event)"
+                >
+                    <span class="k-button-icon k-icon k-i-x"></span>
+                </button>
+            </div>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1.LocalizationService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { close: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }], closeTitle: [{
+                type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class.k-window-titlebar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-dialog-titlebar']
+            }] } });