ng-zenduit 2.3.7 → 2.3.9
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/ng-zenduit.mjs +400 -107
- package/fesm2022/ng-zenduit.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/all.scss +1 -0
- package/styles/overlay.scss +23 -0
- package/types/ng-zenduit.d.ts +132 -16
package/package.json
CHANGED
package/styles/all.scss
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// Global styles for panels opened through ZenduOverlayService.
|
|
2
|
+
//
|
|
3
|
+
// The overlay pane is rendered in the CDK overlay container (at the end of
|
|
4
|
+
// <body>), so it lives outside any component's style scope — these rules must
|
|
5
|
+
// be global. Requires `@angular/cdk/overlay-prebuilt.css` to be loaded by the
|
|
6
|
+
// host app (it provides the structural .cdk-overlay-* styles).
|
|
7
|
+
|
|
8
|
+
.zen-overlay-panel.cdk-overlay-pane {
|
|
9
|
+
// The flexible connected-position strategy caps the pane's max-height/width
|
|
10
|
+
// to the space available in the viewport. Make the pane a flex column and
|
|
11
|
+
// let its child (the component's own panel) fill it and scroll internally,
|
|
12
|
+
// so a tall panel never overflows the screen — it scrolls instead.
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
|
|
16
|
+
> * {
|
|
17
|
+
// Cap the component's panel to the pane (which the flexible strategy
|
|
18
|
+
// already sized to the viewport) and let it shrink, so its own inner
|
|
19
|
+
// scroll region takes over instead of the panel overflowing the screen.
|
|
20
|
+
min-height: 0;
|
|
21
|
+
max-height: 100%;
|
|
22
|
+
}
|
|
23
|
+
}
|
package/types/ng-zenduit.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { ElementRef, TemplateRef, ViewContainerRef, NgZone, EventEmitter, OnInit, OnChanges, OnDestroy, SimpleChanges, DoCheck, Renderer2, InjectionToken, AfterViewInit, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import * as i60 from '@angular/cdk/overlay';
|
|
4
|
-
import { Overlay } from '@angular/cdk/overlay';
|
|
4
|
+
import { OverlayRef, Overlay } from '@angular/cdk/overlay';
|
|
5
|
+
import { Observable, BehaviorSubject } from 'rxjs';
|
|
5
6
|
import * as i62 from '@ngx-translate/core';
|
|
6
7
|
import { TranslateService } from '@ngx-translate/core';
|
|
7
8
|
import * as i58 from '@angular/cdk/drag-drop';
|
|
8
9
|
import { CdkDragDrop } from '@angular/cdk/drag-drop';
|
|
9
10
|
import { fabric } from 'fabric';
|
|
10
11
|
import { Transform } from 'fabric/fabric-impl';
|
|
11
|
-
import { BehaviorSubject } from 'rxjs';
|
|
12
12
|
import { HttpClient } from '@angular/common/http';
|
|
13
13
|
import * as i57 from '@angular/forms';
|
|
14
14
|
import { ControlValueAccessor } from '@angular/forms';
|
|
@@ -43,6 +43,94 @@ declare class ZenNotifyService {
|
|
|
43
43
|
static ɵprov: i0.ɵɵInjectableDeclaration<ZenNotifyService>;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
/** Why a connected panel asked to close. */
|
|
47
|
+
type ZenPanelCloseReason = 'outside' | 'escape' | 'detach';
|
|
48
|
+
/**
|
|
49
|
+
* Configuration for opening a viewport-aware connected panel via
|
|
50
|
+
* {@link ZenduOverlayService}. This is the shared dropdown/menu primitive used
|
|
51
|
+
* across the library (select, date-picker, filter menus, …) so every floating
|
|
52
|
+
* panel positions, flips, and clamps the same way — and escapes overflow /
|
|
53
|
+
* transformed ancestors instead of being clipped by them.
|
|
54
|
+
*/
|
|
55
|
+
interface ZenConnectedPanelConfig {
|
|
56
|
+
/** Element the panel is anchored to (the trigger). */
|
|
57
|
+
origin: ElementRef<HTMLElement> | HTMLElement;
|
|
58
|
+
/** Template rendered inside the overlay. */
|
|
59
|
+
content: TemplateRef<unknown>;
|
|
60
|
+
/**
|
|
61
|
+
* The host component's `ViewContainerRef`. Required so the embedded view
|
|
62
|
+
* keeps the component's dependency-injection and style-encapsulation
|
|
63
|
+
* context even though it is physically rendered in the overlay container.
|
|
64
|
+
*/
|
|
65
|
+
viewContainerRef: ViewContainerRef;
|
|
66
|
+
/**
|
|
67
|
+
* Panel width:
|
|
68
|
+
* - `'origin'` (default) — match the trigger's width (typical for selects),
|
|
69
|
+
* - `'auto'` — size to the content (typical for the date-picker),
|
|
70
|
+
* - a number (px) or any CSS width string.
|
|
71
|
+
*/
|
|
72
|
+
width?: 'origin' | 'auto' | number | string;
|
|
73
|
+
/** Minimum width (px or CSS string). */
|
|
74
|
+
minWidth?: number | string;
|
|
75
|
+
/** Gap between the trigger and the panel, in px. Default 4. */
|
|
76
|
+
offsetY?: number;
|
|
77
|
+
/** Extra class(es) applied to the overlay pane. */
|
|
78
|
+
panelClass?: string | string[];
|
|
79
|
+
/**
|
|
80
|
+
* Behaviour when an ancestor scrolls:
|
|
81
|
+
* - `'reposition'` (default) — keep the panel glued to the trigger,
|
|
82
|
+
* - `'close'` — detach the panel (emits a `'detach'` close reason).
|
|
83
|
+
*/
|
|
84
|
+
scrollBehavior?: 'reposition' | 'close';
|
|
85
|
+
/** Margin kept clear of the viewport edges, in px. Default 8. */
|
|
86
|
+
viewportMargin?: number;
|
|
87
|
+
}
|
|
88
|
+
/** Handle to an open connected panel. */
|
|
89
|
+
interface ZenConnectedPanelRef {
|
|
90
|
+
/** Underlying CDK overlay ref (escape hatch for advanced needs). */
|
|
91
|
+
readonly overlayRef: OverlayRef;
|
|
92
|
+
/**
|
|
93
|
+
* Emits when the panel should close: an outside click, the Escape key, or
|
|
94
|
+
* the overlay detaching (e.g. `scrollBehavior: 'close'`). The consumer owns
|
|
95
|
+
* its own open state, so it decides what to do with this.
|
|
96
|
+
*/
|
|
97
|
+
readonly closed: Observable<ZenPanelCloseReason>;
|
|
98
|
+
/** Recompute the panel position (e.g. after its content resizes). */
|
|
99
|
+
updatePosition(): void;
|
|
100
|
+
/** Detach and dispose the panel. */
|
|
101
|
+
close(): void;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Shared overlay primitive for the whole library. Opens a floating panel
|
|
106
|
+
* anchored to a trigger using CDK Overlay, with viewport-aware connected
|
|
107
|
+
* positioning that:
|
|
108
|
+
* - renders in the overlay container, so it is never clipped by an ancestor's
|
|
109
|
+
* `overflow` (cards, scroll areas) or by the viewport edge;
|
|
110
|
+
* - prefers opening below the trigger and flips above when there isn't room;
|
|
111
|
+
* - pushes itself into the viewport and shrinks to fit (`flexibleDimensions`),
|
|
112
|
+
* so the panel scrolls internally instead of overflowing;
|
|
113
|
+
* - tracks the trigger on scroll/resize (or closes, if asked).
|
|
114
|
+
*
|
|
115
|
+
* Consumers keep their own open/close state and panel markup — they call
|
|
116
|
+
* {@link openConnectedPanel} and react to {@link ZenConnectedPanelRef.closed}.
|
|
117
|
+
*/
|
|
118
|
+
declare class ZenduOverlayService {
|
|
119
|
+
private _overlay;
|
|
120
|
+
private _ngZone;
|
|
121
|
+
constructor(_overlay: Overlay, _ngZone: NgZone);
|
|
122
|
+
openConnectedPanel(config: ZenConnectedPanelConfig): ZenConnectedPanelRef;
|
|
123
|
+
/**
|
|
124
|
+
* Fallback order: below the trigger (start- then end-aligned), then above
|
|
125
|
+
* (start- then end-aligned). CDK picks the first that fits; `withPush`
|
|
126
|
+
* nudges it fully on-screen.
|
|
127
|
+
*/
|
|
128
|
+
private _positions;
|
|
129
|
+
private _panelClasses;
|
|
130
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ZenduOverlayService, never>;
|
|
131
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<ZenduOverlayService>;
|
|
132
|
+
}
|
|
133
|
+
|
|
46
134
|
declare class ZenduCheckboxComponent {
|
|
47
135
|
checked: boolean;
|
|
48
136
|
checkedChange: EventEmitter<boolean>;
|
|
@@ -315,8 +403,10 @@ interface SelectOption {
|
|
|
315
403
|
dotColor?: string;
|
|
316
404
|
secondaryText?: string;
|
|
317
405
|
}
|
|
318
|
-
declare class ZenduSelectComponent implements OnChanges {
|
|
406
|
+
declare class ZenduSelectComponent implements OnChanges, OnDestroy {
|
|
319
407
|
private elementRef;
|
|
408
|
+
private overlay;
|
|
409
|
+
private viewContainerRef;
|
|
320
410
|
/**
|
|
321
411
|
* 2-Way component property for selected items.
|
|
322
412
|
* Don't initialize property on constructor to prevent change source parameter
|
|
@@ -483,9 +573,14 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
483
573
|
*/
|
|
484
574
|
closed: EventEmitter<any | any[]>;
|
|
485
575
|
/**
|
|
486
|
-
* State tracking
|
|
576
|
+
* State tracking. `isOpen` is the single source of truth — assigning it
|
|
577
|
+
* attaches/detaches the CDK overlay panel, so every existing open/close path
|
|
578
|
+
* (toggle, search focus/typing, option select, hideDropDown) stays correct
|
|
579
|
+
* without touching each call site.
|
|
487
580
|
*/
|
|
488
|
-
|
|
581
|
+
private _isOpen;
|
|
582
|
+
get isOpen(): boolean;
|
|
583
|
+
set isOpen(open: boolean);
|
|
489
584
|
helpTooltipAlign: 'center' | 'start' | 'end';
|
|
490
585
|
helpTooltipPlacement: 'above' | 'below';
|
|
491
586
|
searchText: string;
|
|
@@ -512,12 +607,21 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
512
607
|
* Select Button Template for custom HTML
|
|
513
608
|
*/
|
|
514
609
|
buttonTemplate: ZenduSelectButtonDirective;
|
|
515
|
-
|
|
610
|
+
/** Trigger element the overlay panel is anchored to. */
|
|
611
|
+
private selectWrapper?;
|
|
612
|
+
/** The dropdown panel content, rendered into the overlay when open. */
|
|
613
|
+
private dropdownPanel?;
|
|
614
|
+
private _panelRef;
|
|
615
|
+
constructor(elementRef: ElementRef, overlay: ZenduOverlayService, viewContainerRef: ViewContainerRef);
|
|
616
|
+
ngOnDestroy(): void;
|
|
516
617
|
/**
|
|
517
|
-
*
|
|
618
|
+
* Open the dropdown panel in a CDK overlay anchored to the trigger. The
|
|
619
|
+
* overlay handles viewport-aware positioning (flip up/down, push into view,
|
|
620
|
+
* clamp + internal scroll) and renders at the body level, so the panel is
|
|
621
|
+
* never clipped by an ancestor's `overflow` or by the viewport edge.
|
|
518
622
|
*/
|
|
519
|
-
|
|
520
|
-
private
|
|
623
|
+
private _openOverlay;
|
|
624
|
+
private _closeOverlay;
|
|
521
625
|
/**
|
|
522
626
|
* Resolve icon path with fallback to assets folder
|
|
523
627
|
*/
|
|
@@ -657,10 +761,6 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
657
761
|
* Get selected secondary text for display
|
|
658
762
|
*/
|
|
659
763
|
getSelectedSecondaryText(): string | null;
|
|
660
|
-
/**
|
|
661
|
-
* Close dropdown on outside click
|
|
662
|
-
*/
|
|
663
|
-
onDocumentClick(event: MouseEvent): void;
|
|
664
764
|
/**
|
|
665
765
|
* Hide dropdown
|
|
666
766
|
*/
|
|
@@ -1877,6 +1977,7 @@ declare class ZenduDatePickerDropdownComponent implements OnInit, OnChanges, OnD
|
|
|
1877
1977
|
dropdownStyle: {
|
|
1878
1978
|
[key: string]: string;
|
|
1879
1979
|
};
|
|
1980
|
+
private _positionRafId;
|
|
1880
1981
|
leftCurrentSlot: Date;
|
|
1881
1982
|
leftDayRows: Array<{
|
|
1882
1983
|
days: DatePickerDay[];
|
|
@@ -1928,6 +2029,21 @@ declare class ZenduDatePickerDropdownComponent implements OnInit, OnChanges, OnD
|
|
|
1928
2029
|
toggle(): void;
|
|
1929
2030
|
open(): void;
|
|
1930
2031
|
private updateDropdownPosition;
|
|
2032
|
+
/**
|
|
2033
|
+
* Re-clamp the open panel to the viewport using its real measured size.
|
|
2034
|
+
* Keeps the panel anchored to the trigger and guarantees the footer stays
|
|
2035
|
+
* reachable (the panel scrolls internally) at any viewport size or zoom.
|
|
2036
|
+
*/
|
|
2037
|
+
private clampToViewport;
|
|
2038
|
+
/**
|
|
2039
|
+
* Anchor to the trigger button, or to the host element when the trigger is
|
|
2040
|
+
* hidden (an external control drives the popup).
|
|
2041
|
+
*/
|
|
2042
|
+
private anchorElement;
|
|
2043
|
+
private addRepositionListeners;
|
|
2044
|
+
private removeRepositionListeners;
|
|
2045
|
+
private _onViewportChange;
|
|
2046
|
+
private schedulePositionUpdate;
|
|
1931
2047
|
close(): void;
|
|
1932
2048
|
leftPrevMonth(): void;
|
|
1933
2049
|
leftNextMonth(): void;
|
|
@@ -2739,5 +2855,5 @@ declare class NgZenduitModule {
|
|
|
2739
2855
|
static ɵinj: i0.ɵɵInjectorDeclaration<NgZenduitModule>;
|
|
2740
2856
|
}
|
|
2741
2857
|
|
|
2742
|
-
export { DATEPICKER_POSITION, NgZenduitModule, ZEN_DATE_PICKER_DEFAULT_PRESETS, ZEN_ICON_CONFIG, ZenBadgeComponent, ZenButtonComponent, ZenChartComponent, ZenDropdownMenuComponent, ZenEldStatusComponent, ZenLiveViewPlayerComponent, ZenModulePopupComponent, ZenNavSearchComponent, ZenNotifyService, ZenProgressStepsComponent, ZenSnackbarComponent, ZenStepBaseComponent, ZenSubmoduleItemComponent, ZenSubpageItemComponent, ZenTooltipDirective, ZenTooltipPopupComponent, ZenduAvatarComponent, ZenduAvatarGroupComponent, ZenduAvatarLabelGroupComponent, ZenduAvatarProfilePhotoComponent, ZenduCardBlockComponent, ZenduCheckboxComponent, ZenduColorPickerComponent, ZenduColumnConfigurationComponent, ZenduDatePickerDropdownComponent, ZenduDatepickerComponent, ZenduDocScanner, ZenduFileUpload, ZenduFileUploaderComponent, ZenduFilterComponent, ZenduGroupsComponent, ZenduIconComponent, ZenduInputComponent, ZenduLocationSearch, ZenduMapComponent, ZenduMapPreviewComponent, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectButtonDirective, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSliderComponent, ZenduSortHeaderComponent, ZenduSpinner, ZenduTimepickerComponent, ZenduToggleComponent, ZenduToggleSlideComponent };
|
|
2743
|
-
export type { AddOptionEvent, Cancellation, ColumnState, DataSource, DatePickerDropdownType, DatePickerHint, DatePickerMarker, DatePickerPreset, DateRangeValue, DropdownMenuHeader, DropdownMenuItem, DropdownOption, DropdownTriggerType, FileUploadItem, FileUploaderProgressType, FiltersConfig, FiltersConfigItem, LazyLoaderFunction, LazyLoaderResult, LazyLoaderSearch, LocationAddress, MultiSelectItem, NumberRange, RemoveOptionEvent, SelectOption, TimePickerMode, TimePickerValue, ZenBadgeColor, ZenBadgeGroupBadgePosition, ZenBadgeGroupTheme, ZenBadgeIconDirection, ZenBadgeSize, ZenChartDataset, ZenChartLegend, ZenChartStyle, ZenDevice, ZenEldStatusType, ZenIconColor, ZenIconConfig, ZenIconSize, ZenIconTheme, ZenLiveViewPlayerType, ZenLogRecord, ZenMapTheme, ZenModulePopupItem, ZenModulePopupModule, ZenProgressStepsSize, ZenProgressStepsTheme, ZenProgressStepsType, ZenSnackbarType, ZenStep, ZenStepBaseType, ZenStepStatus, ZenSubpageItemState, ZenSubpageItemType, ZenTooltipPosition, ZenTooltipTheme, ZenTrip, ZenduAvatarGroupSize, ZenduAvatarLabelGroupSize, ZenduAvatarProfilePhotoSize, ZenduAvatarSize, ZenduAvatarStatusIcon, ZenduSliderLabel };
|
|
2858
|
+
export { DATEPICKER_POSITION, NgZenduitModule, ZEN_DATE_PICKER_DEFAULT_PRESETS, ZEN_ICON_CONFIG, ZenBadgeComponent, ZenButtonComponent, ZenChartComponent, ZenDropdownMenuComponent, ZenEldStatusComponent, ZenLiveViewPlayerComponent, ZenModulePopupComponent, ZenNavSearchComponent, ZenNotifyService, ZenProgressStepsComponent, ZenSnackbarComponent, ZenStepBaseComponent, ZenSubmoduleItemComponent, ZenSubpageItemComponent, ZenTooltipDirective, ZenTooltipPopupComponent, ZenduAvatarComponent, ZenduAvatarGroupComponent, ZenduAvatarLabelGroupComponent, ZenduAvatarProfilePhotoComponent, ZenduCardBlockComponent, ZenduCheckboxComponent, ZenduColorPickerComponent, ZenduColumnConfigurationComponent, ZenduDatePickerDropdownComponent, ZenduDatepickerComponent, ZenduDocScanner, ZenduFileUpload, ZenduFileUploaderComponent, ZenduFilterComponent, ZenduGroupsComponent, ZenduIconComponent, ZenduInputComponent, ZenduLocationSearch, ZenduMapComponent, ZenduMapPreviewComponent, ZenduOverlayService, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectButtonDirective, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSliderComponent, ZenduSortHeaderComponent, ZenduSpinner, ZenduTimepickerComponent, ZenduToggleComponent, ZenduToggleSlideComponent };
|
|
2859
|
+
export type { AddOptionEvent, Cancellation, ColumnState, DataSource, DatePickerDropdownType, DatePickerHint, DatePickerMarker, DatePickerPreset, DateRangeValue, DropdownMenuHeader, DropdownMenuItem, DropdownOption, DropdownTriggerType, FileUploadItem, FileUploaderProgressType, FiltersConfig, FiltersConfigItem, LazyLoaderFunction, LazyLoaderResult, LazyLoaderSearch, LocationAddress, MultiSelectItem, NumberRange, RemoveOptionEvent, SelectOption, TimePickerMode, TimePickerValue, ZenBadgeColor, ZenBadgeGroupBadgePosition, ZenBadgeGroupTheme, ZenBadgeIconDirection, ZenBadgeSize, ZenChartDataset, ZenChartLegend, ZenChartStyle, ZenConnectedPanelConfig, ZenConnectedPanelRef, ZenDevice, ZenEldStatusType, ZenIconColor, ZenIconConfig, ZenIconSize, ZenIconTheme, ZenLiveViewPlayerType, ZenLogRecord, ZenMapTheme, ZenModulePopupItem, ZenModulePopupModule, ZenPanelCloseReason, ZenProgressStepsSize, ZenProgressStepsTheme, ZenProgressStepsType, ZenSnackbarType, ZenStep, ZenStepBaseType, ZenStepStatus, ZenSubpageItemState, ZenSubpageItemType, ZenTooltipPosition, ZenTooltipTheme, ZenTrip, ZenduAvatarGroupSize, ZenduAvatarLabelGroupSize, ZenduAvatarProfilePhotoSize, ZenduAvatarSize, ZenduAvatarStatusIcon, ZenduSliderLabel };
|