@progress/kendo-angular-dialog
Version:
Dialog Package for Angular
162 lines (159 loc) • 7.27 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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, ElementRef, Optional, NgZone } 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 { xIcon } from '@progress/kendo-svg-icons';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { LocalizedMessagesDirective } from '../localization/localized-messages.directive';
import * as i0 from "@angular/core";
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 %}).
*/
export class DialogTitleBarComponent {
zone;
hostElement;
localizationService;
/**
* Fires when the close button of the title-bar is clicked.
*/
close = new EventEmitter();
/**
* @hidden
*/
id;
/**
* @hidden
*/
closeTitle;
get className() {
return true;
}
/**
* @hidden
*/
xIcon = xIcon;
constructor(zone, hostElement, localizationService) {
this.zone = zone;
this.hostElement = hostElement;
this.localizationService = localizationService;
}
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);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogTitleBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.LocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogTitleBarComponent, isStandalone: true, 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"
>
<span class="k-window-title k-dialog-title">
<ng-content></ng-content>
</span>
<div class="k-window-titlebar-actions k-dialog-titlebar-actions">
<button
kendoButton
fillMode="flat"
type="button"
[attr.title]="closeButtonTitle"
[attr.aria-label]="closeButtonTitle"
icon="close"
[svgIcon]="xIcon"
class="k-window-titlebar-action k-dialog-titlebar-action"
(click)="onCloseClick($event)"
>
</button>
</div>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDialogLocalizedMessages],\n [kendoWindowLocalizedMessages],\n [kendoDialogTitleBarLocalizedMessages]\n " }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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"
>
<span class="k-window-title k-dialog-title">
<ng-content></ng-content>
</span>
<div class="k-window-titlebar-actions k-dialog-titlebar-actions">
<button
kendoButton
fillMode="flat"
type="button"
[attr.title]="closeButtonTitle"
[attr.aria-label]="closeButtonTitle"
icon="close"
[svgIcon]="xIcon"
class="k-window-titlebar-action k-dialog-titlebar-action"
(click)="onCloseClick($event)"
>
</button>
</div>
</ng-container>
`,
standalone: true,
imports: [LocalizedMessagesDirective, ButtonComponent]
}]
}], 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']
}] } });