ng-zenduit 2.3.6 → 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 +487 -123
- 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 +168 -26
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
|
|
@@ -334,6 +424,16 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
334
424
|
* Label text above the select
|
|
335
425
|
*/
|
|
336
426
|
label?: string;
|
|
427
|
+
/**
|
|
428
|
+
* Show a help icon next to the label. On hover/keyboard-focus it reveals a
|
|
429
|
+
* self-contained tooltip with `helpTooltip` (the library does not depend on
|
|
430
|
+
* Angular Material).
|
|
431
|
+
*/
|
|
432
|
+
helpIcon: boolean;
|
|
433
|
+
/**
|
|
434
|
+
* Tooltip text shown on hover/focus of the label help icon. Translated.
|
|
435
|
+
*/
|
|
436
|
+
helpTooltip: string;
|
|
337
437
|
/**
|
|
338
438
|
* Supporting text below the select
|
|
339
439
|
*/
|
|
@@ -473,9 +573,16 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
473
573
|
*/
|
|
474
574
|
closed: EventEmitter<any | any[]>;
|
|
475
575
|
/**
|
|
476
|
-
* 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.
|
|
477
580
|
*/
|
|
478
|
-
|
|
581
|
+
private _isOpen;
|
|
582
|
+
get isOpen(): boolean;
|
|
583
|
+
set isOpen(open: boolean);
|
|
584
|
+
helpTooltipAlign: 'center' | 'start' | 'end';
|
|
585
|
+
helpTooltipPlacement: 'above' | 'below';
|
|
479
586
|
searchText: string;
|
|
480
587
|
searchInputValue: string;
|
|
481
588
|
searchFocused: boolean;
|
|
@@ -500,12 +607,21 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
500
607
|
* Select Button Template for custom HTML
|
|
501
608
|
*/
|
|
502
609
|
buttonTemplate: ZenduSelectButtonDirective;
|
|
503
|
-
|
|
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;
|
|
504
617
|
/**
|
|
505
|
-
*
|
|
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.
|
|
506
622
|
*/
|
|
507
|
-
|
|
508
|
-
private
|
|
623
|
+
private _openOverlay;
|
|
624
|
+
private _closeOverlay;
|
|
509
625
|
/**
|
|
510
626
|
* Resolve icon path with fallback to assets folder
|
|
511
627
|
*/
|
|
@@ -524,6 +640,15 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
524
640
|
/**
|
|
525
641
|
* Toggle dropdown
|
|
526
642
|
*/
|
|
643
|
+
/**
|
|
644
|
+
* Position the help tooltip so it never overflows the viewport. Horizontally:
|
|
645
|
+
* anchored to the icon's right edge near the right border, to its left edge near
|
|
646
|
+
* the left border, otherwise centered. Vertically: above by default, flipped
|
|
647
|
+
* below when there isn't room above and there's more room below (the label-row
|
|
648
|
+
* icon sits high in the layout). Computed from the icon rect synchronously
|
|
649
|
+
* (before paint) so the tooltip appears in its final spot without a flicker.
|
|
650
|
+
*/
|
|
651
|
+
updateHelpTooltipPlacement(event: Event): void;
|
|
527
652
|
toggleDropdown(): void;
|
|
528
653
|
/**
|
|
529
654
|
* Handle scroll on the options list — fetch the next page once the user
|
|
@@ -636,10 +761,6 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
636
761
|
* Get selected secondary text for display
|
|
637
762
|
*/
|
|
638
763
|
getSelectedSecondaryText(): string | null;
|
|
639
|
-
/**
|
|
640
|
-
* Close dropdown on outside click
|
|
641
|
-
*/
|
|
642
|
-
onDocumentClick(event: MouseEvent): void;
|
|
643
764
|
/**
|
|
644
765
|
* Hide dropdown
|
|
645
766
|
*/
|
|
@@ -681,7 +802,7 @@ declare class ZenduSelectComponent implements OnChanges {
|
|
|
681
802
|
*/
|
|
682
803
|
private updateTreeSelectAllState;
|
|
683
804
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZenduSelectComponent, never>;
|
|
684
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ZenduSelectComponent, "zen-select", never, { "selectModel": { "alias": "selectModel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "label": { "alias": "label"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "leadingType": { "alias": "leadingType"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "leadingAvatar": { "alias": "leadingAvatar"; "required": false; }; "leadingDotColor": { "alias": "leadingDotColor"; "required": false; }; "displayProp": { "alias": "displayProp"; "required": false; }; "idProp": { "alias": "idProp"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "multiselect": { "alias": "multiselect"; "required": false; }; "hideSelectAll": { "alias": "hideSelectAll"; "required": false; }; "hideTreeSearch": { "alias": "hideTreeSearch"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "size": { "alias": "size"; "required": false; }; "returnOption": { "alias": "returnOption"; "required": false; }; "isTruncate": { "alias": "isTruncate"; "required": false; }; "enableAddNewOption": { "alias": "enableAddNewOption"; "required": false; }; "showDefaultAddOption": { "alias": "showDefaultAddOption"; "required": false; }; "newOptionText": { "alias": "newOptionText"; "required": false; }; "enableRemoveOption": { "alias": "enableRemoveOption"; "required": false; }; "removeOptionText": { "alias": "removeOptionText"; "required": false; }; "isLazyLoading": { "alias": "isLazyLoading"; "required": false; }; "lazyLoader": { "alias": "lazyLoader"; "required": false; }; "preferredOpenDirection": { "alias": "preferredOpenDirection"; "required": false; }; }, { "selectModelChange": "selectModelChange"; "addNewOption": "addNewOption"; "removeOption": "removeOption"; "closed": "closed"; }, ["optionTemplate", "valueTemplate", "buttonTemplate"], never, false, never>;
|
|
805
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ZenduSelectComponent, "zen-select", never, { "selectModel": { "alias": "selectModel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "label": { "alias": "label"; "required": false; }; "helpIcon": { "alias": "helpIcon"; "required": false; }; "helpTooltip": { "alias": "helpTooltip"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "leadingType": { "alias": "leadingType"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "leadingAvatar": { "alias": "leadingAvatar"; "required": false; }; "leadingDotColor": { "alias": "leadingDotColor"; "required": false; }; "displayProp": { "alias": "displayProp"; "required": false; }; "idProp": { "alias": "idProp"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "multiselect": { "alias": "multiselect"; "required": false; }; "hideSelectAll": { "alias": "hideSelectAll"; "required": false; }; "hideTreeSearch": { "alias": "hideTreeSearch"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "size": { "alias": "size"; "required": false; }; "returnOption": { "alias": "returnOption"; "required": false; }; "isTruncate": { "alias": "isTruncate"; "required": false; }; "enableAddNewOption": { "alias": "enableAddNewOption"; "required": false; }; "showDefaultAddOption": { "alias": "showDefaultAddOption"; "required": false; }; "newOptionText": { "alias": "newOptionText"; "required": false; }; "enableRemoveOption": { "alias": "enableRemoveOption"; "required": false; }; "removeOptionText": { "alias": "removeOptionText"; "required": false; }; "isLazyLoading": { "alias": "isLazyLoading"; "required": false; }; "lazyLoader": { "alias": "lazyLoader"; "required": false; }; "preferredOpenDirection": { "alias": "preferredOpenDirection"; "required": false; }; }, { "selectModelChange": "selectModelChange"; "addNewOption": "addNewOption"; "removeOption": "removeOption"; "closed": "closed"; }, ["optionTemplate", "valueTemplate", "buttonTemplate"], never, false, never>;
|
|
685
806
|
}
|
|
686
807
|
|
|
687
808
|
interface DatePickerDay {
|
|
@@ -1856,6 +1977,7 @@ declare class ZenduDatePickerDropdownComponent implements OnInit, OnChanges, OnD
|
|
|
1856
1977
|
dropdownStyle: {
|
|
1857
1978
|
[key: string]: string;
|
|
1858
1979
|
};
|
|
1980
|
+
private _positionRafId;
|
|
1859
1981
|
leftCurrentSlot: Date;
|
|
1860
1982
|
leftDayRows: Array<{
|
|
1861
1983
|
days: DatePickerDay[];
|
|
@@ -1907,6 +2029,21 @@ declare class ZenduDatePickerDropdownComponent implements OnInit, OnChanges, OnD
|
|
|
1907
2029
|
toggle(): void;
|
|
1908
2030
|
open(): void;
|
|
1909
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;
|
|
1910
2047
|
close(): void;
|
|
1911
2048
|
leftPrevMonth(): void;
|
|
1912
2049
|
leftNextMonth(): void;
|
|
@@ -2103,11 +2240,11 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
|
|
|
2103
2240
|
*/
|
|
2104
2241
|
leadingIcon: string;
|
|
2105
2242
|
/**
|
|
2106
|
-
* Show help icon
|
|
2243
|
+
* Show help icon. The tooltip is shown on hover / keyboard focus.
|
|
2107
2244
|
*/
|
|
2108
2245
|
helpIcon: boolean;
|
|
2109
2246
|
/**
|
|
2110
|
-
* Tooltip text for help icon
|
|
2247
|
+
* Tooltip text for the help icon (shown on hover / focus).
|
|
2111
2248
|
*/
|
|
2112
2249
|
helpTooltip: string;
|
|
2113
2250
|
/**
|
|
@@ -2279,10 +2416,6 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
|
|
|
2279
2416
|
* Trailing dropdown value change event (for two-way binding)
|
|
2280
2417
|
*/
|
|
2281
2418
|
trailingDropdownValueChange: EventEmitter<string | number>;
|
|
2282
|
-
/**
|
|
2283
|
-
* Help icon click event
|
|
2284
|
-
*/
|
|
2285
|
-
helpIconClick: EventEmitter<MouseEvent>;
|
|
2286
2419
|
/**
|
|
2287
2420
|
* Phone change event
|
|
2288
2421
|
*/
|
|
@@ -2297,7 +2430,8 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
|
|
|
2297
2430
|
leadingIconClick: EventEmitter<MouseEvent>;
|
|
2298
2431
|
value: string | number;
|
|
2299
2432
|
isFocused: boolean;
|
|
2300
|
-
|
|
2433
|
+
helpTooltipAlign: 'center' | 'start' | 'end';
|
|
2434
|
+
helpTooltipPlacement: 'above' | 'below';
|
|
2301
2435
|
leadingDropdownOpen: boolean;
|
|
2302
2436
|
trailingDropdownOpen: boolean;
|
|
2303
2437
|
phoneText: string;
|
|
@@ -2339,7 +2473,15 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
|
|
|
2339
2473
|
onTrailingDropdownChange(value: string | number): void;
|
|
2340
2474
|
toggleLeadingDropdown(): void;
|
|
2341
2475
|
toggleTrailingDropdown(): void;
|
|
2342
|
-
|
|
2476
|
+
/**
|
|
2477
|
+
* Position the help tooltip so it never overflows the viewport. Horizontally:
|
|
2478
|
+
* anchored to the icon's right edge near the right border, to its left edge near
|
|
2479
|
+
* the left border, otherwise centered. Vertically: above by default, flipped
|
|
2480
|
+
* below when there isn't room above and there's more room below (e.g. an icon
|
|
2481
|
+
* near the top of the viewport). Computed from the icon rect synchronously
|
|
2482
|
+
* (before paint) so the tooltip appears in its final spot without a flicker.
|
|
2483
|
+
*/
|
|
2484
|
+
updateHelpTooltipPlacement(event: Event): void;
|
|
2343
2485
|
closeDropdowns(): void;
|
|
2344
2486
|
get hasValue(): boolean;
|
|
2345
2487
|
get showLabel(): boolean;
|
|
@@ -2364,7 +2506,7 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
|
|
|
2364
2506
|
onPhoneInputChange(event: Event): void;
|
|
2365
2507
|
onLeadingIconClick(event: MouseEvent): void;
|
|
2366
2508
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZenduInputComponent, never>;
|
|
2367
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ZenduInputComponent, "zen-input", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "helpIcon": { "alias": "helpIcon"; "required": false; }; "helpTooltip": { "alias": "helpTooltip"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "leadingDropdownOptions": { "alias": "leadingDropdownOptions"; "required": false; }; "leadingDropdownValue": { "alias": "leadingDropdownValue"; "required": false; }; "leadingDropdownPlaceholder": { "alias": "leadingDropdownPlaceholder"; "required": false; }; "trailingDropdownOptions": { "alias": "trailingDropdownOptions"; "required": false; }; "trailingDropdownValue": { "alias": "trailingDropdownValue"; "required": false; }; "trailingDropdownPlaceholder": { "alias": "trailingDropdownPlaceholder"; "required": false; }; "leadingText": { "alias": "leadingText"; "required": false; }; "trailingText": { "alias": "trailingText"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "phoneMaxLength": { "alias": "phoneMaxLength"; "required": false; }; "phone": { "alias": "phone"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "valueChange": "valueChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "inputKeydown": "inputKeydown"; "inputKeyup": "inputKeyup"; "leadingDropdownChange": "leadingDropdownChange"; "leadingDropdownValueChange": "leadingDropdownValueChange"; "trailingDropdownChange": "trailingDropdownChange"; "trailingDropdownValueChange": "trailingDropdownValueChange"; "
|
|
2509
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ZenduInputComponent, "zen-input", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "helpIcon": { "alias": "helpIcon"; "required": false; }; "helpTooltip": { "alias": "helpTooltip"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "leadingDropdownOptions": { "alias": "leadingDropdownOptions"; "required": false; }; "leadingDropdownValue": { "alias": "leadingDropdownValue"; "required": false; }; "leadingDropdownPlaceholder": { "alias": "leadingDropdownPlaceholder"; "required": false; }; "trailingDropdownOptions": { "alias": "trailingDropdownOptions"; "required": false; }; "trailingDropdownValue": { "alias": "trailingDropdownValue"; "required": false; }; "trailingDropdownPlaceholder": { "alias": "trailingDropdownPlaceholder"; "required": false; }; "leadingText": { "alias": "leadingText"; "required": false; }; "trailingText": { "alias": "trailingText"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "phoneMaxLength": { "alias": "phoneMaxLength"; "required": false; }; "phone": { "alias": "phone"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "valueChange": "valueChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "inputKeydown": "inputKeydown"; "inputKeyup": "inputKeyup"; "leadingDropdownChange": "leadingDropdownChange"; "leadingDropdownValueChange": "leadingDropdownValueChange"; "trailingDropdownChange": "trailingDropdownChange"; "trailingDropdownValueChange": "trailingDropdownValueChange"; "phoneChange": "phoneChange"; "validChange": "validChange"; "leadingIconClick": "leadingIconClick"; }, never, never, false, never>;
|
|
2368
2510
|
static ngAcceptInputType_multiline: unknown;
|
|
2369
2511
|
static ngAcceptInputType_rows: unknown;
|
|
2370
2512
|
static ngAcceptInputType_resizable: unknown;
|
|
@@ -2713,5 +2855,5 @@ declare class NgZenduitModule {
|
|
|
2713
2855
|
static ɵinj: i0.ɵɵInjectorDeclaration<NgZenduitModule>;
|
|
2714
2856
|
}
|
|
2715
2857
|
|
|
2716
|
-
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 };
|
|
2717
|
-
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 };
|