@progress/kendo-angular-dialog 25.3.1-develop.2 → 25.4.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { TemplateRef, EventEmitter, HostBinding, Output, Input, Component, InjectionToken, Inject, Optional, Injectable, Directive, forwardRef, ViewChild, ViewChildren, ContentChildren, isDevMode, Renderer2, Host, HostListener, ContentChild, NgModule } from '@angular/core';
|
|
6
|
+
import { TemplateRef, EventEmitter, signal, HostBinding, Output, Input, ChangeDetectionStrategy, Component, InjectionToken, Inject, Optional, Injectable, Directive, forwardRef, afterNextRender, ViewChild, ViewChildren, ContentChildren, isDevMode, Renderer2, Host, HostListener, afterEveryRender, ContentChild, NgModule } from '@angular/core';
|
|
7
7
|
import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
|
|
8
8
|
import * as i2 from '@angular/animations';
|
|
9
9
|
import { style, animate, keyframes, trigger, state, transition } from '@angular/animations';
|
|
@@ -11,12 +11,12 @@ import * as i1 from '@progress/kendo-angular-buttons';
|
|
|
11
11
|
import { KENDO_BUTTON, ButtonComponent, Button } from '@progress/kendo-angular-buttons';
|
|
12
12
|
import * as i1$1 from '@progress/kendo-angular-l10n';
|
|
13
13
|
import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
|
|
14
|
-
import { take, delay, takeUntil, filter, map, share, tap, switchMap } from 'rxjs/operators';
|
|
15
14
|
import { xIcon, windowRestoreIcon, windowIcon, windowMinimizeIcon } from '@progress/kendo-svg-icons';
|
|
16
15
|
import * as i1$2 from '@progress/kendo-angular-common';
|
|
17
16
|
import { setHTMLAttributes, getLicenseMessage, shouldShowValidationUI, isDocumentAvailable, normalizeKeys, Keys, focusableSelector, WatermarkOverlayComponent, KENDO_WEBMCP_HOST, provideComponentName, DraggableDirective, isChanged } from '@progress/kendo-angular-common';
|
|
18
17
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
19
18
|
import { of, Subscription, Subject, merge } from 'rxjs';
|
|
19
|
+
import { delay, takeUntil, filter, map, take, share, tap, switchMap } from 'rxjs/operators';
|
|
20
20
|
import { offset, getWindowViewPort } from '@progress/kendo-popup-common';
|
|
21
21
|
import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
|
|
22
22
|
|
|
@@ -41,10 +41,10 @@ class DialogActionsComponent {
|
|
|
41
41
|
*/
|
|
42
42
|
set actions(value) {
|
|
43
43
|
if (value instanceof TemplateRef) {
|
|
44
|
-
this.
|
|
44
|
+
this._actionsValue.set(value);
|
|
45
45
|
}
|
|
46
46
|
else if (Array.isArray(value)) {
|
|
47
|
-
this.
|
|
47
|
+
this._actionsValue.set(value);
|
|
48
48
|
}
|
|
49
49
|
else {
|
|
50
50
|
throw new Error('"actions" must be either TemplateRef or DialogAction[] instance.');
|
|
@@ -53,16 +53,27 @@ class DialogActionsComponent {
|
|
|
53
53
|
/**
|
|
54
54
|
* @hidden
|
|
55
55
|
*/
|
|
56
|
-
actionsArray
|
|
56
|
+
get actionsArray() {
|
|
57
|
+
const v = this._actionsValue();
|
|
58
|
+
return Array.isArray(v) ? v : null;
|
|
59
|
+
}
|
|
57
60
|
/**
|
|
58
61
|
* @hidden
|
|
59
62
|
*/
|
|
60
|
-
actionsTemplate
|
|
63
|
+
get actionsTemplate() {
|
|
64
|
+
const v = this._actionsValue();
|
|
65
|
+
return v instanceof TemplateRef ? v : null;
|
|
66
|
+
}
|
|
61
67
|
/**
|
|
62
68
|
* Sets the possible layout of the action buttons.
|
|
63
69
|
* @default 'stretched'
|
|
64
70
|
*/
|
|
65
|
-
layout
|
|
71
|
+
set layout(value) {
|
|
72
|
+
this._layout.set(value);
|
|
73
|
+
}
|
|
74
|
+
get layout() {
|
|
75
|
+
return this._layout();
|
|
76
|
+
}
|
|
66
77
|
/**
|
|
67
78
|
* Fires when the user clicks an action button.
|
|
68
79
|
*/
|
|
@@ -80,6 +91,8 @@ class DialogActionsComponent {
|
|
|
80
91
|
get stretchedClassName() {
|
|
81
92
|
return this.layout === 'stretched';
|
|
82
93
|
}
|
|
94
|
+
_actionsValue = signal(null, ...(ngDevMode ? [{ debugName: "_actionsValue" }] : /* istanbul ignore next */ []));
|
|
95
|
+
_layout = signal('stretched', ...(ngDevMode ? [{ debugName: "_layout" }] : /* istanbul ignore next */ []));
|
|
83
96
|
constructor(el) {
|
|
84
97
|
this.el = el;
|
|
85
98
|
}
|
|
@@ -124,7 +137,7 @@ class DialogActionsComponent {
|
|
|
124
137
|
} @else {
|
|
125
138
|
<ng-container [ngTemplateOutlet]="actionsTemplate"></ng-container>
|
|
126
139
|
}
|
|
127
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
140
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
128
141
|
}
|
|
129
142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogActionsComponent, decorators: [{
|
|
130
143
|
type: Component,
|
|
@@ -160,6 +173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
160
173
|
}
|
|
161
174
|
`,
|
|
162
175
|
standalone: true,
|
|
176
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
163
177
|
imports: [NgClass, NgTemplateOutlet, KENDO_BUTTON]
|
|
164
178
|
}]
|
|
165
179
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { actions: [{
|
|
@@ -270,19 +284,43 @@ class Messages extends ComponentMessages {
|
|
|
270
284
|
/**
|
|
271
285
|
* Sets the title for the **Close** button.
|
|
272
286
|
*/
|
|
273
|
-
closeTitle
|
|
287
|
+
set closeTitle(value) {
|
|
288
|
+
this._closeTitle.set(value);
|
|
289
|
+
}
|
|
290
|
+
get closeTitle() {
|
|
291
|
+
return this._closeTitle();
|
|
292
|
+
}
|
|
274
293
|
/**
|
|
275
294
|
* Sets the title for the **Restore** button.
|
|
276
295
|
*/
|
|
277
|
-
restoreTitle
|
|
296
|
+
set restoreTitle(value) {
|
|
297
|
+
this._restoreTitle.set(value);
|
|
298
|
+
}
|
|
299
|
+
get restoreTitle() {
|
|
300
|
+
return this._restoreTitle();
|
|
301
|
+
}
|
|
278
302
|
/**
|
|
279
303
|
* Sets the title for the **Maximize** button.
|
|
280
304
|
*/
|
|
281
|
-
maximizeTitle
|
|
305
|
+
set maximizeTitle(value) {
|
|
306
|
+
this._maximizeTitle.set(value);
|
|
307
|
+
}
|
|
308
|
+
get maximizeTitle() {
|
|
309
|
+
return this._maximizeTitle();
|
|
310
|
+
}
|
|
282
311
|
/**
|
|
283
312
|
* Sets the title for the **Minimize** button.
|
|
284
313
|
*/
|
|
285
|
-
minimizeTitle
|
|
314
|
+
set minimizeTitle(value) {
|
|
315
|
+
this._minimizeTitle.set(value);
|
|
316
|
+
}
|
|
317
|
+
get minimizeTitle() {
|
|
318
|
+
return this._minimizeTitle();
|
|
319
|
+
}
|
|
320
|
+
_minimizeTitle = signal(null, ...(ngDevMode ? [{ debugName: "_minimizeTitle" }] : /* istanbul ignore next */ []));
|
|
321
|
+
_maximizeTitle = signal(null, ...(ngDevMode ? [{ debugName: "_maximizeTitle" }] : /* istanbul ignore next */ []));
|
|
322
|
+
_restoreTitle = signal(null, ...(ngDevMode ? [{ debugName: "_restoreTitle" }] : /* istanbul ignore next */ []));
|
|
323
|
+
_closeTitle = signal(null, ...(ngDevMode ? [{ debugName: "_closeTitle" }] : /* istanbul ignore next */ []));
|
|
286
324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
287
325
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: Messages, isStandalone: true, selector: "kendo-dialog-messages-base", inputs: { closeTitle: "closeTitle", restoreTitle: "restoreTitle", maximizeTitle: "maximizeTitle", minimizeTitle: "minimizeTitle" }, usesInheritance: true, ngImport: i0 });
|
|
288
326
|
}
|
|
@@ -351,8 +389,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
351
389
|
*
|
|
352
390
|
*/
|
|
353
391
|
class DialogTitleBarComponent {
|
|
354
|
-
zone;
|
|
355
392
|
hostElement;
|
|
393
|
+
injector;
|
|
356
394
|
localizationService;
|
|
357
395
|
/**
|
|
358
396
|
* Fires when the close button in the title bar is clicked.
|
|
@@ -361,15 +399,30 @@ class DialogTitleBarComponent {
|
|
|
361
399
|
/**
|
|
362
400
|
* @hidden
|
|
363
401
|
*/
|
|
364
|
-
id
|
|
402
|
+
set id(value) {
|
|
403
|
+
this._id.set(value);
|
|
404
|
+
}
|
|
405
|
+
get id() {
|
|
406
|
+
return this._id();
|
|
407
|
+
}
|
|
365
408
|
/**
|
|
366
409
|
* @hidden
|
|
367
410
|
*/
|
|
368
|
-
closeTitle
|
|
411
|
+
set closeTitle(value) {
|
|
412
|
+
this._closeTitle.set(value);
|
|
413
|
+
}
|
|
414
|
+
get closeTitle() {
|
|
415
|
+
return this._closeTitle();
|
|
416
|
+
}
|
|
369
417
|
/**
|
|
370
418
|
* @hidden
|
|
371
419
|
*/
|
|
372
|
-
closable
|
|
420
|
+
set closable(value) {
|
|
421
|
+
this._closable.set(value);
|
|
422
|
+
}
|
|
423
|
+
get closable() {
|
|
424
|
+
return this._closable();
|
|
425
|
+
}
|
|
373
426
|
get className() {
|
|
374
427
|
return true;
|
|
375
428
|
}
|
|
@@ -377,9 +430,12 @@ class DialogTitleBarComponent {
|
|
|
377
430
|
* @hidden
|
|
378
431
|
*/
|
|
379
432
|
xIcon = xIcon;
|
|
380
|
-
|
|
381
|
-
|
|
433
|
+
_id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
|
|
434
|
+
_closeTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeTitle" }] : /* istanbul ignore next */ []));
|
|
435
|
+
_closable = signal(true, ...(ngDevMode ? [{ debugName: "_closable" }] : /* istanbul ignore next */ []));
|
|
436
|
+
constructor(hostElement, injector, localizationService) {
|
|
382
437
|
this.hostElement = hostElement;
|
|
438
|
+
this.injector = injector;
|
|
383
439
|
this.localizationService = localizationService;
|
|
384
440
|
}
|
|
385
441
|
get closeButtonTitle() {
|
|
@@ -389,10 +445,10 @@ class DialogTitleBarComponent {
|
|
|
389
445
|
if (!this.id) {
|
|
390
446
|
return;
|
|
391
447
|
}
|
|
392
|
-
|
|
448
|
+
afterNextRender(() => {
|
|
393
449
|
const element = this.hostElement.nativeElement.querySelector('.k-dialog-title');
|
|
394
450
|
element?.setAttribute('id', this.id);
|
|
395
|
-
});
|
|
451
|
+
}, { injector: this.injector });
|
|
396
452
|
}
|
|
397
453
|
/**
|
|
398
454
|
* @hidden
|
|
@@ -402,7 +458,7 @@ class DialogTitleBarComponent {
|
|
|
402
458
|
const eventArgs = new PreventableEvent();
|
|
403
459
|
this.close.emit(eventArgs);
|
|
404
460
|
}
|
|
405
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogTitleBarComponent, deps: [{ token: i0.
|
|
461
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1$1.LocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
406
462
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: DialogTitleBarComponent, isStandalone: true, selector: "kendo-dialog-titlebar", inputs: { id: "id", closeTitle: "closeTitle", closable: "closable" }, outputs: { close: "close" }, host: { properties: { "class.k-window-titlebar": "this.className", "class.k-dialog-titlebar": "this.className" } }, providers: [
|
|
407
463
|
TitleBarLocalizationService,
|
|
408
464
|
{
|
|
@@ -441,7 +497,7 @@ class DialogTitleBarComponent {
|
|
|
441
497
|
</div>
|
|
442
498
|
}
|
|
443
499
|
</ng-container>
|
|
444
|
-
`, 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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
500
|
+
`, 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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
445
501
|
}
|
|
446
502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogTitleBarComponent, decorators: [{
|
|
447
503
|
type: Component,
|
|
@@ -488,9 +544,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
488
544
|
</ng-container>
|
|
489
545
|
`,
|
|
490
546
|
standalone: true,
|
|
547
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
491
548
|
imports: [LocalizedMessagesDirective, ButtonComponent]
|
|
492
549
|
}]
|
|
493
|
-
}], ctorParameters: () => [{ type: i0.
|
|
550
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1$1.LocalizationService, decorators: [{
|
|
494
551
|
type: Optional
|
|
495
552
|
}] }], propDecorators: { close: [{
|
|
496
553
|
type: Output
|
|
@@ -516,8 +573,8 @@ const packageMetadata = {
|
|
|
516
573
|
productName: 'Kendo UI for Angular',
|
|
517
574
|
productCode: 'KENDOUIANGULAR',
|
|
518
575
|
productCodes: ['KENDOUIANGULAR'],
|
|
519
|
-
publishDate:
|
|
520
|
-
version: '25.
|
|
576
|
+
publishDate: 1791873115,
|
|
577
|
+
version: '25.4.0-develop.1',
|
|
521
578
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
522
579
|
};
|
|
523
580
|
|
|
@@ -819,19 +876,30 @@ class DialogComponent {
|
|
|
819
876
|
cdr;
|
|
820
877
|
ngZone;
|
|
821
878
|
builder;
|
|
879
|
+
injector;
|
|
822
880
|
/**
|
|
823
881
|
* Specifies the action buttons to render in the Dialog.
|
|
824
882
|
*
|
|
825
883
|
* @type {DialogAction[]}
|
|
826
884
|
*/
|
|
827
|
-
actions
|
|
885
|
+
set actions(value) {
|
|
886
|
+
this._actions.set(value);
|
|
887
|
+
}
|
|
888
|
+
get actions() {
|
|
889
|
+
return this._actions();
|
|
890
|
+
}
|
|
828
891
|
/**
|
|
829
892
|
* Sets the layout of the action buttons in the Dialog. Applies only if you specify action buttons through the `actions` option.
|
|
830
893
|
*
|
|
831
894
|
* @type {ActionsLayout}
|
|
832
895
|
* @default 'stretched'
|
|
833
896
|
*/
|
|
834
|
-
actionsLayout
|
|
897
|
+
set actionsLayout(value) {
|
|
898
|
+
this._actionsLayout.set(value);
|
|
899
|
+
}
|
|
900
|
+
get actionsLayout() {
|
|
901
|
+
return this._actionsLayout();
|
|
902
|
+
}
|
|
835
903
|
/**
|
|
836
904
|
* Sets the query selector for the element to receive initial focus. ([See examples.](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/initial-focus))
|
|
837
905
|
*
|
|
@@ -840,7 +908,12 @@ class DialogComponent {
|
|
|
840
908
|
* @remarks
|
|
841
909
|
* This property is related to accessibility.
|
|
842
910
|
*/
|
|
843
|
-
autoFocusedElement
|
|
911
|
+
set autoFocusedElement(value) {
|
|
912
|
+
this._autoFocusedElement.set(value);
|
|
913
|
+
}
|
|
914
|
+
get autoFocusedElement() {
|
|
915
|
+
return this._autoFocusedElement();
|
|
916
|
+
}
|
|
844
917
|
/**
|
|
845
918
|
* Specifies whether the Dialog can be closed by the **Close** button in the title bar or by pressing the `Esc` key.
|
|
846
919
|
*
|
|
@@ -848,56 +921,91 @@ class DialogComponent {
|
|
|
848
921
|
* @default true
|
|
849
922
|
*/
|
|
850
923
|
set closable(value) {
|
|
851
|
-
this._closable
|
|
924
|
+
this._closable.set(value);
|
|
852
925
|
if (this.titlebarContent?.first) {
|
|
853
926
|
this.titlebarContent.first.closable = value;
|
|
854
927
|
}
|
|
855
928
|
}
|
|
856
929
|
get closable() {
|
|
857
|
-
return this._closable;
|
|
930
|
+
return this._closable();
|
|
858
931
|
}
|
|
859
932
|
/**
|
|
860
933
|
* Sets the text in the Dialog title bar.
|
|
861
934
|
*
|
|
862
935
|
* @type {string}
|
|
863
936
|
*/
|
|
864
|
-
title
|
|
937
|
+
set title(value) {
|
|
938
|
+
this._title.set(value);
|
|
939
|
+
}
|
|
940
|
+
get title() {
|
|
941
|
+
return this._title();
|
|
942
|
+
}
|
|
865
943
|
/**
|
|
866
944
|
* Sets the width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
|
|
867
945
|
*
|
|
868
946
|
* @type {number | string}
|
|
869
947
|
*/
|
|
870
|
-
width
|
|
948
|
+
set width(value) {
|
|
949
|
+
this._width.set(value);
|
|
950
|
+
}
|
|
951
|
+
get width() {
|
|
952
|
+
return this._width();
|
|
953
|
+
}
|
|
871
954
|
/**
|
|
872
955
|
* Sets the minimum width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
|
|
873
956
|
*
|
|
874
957
|
* @type {number | string}
|
|
875
958
|
*/
|
|
876
|
-
minWidth
|
|
959
|
+
set minWidth(value) {
|
|
960
|
+
this._minWidth.set(value);
|
|
961
|
+
}
|
|
962
|
+
get minWidth() {
|
|
963
|
+
return this._minWidth();
|
|
964
|
+
}
|
|
877
965
|
/**
|
|
878
966
|
* Sets the maximum width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
|
|
879
967
|
*
|
|
880
968
|
* @type {number | string}
|
|
881
969
|
*/
|
|
882
|
-
maxWidth
|
|
970
|
+
set maxWidth(value) {
|
|
971
|
+
this._maxWidth.set(value);
|
|
972
|
+
}
|
|
973
|
+
get maxWidth() {
|
|
974
|
+
return this._maxWidth();
|
|
975
|
+
}
|
|
883
976
|
/**
|
|
884
977
|
* Sets the height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
|
|
885
978
|
*
|
|
886
979
|
* @type {number | string}
|
|
887
980
|
*/
|
|
888
|
-
height
|
|
981
|
+
set height(value) {
|
|
982
|
+
this._height.set(value);
|
|
983
|
+
}
|
|
984
|
+
get height() {
|
|
985
|
+
return this._height();
|
|
986
|
+
}
|
|
889
987
|
/**
|
|
890
988
|
* Sets the minimum height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
|
|
891
989
|
*
|
|
892
990
|
* @type {number | string}
|
|
893
991
|
*/
|
|
894
|
-
minHeight
|
|
992
|
+
set minHeight(value) {
|
|
993
|
+
this._minHeight.set(value);
|
|
994
|
+
}
|
|
995
|
+
get minHeight() {
|
|
996
|
+
return this._minHeight();
|
|
997
|
+
}
|
|
895
998
|
/**
|
|
896
999
|
* Sets the maximum height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
|
|
897
1000
|
*
|
|
898
1001
|
* @type {number | string}
|
|
899
1002
|
*/
|
|
900
|
-
maxHeight
|
|
1003
|
+
set maxHeight(value) {
|
|
1004
|
+
this._maxHeight.set(value);
|
|
1005
|
+
}
|
|
1006
|
+
get maxHeight() {
|
|
1007
|
+
return this._maxHeight();
|
|
1008
|
+
}
|
|
901
1009
|
/**
|
|
902
1010
|
* Configures the Dialog opening animation ([see example](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/animations)).
|
|
903
1011
|
* The default animation type is `translate` and the duration is `300ms`.
|
|
@@ -905,7 +1013,12 @@ class DialogComponent {
|
|
|
905
1013
|
* @type {boolean | DialogAnimation}
|
|
906
1014
|
* @default true
|
|
907
1015
|
*/
|
|
908
|
-
animation
|
|
1016
|
+
set animation(value) {
|
|
1017
|
+
this._animation.set(value);
|
|
1018
|
+
}
|
|
1019
|
+
get animation() {
|
|
1020
|
+
return this._animation();
|
|
1021
|
+
}
|
|
909
1022
|
/**
|
|
910
1023
|
* @hidden
|
|
911
1024
|
*/
|
|
@@ -914,26 +1027,26 @@ class DialogComponent {
|
|
|
914
1027
|
const el = this.wrapper.nativeElement;
|
|
915
1028
|
const dir = el.getAttribute('dir');
|
|
916
1029
|
const tIndex = el.getAttribute('tabindex');
|
|
917
|
-
if (this.
|
|
918
|
-
this.
|
|
1030
|
+
if (this._direction() !== dir && dir) {
|
|
1031
|
+
this._direction.set(dir);
|
|
919
1032
|
}
|
|
920
1033
|
if (this.tabIndex !== tIndex && tIndex) {
|
|
921
1034
|
this.tabIndex = tIndex;
|
|
922
1035
|
}
|
|
923
|
-
this._htmlAttributes
|
|
1036
|
+
this._htmlAttributes.set(attributes);
|
|
924
1037
|
}
|
|
925
1038
|
get htmlAttributes() {
|
|
926
|
-
return this._htmlAttributes;
|
|
1039
|
+
return this._htmlAttributes();
|
|
927
1040
|
}
|
|
928
1041
|
/**
|
|
929
1042
|
* @hidden
|
|
930
1043
|
*/
|
|
931
1044
|
set cssClass(classes) {
|
|
932
|
-
this.setServiceClasses(this._cssClass, classes);
|
|
933
|
-
this._cssClass
|
|
1045
|
+
this.setServiceClasses(this._cssClass(), classes);
|
|
1046
|
+
this._cssClass.set(classes);
|
|
934
1047
|
}
|
|
935
1048
|
get cssClass() {
|
|
936
|
-
return this._cssClass;
|
|
1049
|
+
return this._cssClass();
|
|
937
1050
|
}
|
|
938
1051
|
/**
|
|
939
1052
|
* @hidden
|
|
@@ -972,30 +1085,42 @@ class DialogComponent {
|
|
|
972
1085
|
*/
|
|
973
1086
|
close = new EventEmitter();
|
|
974
1087
|
get dir() {
|
|
975
|
-
return this.
|
|
1088
|
+
return this._direction();
|
|
976
1089
|
}
|
|
977
1090
|
tabIndex = 0;
|
|
978
1091
|
titlebarContent;
|
|
979
1092
|
titlebarView;
|
|
980
1093
|
actionsView;
|
|
981
1094
|
dialog;
|
|
982
|
-
_htmlAttributes;
|
|
983
|
-
_cssClass;
|
|
984
|
-
|
|
985
|
-
|
|
1095
|
+
_htmlAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_htmlAttributes" }] : /* istanbul ignore next */ []));
|
|
1096
|
+
_cssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClass" }] : /* istanbul ignore next */ []));
|
|
1097
|
+
_actions = signal(undefined, ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
|
|
1098
|
+
_actionsLayout = signal('stretched', ...(ngDevMode ? [{ debugName: "_actionsLayout" }] : /* istanbul ignore next */ []));
|
|
1099
|
+
_autoFocusedElement = signal(undefined, ...(ngDevMode ? [{ debugName: "_autoFocusedElement" }] : /* istanbul ignore next */ []));
|
|
1100
|
+
_closable = signal(true, ...(ngDevMode ? [{ debugName: "_closable" }] : /* istanbul ignore next */ []));
|
|
1101
|
+
_title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
|
|
1102
|
+
_width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []));
|
|
1103
|
+
_minWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_minWidth" }] : /* istanbul ignore next */ []));
|
|
1104
|
+
_maxWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxWidth" }] : /* istanbul ignore next */ []));
|
|
1105
|
+
_height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : /* istanbul ignore next */ []));
|
|
1106
|
+
_minHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_minHeight" }] : /* istanbul ignore next */ []));
|
|
1107
|
+
_maxHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxHeight" }] : /* istanbul ignore next */ []));
|
|
1108
|
+
_animation = signal(true, ...(ngDevMode ? [{ debugName: "_animation" }] : /* istanbul ignore next */ []));
|
|
1109
|
+
_direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : /* istanbul ignore next */ []));
|
|
986
1110
|
subscriptions = [];
|
|
987
1111
|
domSubs = new Subscription();
|
|
988
|
-
constructor(wrapper, renderer, localization, cdr, ngZone, builder) {
|
|
1112
|
+
constructor(wrapper, renderer, localization, cdr, ngZone, builder, injector) {
|
|
989
1113
|
this.wrapper = wrapper;
|
|
990
1114
|
this.renderer = renderer;
|
|
991
1115
|
this.cdr = cdr;
|
|
992
1116
|
this.ngZone = ngZone;
|
|
993
1117
|
this.builder = builder;
|
|
1118
|
+
this.injector = injector;
|
|
994
1119
|
const isValid = validatePackage(packageMetadata);
|
|
995
1120
|
this.licenseMessage = getLicenseMessage(packageMetadata);
|
|
996
1121
|
this.showLicenseWatermark = shouldShowValidationUI(isValid);
|
|
997
|
-
this.
|
|
998
|
-
this.subscriptions.push(localization.changes.subscribe(({ rtl }) =>
|
|
1122
|
+
this._direction.set(localization.rtl ? 'rtl' : 'ltr');
|
|
1123
|
+
this.subscriptions.push(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
|
|
999
1124
|
this.titleId = this.generateTitleId();
|
|
1000
1125
|
this.contentId = this.generateContentId();
|
|
1001
1126
|
}
|
|
@@ -1009,9 +1134,9 @@ class DialogComponent {
|
|
|
1009
1134
|
this.subscriptions.push(this.titlebarContent.changes.subscribe(() => {
|
|
1010
1135
|
if (isPresent(this.titlebarContent.first)) {
|
|
1011
1136
|
this.titlebarContent.first.closable = this.closable;
|
|
1012
|
-
|
|
1137
|
+
afterNextRender(() => {
|
|
1013
1138
|
this.bubble('close', this.titlebarContent.first);
|
|
1014
|
-
});
|
|
1139
|
+
}, { injector: this.injector });
|
|
1015
1140
|
}
|
|
1016
1141
|
}));
|
|
1017
1142
|
}
|
|
@@ -1020,9 +1145,9 @@ class DialogComponent {
|
|
|
1020
1145
|
if (!isDocumentAvailable()) {
|
|
1021
1146
|
return;
|
|
1022
1147
|
}
|
|
1023
|
-
|
|
1148
|
+
afterNextRender(() => {
|
|
1024
1149
|
this.handleInitialFocus();
|
|
1025
|
-
});
|
|
1150
|
+
}, { injector: this.injector });
|
|
1026
1151
|
this.bubble('close', this.titlebarView.first);
|
|
1027
1152
|
this.bubble('action', this.actionsView);
|
|
1028
1153
|
if (this.titlebarView.first) {
|
|
@@ -1032,10 +1157,10 @@ class DialogComponent {
|
|
|
1032
1157
|
this.subscriptions.push(this.titlebarView.changes.subscribe(() => {
|
|
1033
1158
|
if (isPresent(this.titlebarView.first)) {
|
|
1034
1159
|
this.titlebarView.first.id = this.titleId;
|
|
1035
|
-
|
|
1160
|
+
afterNextRender(() => {
|
|
1036
1161
|
this.bubble('close', this.titlebarView.first);
|
|
1037
1162
|
this.renderer.setAttribute(this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
|
|
1038
|
-
});
|
|
1163
|
+
}, { injector: this.injector });
|
|
1039
1164
|
}
|
|
1040
1165
|
}));
|
|
1041
1166
|
}
|
|
@@ -1237,7 +1362,7 @@ class DialogComponent {
|
|
|
1237
1362
|
this.subscriptions.push(s);
|
|
1238
1363
|
}
|
|
1239
1364
|
}
|
|
1240
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1365
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2.AnimationBuilder }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
1241
1366
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: DialogComponent, isStandalone: true, selector: "kendo-dialog", inputs: { actions: "actions", actionsLayout: "actionsLayout", autoFocusedElement: "autoFocusedElement", closable: "closable", title: "title", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", animation: "animation" }, outputs: { action: "action", close: "close" }, host: { properties: { "attr.dir": "this.dir", "attr.tabIndex": "this.tabIndex", "class.k-dialog-wrapper": "this.wrapperClass" } }, providers: [
|
|
1242
1367
|
LocalizationService,
|
|
1243
1368
|
{
|
|
@@ -1292,7 +1417,7 @@ class DialogComponent {
|
|
|
1292
1417
|
state('in', style({ opacity: 1 })),
|
|
1293
1418
|
transition('void => *', [style({ opacity: 0.1 }), animate('.3s cubic-bezier(.2, .6, .4, 1)')])
|
|
1294
1419
|
])
|
|
1295
|
-
] });
|
|
1420
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1296
1421
|
}
|
|
1297
1422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1298
1423
|
type: Component,
|
|
@@ -1357,9 +1482,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
1357
1482
|
</ng-container>
|
|
1358
1483
|
`,
|
|
1359
1484
|
standalone: true,
|
|
1485
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1360
1486
|
imports: [LocalizedMessagesDirective, NgStyle, DialogTitleBarComponent, NgTemplateOutlet, DialogActionsComponent, WatermarkOverlayComponent]
|
|
1361
1487
|
}]
|
|
1362
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AnimationBuilder }], propDecorators: { actions: [{
|
|
1488
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AnimationBuilder }, { type: i0.Injector }], propDecorators: { actions: [{
|
|
1363
1489
|
type: Input
|
|
1364
1490
|
}], actionsLayout: [{
|
|
1365
1491
|
type: Input
|
|
@@ -1883,6 +2009,8 @@ const createMoveStream = (el, ev) => mouseDown => {
|
|
|
1883
2009
|
*/
|
|
1884
2010
|
class DragResizeService {
|
|
1885
2011
|
ngZone;
|
|
2012
|
+
injector;
|
|
2013
|
+
cdr;
|
|
1886
2014
|
close = new EventEmitter();
|
|
1887
2015
|
focus = new EventEmitter();
|
|
1888
2016
|
change = new EventEmitter();
|
|
@@ -1891,14 +2019,16 @@ class DragResizeService {
|
|
|
1891
2019
|
dragEnd = new EventEmitter();
|
|
1892
2020
|
resizeStart = new EventEmitter();
|
|
1893
2021
|
resizeEnd = new EventEmitter();
|
|
1894
|
-
options = Object.assign({}, DEFAULT_OPTIONS);
|
|
2022
|
+
options = signal(Object.assign({}, DEFAULT_OPTIONS), ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
1895
2023
|
restoreOptions;
|
|
1896
2024
|
window;
|
|
1897
|
-
lastAction = null;
|
|
2025
|
+
lastAction = signal(null, ...(ngDevMode ? [{ debugName: "lastAction" }] : /* istanbul ignore next */ []));
|
|
1898
2026
|
subscriptions = new Subscription();
|
|
1899
2027
|
dragSubscription = new Subscription();
|
|
1900
|
-
constructor(ngZone) {
|
|
2028
|
+
constructor(ngZone, injector, cdr) {
|
|
1901
2029
|
this.ngZone = ngZone;
|
|
2030
|
+
this.injector = injector;
|
|
2031
|
+
this.cdr = cdr;
|
|
1902
2032
|
}
|
|
1903
2033
|
ngOnDestroy() {
|
|
1904
2034
|
if (this.subscriptions) {
|
|
@@ -1909,8 +2039,8 @@ class DragResizeService {
|
|
|
1909
2039
|
}
|
|
1910
2040
|
}
|
|
1911
2041
|
init(el) {
|
|
1912
|
-
const state = this.options.state;
|
|
1913
|
-
const options = this.options;
|
|
2042
|
+
const state = this.options().state;
|
|
2043
|
+
const options = this.options();
|
|
1914
2044
|
this.window = el;
|
|
1915
2045
|
if (state !== 'default' && !isPresent(this.restoreOptions)) {
|
|
1916
2046
|
this.restoreOptions = Object.assign({}, options);
|
|
@@ -1946,11 +2076,11 @@ class DragResizeService {
|
|
|
1946
2076
|
}));
|
|
1947
2077
|
}
|
|
1948
2078
|
handleDrag({ originalX, originalY, pageX, pageY, startPosition }) {
|
|
1949
|
-
this.options.left = startPosition.x + pageX - originalX;
|
|
1950
|
-
this.options.top = startPosition.y + pageY - originalY;
|
|
1951
|
-
if (this.options.state === 'minimized' && isPresent(this.restoreOptions)) {
|
|
1952
|
-
this.restoreOptions.left = this.options.left;
|
|
1953
|
-
this.restoreOptions.top = this.options.top;
|
|
2079
|
+
this.options().left = startPosition.x + pageX - originalX;
|
|
2080
|
+
this.options().top = startPosition.y + pageY - originalY;
|
|
2081
|
+
if (this.options().state === 'minimized' && isPresent(this.restoreOptions)) {
|
|
2082
|
+
this.restoreOptions.left = this.options().left;
|
|
2083
|
+
this.restoreOptions.top = this.options().top;
|
|
1954
2084
|
}
|
|
1955
2085
|
this.change.emit({
|
|
1956
2086
|
left: startPosition.x + pageX - originalX,
|
|
@@ -1979,7 +2109,7 @@ class DragResizeService {
|
|
|
1979
2109
|
}));
|
|
1980
2110
|
}
|
|
1981
2111
|
handleResize(initial, dir, deltaX, deltaY) {
|
|
1982
|
-
const old = this.options;
|
|
2112
|
+
const old = this.options();
|
|
1983
2113
|
const ev = {};
|
|
1984
2114
|
if (dir.indexOf('e') >= 0) {
|
|
1985
2115
|
const newWidth = initial.width + deltaX;
|
|
@@ -2012,59 +2142,59 @@ class DragResizeService {
|
|
|
2012
2142
|
if (isPresent(ev.width) || isPresent(ev.height)) {
|
|
2013
2143
|
OFFSET_STYLES.forEach((style) => {
|
|
2014
2144
|
if (isPresent(ev[style])) {
|
|
2015
|
-
this.options[style] = ev[style];
|
|
2145
|
+
this.options()[style] = ev[style];
|
|
2016
2146
|
}
|
|
2017
2147
|
});
|
|
2018
2148
|
this.change.emit(ev);
|
|
2019
2149
|
}
|
|
2020
2150
|
}
|
|
2021
2151
|
restoreAction() {
|
|
2022
|
-
this.lastAction
|
|
2152
|
+
this.lastAction.set('restore');
|
|
2023
2153
|
this.defaultState();
|
|
2024
2154
|
}
|
|
2025
2155
|
defaultState() {
|
|
2026
2156
|
if (isPresent(this.restoreOptions)) {
|
|
2027
|
-
this.options
|
|
2157
|
+
this.options.set(Object.assign({}, this.restoreOptions));
|
|
2028
2158
|
}
|
|
2029
|
-
this.options.state = 'default';
|
|
2030
|
-
|
|
2031
|
-
if (!isPresent(this.options.left) || !isPresent(this.options.top)) {
|
|
2159
|
+
this.options().state = 'default';
|
|
2160
|
+
afterNextRender(() => {
|
|
2161
|
+
if (!isPresent(this.options().left) || !isPresent(this.options().top)) {
|
|
2032
2162
|
this.center();
|
|
2033
2163
|
}
|
|
2034
|
-
});
|
|
2164
|
+
}, { injector: this.injector });
|
|
2035
2165
|
this.stateChange.emit('default');
|
|
2036
2166
|
}
|
|
2037
2167
|
storeOptions() {
|
|
2038
|
-
this.restoreOptions = Object.assign({}, this.options);
|
|
2168
|
+
this.restoreOptions = Object.assign({}, this.options());
|
|
2039
2169
|
}
|
|
2040
2170
|
maximizeAction() {
|
|
2041
|
-
this.lastAction
|
|
2171
|
+
this.lastAction.set('maximize');
|
|
2042
2172
|
this.maximizeState();
|
|
2043
2173
|
}
|
|
2044
2174
|
maximizeState() {
|
|
2045
2175
|
this.storeOptions();
|
|
2046
2176
|
const wnd = this.windowViewPort;
|
|
2047
|
-
this.options
|
|
2177
|
+
this.options.set(Object.assign({}, this.options(), {
|
|
2048
2178
|
height: wnd.height,
|
|
2049
2179
|
left: 0,
|
|
2050
2180
|
position: 'fixed',
|
|
2051
2181
|
state: 'maximized',
|
|
2052
2182
|
top: 0,
|
|
2053
2183
|
width: wnd.width
|
|
2054
|
-
});
|
|
2184
|
+
}));
|
|
2055
2185
|
this.stateChange.emit('maximized');
|
|
2056
2186
|
}
|
|
2057
2187
|
minimizeAction() {
|
|
2058
|
-
this.lastAction
|
|
2188
|
+
this.lastAction.set('minimize');
|
|
2059
2189
|
this.minimizeState();
|
|
2060
2190
|
}
|
|
2061
2191
|
minimizeState() {
|
|
2062
2192
|
this.storeOptions();
|
|
2063
|
-
this.options
|
|
2193
|
+
this.options.set(Object.assign({}, this.options(), {
|
|
2064
2194
|
height: null,
|
|
2065
2195
|
position: 'absolute',
|
|
2066
2196
|
state: 'minimized'
|
|
2067
|
-
});
|
|
2197
|
+
}));
|
|
2068
2198
|
this.stateChange.emit('minimized');
|
|
2069
2199
|
}
|
|
2070
2200
|
/**
|
|
@@ -2072,7 +2202,7 @@ class DragResizeService {
|
|
|
2072
2202
|
* Required to distinguish them from action clicks.
|
|
2073
2203
|
*/
|
|
2074
2204
|
applyManualState(previousState) {
|
|
2075
|
-
const state = this.options.state;
|
|
2205
|
+
const state = this.options().state;
|
|
2076
2206
|
switch (state) {
|
|
2077
2207
|
case 'default':
|
|
2078
2208
|
this.defaultState();
|
|
@@ -2082,7 +2212,7 @@ class DragResizeService {
|
|
|
2082
2212
|
break;
|
|
2083
2213
|
case 'minimized':
|
|
2084
2214
|
if (previousState) {
|
|
2085
|
-
this.options.state = previousState;
|
|
2215
|
+
this.options().state = previousState;
|
|
2086
2216
|
}
|
|
2087
2217
|
this.minimizeState();
|
|
2088
2218
|
break;
|
|
@@ -2095,52 +2225,51 @@ class DragResizeService {
|
|
|
2095
2225
|
}
|
|
2096
2226
|
ensureWidth() {
|
|
2097
2227
|
const windowOffset = offset(this.window.nativeElement);
|
|
2098
|
-
if (!isPresent(this.options.width)) {
|
|
2099
|
-
this.options.width = windowOffset.width;
|
|
2228
|
+
if (!isPresent(this.options().width)) {
|
|
2229
|
+
this.options().width = windowOffset.width;
|
|
2100
2230
|
this.change.emit({ width: windowOffset.width });
|
|
2101
2231
|
}
|
|
2102
2232
|
}
|
|
2103
2233
|
center() {
|
|
2104
|
-
if (this.options.state === 'maximized') {
|
|
2234
|
+
if (this.options().state === 'maximized') {
|
|
2105
2235
|
return;
|
|
2106
2236
|
}
|
|
2107
2237
|
const wnd = this.windowViewPort;
|
|
2108
2238
|
const wrapper = offset(this.window.nativeElement);
|
|
2109
2239
|
const el = this.window.nativeElement;
|
|
2110
2240
|
const ev = {};
|
|
2111
|
-
if (!isPresent(this.options.left)) {
|
|
2241
|
+
if (!isPresent(this.options().left)) {
|
|
2112
2242
|
const targetX = Math.max(0, (wnd.width - wrapper.width) / 2);
|
|
2113
|
-
this.options.left = el.offsetLeft + targetX - wrapper.left;
|
|
2114
|
-
ev.left = this.options.left;
|
|
2243
|
+
this.options().left = el.offsetLeft + targetX - wrapper.left;
|
|
2244
|
+
ev.left = this.options().left;
|
|
2115
2245
|
}
|
|
2116
|
-
if (!isPresent(this.options.top)) {
|
|
2246
|
+
if (!isPresent(this.options().top)) {
|
|
2117
2247
|
const targetY = Math.max(0, (wnd.height - wrapper.height) / 2);
|
|
2118
|
-
this.options.top = el.offsetTop + targetY - wrapper.top;
|
|
2119
|
-
ev.top = this.options.top;
|
|
2248
|
+
this.options().top = el.offsetTop + targetY - wrapper.top;
|
|
2249
|
+
ev.top = this.options().top;
|
|
2120
2250
|
}
|
|
2121
2251
|
this.change.emit(ev);
|
|
2122
2252
|
}
|
|
2123
2253
|
currentOffsetAndPosition() {
|
|
2124
|
-
const o = this.options;
|
|
2125
2254
|
const off = offset(this.window.nativeElement);
|
|
2126
2255
|
return Object.assign({}, this.currentPosition(), {
|
|
2127
|
-
height:
|
|
2128
|
-
width:
|
|
2256
|
+
height: this.options().height ? this.options().height : off.height,
|
|
2257
|
+
width: this.options().width ? this.options().width : off.width
|
|
2129
2258
|
});
|
|
2130
2259
|
}
|
|
2131
2260
|
currentPosition() {
|
|
2132
|
-
const o = this.options;
|
|
2261
|
+
const o = this.options();
|
|
2133
2262
|
if (!isPresent(o.top) || !isPresent(o.left)) {
|
|
2134
2263
|
this.setPosition();
|
|
2135
2264
|
}
|
|
2136
2265
|
return {
|
|
2137
|
-
x: this.options.left,
|
|
2138
|
-
y: this.options.top
|
|
2266
|
+
x: this.options().left,
|
|
2267
|
+
y: this.options().top
|
|
2139
2268
|
};
|
|
2140
2269
|
}
|
|
2141
2270
|
setPosition() {
|
|
2142
|
-
this.options.left = this.window.nativeElement.offsetLeft;
|
|
2143
|
-
this.options.top = this.window.nativeElement.offsetTop;
|
|
2271
|
+
this.options().left = this.window.nativeElement.offsetLeft;
|
|
2272
|
+
this.options().top = this.window.nativeElement.offsetTop;
|
|
2144
2273
|
}
|
|
2145
2274
|
setRestoreOption(style, value) {
|
|
2146
2275
|
if (isPresent(this.restoreOptions)) {
|
|
@@ -2156,12 +2285,12 @@ class DragResizeService {
|
|
|
2156
2285
|
get windowViewPort() {
|
|
2157
2286
|
return getWindowViewPort(this.window.nativeElement);
|
|
2158
2287
|
}
|
|
2159
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DragResizeService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2288
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DragResizeService, deps: [{ token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2160
2289
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DragResizeService });
|
|
2161
2290
|
}
|
|
2162
2291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DragResizeService, decorators: [{
|
|
2163
2292
|
type: Injectable
|
|
2164
|
-
}], ctorParameters: () => [{ type: i0.NgZone }] });
|
|
2293
|
+
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
2165
2294
|
|
|
2166
2295
|
/**
|
|
2167
2296
|
* @hidden
|
|
@@ -2207,7 +2336,7 @@ class ResizeHandleDirective {
|
|
|
2207
2336
|
this.subscriptions.unsubscribe();
|
|
2208
2337
|
}
|
|
2209
2338
|
setDisplay(value = 'block') {
|
|
2210
|
-
this.renderer.setStyle(this.el.nativeElement, 'display', this.service.options.state === 'default' ? value : 'none');
|
|
2339
|
+
this.renderer.setStyle(this.el.nativeElement, 'display', this.service.options().state === 'default' ? value : 'none');
|
|
2211
2340
|
}
|
|
2212
2341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeHandleDirective, deps: [{ token: i1$2.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2213
2342
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ResizeHandleDirective, isStandalone: true, selector: "[kendoWindowResizeHandle]", inputs: { direction: "direction" }, host: { properties: { "class.k-resize-handle": "this.hostClass" } }, ngImport: i0 });
|
|
@@ -2234,24 +2363,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
2234
2363
|
class WindowTitleBarComponent {
|
|
2235
2364
|
el;
|
|
2236
2365
|
ngZone;
|
|
2366
|
+
injector;
|
|
2237
2367
|
/**
|
|
2238
2368
|
* @hidden
|
|
2239
2369
|
*/
|
|
2240
|
-
template
|
|
2370
|
+
set template(value) {
|
|
2371
|
+
this._template.set(value);
|
|
2372
|
+
}
|
|
2373
|
+
get template() {
|
|
2374
|
+
return this._template();
|
|
2375
|
+
}
|
|
2241
2376
|
/**
|
|
2242
2377
|
* @hidden
|
|
2243
2378
|
*/
|
|
2244
|
-
id
|
|
2379
|
+
set id(value) {
|
|
2380
|
+
this._id.set(value);
|
|
2381
|
+
}
|
|
2382
|
+
get id() {
|
|
2383
|
+
return this._id();
|
|
2384
|
+
}
|
|
2245
2385
|
/**
|
|
2246
2386
|
* @hidden
|
|
2247
2387
|
*/
|
|
2248
2388
|
service;
|
|
2389
|
+
_template = signal(undefined, ...(ngDevMode ? [{ debugName: "_template" }] : /* istanbul ignore next */ []));
|
|
2390
|
+
_id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
|
|
2249
2391
|
dragDirective;
|
|
2250
2392
|
dragSubscription;
|
|
2251
2393
|
stateSubscription;
|
|
2252
|
-
constructor(el, service, ngZone) {
|
|
2394
|
+
constructor(el, service, ngZone, injector) {
|
|
2253
2395
|
this.el = el;
|
|
2254
2396
|
this.ngZone = ngZone;
|
|
2397
|
+
this.injector = injector;
|
|
2255
2398
|
this.service = service;
|
|
2256
2399
|
}
|
|
2257
2400
|
ngOnInit() {
|
|
@@ -2265,10 +2408,10 @@ class WindowTitleBarComponent {
|
|
|
2265
2408
|
if (!this.id || this.template) {
|
|
2266
2409
|
return;
|
|
2267
2410
|
}
|
|
2268
|
-
|
|
2411
|
+
afterNextRender(() => {
|
|
2269
2412
|
const element = this.el.nativeElement.querySelector('.k-window-title');
|
|
2270
2413
|
element?.setAttribute('id', this.id);
|
|
2271
|
-
});
|
|
2414
|
+
}, { injector: this.injector });
|
|
2272
2415
|
}
|
|
2273
2416
|
ngOnDestroy() {
|
|
2274
2417
|
this.dragDirective.ngOnDestroy();
|
|
@@ -2289,7 +2432,7 @@ class WindowTitleBarComponent {
|
|
|
2289
2432
|
*/
|
|
2290
2433
|
subscribeStateChange() {
|
|
2291
2434
|
this.stateSubscription = this.service.stateChange.subscribe((state) => {
|
|
2292
|
-
if (this.service.options.draggable) {
|
|
2435
|
+
if (this.service.options().draggable) {
|
|
2293
2436
|
if (state === 'maximized') {
|
|
2294
2437
|
this.unsubscribeDrag();
|
|
2295
2438
|
}
|
|
@@ -2331,8 +2474,8 @@ class WindowTitleBarComponent {
|
|
|
2331
2474
|
*/
|
|
2332
2475
|
handle(ev) {
|
|
2333
2476
|
const target = ev.target;
|
|
2334
|
-
const state = this.service.options.state;
|
|
2335
|
-
if (!hasClasses(target, 'k-icon') && !isFocusable(target, false) && this.service.options.resizable) {
|
|
2477
|
+
const state = this.service.options().state;
|
|
2478
|
+
if (!hasClasses(target, 'k-icon') && !isFocusable(target, false) && this.service.options().resizable) {
|
|
2336
2479
|
if (state === 'default') {
|
|
2337
2480
|
this.service.maximizeAction();
|
|
2338
2481
|
}
|
|
@@ -2342,10 +2485,10 @@ class WindowTitleBarComponent {
|
|
|
2342
2485
|
}
|
|
2343
2486
|
}
|
|
2344
2487
|
get isDraggable() {
|
|
2345
|
-
const options = this.service.options;
|
|
2488
|
+
const options = this.service.options();
|
|
2346
2489
|
return options.draggable && options.state !== 'maximized';
|
|
2347
2490
|
}
|
|
2348
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: DragResizeService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2491
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: DragResizeService }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
2349
2492
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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: `
|
|
2350
2493
|
@if (!template) {
|
|
2351
2494
|
<ng-content></ng-content>
|
|
@@ -2356,7 +2499,7 @@ class WindowTitleBarComponent {
|
|
|
2356
2499
|
[ngTemplateOutletContext]="{'$implicit': service}">
|
|
2357
2500
|
</ng-template>
|
|
2358
2501
|
}
|
|
2359
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
2502
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2360
2503
|
}
|
|
2361
2504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowTitleBarComponent, decorators: [{
|
|
2362
2505
|
type: Component,
|
|
@@ -2374,9 +2517,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
2374
2517
|
}
|
|
2375
2518
|
`,
|
|
2376
2519
|
standalone: true,
|
|
2520
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2377
2521
|
imports: [NgTemplateOutlet]
|
|
2378
2522
|
}]
|
|
2379
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragResizeService }, { type: i0.NgZone }], propDecorators: { template: [{
|
|
2523
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragResizeService }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { template: [{
|
|
2380
2524
|
type: Input
|
|
2381
2525
|
}], id: [{
|
|
2382
2526
|
type: Input
|
|
@@ -2429,7 +2573,7 @@ class NavigationService {
|
|
|
2429
2573
|
}
|
|
2430
2574
|
}
|
|
2431
2575
|
handleArrow(key, ev) {
|
|
2432
|
-
const options = this.window.options;
|
|
2576
|
+
const options = this.window.options();
|
|
2433
2577
|
if (ev.altKey) {
|
|
2434
2578
|
this.handleStateChange(key, options.state);
|
|
2435
2579
|
return;
|
|
@@ -2445,7 +2589,7 @@ class NavigationService {
|
|
|
2445
2589
|
this.window.closeAction();
|
|
2446
2590
|
}
|
|
2447
2591
|
handleDrag(key) {
|
|
2448
|
-
const options = this.window.options;
|
|
2592
|
+
const options = this.window.options();
|
|
2449
2593
|
if (!options.draggable) {
|
|
2450
2594
|
return;
|
|
2451
2595
|
}
|
|
@@ -2479,7 +2623,7 @@ class NavigationService {
|
|
|
2479
2623
|
this.window.change.emit(ev);
|
|
2480
2624
|
}
|
|
2481
2625
|
handleResize(key) {
|
|
2482
|
-
const options = this.window.options;
|
|
2626
|
+
const options = this.window.options();
|
|
2483
2627
|
if (!options.resizable) {
|
|
2484
2628
|
return;
|
|
2485
2629
|
}
|
|
@@ -2514,7 +2658,7 @@ class NavigationService {
|
|
|
2514
2658
|
if (isPresent(ev.width) || isPresent(ev.height)) {
|
|
2515
2659
|
OFFSET_STYLES.forEach((style) => {
|
|
2516
2660
|
if (isPresent(ev[style])) {
|
|
2517
|
-
this.window.options[style] = ev[style];
|
|
2661
|
+
this.window.options()[style] = ev[style];
|
|
2518
2662
|
}
|
|
2519
2663
|
});
|
|
2520
2664
|
this.window.change.emit(ev);
|
|
@@ -2599,7 +2743,7 @@ class WindowCloseActionDirective extends Button {
|
|
|
2599
2743
|
<span class="k-button-icon" [ngClass]="iconClass"></span>
|
|
2600
2744
|
}
|
|
2601
2745
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
2602
|
-
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2746
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2603
2747
|
}
|
|
2604
2748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowCloseActionDirective, decorators: [{
|
|
2605
2749
|
type: Component,
|
|
@@ -2632,7 +2776,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
2632
2776
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
2633
2777
|
`,
|
|
2634
2778
|
standalone: true,
|
|
2635
|
-
imports: [IconWrapperComponent, NgClass]
|
|
2779
|
+
imports: [IconWrapperComponent, NgClass],
|
|
2780
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
2636
2781
|
}]
|
|
2637
2782
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
|
|
2638
2783
|
type: Optional
|
|
@@ -2660,16 +2805,22 @@ class WindowRestoreActionDirective extends Button {
|
|
|
2660
2805
|
/**
|
|
2661
2806
|
* @hidden
|
|
2662
2807
|
*/
|
|
2663
|
-
window
|
|
2808
|
+
set window(value) {
|
|
2809
|
+
this._window.set(value);
|
|
2810
|
+
}
|
|
2811
|
+
get window() {
|
|
2812
|
+
return this._window();
|
|
2813
|
+
}
|
|
2664
2814
|
/**
|
|
2665
2815
|
* @hidden
|
|
2666
2816
|
*/
|
|
2667
2817
|
windowRestoreIcon = windowRestoreIcon;
|
|
2818
|
+
_window = signal(null, ...(ngDevMode ? [{ debugName: "_window" }] : /* istanbul ignore next */ []));
|
|
2668
2819
|
buttonType = 'button';
|
|
2669
2820
|
buttonClass = true;
|
|
2670
2821
|
constructor(el, renderer, _service, localization, ngZone) {
|
|
2671
2822
|
super(el, renderer, null, localization, ngZone);
|
|
2672
|
-
this.
|
|
2823
|
+
this._window.set(_service);
|
|
2673
2824
|
this.fillMode = 'flat';
|
|
2674
2825
|
this.size = 'xsmall';
|
|
2675
2826
|
this.icon = 'window-restore';
|
|
@@ -2683,7 +2834,7 @@ class WindowRestoreActionDirective extends Button {
|
|
|
2683
2834
|
}
|
|
2684
2835
|
}
|
|
2685
2836
|
get visible() {
|
|
2686
|
-
return this.window.options.state === 'default' ? 'none' : 'inline-flex';
|
|
2837
|
+
return this.window.options().state === 'default' ? 'none' : 'inline-flex';
|
|
2687
2838
|
}
|
|
2688
2839
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowRestoreActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2689
2840
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowRestoreActionDirective, isStandalone: true, selector: "button[kendoWindowRestoreAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-titlebar-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
|
|
@@ -2709,7 +2860,7 @@ class WindowRestoreActionDirective extends Button {
|
|
|
2709
2860
|
<span class="k-button-icon" [ngClass]="iconClass"></span>
|
|
2710
2861
|
}
|
|
2711
2862
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
2712
|
-
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2863
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2713
2864
|
}
|
|
2714
2865
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowRestoreActionDirective, decorators: [{
|
|
2715
2866
|
type: Component,
|
|
@@ -2742,7 +2893,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
2742
2893
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
2743
2894
|
`,
|
|
2744
2895
|
standalone: true,
|
|
2745
|
-
imports: [IconWrapperComponent, NgClass]
|
|
2896
|
+
imports: [IconWrapperComponent, NgClass],
|
|
2897
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
2746
2898
|
}]
|
|
2747
2899
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
|
|
2748
2900
|
type: Optional
|
|
@@ -2796,7 +2948,7 @@ class WindowMaximizeActionDirective extends Button {
|
|
|
2796
2948
|
}
|
|
2797
2949
|
}
|
|
2798
2950
|
get visible() {
|
|
2799
|
-
return this.window.options.state === 'default' ? 'inline-flex' : 'none';
|
|
2951
|
+
return this.window.options().state === 'default' ? 'inline-flex' : 'none';
|
|
2800
2952
|
}
|
|
2801
2953
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowMaximizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2802
2954
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowMaximizeActionDirective, isStandalone: true, selector: "button[kendoWindowMaximizeAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-titlebar-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
|
|
@@ -2822,7 +2974,7 @@ class WindowMaximizeActionDirective extends Button {
|
|
|
2822
2974
|
<span class="k-button-icon" [ngClass]="iconClass"></span>
|
|
2823
2975
|
}
|
|
2824
2976
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
2825
|
-
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2977
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2826
2978
|
}
|
|
2827
2979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowMaximizeActionDirective, decorators: [{
|
|
2828
2980
|
type: Component,
|
|
@@ -2855,7 +3007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
2855
3007
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
2856
3008
|
`,
|
|
2857
3009
|
standalone: true,
|
|
2858
|
-
imports: [IconWrapperComponent, NgClass]
|
|
3010
|
+
imports: [IconWrapperComponent, NgClass],
|
|
3011
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
2859
3012
|
}]
|
|
2860
3013
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
|
|
2861
3014
|
type: Optional
|
|
@@ -2909,7 +3062,7 @@ class WindowMinimizeActionDirective extends Button {
|
|
|
2909
3062
|
}
|
|
2910
3063
|
}
|
|
2911
3064
|
get visible() {
|
|
2912
|
-
return this.window.options.state === 'default' ? 'inline-flex' : 'none';
|
|
3065
|
+
return this.window.options().state === 'default' ? 'inline-flex' : 'none';
|
|
2913
3066
|
}
|
|
2914
3067
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowMinimizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2915
3068
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowMinimizeActionDirective, isStandalone: true, selector: "button[kendoWindowMinimizeAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-titlebar-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
|
|
@@ -2935,7 +3088,7 @@ class WindowMinimizeActionDirective extends Button {
|
|
|
2935
3088
|
<span class="k-button-icon" [ngClass]="iconClass"></span>
|
|
2936
3089
|
}
|
|
2937
3090
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
2938
|
-
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3091
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2939
3092
|
}
|
|
2940
3093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowMinimizeActionDirective, decorators: [{
|
|
2941
3094
|
type: Component,
|
|
@@ -2968,7 +3121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
2968
3121
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
2969
3122
|
`,
|
|
2970
3123
|
standalone: true,
|
|
2971
|
-
imports: [IconWrapperComponent, NgClass]
|
|
3124
|
+
imports: [IconWrapperComponent, NgClass],
|
|
3125
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
2972
3126
|
}]
|
|
2973
3127
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
|
|
2974
3128
|
type: Optional
|
|
@@ -3007,26 +3161,38 @@ class WindowComponent {
|
|
|
3007
3161
|
navigation;
|
|
3008
3162
|
ngZone;
|
|
3009
3163
|
localization;
|
|
3164
|
+
injector;
|
|
3010
3165
|
/**
|
|
3011
3166
|
* Specifies the query selector used to set the initial focus ([see examples](https://www.telerik.com/kendo-angular-ui/components/dialogs/window/initial-focus)).
|
|
3012
3167
|
*
|
|
3013
3168
|
* @remarks
|
|
3014
3169
|
* This property is related to accessibility.
|
|
3015
3170
|
*/
|
|
3016
|
-
autoFocusedElement
|
|
3171
|
+
set autoFocusedElement(value) {
|
|
3172
|
+
this._autoFocusedElement.set(value);
|
|
3173
|
+
}
|
|
3174
|
+
get autoFocusedElement() {
|
|
3175
|
+
return this._autoFocusedElement();
|
|
3176
|
+
}
|
|
3017
3177
|
/**
|
|
3018
3178
|
* Sets the text in the title bar.
|
|
3019
3179
|
*/
|
|
3020
|
-
title
|
|
3180
|
+
set title(value) {
|
|
3181
|
+
this._title.set(value);
|
|
3182
|
+
}
|
|
3183
|
+
get title() {
|
|
3184
|
+
return this._title();
|
|
3185
|
+
}
|
|
3021
3186
|
/**
|
|
3022
3187
|
* Specifies if the user can drag the component.
|
|
3023
3188
|
* @default true
|
|
3024
3189
|
*/
|
|
3025
3190
|
set draggable(value) {
|
|
3026
3191
|
this.options.draggable = value;
|
|
3192
|
+
this._draggable.set(value);
|
|
3027
3193
|
}
|
|
3028
3194
|
get draggable() {
|
|
3029
|
-
return this.options.draggable;
|
|
3195
|
+
return this._draggable() ?? this.options.draggable;
|
|
3030
3196
|
}
|
|
3031
3197
|
/**
|
|
3032
3198
|
* Specifies if the user can resize the component.
|
|
@@ -3034,19 +3200,20 @@ class WindowComponent {
|
|
|
3034
3200
|
*/
|
|
3035
3201
|
set resizable(value) {
|
|
3036
3202
|
this.options.resizable = value;
|
|
3203
|
+
this._resizable.set(value);
|
|
3037
3204
|
}
|
|
3038
3205
|
get resizable() {
|
|
3039
|
-
return this.options.resizable;
|
|
3206
|
+
return this._resizable() ?? this.options.resizable;
|
|
3040
3207
|
}
|
|
3041
3208
|
/**
|
|
3042
3209
|
* @hidden
|
|
3043
3210
|
*/
|
|
3044
3211
|
set cssClass(classes) {
|
|
3045
|
-
this.setServiceClasses(this._cssClass, classes);
|
|
3046
|
-
this._cssClass
|
|
3212
|
+
this.setServiceClasses(this._cssClass(), classes);
|
|
3213
|
+
this._cssClass.set(classes);
|
|
3047
3214
|
}
|
|
3048
3215
|
get cssClass() {
|
|
3049
|
-
return this._cssClass;
|
|
3216
|
+
return this._cssClass();
|
|
3050
3217
|
}
|
|
3051
3218
|
/**
|
|
3052
3219
|
* @hidden
|
|
@@ -3056,30 +3223,36 @@ class WindowComponent {
|
|
|
3056
3223
|
const el = this.el.nativeElement;
|
|
3057
3224
|
const dir = el.getAttribute('dir');
|
|
3058
3225
|
const tIndex = el.getAttribute('tabindex');
|
|
3059
|
-
if (this.
|
|
3060
|
-
this.
|
|
3226
|
+
if (this._direction() !== dir) {
|
|
3227
|
+
this._direction.set(dir);
|
|
3061
3228
|
}
|
|
3062
3229
|
if (this.tabIndex !== tIndex) {
|
|
3063
3230
|
this.tabIndex = tIndex;
|
|
3064
3231
|
}
|
|
3065
|
-
this._htmlAttributes
|
|
3232
|
+
this._htmlAttributes.set(attributes);
|
|
3066
3233
|
}
|
|
3067
3234
|
get htmlAttributes() {
|
|
3068
|
-
return this._htmlAttributes;
|
|
3235
|
+
return this._htmlAttributes();
|
|
3069
3236
|
}
|
|
3070
3237
|
/**
|
|
3071
3238
|
* Specifies if the content stays in the DOM when minimized.
|
|
3072
3239
|
* @default false
|
|
3073
3240
|
*/
|
|
3074
|
-
keepContent
|
|
3241
|
+
set keepContent(value) {
|
|
3242
|
+
this._keepContent.set(value);
|
|
3243
|
+
}
|
|
3244
|
+
get keepContent() {
|
|
3245
|
+
return this._keepContent();
|
|
3246
|
+
}
|
|
3075
3247
|
/**
|
|
3076
3248
|
* Sets the initial state of the Window.
|
|
3077
3249
|
*/
|
|
3078
3250
|
set state(value) {
|
|
3079
3251
|
this.options.state = value;
|
|
3252
|
+
this._state.set(value);
|
|
3080
3253
|
}
|
|
3081
3254
|
get state() {
|
|
3082
|
-
return this.options.state;
|
|
3255
|
+
return this._state() ?? this.options.state;
|
|
3083
3256
|
}
|
|
3084
3257
|
/**
|
|
3085
3258
|
* Sets the minimum width in pixels.
|
|
@@ -3087,9 +3260,10 @@ class WindowComponent {
|
|
|
3087
3260
|
*/
|
|
3088
3261
|
set minWidth(value) {
|
|
3089
3262
|
this.setOption('minWidth', value);
|
|
3263
|
+
this._minWidth.set(value);
|
|
3090
3264
|
}
|
|
3091
3265
|
get minWidth() {
|
|
3092
|
-
return this.options.minWidth;
|
|
3266
|
+
return this._minWidth() ?? this.options.minWidth;
|
|
3093
3267
|
}
|
|
3094
3268
|
/**
|
|
3095
3269
|
* Sets the minimum height in pixels.
|
|
@@ -3097,45 +3271,50 @@ class WindowComponent {
|
|
|
3097
3271
|
*/
|
|
3098
3272
|
set minHeight(value) {
|
|
3099
3273
|
this.setOption('minHeight', value);
|
|
3274
|
+
this._minHeight.set(value);
|
|
3100
3275
|
}
|
|
3101
3276
|
get minHeight() {
|
|
3102
|
-
return this.options.minHeight;
|
|
3277
|
+
return this._minHeight() ?? this.options.minHeight;
|
|
3103
3278
|
}
|
|
3104
3279
|
/**
|
|
3105
3280
|
* Sets the width in pixels.
|
|
3106
3281
|
*/
|
|
3107
3282
|
set width(value) {
|
|
3108
3283
|
this.setOption('width', value);
|
|
3284
|
+
this._width.set(value);
|
|
3109
3285
|
}
|
|
3110
3286
|
get width() {
|
|
3111
|
-
return this.options.width;
|
|
3287
|
+
return this._width() ?? this.options.width;
|
|
3112
3288
|
}
|
|
3113
3289
|
/**
|
|
3114
3290
|
* Sets the height in pixels.
|
|
3115
3291
|
*/
|
|
3116
3292
|
set height(value) {
|
|
3117
3293
|
this.setOption('height', value);
|
|
3294
|
+
this._height.set(value);
|
|
3118
3295
|
}
|
|
3119
3296
|
get height() {
|
|
3120
|
-
return this.options.height;
|
|
3297
|
+
return this._height() ?? this.options.height;
|
|
3121
3298
|
}
|
|
3122
3299
|
/**
|
|
3123
3300
|
* Sets the initial top offset in pixels.
|
|
3124
3301
|
*/
|
|
3125
3302
|
set top(value) {
|
|
3126
3303
|
this.setOption('top', value);
|
|
3304
|
+
this._top.set(value);
|
|
3127
3305
|
}
|
|
3128
3306
|
get top() {
|
|
3129
|
-
return this.options.top;
|
|
3307
|
+
return this._top() ?? this.options.top;
|
|
3130
3308
|
}
|
|
3131
3309
|
/**
|
|
3132
3310
|
* Sets the initial left offset in pixels.
|
|
3133
3311
|
*/
|
|
3134
3312
|
set left(value) {
|
|
3135
3313
|
this.setOption('left', value);
|
|
3314
|
+
this._left.set(value);
|
|
3136
3315
|
}
|
|
3137
3316
|
get left() {
|
|
3138
|
-
return this.options.left;
|
|
3317
|
+
return this._left() ?? this.options.left;
|
|
3139
3318
|
}
|
|
3140
3319
|
get closeButtonTitle() {
|
|
3141
3320
|
if (this.messages && this.messages.closeTitle) {
|
|
@@ -3225,7 +3404,7 @@ class WindowComponent {
|
|
|
3225
3404
|
role = 'dialog';
|
|
3226
3405
|
hostClass = true;
|
|
3227
3406
|
get dir() {
|
|
3228
|
-
return this.
|
|
3407
|
+
return this._direction();
|
|
3229
3408
|
}
|
|
3230
3409
|
titleBarView;
|
|
3231
3410
|
titleBarContent;
|
|
@@ -3235,28 +3414,41 @@ class WindowComponent {
|
|
|
3235
3414
|
* @hidden
|
|
3236
3415
|
*/
|
|
3237
3416
|
titleId = null;
|
|
3238
|
-
_htmlAttributes;
|
|
3239
|
-
_cssClass;
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3417
|
+
_htmlAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_htmlAttributes" }] : /* istanbul ignore next */ []));
|
|
3418
|
+
_cssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClass" }] : /* istanbul ignore next */ []));
|
|
3419
|
+
_autoFocusedElement = signal(undefined, ...(ngDevMode ? [{ debugName: "_autoFocusedElement" }] : /* istanbul ignore next */ []));
|
|
3420
|
+
_title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
|
|
3421
|
+
_draggable = signal(undefined, ...(ngDevMode ? [{ debugName: "_draggable" }] : /* istanbul ignore next */ []));
|
|
3422
|
+
_resizable = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizable" }] : /* istanbul ignore next */ []));
|
|
3423
|
+
_keepContent = signal(false, ...(ngDevMode ? [{ debugName: "_keepContent" }] : /* istanbul ignore next */ []));
|
|
3424
|
+
_state = signal(undefined, ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
|
|
3425
|
+
_minWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_minWidth" }] : /* istanbul ignore next */ []));
|
|
3426
|
+
_minHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_minHeight" }] : /* istanbul ignore next */ []));
|
|
3427
|
+
_width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []));
|
|
3428
|
+
_height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : /* istanbul ignore next */ []));
|
|
3429
|
+
_top = signal(undefined, ...(ngDevMode ? [{ debugName: "_top" }] : /* istanbul ignore next */ []));
|
|
3430
|
+
_left = signal(undefined, ...(ngDevMode ? [{ debugName: "_left" }] : /* istanbul ignore next */ []));
|
|
3431
|
+
_direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : /* istanbul ignore next */ []));
|
|
3432
|
+
dragged = signal(false, ...(ngDevMode ? [{ debugName: "dragged" }] : /* istanbul ignore next */ []));
|
|
3433
|
+
resized = signal(false, ...(ngDevMode ? [{ debugName: "resized" }] : /* istanbul ignore next */ []));
|
|
3243
3434
|
windowSubscription = new Subscription();
|
|
3244
3435
|
domSubs = new Subscription();
|
|
3245
3436
|
localizationChangeSubscription;
|
|
3246
|
-
stateAppliedByAction = null;
|
|
3247
|
-
constructor(el, renderer, service, navigation, ngZone, localization) {
|
|
3437
|
+
stateAppliedByAction = signal(null, ...(ngDevMode ? [{ debugName: "stateAppliedByAction" }] : /* istanbul ignore next */ []));
|
|
3438
|
+
constructor(el, renderer, service, navigation, ngZone, localization, injector) {
|
|
3248
3439
|
this.el = el;
|
|
3249
3440
|
this.renderer = renderer;
|
|
3250
3441
|
this.service = service;
|
|
3251
3442
|
this.navigation = navigation;
|
|
3252
3443
|
this.ngZone = ngZone;
|
|
3253
3444
|
this.localization = localization;
|
|
3445
|
+
this.injector = injector;
|
|
3254
3446
|
const isValid = validatePackage(packageMetadata);
|
|
3255
3447
|
this.licenseMessage = getLicenseMessage(packageMetadata);
|
|
3256
3448
|
this.showLicenseWatermark = shouldShowValidationUI(isValid);
|
|
3257
|
-
this.
|
|
3449
|
+
this._direction.set(this.localization.rtl ? 'rtl' : 'ltr');
|
|
3258
3450
|
this.localizationChangeSubscription = this.localization.changes
|
|
3259
|
-
.subscribe(({ rtl }) => this.
|
|
3451
|
+
.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr'));
|
|
3260
3452
|
this.resizeDirections = RESIZE_DIRECTIONS;
|
|
3261
3453
|
this.subscribeEvents();
|
|
3262
3454
|
this.titleId = this.generateTitleId();
|
|
@@ -3266,10 +3458,12 @@ class WindowComponent {
|
|
|
3266
3458
|
return;
|
|
3267
3459
|
}
|
|
3268
3460
|
this.setNextZIndex();
|
|
3269
|
-
|
|
3461
|
+
afterNextRender(() => {
|
|
3270
3462
|
this.handleInitialFocus();
|
|
3271
|
-
});
|
|
3272
|
-
|
|
3463
|
+
}, { injector: this.injector });
|
|
3464
|
+
afterEveryRender(() => {
|
|
3465
|
+
this.setInitialOffset();
|
|
3466
|
+
}, { injector: this.injector });
|
|
3273
3467
|
this.initDomEvents();
|
|
3274
3468
|
if (this.titleBarView && !this.titleBarView.template) {
|
|
3275
3469
|
this.renderer.setAttribute(this.el.nativeElement, 'aria-labelledby', this.titleId);
|
|
@@ -3295,8 +3489,8 @@ class WindowComponent {
|
|
|
3295
3489
|
}
|
|
3296
3490
|
}
|
|
3297
3491
|
if (isChanged('state', changes)) {
|
|
3298
|
-
const appliedByAction = this.stateAppliedByAction === changes['state'].currentValue;
|
|
3299
|
-
this.stateAppliedByAction
|
|
3492
|
+
const appliedByAction = this.stateAppliedByAction() === changes['state'].currentValue;
|
|
3493
|
+
this.stateAppliedByAction.set(null);
|
|
3300
3494
|
if (!appliedByAction) {
|
|
3301
3495
|
this.service.applyManualState(changes['state'].previousValue);
|
|
3302
3496
|
this.updateAllOffset();
|
|
@@ -3339,6 +3533,12 @@ class WindowComponent {
|
|
|
3339
3533
|
setDimension(dimension, value) {
|
|
3340
3534
|
this.setOption(dimension, value);
|
|
3341
3535
|
this.setStyle(dimension, value);
|
|
3536
|
+
if (dimension === 'width') {
|
|
3537
|
+
this._width.set(value);
|
|
3538
|
+
}
|
|
3539
|
+
else if (dimension === 'height') {
|
|
3540
|
+
this._height.set(value);
|
|
3541
|
+
}
|
|
3342
3542
|
}
|
|
3343
3543
|
/**
|
|
3344
3544
|
* Manually updates the `top` or `left` offset of the Window.
|
|
@@ -3352,6 +3552,12 @@ class WindowComponent {
|
|
|
3352
3552
|
setOffset(offset, value) {
|
|
3353
3553
|
this.setOption(offset, value);
|
|
3354
3554
|
this.setStyle(offset, value);
|
|
3555
|
+
if (offset === 'top') {
|
|
3556
|
+
this._top.set(value);
|
|
3557
|
+
}
|
|
3558
|
+
else if (offset === 'left') {
|
|
3559
|
+
this._left.set(value);
|
|
3560
|
+
}
|
|
3355
3561
|
}
|
|
3356
3562
|
get showDefaultTitleBar() {
|
|
3357
3563
|
return !isPresent(this.titleBarContent);
|
|
@@ -3395,14 +3601,14 @@ class WindowComponent {
|
|
|
3395
3601
|
this.el.nativeElement.focus({ preventScroll: true });
|
|
3396
3602
|
}));
|
|
3397
3603
|
this.windowSubscription.add(this.service.dragStart.subscribe(() => {
|
|
3398
|
-
this.
|
|
3604
|
+
this.dragged.set(true);
|
|
3399
3605
|
this.ngZone.run(() => {
|
|
3400
3606
|
this.dragStart.emit();
|
|
3401
3607
|
});
|
|
3402
3608
|
}));
|
|
3403
3609
|
this.windowSubscription.add(this.service.dragEnd.subscribe(() => {
|
|
3404
|
-
if (this.
|
|
3405
|
-
this.
|
|
3610
|
+
if (this.dragged()) {
|
|
3611
|
+
this.dragged.set(false);
|
|
3406
3612
|
this.ngZone.run(() => {
|
|
3407
3613
|
this.dragEnd.emit();
|
|
3408
3614
|
});
|
|
@@ -3412,14 +3618,14 @@ class WindowComponent {
|
|
|
3412
3618
|
this.close.emit();
|
|
3413
3619
|
}));
|
|
3414
3620
|
this.windowSubscription.add(this.service.resizeStart.subscribe(() => {
|
|
3415
|
-
this.resized
|
|
3621
|
+
this.resized.set(true);
|
|
3416
3622
|
this.ngZone.run(() => {
|
|
3417
3623
|
this.resizeStart.emit();
|
|
3418
3624
|
});
|
|
3419
3625
|
}));
|
|
3420
3626
|
this.windowSubscription.add(this.service.resizeEnd.subscribe(() => {
|
|
3421
|
-
if (this.resized) {
|
|
3422
|
-
this.resized
|
|
3627
|
+
if (this.resized()) {
|
|
3628
|
+
this.resized.set(false);
|
|
3423
3629
|
this.ngZone.run(() => {
|
|
3424
3630
|
this.resizeEnd.emit();
|
|
3425
3631
|
});
|
|
@@ -3429,6 +3635,9 @@ class WindowComponent {
|
|
|
3429
3635
|
OFFSET_STYLES.forEach((style) => {
|
|
3430
3636
|
if (isPresent(ev[style])) {
|
|
3431
3637
|
this.setStyle(style, ev[style]);
|
|
3638
|
+
// Keep the backing signal in sync so afterEveryRender's updateAllOffset
|
|
3639
|
+
// does not override keyboard/drag resize changes with the stale @Input value.
|
|
3640
|
+
this['_' + style].set(ev[style]);
|
|
3432
3641
|
if (this.state !== 'maximized') {
|
|
3433
3642
|
const emitter = this[style + 'Change'];
|
|
3434
3643
|
if (emitter.observers.length) {
|
|
@@ -3441,10 +3650,11 @@ class WindowComponent {
|
|
|
3441
3650
|
});
|
|
3442
3651
|
}));
|
|
3443
3652
|
this.windowSubscription.add(this.service.stateChange.subscribe((state) => {
|
|
3444
|
-
if (isPresent(this.service.lastAction)) {
|
|
3653
|
+
if (isPresent(this.service.lastAction())) {
|
|
3445
3654
|
this.updateAllOffset();
|
|
3446
|
-
this.service.lastAction
|
|
3447
|
-
this.stateAppliedByAction
|
|
3655
|
+
this.service.lastAction.set(null);
|
|
3656
|
+
this.stateAppliedByAction.set(state);
|
|
3657
|
+
this._state.set(state);
|
|
3448
3658
|
this.stateChange.emit(state);
|
|
3449
3659
|
}
|
|
3450
3660
|
}));
|
|
@@ -3514,7 +3724,7 @@ class WindowComponent {
|
|
|
3514
3724
|
this.renderer.removeStyle(this.el.nativeElement, style);
|
|
3515
3725
|
}
|
|
3516
3726
|
get options() {
|
|
3517
|
-
return this.service.options;
|
|
3727
|
+
return this.service.options();
|
|
3518
3728
|
}
|
|
3519
3729
|
setOption(style, value) {
|
|
3520
3730
|
if (typeof value !== 'number' && typeof value !== 'string') {
|
|
@@ -3542,7 +3752,7 @@ class WindowComponent {
|
|
|
3542
3752
|
generateTitleId() {
|
|
3543
3753
|
return 'kendo-window-title-' + Math.ceil(Math.random() * 1000000).toString();
|
|
3544
3754
|
}
|
|
3545
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }, { token: NavigationService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3755
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }, { token: NavigationService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
3546
3756
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowComponent, isStandalone: true, selector: "kendo-window", inputs: { autoFocusedElement: "autoFocusedElement", title: "title", draggable: "draggable", resizable: "resizable", keepContent: "keepContent", state: "state", minWidth: "minWidth", minHeight: "minHeight", width: "width", height: "height", top: "top", left: "left" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", resizeStart: "resizeStart", resizeEnd: "resizeEnd", close: "close", widthChange: "widthChange", heightChange: "heightChange", topChange: "topChange", leftChange: "leftChange", stateChange: "stateChange" }, host: { listeners: { "focus": "onComponentFocus()", "blur": "onComponentBlur()" }, properties: { "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.k-window": "this.hostClass", "attr.dir": "this.dir", "style.minWidth": "this.styleMinWidth", "style.minHeight": "this.styleMinHeight", "style.position": "this.stylePosition", "class.k-window-maximized": "this.wrapperMaximizedClass", "class.k-window-minimized": "this.wrapperMinimizedClass" } }, providers: [
|
|
3547
3757
|
DragResizeService,
|
|
3548
3758
|
NavigationService,
|
|
@@ -3611,7 +3821,7 @@ class WindowComponent {
|
|
|
3611
3821
|
@if (showLicenseWatermark) {
|
|
3612
3822
|
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
3613
3823
|
}
|
|
3614
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDialogLocalizedMessages],\n [kendoWindowLocalizedMessages],\n [kendoDialogTitleBarLocalizedMessages]\n " }, { kind: "component", type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: ["template", "id"] }, { kind: "component", type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: ["window"], exportAs: ["kendoWindowMinimizeAction"] }, { kind: "component", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: ["window"], exportAs: ["kendoWindowMaximizeAction"] }, { kind: "component", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: ["window"], exportAs: ["kendoWindowRestoreAction"] }, { kind: "component", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: ["window"], exportAs: ["kendoWindowCloseAction"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[kendoWindowResizeHandle]", inputs: ["direction"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
|
|
3824
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDialogLocalizedMessages],\n [kendoWindowLocalizedMessages],\n [kendoDialogTitleBarLocalizedMessages]\n " }, { kind: "component", type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: ["template", "id"] }, { kind: "component", type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: ["window"], exportAs: ["kendoWindowMinimizeAction"] }, { kind: "component", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: ["window"], exportAs: ["kendoWindowMaximizeAction"] }, { kind: "component", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: ["window"], exportAs: ["kendoWindowRestoreAction"] }, { kind: "component", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: ["window"], exportAs: ["kendoWindowCloseAction"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[kendoWindowResizeHandle]", inputs: ["direction"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3615
3825
|
}
|
|
3616
3826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowComponent, decorators: [{
|
|
3617
3827
|
type: Component,
|
|
@@ -3689,9 +3899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
3689
3899
|
}
|
|
3690
3900
|
`,
|
|
3691
3901
|
standalone: true,
|
|
3902
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3692
3903
|
imports: [LocalizedMessagesDirective, WindowTitleBarComponent, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowCloseActionDirective, NgTemplateOutlet, ResizeHandleDirective, DraggableDirective, WatermarkOverlayComponent]
|
|
3693
3904
|
}]
|
|
3694
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService }, { type: NavigationService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }], propDecorators: { autoFocusedElement: [{
|
|
3905
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService }, { type: NavigationService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.Injector }], propDecorators: { autoFocusedElement: [{
|
|
3695
3906
|
type: Input
|
|
3696
3907
|
}], title: [{
|
|
3697
3908
|
type: Input
|
|
@@ -3900,12 +4111,12 @@ class WindowSettings {
|
|
|
3900
4111
|
* @hidden
|
|
3901
4112
|
*/
|
|
3902
4113
|
class WindowContainerService {
|
|
3903
|
-
static container = null;
|
|
4114
|
+
static container = signal(null, ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
|
|
3904
4115
|
set container(container) {
|
|
3905
|
-
WindowContainerService.container
|
|
4116
|
+
WindowContainerService.container.set(container);
|
|
3906
4117
|
}
|
|
3907
4118
|
get container() {
|
|
3908
|
-
return WindowContainerService.container;
|
|
4119
|
+
return WindowContainerService.container();
|
|
3909
4120
|
}
|
|
3910
4121
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3911
4122
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowContainerService, providedIn: 'root' });
|