@progress/kendo-angular-popup 25.0.0-develop.1 → 25.0.0-develop.12
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.
- package/fesm2022/progress-kendo-angular-popup.mjs +78 -76
- package/index.d.ts +41 -23
- package/package-metadata.mjs +2 -2
- package/package.json +4 -4
|
@@ -3,11 +3,11 @@
|
|
|
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 { Injectable, InjectionToken, Inject, Optional, EventEmitter, isDevMode, ViewChild, Output, Input, Component, EnvironmentInjector, createComponent, TemplateRef, NgModule } from '@angular/core';
|
|
6
|
+
import { Injectable, InjectionToken, Inject, Optional, EventEmitter, isDevMode, signal, afterNextRender, afterEveryRender, ViewChild, Output, Input, ChangeDetectionStrategy, Component, EnvironmentInjector, createComponent, TemplateRef, NgModule } from '@angular/core';
|
|
7
7
|
import { siblingContainer, parents, addScroll, align, boundingOffset, offset, positionWithScroll, removeScroll, restrictToView, scrollPosition, getWindowViewPort } from '@progress/kendo-popup-common';
|
|
8
8
|
import * as i1$1 from '@progress/kendo-angular-common';
|
|
9
9
|
import { isDocumentAvailable, hasObservers, ResizeSensorComponent, KENDO_RESIZESENSOR, ResizeBatchService } from '@progress/kendo-angular-common';
|
|
10
|
-
import { fromEvent, merge
|
|
10
|
+
import { fromEvent, merge } from 'rxjs';
|
|
11
11
|
import { auditTime } from 'rxjs/operators';
|
|
12
12
|
import * as i1 from '@angular/animations';
|
|
13
13
|
import { style, animate } from '@angular/animations';
|
|
@@ -452,18 +452,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
452
452
|
*/
|
|
453
453
|
class ResizeService {
|
|
454
454
|
_dom;
|
|
455
|
-
|
|
455
|
+
zone;
|
|
456
456
|
subscription;
|
|
457
|
-
constructor(_dom,
|
|
457
|
+
constructor(_dom, zone) {
|
|
458
458
|
this._dom = _dom;
|
|
459
|
-
this.
|
|
459
|
+
this.zone = zone;
|
|
460
460
|
}
|
|
461
461
|
subscribe(callback) {
|
|
462
462
|
if (!isDocumentAvailable()) {
|
|
463
463
|
return;
|
|
464
464
|
}
|
|
465
|
-
this.
|
|
466
|
-
this.subscription = fromEvent(this._dom.getWindow(),
|
|
465
|
+
this.zone.runOutsideAngular(() => {
|
|
466
|
+
this.subscription = fromEvent(this._dom.getWindow(), 'resize')
|
|
467
467
|
.pipe(auditTime(FRAME_DURATION))
|
|
468
468
|
.subscribe(() => callback());
|
|
469
469
|
});
|
|
@@ -493,12 +493,12 @@ const THRESHOLD_DIFF = 1;
|
|
|
493
493
|
*/
|
|
494
494
|
class ScrollableService {
|
|
495
495
|
_dom;
|
|
496
|
-
|
|
496
|
+
zone;
|
|
497
497
|
element;
|
|
498
498
|
subscription;
|
|
499
|
-
constructor(_dom,
|
|
499
|
+
constructor(_dom, zone) {
|
|
500
500
|
this._dom = _dom;
|
|
501
|
-
this.
|
|
501
|
+
this.zone = zone;
|
|
502
502
|
}
|
|
503
503
|
forElement(element) {
|
|
504
504
|
this.unsubscribe();
|
|
@@ -510,7 +510,7 @@ class ScrollableService {
|
|
|
510
510
|
return;
|
|
511
511
|
}
|
|
512
512
|
const parents = this._dom.scrollableParents(this.element);
|
|
513
|
-
this.
|
|
513
|
+
this.zone.runOutsideAngular(() => {
|
|
514
514
|
const observables = parents.map(p => fromEvent(p, "scroll").pipe(auditTime(FRAME_DURATION)));
|
|
515
515
|
const subscriber = (e) => {
|
|
516
516
|
const target = e.target;
|
|
@@ -693,8 +693,8 @@ const packageMetadata = {
|
|
|
693
693
|
productName: 'Kendo UI for Angular',
|
|
694
694
|
productCode: 'KENDOUIANGULAR',
|
|
695
695
|
productCodes: ['KENDOUIANGULAR'],
|
|
696
|
-
publishDate:
|
|
697
|
-
version: '25.0.0-develop.
|
|
696
|
+
publishDate: 1785317748,
|
|
697
|
+
version: '25.0.0-develop.12',
|
|
698
698
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
699
699
|
};
|
|
700
700
|
|
|
@@ -723,59 +723,70 @@ class PopupComponent {
|
|
|
723
723
|
_scrollableService;
|
|
724
724
|
animationService;
|
|
725
725
|
_renderer;
|
|
726
|
-
|
|
726
|
+
zone;
|
|
727
|
+
injector;
|
|
727
728
|
/**
|
|
728
729
|
* Controls the Popup animation. By default, the opening and closing animations are enabled ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/animations)).
|
|
729
730
|
* @default true
|
|
730
731
|
*/
|
|
731
|
-
animate
|
|
732
|
+
set animate(value) { this._animate.set(value); }
|
|
733
|
+
get animate() { return this._animate(); }
|
|
732
734
|
/**
|
|
733
735
|
* Sets the element to use as an anchor. The Popup opens next to this element. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-components)).
|
|
734
736
|
*/
|
|
735
|
-
anchor;
|
|
737
|
+
set anchor(value) { this._anchor.set(value); }
|
|
738
|
+
get anchor() { return this._anchor(); }
|
|
736
739
|
/**
|
|
737
740
|
* Sets the anchor pivot point ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
|
|
738
741
|
* @default '{ horizontal: "left", vertical: "bottom" }'
|
|
739
742
|
*/
|
|
740
|
-
anchorAlign
|
|
743
|
+
set anchorAlign(value) { this._anchorAlign.set(value); }
|
|
744
|
+
get anchorAlign() { return this._anchorAlign(); }
|
|
741
745
|
/**
|
|
742
746
|
* Sets the collision behavior of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary-detection)).
|
|
743
747
|
* @default '{ horizontal: "fit", vertical: "flip" }'
|
|
744
748
|
*/
|
|
745
|
-
collision
|
|
749
|
+
set collision(value) { this._collision.set(value); }
|
|
750
|
+
get collision() { return this._collision(); }
|
|
746
751
|
/**
|
|
747
752
|
* Sets the pivot point of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
|
|
748
753
|
* @default '{ horizontal: "left", vertical: "top" }'
|
|
749
754
|
*/
|
|
750
|
-
popupAlign
|
|
755
|
+
set popupAlign(value) { this._popupAlign.set(value); }
|
|
756
|
+
get popupAlign() { return this._popupAlign(); }
|
|
751
757
|
/**
|
|
752
758
|
* Controls whether the component copies the `anchor` font styles.
|
|
753
759
|
* @default false
|
|
754
760
|
*/
|
|
755
|
-
copyAnchorStyles
|
|
761
|
+
set copyAnchorStyles(value) { this._copyAnchorStyles.set(value); }
|
|
762
|
+
get copyAnchorStyles() { return this._copyAnchorStyles(); }
|
|
756
763
|
/**
|
|
757
764
|
* Sets a list of CSS classes to add to the internal animated element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/styling)).
|
|
758
765
|
*
|
|
759
766
|
* > To style the content of the Popup, use this property binding.
|
|
760
767
|
*/
|
|
761
|
-
popupClass;
|
|
768
|
+
set popupClass(value) { this._popupClass.set(value); }
|
|
769
|
+
get popupClass() { return this._popupClass(); }
|
|
762
770
|
/**
|
|
763
771
|
* Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to `absolute`.
|
|
764
772
|
*
|
|
765
773
|
* To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
|
|
766
774
|
* @default 'fixed'
|
|
767
775
|
*/
|
|
768
|
-
positionMode
|
|
776
|
+
set positionMode(value) { this._positionMode.set(value); }
|
|
777
|
+
get positionMode() { return this._positionMode(); }
|
|
769
778
|
/**
|
|
770
779
|
* Sets the absolute position of the element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-absolute-points)).
|
|
771
780
|
* The Popup opens next to this point. The Popup pivot point is defined by the `popupAlign` option. The boundary detection uses the window viewport.
|
|
772
781
|
* @default '{ left: -10000, top: 0 }'
|
|
773
782
|
*/
|
|
774
|
-
offset
|
|
783
|
+
set offset(value) { this._offset.set(value); }
|
|
784
|
+
get offset() { return this._offset(); }
|
|
775
785
|
/**
|
|
776
786
|
* Sets the margin value in pixels. Adds blank space between the Popup and the anchor ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#adding-a-margin)).
|
|
777
787
|
*/
|
|
778
|
-
margin;
|
|
788
|
+
set margin(value) { this._margin.set(value); }
|
|
789
|
+
get margin() { return this._margin(); }
|
|
779
790
|
/**
|
|
780
791
|
* Fires when the anchor scrolls outside the screen boundaries. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/closing)).
|
|
781
792
|
*/
|
|
@@ -808,12 +819,20 @@ class PopupComponent {
|
|
|
808
819
|
* @hidden
|
|
809
820
|
*/
|
|
810
821
|
renderDefaultClass = true;
|
|
811
|
-
|
|
812
|
-
|
|
822
|
+
_animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
|
|
823
|
+
_anchor = signal(undefined, ...(ngDevMode ? [{ debugName: "_anchor" }] : []));
|
|
824
|
+
_anchorAlign = signal({ horizontal: 'left', vertical: 'bottom' }, ...(ngDevMode ? [{ debugName: "_anchorAlign" }] : []));
|
|
825
|
+
_collision = signal({ horizontal: 'fit', vertical: 'flip' }, ...(ngDevMode ? [{ debugName: "_collision" }] : []));
|
|
826
|
+
_popupAlign = signal({ horizontal: 'left', vertical: 'top' }, ...(ngDevMode ? [{ debugName: "_popupAlign" }] : []));
|
|
827
|
+
_copyAnchorStyles = signal(false, ...(ngDevMode ? [{ debugName: "_copyAnchorStyles" }] : []));
|
|
828
|
+
_popupClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupClass" }] : []));
|
|
829
|
+
_positionMode = signal('fixed', ...(ngDevMode ? [{ debugName: "_positionMode" }] : []));
|
|
830
|
+
_offset = signal(DEFAULT_OFFSET, ...(ngDevMode ? [{ debugName: "_offset" }] : []));
|
|
831
|
+
_margin = signal(undefined, ...(ngDevMode ? [{ debugName: "_margin" }] : []));
|
|
832
|
+
_currentOffset = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentOffset" }] : []));
|
|
813
833
|
animationSubscriptions;
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
constructor(container, _alignService, domService, _positionService, _resizeService, _scrollableService, animationService, _renderer, _zone) {
|
|
834
|
+
resolvedPromise = Promise.resolve(null);
|
|
835
|
+
constructor(container, _alignService, domService, _positionService, _resizeService, _scrollableService, animationService, _renderer, zone, injector) {
|
|
817
836
|
this.container = container;
|
|
818
837
|
this._alignService = _alignService;
|
|
819
838
|
this.domService = domService;
|
|
@@ -822,7 +841,8 @@ class PopupComponent {
|
|
|
822
841
|
this._scrollableService = _scrollableService;
|
|
823
842
|
this.animationService = animationService;
|
|
824
843
|
this._renderer = _renderer;
|
|
825
|
-
this.
|
|
844
|
+
this.zone = zone;
|
|
845
|
+
this.injector = injector;
|
|
826
846
|
validatePackage(packageMetadata);
|
|
827
847
|
this._renderer.addClass(container.nativeElement, ANIMATION_CONTAINER);
|
|
828
848
|
this.updateFixedClass();
|
|
@@ -839,7 +859,7 @@ class PopupComponent {
|
|
|
839
859
|
this.setZIndex();
|
|
840
860
|
this.copyFontStyles();
|
|
841
861
|
this.updateFixedClass();
|
|
842
|
-
this.reposition();
|
|
862
|
+
afterNextRender(() => this.reposition(), { injector: this.injector });
|
|
843
863
|
}
|
|
844
864
|
ngOnChanges(changes) {
|
|
845
865
|
if (changes.copyAnchorStyles) {
|
|
@@ -858,18 +878,7 @@ class PopupComponent {
|
|
|
858
878
|
this.reposition();
|
|
859
879
|
}
|
|
860
880
|
ngAfterViewChecked() {
|
|
861
|
-
|
|
862
|
-
this.initialCheck = false;
|
|
863
|
-
return;
|
|
864
|
-
}
|
|
865
|
-
this._zone.runOutsideAngular(() => {
|
|
866
|
-
// workarounds https://github.com/angular/angular/issues/19094
|
|
867
|
-
// uses promise because it is executed synchronously after the content is updated
|
|
868
|
-
// does not use onStable in case the current zone is not the angular one.
|
|
869
|
-
this.unsubscribeReposition();
|
|
870
|
-
this.repositionSubscription = from(this.resolvedPromise)
|
|
871
|
-
.subscribe(this.reposition);
|
|
872
|
-
});
|
|
881
|
+
afterEveryRender(() => this.reposition(), { injector: this.injector });
|
|
873
882
|
}
|
|
874
883
|
ngOnDestroy() {
|
|
875
884
|
this.anchorViewportLeave.complete();
|
|
@@ -879,7 +888,6 @@ class PopupComponent {
|
|
|
879
888
|
this._resizeService.unsubscribe();
|
|
880
889
|
this._scrollableService.unsubscribe();
|
|
881
890
|
this.animationSubscriptions.unsubscribe();
|
|
882
|
-
this.unsubscribeReposition();
|
|
883
891
|
}
|
|
884
892
|
/**
|
|
885
893
|
* @hidden
|
|
@@ -896,13 +904,13 @@ class PopupComponent {
|
|
|
896
904
|
this.open.complete();
|
|
897
905
|
}
|
|
898
906
|
get currentOffset() {
|
|
899
|
-
return this._currentOffset;
|
|
907
|
+
return this._currentOffset();
|
|
900
908
|
}
|
|
901
909
|
set currentOffset(offset) {
|
|
902
910
|
this.setContainerStyle('left', `${offset.left}px`);
|
|
903
911
|
this.setContainerStyle('top', `${offset.top}px`);
|
|
904
912
|
this.setContainerStyle('margin', this.hasCustomOffset ? '0' : null);
|
|
905
|
-
this._currentOffset
|
|
913
|
+
this._currentOffset.set(offset);
|
|
906
914
|
}
|
|
907
915
|
setZIndex() {
|
|
908
916
|
if (this.anchor) {
|
|
@@ -917,7 +925,7 @@ class PopupComponent {
|
|
|
917
925
|
if (!this.currentOffset || isDifferentOffset(this.currentOffset, offset)) {
|
|
918
926
|
this.currentOffset = offset;
|
|
919
927
|
if (hasObservers(this.positionChange)) {
|
|
920
|
-
this.
|
|
928
|
+
this.zone.run(() => this.positionChange.emit({ offset, flip }));
|
|
921
929
|
}
|
|
922
930
|
}
|
|
923
931
|
if (this.animate) {
|
|
@@ -951,7 +959,7 @@ class PopupComponent {
|
|
|
951
959
|
this.reposition();
|
|
952
960
|
}
|
|
953
961
|
else if (hasLeaveObservers) {
|
|
954
|
-
this.
|
|
962
|
+
this.zone.run(() => {
|
|
955
963
|
this.anchorViewportLeave.emit();
|
|
956
964
|
});
|
|
957
965
|
}
|
|
@@ -974,50 +982,44 @@ class PopupComponent {
|
|
|
974
982
|
}
|
|
975
983
|
this._renderer.setStyle(this.container.nativeElement, name, value);
|
|
976
984
|
}
|
|
977
|
-
unsubscribeReposition() {
|
|
978
|
-
if (this.repositionSubscription) {
|
|
979
|
-
this.repositionSubscription.unsubscribe();
|
|
980
|
-
}
|
|
981
|
-
}
|
|
982
985
|
get hasCustomOffset() {
|
|
983
986
|
return this.offset.left !== DEFAULT_OFFSET.left || this.offset.top !== DEFAULT_OFFSET.top;
|
|
984
987
|
}
|
|
985
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupComponent, deps: [{ token: i0.ElementRef }, { token: AlignService }, { token: DOMService }, { token: PositionService }, { token: ResizeService }, { token: ScrollableService }, { token: AnimationService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
988
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupComponent, deps: [{ token: i0.ElementRef }, { token: AlignService }, { token: DOMService }, { token: PositionService }, { token: ResizeService }, { token: ScrollableService }, { token: AnimationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
986
989
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PopupComponent, isStandalone: true, selector: "kendo-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", collision: "collision", popupAlign: "popupAlign", copyAnchorStyles: "copyAnchorStyles", popupClass: "popupClass", positionMode: "positionMode", offset: "offset", margin: "margin" }, outputs: { anchorViewportLeave: "anchorViewportLeave", close: "close", open: "open", positionChange: "positionChange" }, providers: [AlignService, AnimationService, DOMService, PositionService, ResizeService, ScrollableService], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], exportAs: ["kendo-popup"], usesOnChanges: true, ngImport: i0, template: `
|
|
987
990
|
<div class="k-child-animation-container">
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
</
|
|
995
|
-
</div>
|
|
991
|
+
<div [class.k-popup]="renderDefaultClass" [ngClass]="popupClass" #container>
|
|
992
|
+
<ng-content></ng-content>
|
|
993
|
+
@if (content) {
|
|
994
|
+
<ng-template [ngTemplateOutlet]="content"></ng-template>
|
|
995
|
+
}
|
|
996
|
+
<kendo-resize-sensor [rateLimit]="100" (resize)="onResize()"></kendo-resize-sensor>
|
|
997
|
+
</div>
|
|
996
998
|
</div>
|
|
997
|
-
|
|
999
|
+
`, 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: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
998
1000
|
}
|
|
999
1001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupComponent, decorators: [{
|
|
1000
1002
|
type: Component,
|
|
1001
1003
|
args: [{
|
|
1004
|
+
selector: 'kendo-popup',
|
|
1002
1005
|
exportAs: 'kendo-popup',
|
|
1006
|
+
imports: [NgClass, NgTemplateOutlet, ResizeSensorComponent],
|
|
1003
1007
|
providers: [AlignService, AnimationService, DOMService, PositionService, ResizeService, ScrollableService],
|
|
1004
|
-
selector: 'kendo-popup',
|
|
1005
1008
|
template: `
|
|
1006
1009
|
<div class="k-child-animation-container">
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
</
|
|
1014
|
-
</div>
|
|
1010
|
+
<div [class.k-popup]="renderDefaultClass" [ngClass]="popupClass" #container>
|
|
1011
|
+
<ng-content></ng-content>
|
|
1012
|
+
@if (content) {
|
|
1013
|
+
<ng-template [ngTemplateOutlet]="content"></ng-template>
|
|
1014
|
+
}
|
|
1015
|
+
<kendo-resize-sensor [rateLimit]="100" (resize)="onResize()"></kendo-resize-sensor>
|
|
1016
|
+
</div>
|
|
1015
1017
|
</div>
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1018
|
+
`,
|
|
1019
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1020
|
+
standalone: true
|
|
1019
1021
|
}]
|
|
1020
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: AlignService }, { type: DOMService }, { type: PositionService }, { type: ResizeService }, { type: ScrollableService }, { type: AnimationService }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { animate: [{
|
|
1022
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: AlignService }, { type: DOMService }, { type: PositionService }, { type: ResizeService }, { type: ScrollableService }, { type: AnimationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { animate: [{
|
|
1021
1023
|
type: Input
|
|
1022
1024
|
}], anchor: [{
|
|
1023
1025
|
type: Input
|
package/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { AlignStrategy, OffsetPosition, MarginSettings, ElementRect, ScrollInfo, AlignSettings, BoundingRect, PositionSettings, ViewPort, CollisionStrategy } from '@progress/kendo-popup-common';
|
|
6
6
|
import * as i0 from '@angular/core';
|
|
7
|
-
import { ElementRef, ViewContainerRef, TemplateRef, NgZone, OnDestroy, EventEmitter, AfterViewInit, OnInit, OnChanges, Renderer2, ComponentRef, InjectionToken, ApplicationRef
|
|
7
|
+
import { ElementRef, ViewContainerRef, TemplateRef, NgZone, OnDestroy, EventEmitter, AfterViewInit, AfterViewChecked, OnInit, OnChanges, Renderer2, Injector, ComponentRef, InjectionToken, ApplicationRef } from '@angular/core';
|
|
8
8
|
import { AnimationBuilder } from '@angular/animations';
|
|
9
9
|
import * as i1 from '@progress/kendo-angular-common';
|
|
10
10
|
import { ResizeSensorComponent } from '@progress/kendo-angular-common';
|
|
@@ -273,9 +273,9 @@ declare class PositionService {
|
|
|
273
273
|
*/
|
|
274
274
|
declare class ResizeService {
|
|
275
275
|
private _dom;
|
|
276
|
-
private
|
|
276
|
+
private zone;
|
|
277
277
|
private subscription;
|
|
278
|
-
constructor(_dom: DOMService,
|
|
278
|
+
constructor(_dom: DOMService, zone: NgZone);
|
|
279
279
|
subscribe(callback: () => void): void;
|
|
280
280
|
unsubscribe(): void;
|
|
281
281
|
isUnsubscribed(): boolean;
|
|
@@ -288,10 +288,10 @@ declare class ResizeService {
|
|
|
288
288
|
*/
|
|
289
289
|
declare class ScrollableService {
|
|
290
290
|
private _dom;
|
|
291
|
-
private
|
|
291
|
+
private zone;
|
|
292
292
|
private element;
|
|
293
293
|
private subscription;
|
|
294
|
-
constructor(_dom: DOMService,
|
|
294
|
+
constructor(_dom: DOMService, zone: NgZone);
|
|
295
295
|
forElement(element: HTMLElement): ScrollableService;
|
|
296
296
|
subscribe(callback: (visible: boolean) => void): void;
|
|
297
297
|
unsubscribe(): void;
|
|
@@ -332,7 +332,7 @@ declare class AnimationService implements OnDestroy {
|
|
|
332
332
|
* }
|
|
333
333
|
* ```
|
|
334
334
|
*/
|
|
335
|
-
declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
|
|
335
|
+
declare class PopupComponent implements AfterViewInit, AfterViewChecked, OnInit, OnChanges, OnDestroy {
|
|
336
336
|
container: ElementRef;
|
|
337
337
|
private _alignService;
|
|
338
338
|
domService: DOMService;
|
|
@@ -341,59 +341,70 @@ declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDest
|
|
|
341
341
|
private _scrollableService;
|
|
342
342
|
private animationService;
|
|
343
343
|
private _renderer;
|
|
344
|
-
private
|
|
344
|
+
private zone;
|
|
345
|
+
private injector;
|
|
345
346
|
/**
|
|
346
347
|
* Controls the Popup animation. By default, the opening and closing animations are enabled ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/animations)).
|
|
347
348
|
* @default true
|
|
348
349
|
*/
|
|
349
|
-
animate: boolean | PopupAnimation;
|
|
350
|
+
set animate(value: boolean | PopupAnimation);
|
|
351
|
+
get animate(): boolean | PopupAnimation;
|
|
350
352
|
/**
|
|
351
353
|
* Sets the element to use as an anchor. The Popup opens next to this element. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-components)).
|
|
352
354
|
*/
|
|
353
|
-
anchor: ElementRef | HTMLElement;
|
|
355
|
+
set anchor(value: ElementRef | HTMLElement);
|
|
356
|
+
get anchor(): ElementRef | HTMLElement;
|
|
354
357
|
/**
|
|
355
358
|
* Sets the anchor pivot point ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
|
|
356
359
|
* @default '{ horizontal: "left", vertical: "bottom" }'
|
|
357
360
|
*/
|
|
358
|
-
anchorAlign: Align;
|
|
361
|
+
set anchorAlign(value: Align);
|
|
362
|
+
get anchorAlign(): Align;
|
|
359
363
|
/**
|
|
360
364
|
* Sets the collision behavior of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary-detection)).
|
|
361
365
|
* @default '{ horizontal: "fit", vertical: "flip" }'
|
|
362
366
|
*/
|
|
363
|
-
collision: Collision;
|
|
367
|
+
set collision(value: Collision);
|
|
368
|
+
get collision(): Collision;
|
|
364
369
|
/**
|
|
365
370
|
* Sets the pivot point of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
|
|
366
371
|
* @default '{ horizontal: "left", vertical: "top" }'
|
|
367
372
|
*/
|
|
368
|
-
popupAlign: Align;
|
|
373
|
+
set popupAlign(value: Align);
|
|
374
|
+
get popupAlign(): Align;
|
|
369
375
|
/**
|
|
370
376
|
* Controls whether the component copies the `anchor` font styles.
|
|
371
377
|
* @default false
|
|
372
378
|
*/
|
|
373
|
-
copyAnchorStyles: boolean;
|
|
379
|
+
set copyAnchorStyles(value: boolean);
|
|
380
|
+
get copyAnchorStyles(): boolean;
|
|
374
381
|
/**
|
|
375
382
|
* Sets a list of CSS classes to add to the internal animated element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/styling)).
|
|
376
383
|
*
|
|
377
384
|
* > To style the content of the Popup, use this property binding.
|
|
378
385
|
*/
|
|
379
|
-
popupClass: string | Array<string> | object | Set<string
|
|
386
|
+
set popupClass(value: string | Array<string> | object | Set<string>);
|
|
387
|
+
get popupClass(): string | Array<string> | object | Set<string>;
|
|
380
388
|
/**
|
|
381
389
|
* Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to `absolute`.
|
|
382
390
|
*
|
|
383
391
|
* To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
|
|
384
392
|
* @default 'fixed'
|
|
385
393
|
*/
|
|
386
|
-
positionMode: PositionMode;
|
|
394
|
+
set positionMode(value: PositionMode);
|
|
395
|
+
get positionMode(): PositionMode;
|
|
387
396
|
/**
|
|
388
397
|
* Sets the absolute position of the element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-absolute-points)).
|
|
389
398
|
* The Popup opens next to this point. The Popup pivot point is defined by the `popupAlign` option. The boundary detection uses the window viewport.
|
|
390
399
|
* @default '{ left: -10000, top: 0 }'
|
|
391
400
|
*/
|
|
392
|
-
offset: Offset;
|
|
401
|
+
set offset(value: Offset);
|
|
402
|
+
get offset(): Offset;
|
|
393
403
|
/**
|
|
394
404
|
* Sets the margin value in pixels. Adds blank space between the Popup and the anchor ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#adding-a-margin)).
|
|
395
405
|
*/
|
|
396
|
-
margin: Margin;
|
|
406
|
+
set margin(value: Margin);
|
|
407
|
+
get margin(): Margin;
|
|
397
408
|
/**
|
|
398
409
|
* Fires when the anchor scrolls outside the screen boundaries. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/closing)).
|
|
399
410
|
*/
|
|
@@ -426,12 +437,20 @@ declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDest
|
|
|
426
437
|
* @hidden
|
|
427
438
|
*/
|
|
428
439
|
renderDefaultClass: boolean;
|
|
429
|
-
private
|
|
430
|
-
private
|
|
440
|
+
private _animate;
|
|
441
|
+
private _anchor;
|
|
442
|
+
private _anchorAlign;
|
|
443
|
+
private _collision;
|
|
444
|
+
private _popupAlign;
|
|
445
|
+
private _copyAnchorStyles;
|
|
446
|
+
private _popupClass;
|
|
447
|
+
private _positionMode;
|
|
448
|
+
private _offset;
|
|
449
|
+
private _margin;
|
|
450
|
+
private _currentOffset;
|
|
431
451
|
private animationSubscriptions;
|
|
432
|
-
private
|
|
433
|
-
|
|
434
|
-
constructor(container: ElementRef, _alignService: AlignService, domService: DOMService, _positionService: PositionService, _resizeService: ResizeService, _scrollableService: ScrollableService, animationService: AnimationService, _renderer: Renderer2, _zone: NgZone);
|
|
452
|
+
private resolvedPromise;
|
|
453
|
+
constructor(container: ElementRef, _alignService: AlignService, domService: DOMService, _positionService: PositionService, _resizeService: ResizeService, _scrollableService: ScrollableService, animationService: AnimationService, _renderer: Renderer2, zone: NgZone, injector: Injector);
|
|
435
454
|
ngOnInit(): void;
|
|
436
455
|
ngOnChanges(changes: any): void;
|
|
437
456
|
ngAfterViewInit(): void;
|
|
@@ -452,7 +471,6 @@ declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDest
|
|
|
452
471
|
private copyFontStyles;
|
|
453
472
|
private updateFixedClass;
|
|
454
473
|
private setContainerStyle;
|
|
455
|
-
private unsubscribeReposition;
|
|
456
474
|
private get hasCustomOffset();
|
|
457
475
|
static ɵfac: i0.ɵɵFactoryDeclaration<PopupComponent, never>;
|
|
458
476
|
static ɵcmp: i0.ɵɵComponentDeclaration<PopupComponent, "kendo-popup", ["kendo-popup"], { "animate": { "alias": "animate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "copyAnchorStyles": { "alias": "copyAnchorStyles"; "required": false; }; "popupClass": { "alias": "popupClass"; "required": false; }; "positionMode": { "alias": "positionMode"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; }, { "anchorViewportLeave": "anchorViewportLeave"; "close": "close"; "open": "open"; "positionChange": "positionChange"; }, never, ["*"], true, never>;
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = {
|
|
|
7
7
|
"productCodes": [
|
|
8
8
|
"KENDOUIANGULAR"
|
|
9
9
|
],
|
|
10
|
-
"publishDate":
|
|
11
|
-
"version": "25.0.0-develop.
|
|
10
|
+
"publishDate": 1785317748,
|
|
11
|
+
"version": "25.0.0-develop.12",
|
|
12
12
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
|
|
13
13
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-popup",
|
|
3
|
-
"version": "25.0.0-develop.
|
|
3
|
+
"version": "25.0.0-develop.12",
|
|
4
4
|
"description": "Kendo UI Angular Popup component - an easily customized popup from the most trusted provider of professional Angular components.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"package": {
|
|
35
35
|
"productName": "Kendo UI for Angular",
|
|
36
36
|
"productCode": "KENDOUIANGULAR",
|
|
37
|
-
"publishDate":
|
|
37
|
+
"publishDate": 1785317748,
|
|
38
38
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
|
|
39
39
|
}
|
|
40
40
|
},
|
|
@@ -43,14 +43,14 @@
|
|
|
43
43
|
"@angular/common": "20 - 22",
|
|
44
44
|
"@angular/core": "20 - 22",
|
|
45
45
|
"@angular/platform-browser": "20 - 22",
|
|
46
|
-
"@progress/kendo-angular-common": "25.0.0-develop.
|
|
46
|
+
"@progress/kendo-angular-common": "25.0.0-develop.12",
|
|
47
47
|
"@progress/kendo-licensing": "^1.11.0",
|
|
48
48
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@progress/kendo-popup-common": "1.9.5",
|
|
52
52
|
"tslib": "^2.3.1",
|
|
53
|
-
"@progress/kendo-angular-schematics": "25.0.0-develop.
|
|
53
|
+
"@progress/kendo-angular-schematics": "25.0.0-develop.12"
|
|
54
54
|
},
|
|
55
55
|
"schematics": "./schematics/collection.json",
|
|
56
56
|
"module": "fesm2022/progress-kendo-angular-popup.mjs",
|