@progress/kendo-angular-dialog
Version:
Dialog Package for Angular
166 lines (165 loc) • 6.02 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, HostBinding, HostListener, ElementRef, NgZone, TemplateRef, Input } from '@angular/core';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { DraggableDirective } from '@progress/kendo-angular-common';
import { DragResizeService } from './drag-resize.service';
import { of } from 'rxjs';
import { hasClasses, isFocusable, isPresent } from '../common/util';
import * as i0 from "@angular/core";
import * as i1 from "./drag-resize.service";
/**
* Represents the title bar of the Window component.
*
*/
export class WindowTitleBarComponent {
el;
ngZone;
/**
* @hidden
*/
template;
/**
* @hidden
*/
id;
/**
* @hidden
*/
service;
dragDirective;
dragSubscription;
stateSubscription;
constructor(el, service, ngZone) {
this.el = el;
this.ngZone = ngZone;
this.service = service;
}
ngOnInit() {
this.dragDirective = new DraggableDirective(this.el, this.ngZone);
this.dragDirective.ngOnInit();
if (this.isDraggable) {
this.subscribeDrag();
}
this.subscribeStateChange();
}
ngAfterViewInit() {
const element = this.el.nativeElement.querySelector('.k-window-title');
if (isPresent(element)) {
element.setAttribute('id', this.id);
}
}
ngOnDestroy() {
this.dragDirective.ngOnDestroy();
this.unsubscribeDrag();
this.unsubscribeState();
}
/**
* @hidden
*/
subscribeDrag() {
this.unsubscribeDrag();
this.dragSubscription = of(this.dragDirective).subscribe(titleBar => {
this.service.onDrag(titleBar);
});
}
/**
* @hidden
*/
subscribeStateChange() {
this.stateSubscription = this.service.stateChange.subscribe((state) => {
if (this.service.options.draggable) {
if (state === 'maximized') {
this.unsubscribeDrag();
}
else {
this.subscribeDrag();
}
}
});
}
/**
* @hidden
*/
unsubscribeDrag() {
if (this.dragSubscription) {
this.service.dragSubscription.unsubscribe();
this.dragSubscription.unsubscribe();
this.dragSubscription = null;
}
}
/**
* @hidden
*/
unsubscribeState() {
if (this.stateSubscription) {
this.stateSubscription.unsubscribe();
this.stateSubscription = null;
}
}
get className() {
return true;
}
get touchAction() {
if (this.isDraggable) {
return 'none';
}
}
/**
* @hidden
*/
handle(ev) {
const target = ev.target;
const state = this.service.options.state;
if (!hasClasses(target, 'k-icon') && !isFocusable(target, false) && this.service.options.resizable) {
if (state === 'default') {
this.service.maximizeAction();
}
else if (state === 'maximized') {
this.service.restoreAction();
}
}
}
get isDraggable() {
const options = this.service.options;
return options.draggable && options.state !== 'maximized';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WindowTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.DragResizeService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WindowTitleBarComponent, isStandalone: true, selector: "kendo-window-titlebar", inputs: { template: "template", id: "id" }, host: { listeners: { "dblclick": "handle($event)" }, properties: { "class.k-window-titlebar": "this.className", "style.touch-action": "this.touchAction" } }, ngImport: i0, template: `
<ng-content *ngIf="!template"></ng-content>
<ng-template
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{'$implicit': service}" *ngIf="template">
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WindowTitleBarComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-window-titlebar',
template: `
<ng-content *ngIf="!template"></ng-content>
<ng-template
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{'$implicit': service}" *ngIf="template">
</ng-template>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DragResizeService }, { type: i0.NgZone }]; }, propDecorators: { template: [{
type: Input
}], id: [{
type: Input
}], className: [{
type: HostBinding,
args: ['class.k-window-titlebar']
}], touchAction: [{
type: HostBinding,
args: ['style.touch-action']
}], handle: [{
type: HostListener,
args: ['dblclick', ['$event']]
}] } });