@ng-matero/extensions 13.2.2 → 13.3.0
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/core/datetime/datetime-formats.d.ts +2 -0
- package/esm2020/core/datetime/datetime-formats.mjs +1 -1
- package/esm2020/datetimepicker/datetimepicker-input.mjs +6 -1
- package/esm2020/grid/cell.component.mjs +8 -4
- package/esm2020/grid/column-menu.component.mjs +11 -17
- package/esm2020/grid/grid.component.mjs +12 -7
- package/esm2020/popover/popover-animations.mjs +10 -13
- package/esm2020/popover/popover-content.mjs +90 -0
- package/esm2020/popover/popover-interfaces.mjs +1 -1
- package/esm2020/popover/popover-module.mjs +9 -7
- package/esm2020/popover/popover-target.mjs +3 -3
- package/esm2020/popover/popover-trigger.mjs +214 -184
- package/esm2020/popover/popover-types.mjs +1 -1
- package/esm2020/popover/popover.mjs +188 -133
- package/esm2020/popover/public-api.mjs +2 -1
- package/esm2020/select/option.component.mjs +4 -6
- package/esm2020/select/select.component.mjs +121 -31
- package/fesm2015/mtxCore.mjs.map +1 -1
- package/fesm2015/mtxDatetimepicker.mjs +5 -0
- package/fesm2015/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2015/mtxGrid.mjs +28 -25
- package/fesm2015/mtxGrid.mjs.map +1 -1
- package/fesm2015/mtxPopover.mjs +520 -352
- package/fesm2015/mtxPopover.mjs.map +1 -1
- package/fesm2015/mtxSelect.mjs +172 -83
- package/fesm2015/mtxSelect.mjs.map +1 -1
- package/fesm2020/mtxCore.mjs.map +1 -1
- package/fesm2020/mtxDatetimepicker.mjs +5 -0
- package/fesm2020/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2020/mtxGrid.mjs +28 -25
- package/fesm2020/mtxGrid.mjs.map +1 -1
- package/fesm2020/mtxPopover.mjs +514 -350
- package/fesm2020/mtxPopover.mjs.map +1 -1
- package/fesm2020/mtxSelect.mjs +170 -83
- package/fesm2020/mtxSelect.mjs.map +1 -1
- package/grid/cell.component.d.ts +5 -3
- package/grid/column-menu.component.d.ts +4 -6
- package/grid/grid.component.d.ts +7 -5
- package/package.json +1 -1
- package/popover/popover-animations.d.ts +1 -1
- package/popover/popover-content.d.ts +43 -0
- package/popover/popover-interfaces.d.ts +37 -31
- package/popover/popover-module.d.ts +4 -3
- package/popover/popover-target.d.ts +2 -2
- package/popover/popover-trigger.d.ts +67 -62
- package/popover/popover-types.d.ts +6 -1
- package/popover/popover.d.ts +99 -71
- package/popover/popover.scss +2 -0
- package/popover/public-api.d.ts +1 -0
- package/select/option.component.d.ts +7 -6
- package/select/select.component.d.ts +61 -22
|
@@ -1,94 +1,100 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
|
|
2
2
|
import { Direction, Directionality } from '@angular/cdk/bidi';
|
|
3
|
-
import { Overlay } from '@angular/cdk/overlay';
|
|
4
|
-
import {
|
|
5
|
-
import { MtxPopoverPanel
|
|
3
|
+
import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
|
|
4
|
+
import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, OnDestroy, ViewContainerRef } from '@angular/core';
|
|
5
|
+
import { MtxPopoverPanel } from './popover-interfaces';
|
|
6
|
+
import { MtxPopoverTarget } from './popover-target';
|
|
6
7
|
import { MtxPopoverTriggerEvent } from './popover-types';
|
|
7
8
|
import * as i0 from "@angular/core";
|
|
9
|
+
/** Injection token that determines the scroll handling while the popover is open. */
|
|
10
|
+
export declare const MTX_POPOVER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
|
|
11
|
+
/** @docs-private */
|
|
12
|
+
export declare function MTX_POPOVER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
|
|
13
|
+
/** @docs-private */
|
|
14
|
+
export declare const MTX_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
|
|
15
|
+
provide: InjectionToken<() => ScrollStrategy>;
|
|
16
|
+
deps: (typeof Overlay)[];
|
|
17
|
+
useFactory: typeof MTX_POPOVER_SCROLL_STRATEGY_FACTORY;
|
|
18
|
+
};
|
|
8
19
|
/**
|
|
9
|
-
* This directive is intended to be used in conjunction with an mtx-popover tag. It is
|
|
20
|
+
* This directive is intended to be used in conjunction with an `mtx-popover` tag. It is
|
|
10
21
|
* responsible for toggling the display of the provided popover instance.
|
|
11
22
|
*/
|
|
12
|
-
export declare class MtxPopoverTrigger implements
|
|
23
|
+
export declare class MtxPopoverTrigger implements AfterContentInit, OnDestroy {
|
|
13
24
|
private _overlay;
|
|
14
|
-
_elementRef
|
|
25
|
+
private _elementRef;
|
|
15
26
|
private _viewContainerRef;
|
|
16
27
|
private _dir;
|
|
17
28
|
private _changeDetectorRef;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
popoverClosed$: Subject<void>;
|
|
21
|
-
private _portal;
|
|
29
|
+
private _focusMonitor?;
|
|
30
|
+
private _portal?;
|
|
22
31
|
private _overlayRef;
|
|
23
32
|
private _popoverOpen;
|
|
24
33
|
private _halt;
|
|
25
|
-
private _backdropSubscription;
|
|
26
34
|
private _positionSubscription;
|
|
27
|
-
private
|
|
35
|
+
private _popoverCloseSubscription;
|
|
36
|
+
private _closingActionsSubscription;
|
|
37
|
+
private _scrollStrategy;
|
|
28
38
|
private _mouseoverTimer;
|
|
29
|
-
|
|
30
|
-
private _onDestroy;
|
|
39
|
+
_openedBy: Exclude<FocusOrigin, 'program' | null> | undefined;
|
|
31
40
|
/** References the popover instance that the trigger is associated with. */
|
|
32
|
-
popover: MtxPopoverPanel;
|
|
41
|
+
get popover(): MtxPopoverPanel;
|
|
42
|
+
set popover(popover: MtxPopoverPanel);
|
|
43
|
+
private _popover;
|
|
44
|
+
/** Data to be passed along to any lazily-rendered content. */
|
|
45
|
+
popoverData: any;
|
|
33
46
|
/** References the popover target instance that the trigger is associated with. */
|
|
34
|
-
targetElement
|
|
47
|
+
targetElement?: MtxPopoverTarget;
|
|
35
48
|
/** Popover trigger event */
|
|
36
|
-
triggerEvent
|
|
49
|
+
triggerEvent?: MtxPopoverTriggerEvent;
|
|
37
50
|
/** Event emitted when the associated popover is opened. */
|
|
38
51
|
popoverOpened: EventEmitter<void>;
|
|
39
52
|
/** Event emitted when the associated popover is closed. */
|
|
40
53
|
popoverClosed: EventEmitter<void>;
|
|
41
|
-
constructor(_overlay: Overlay, _elementRef: ElementRef
|
|
42
|
-
|
|
54
|
+
constructor(_overlay: Overlay, _elementRef: ElementRef<HTMLElement>, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _dir: Directionality, _changeDetectorRef: ChangeDetectorRef, _focusMonitor?: FocusMonitor | undefined);
|
|
55
|
+
ngAfterContentInit(): void;
|
|
43
56
|
ngOnDestroy(): void;
|
|
44
57
|
private _setCurrentConfig;
|
|
45
58
|
/** Whether the popover is open. */
|
|
46
59
|
get popoverOpen(): boolean;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
60
|
+
/** The text direction of the containing app. */
|
|
61
|
+
get dir(): Direction;
|
|
62
|
+
/** Handles mouse click on the trigger. */
|
|
63
|
+
_handleClick(event: MouseEvent): void;
|
|
64
|
+
/** Handles mouse enter on the trigger. */
|
|
65
|
+
_handleMouseEnter(event: MouseEvent): void;
|
|
66
|
+
/** Handles mouse leave on the trigger. */
|
|
67
|
+
_handleMouseLeave(event: MouseEvent): void;
|
|
68
|
+
/** Handles mouse presses on the trigger. */
|
|
69
|
+
_handleMousedown(event: MouseEvent): void;
|
|
70
|
+
/** Handles key presses on the trigger. */
|
|
71
|
+
_handleKeydown(event: KeyboardEvent): void;
|
|
50
72
|
/** Toggles the popover between the open and closed states. */
|
|
51
73
|
togglePopover(): void;
|
|
52
74
|
/** Opens the popover. */
|
|
53
75
|
openPopover(): void;
|
|
54
76
|
/** Closes the popover. */
|
|
55
77
|
closePopover(): void;
|
|
56
|
-
/** Removes the popover from the DOM. */
|
|
57
|
-
destroyPopover(): void;
|
|
58
|
-
/** Focuses the popover trigger. */
|
|
59
|
-
focus(): void;
|
|
60
|
-
/** The text direction of the containing app. */
|
|
61
|
-
get dir(): Direction;
|
|
62
78
|
/**
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
* the popover, and it would fail to unsubscribe properly. Instead, we unsubscribe
|
|
66
|
-
* explicitly when the popover is closed or destroyed.
|
|
79
|
+
* Focuses the popover trigger.
|
|
80
|
+
* @param origin Source of the popover trigger's focus.
|
|
67
81
|
*/
|
|
68
|
-
|
|
69
|
-
|
|
82
|
+
focus(origin?: FocusOrigin, options?: FocusOptions): void;
|
|
83
|
+
/** Removes the popover from the DOM. */
|
|
84
|
+
private _destroyPopover;
|
|
70
85
|
/**
|
|
71
|
-
* This method sets the popover state to open
|
|
72
|
-
* the popover was opened via the keyboard.
|
|
86
|
+
* This method sets the popover state to open.
|
|
73
87
|
*/
|
|
74
88
|
private _initPopover;
|
|
89
|
+
private _setIsPopoverOpen;
|
|
75
90
|
/**
|
|
76
|
-
* This method
|
|
77
|
-
*
|
|
78
|
-
*/
|
|
79
|
-
private _resetPopover;
|
|
80
|
-
/** set state rather than toggle to support triggers sharing a popover */
|
|
81
|
-
private _setPopoverOpened;
|
|
82
|
-
/** set state rather than toggle to support triggers sharing a popover */
|
|
83
|
-
private _setPopoverClosed;
|
|
84
|
-
/**
|
|
85
|
-
* This method checks that a valid instance of MdPopover has been passed into
|
|
86
|
-
* mdPopoverTriggerFor. If not, an exception is thrown.
|
|
91
|
+
* This method checks that a valid instance of MdPopover has been passed into
|
|
92
|
+
* `mtxPopoverTriggerFor`. If not, an exception is thrown.
|
|
87
93
|
*/
|
|
88
94
|
private _checkPopover;
|
|
89
95
|
/**
|
|
90
|
-
*
|
|
91
|
-
*
|
|
96
|
+
* This method creates the overlay from the provided popover's template and saves its
|
|
97
|
+
* OverlayRef so that it can be attached to the DOM when openPopover is called.
|
|
92
98
|
*/
|
|
93
99
|
private _createOverlay;
|
|
94
100
|
/**
|
|
@@ -96,10 +102,7 @@ export declare class MtxPopoverTrigger implements AfterViewInit, OnDestroy {
|
|
|
96
102
|
* @returns OverlayConfig
|
|
97
103
|
*/
|
|
98
104
|
private _getOverlayConfig;
|
|
99
|
-
|
|
100
|
-
* This method returns the scroll strategy used by the cdk/overlay.
|
|
101
|
-
*/
|
|
102
|
-
private _getOverlayScrollStrategy;
|
|
105
|
+
private _getTargetElement;
|
|
103
106
|
/**
|
|
104
107
|
* Listens to changes in the position of the overlay and sets the correct classes
|
|
105
108
|
* on the popover based on the new position. This ensures the animation origin is always
|
|
@@ -107,13 +110,15 @@ export declare class MtxPopoverTrigger implements AfterViewInit, OnDestroy {
|
|
|
107
110
|
*/
|
|
108
111
|
private _subscribeToPositions;
|
|
109
112
|
/**
|
|
110
|
-
*
|
|
111
|
-
*
|
|
112
|
-
* @
|
|
113
|
+
* Sets the appropriate positions on a position strategy
|
|
114
|
+
* so the overlay connects with the trigger correctly.
|
|
115
|
+
* @param positionStrategy Strategy whose position to update.
|
|
113
116
|
*/
|
|
114
|
-
private
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
private _setPosition;
|
|
118
|
+
/** Returns a stream that emits whenever an action that should close the popover occurs. */
|
|
119
|
+
private _popoverClosingActions;
|
|
120
|
+
/** Gets the portal that should be attached to the overlay. */
|
|
121
|
+
private _getPortal;
|
|
122
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverTrigger, [null, null, null, null, { optional: true; }, null, null]>;
|
|
123
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPopoverTrigger, "[mtx-popover-trigger-for], [mtxPopoverTriggerFor]", ["mtxPopoverTrigger"], { "popover": "mtxPopoverTriggerFor"; "popoverData": "mtxPopoverTriggerData"; "targetElement": "mtxPopoverTargetAt"; "triggerEvent": "mtxPopoverTriggerOn"; }, { "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; }, never>;
|
|
119
124
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
/** First value of popover's position. */
|
|
1
2
|
export declare type MtxPopoverPositionStart = 'above' | 'below' | 'before' | 'after';
|
|
3
|
+
/** Second value of popover's position. */
|
|
2
4
|
export declare type MtxPopoverPositionEnd = MtxPopoverPositionStart | 'center';
|
|
5
|
+
/** Popover's position. */
|
|
3
6
|
export declare type MtxPopoverPosition = [MtxPopoverPositionStart, MtxPopoverPositionEnd];
|
|
7
|
+
/** Popover's trigger event. */
|
|
4
8
|
export declare type MtxPopoverTriggerEvent = 'click' | 'hover' | 'none';
|
|
5
|
-
|
|
9
|
+
/** Reason why the popover was closed. */
|
|
10
|
+
export declare type PopoverCloseReason = void | 'click' | 'keydown' | 'tab';
|
package/popover/popover.d.ts
CHANGED
|
@@ -1,106 +1,122 @@
|
|
|
1
|
-
import { EventEmitter, OnDestroy, TemplateRef, ElementRef, NgZone } from '@angular/core';
|
|
2
1
|
import { AnimationEvent } from '@angular/animations';
|
|
2
|
+
import { Direction } from '@angular/cdk/bidi';
|
|
3
3
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, TemplateRef } from '@angular/core';
|
|
5
|
+
import { Subject } from 'rxjs';
|
|
6
|
+
import { MtxPopoverContent } from './popover-content';
|
|
7
|
+
import { MtxPopoverDefaultOptions, MtxPopoverPanel } from './popover-interfaces';
|
|
8
|
+
import { MtxPopoverPosition, MtxPopoverTriggerEvent, PopoverCloseReason } from './popover-types';
|
|
7
9
|
import * as i0 from "@angular/core";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
/** Injection token to be used to override the default options for `mtx-popover`. */
|
|
11
|
+
export declare const MTX_POPOVER_DEFAULT_OPTIONS: InjectionToken<MtxPopoverDefaultOptions>;
|
|
12
|
+
/** @docs-private */
|
|
13
|
+
export declare function MTX_POPOVER_DEFAULT_OPTIONS_FACTORY(): MtxPopoverDefaultOptions;
|
|
14
|
+
export declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
|
|
10
15
|
private _elementRef;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
/** Settings for popover, view setters and getters for more detail */
|
|
14
|
-
private _position;
|
|
16
|
+
private _ngZone;
|
|
17
|
+
private _defaultOptions;
|
|
15
18
|
private _triggerEvent;
|
|
16
|
-
private _scrollStrategy;
|
|
17
19
|
private _enterDelay;
|
|
18
20
|
private _leaveDelay;
|
|
21
|
+
private _position;
|
|
19
22
|
private _panelOffsetX;
|
|
20
23
|
private _panelOffsetY;
|
|
24
|
+
private _arrowWidth;
|
|
25
|
+
private _arrowHeight;
|
|
26
|
+
private _arrowOffsetX;
|
|
27
|
+
private _arrowOffsetY;
|
|
21
28
|
private _closeOnPanelClick;
|
|
22
29
|
private _closeOnBackdropClick;
|
|
23
|
-
private _disableAnimation;
|
|
24
30
|
private _focusTrapEnabled;
|
|
25
31
|
private _focusTrapAutoCaptureEnabled;
|
|
26
|
-
private
|
|
27
|
-
private
|
|
28
|
-
private
|
|
29
|
-
private
|
|
30
|
-
/** Config object to be passed into the popover's ngClass */
|
|
32
|
+
private _hasBackdrop;
|
|
33
|
+
private _elevation;
|
|
34
|
+
private _previousElevation?;
|
|
35
|
+
private _elevationPrefix;
|
|
36
|
+
/** Config object to be passed into the popover's ngClass. */
|
|
31
37
|
_classList: {
|
|
32
38
|
[key: string]: boolean;
|
|
33
39
|
};
|
|
34
|
-
/**
|
|
35
|
-
|
|
40
|
+
/** Current state of the panel animation. */
|
|
41
|
+
_panelAnimationState: 'void' | 'enter';
|
|
42
|
+
/** Emits whenever an animation on the popover completes. */
|
|
43
|
+
readonly _animationDone: Subject<AnimationEvent>;
|
|
44
|
+
/** Whether the popover is animating. */
|
|
45
|
+
_isAnimating: boolean;
|
|
36
46
|
/** Closing disabled on popover */
|
|
37
47
|
closeDisabled: boolean;
|
|
38
48
|
/** Config object to be passed into the popover's arrow ngStyle */
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
arrowStyles: Record<string, unknown> | null;
|
|
50
|
+
/** Layout direction of the popover. */
|
|
51
|
+
direction?: Direction;
|
|
52
|
+
/** Class or list of classes to be added to the overlay panel. */
|
|
53
|
+
overlayPanelClass: string | string[];
|
|
54
|
+
/** Class to be added to the backdrop element. */
|
|
55
|
+
backdropClass: string | undefined;
|
|
56
|
+
/** aria-label for the popover panel. */
|
|
57
|
+
ariaLabel?: string;
|
|
58
|
+
/** aria-labelledby for the popover panel. */
|
|
59
|
+
ariaLabelledby?: string;
|
|
60
|
+
/** aria-describedby for the popover panel. */
|
|
61
|
+
ariaDescribedby?: string;
|
|
62
|
+
/** Popover's trigger event. */
|
|
50
63
|
get triggerEvent(): MtxPopoverTriggerEvent;
|
|
51
64
|
set triggerEvent(value: MtxPopoverTriggerEvent);
|
|
52
|
-
/** Popover
|
|
53
|
-
get scrollStrategy(): MtxPopoverScrollStrategy;
|
|
54
|
-
set scrollStrategy(value: MtxPopoverScrollStrategy);
|
|
55
|
-
/** Popover enter delay */
|
|
65
|
+
/** Popover's enter delay. */
|
|
56
66
|
get enterDelay(): number;
|
|
57
67
|
set enterDelay(value: number);
|
|
58
|
-
/** Popover leave delay */
|
|
68
|
+
/** Popover's leave delay. */
|
|
59
69
|
get leaveDelay(): number;
|
|
60
70
|
set leaveDelay(value: number);
|
|
61
|
-
/** Popover
|
|
71
|
+
/** Popover's position. */
|
|
72
|
+
get position(): MtxPopoverPosition;
|
|
73
|
+
set position(value: MtxPopoverPosition);
|
|
74
|
+
/** Popover-panel's X offset. */
|
|
62
75
|
get xOffset(): number;
|
|
63
76
|
set xOffset(value: number);
|
|
64
|
-
/** Popover
|
|
77
|
+
/** Popover-panel's Y offset. */
|
|
65
78
|
get yOffset(): number;
|
|
66
79
|
set yOffset(value: number);
|
|
67
|
-
/** Popover
|
|
68
|
-
get arrowOffsetX(): number;
|
|
69
|
-
set arrowOffsetX(value: number);
|
|
70
|
-
/** Popover arrow offset y */
|
|
71
|
-
get arrowOffsetY(): number;
|
|
72
|
-
set arrowOffsetY(value: number);
|
|
73
|
-
/** Popover arrow width */
|
|
80
|
+
/** Popover-arrow's width. */
|
|
74
81
|
get arrowWidth(): number;
|
|
75
82
|
set arrowWidth(value: number);
|
|
76
|
-
/** Popover
|
|
83
|
+
/** Popover-arrow's height. */
|
|
77
84
|
get arrowHeight(): number;
|
|
78
85
|
set arrowHeight(value: number);
|
|
79
|
-
/** Popover
|
|
86
|
+
/** Popover-arrow's X offset. */
|
|
87
|
+
get arrowOffsetX(): number;
|
|
88
|
+
set arrowOffsetX(value: number);
|
|
89
|
+
/** Popover-arrow's Y offset. */
|
|
90
|
+
get arrowOffsetY(): number;
|
|
91
|
+
set arrowOffsetY(value: number);
|
|
92
|
+
/** Whether popover can be closed when click the popover-panel. */
|
|
80
93
|
get closeOnPanelClick(): boolean;
|
|
81
94
|
set closeOnPanelClick(value: boolean);
|
|
82
|
-
/**
|
|
95
|
+
/** Whether popover can be closed when click the backdrop. */
|
|
83
96
|
get closeOnBackdropClick(): boolean;
|
|
84
97
|
set closeOnBackdropClick(value: boolean);
|
|
85
|
-
/**
|
|
86
|
-
get disableAnimation(): boolean;
|
|
87
|
-
set disableAnimation(value: boolean);
|
|
88
|
-
/** Popover focus trap using cdkTrapFocus */
|
|
98
|
+
/** Whether enable focus trap using `cdkTrapFocus`. */
|
|
89
99
|
get focusTrapEnabled(): boolean;
|
|
90
100
|
set focusTrapEnabled(value: boolean);
|
|
91
|
-
/**
|
|
101
|
+
/** Whether enable focus trap auto capture using `cdkTrapFocusAutoCapture`. */
|
|
92
102
|
get focusTrapAutoCaptureEnabled(): boolean;
|
|
93
103
|
set focusTrapAutoCaptureEnabled(value: boolean);
|
|
104
|
+
/** Whether the popover has a backdrop. It will always be false if the trigger event is hover. */
|
|
105
|
+
get hasBackdrop(): boolean | undefined;
|
|
106
|
+
set hasBackdrop(value: boolean | undefined);
|
|
107
|
+
/** Popover-panel's elevation (0~24). */
|
|
108
|
+
get elevation(): number;
|
|
109
|
+
set elevation(value: number);
|
|
94
110
|
/**
|
|
95
111
|
* This method takes classes set on the host md-popover element and applies them on the
|
|
96
|
-
* popover template that displays in the overlay container.
|
|
112
|
+
* popover template that displays in the overlay container. Otherwise, it's difficult
|
|
97
113
|
* to style the containing popover from outside the component.
|
|
98
114
|
* @param classes list of class names
|
|
99
115
|
*/
|
|
100
116
|
set panelClass(classes: string);
|
|
101
117
|
/**
|
|
102
118
|
* This method takes classes set on the host md-popover element and applies them on the
|
|
103
|
-
* popover template that displays in the overlay container.
|
|
119
|
+
* popover template that displays in the overlay container. Otherwise, it's difficult
|
|
104
120
|
* to style the containing popover from outside the component.
|
|
105
121
|
* @deprecated Use `panelClass` instead.
|
|
106
122
|
* @breaking-change 8.0.0
|
|
@@ -108,35 +124,47 @@ export declare class MtxPopover implements MtxPopoverPanel, OnDestroy {
|
|
|
108
124
|
get classList(): string;
|
|
109
125
|
set classList(classes: string);
|
|
110
126
|
/** Event emitted when the popover is closed. */
|
|
111
|
-
closed: EventEmitter<
|
|
127
|
+
closed: EventEmitter<PopoverCloseReason>;
|
|
128
|
+
/** @docs-private */
|
|
112
129
|
templateRef: TemplateRef<any>;
|
|
113
|
-
|
|
130
|
+
/**
|
|
131
|
+
* Popover content that will be rendered lazily.
|
|
132
|
+
* @docs-private
|
|
133
|
+
*/
|
|
134
|
+
lazyContent?: MtxPopoverContent;
|
|
135
|
+
readonly panelId: string;
|
|
136
|
+
constructor(_elementRef: ElementRef, _ngZone: NgZone, _defaultOptions: MtxPopoverDefaultOptions);
|
|
137
|
+
ngOnInit(): void;
|
|
114
138
|
ngOnDestroy(): void;
|
|
115
139
|
/** Handle a keyboard event from the popover, delegating to the appropriate action. */
|
|
116
140
|
_handleKeydown(event: KeyboardEvent): void;
|
|
117
|
-
/**
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
/** Disables close of popover when leaving trigger element and mouse over the popover */
|
|
125
|
-
onMouseOver(): void;
|
|
126
|
-
/** Enables close of popover when mouse leaving popover element */
|
|
127
|
-
onMouseLeave(): void;
|
|
128
|
-
/** Sets the current styles for the popover to allow for dynamically changing settings */
|
|
141
|
+
/** Close popover on click if `closeOnPanelClick` is true. */
|
|
142
|
+
_handleClick(): void;
|
|
143
|
+
/** Disables close of popover when leaving trigger element and mouse over the popover. */
|
|
144
|
+
_handleMouseOver(): void;
|
|
145
|
+
/** Enables close of popover when mouse leaving popover element. */
|
|
146
|
+
_handleMouseLeave(): void;
|
|
147
|
+
/** Sets the current styles for the popover to allow for dynamically changing settings. */
|
|
129
148
|
setCurrentStyles(pos?: MtxPopoverPosition): void;
|
|
130
149
|
/**
|
|
131
150
|
* It's necessary to set position-based classes to ensure the popover panel animation
|
|
132
151
|
* folds out from the correct direction.
|
|
133
152
|
*/
|
|
134
153
|
setPositionClasses(pos?: MtxPopoverPosition): void;
|
|
154
|
+
/** Sets the popover-panel's elevation. */
|
|
155
|
+
setElevation(): void;
|
|
156
|
+
/** Starts the enter animation. */
|
|
157
|
+
_startAnimation(): void;
|
|
158
|
+
/** Resets the panel animation to its initial state. */
|
|
159
|
+
_resetAnimation(): void;
|
|
160
|
+
/** Callback that is invoked when the panel animation completes. */
|
|
161
|
+
_onAnimationDone(event: AnimationEvent): void;
|
|
162
|
+
_onAnimationStart(event: AnimationEvent): void;
|
|
135
163
|
static ngAcceptInputType_closeOnPanelClick: BooleanInput;
|
|
136
164
|
static ngAcceptInputType_closeOnBackdropClick: BooleanInput;
|
|
137
|
-
static ngAcceptInputType_disableAnimation: BooleanInput;
|
|
138
165
|
static ngAcceptInputType_focusTrapEnabled: BooleanInput;
|
|
139
166
|
static ngAcceptInputType_focusTrapAutoCaptureEnabled: BooleanInput;
|
|
140
|
-
static
|
|
141
|
-
static
|
|
167
|
+
static ngAcceptInputType_hasBackdrop: BooleanInput;
|
|
168
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopover, never>;
|
|
169
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MtxPopover, "mtx-popover", ["mtxPopover"], { "backdropClass": "backdropClass"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "triggerEvent": "triggerEvent"; "enterDelay": "enterDelay"; "leaveDelay": "leaveDelay"; "position": "position"; "xOffset": "xOffset"; "yOffset": "yOffset"; "arrowWidth": "arrowWidth"; "arrowHeight": "arrowHeight"; "arrowOffsetX": "arrowOffsetX"; "arrowOffsetY": "arrowOffsetY"; "closeOnPanelClick": "closeOnPanelClick"; "closeOnBackdropClick": "closeOnBackdropClick"; "focusTrapEnabled": "focusTrapEnabled"; "focusTrapAutoCaptureEnabled": "focusTrapAutoCaptureEnabled"; "hasBackdrop": "hasBackdrop"; "elevation": "elevation"; "panelClass": "class"; "classList": "classList"; }, { "closed": "closed"; }, ["lazyContent"], ["*"]>;
|
|
142
170
|
}
|
package/popover/popover.scss
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
$arrow-size: 1em; // 16px default
|
|
2
2
|
|
|
3
3
|
.mtx-popover-panel {
|
|
4
|
+
position: relative;
|
|
4
5
|
max-height: calc(100vh - 48px);
|
|
5
6
|
padding: 8px;
|
|
6
7
|
border-radius: 4px;
|
|
7
8
|
font-size: 16px; // It can change the arrow size
|
|
9
|
+
outline: 0;
|
|
8
10
|
|
|
9
11
|
&[class*='mtx-popover-below'] {
|
|
10
12
|
margin-top: calc(#{$arrow-size * .5} + 2px);
|
package/popover/public-api.d.ts
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
|
1
2
|
import { AfterViewChecked, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
|
2
3
|
import { Subject } from 'rxjs';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
export declare class MtxOptionComponent implements OnChanges, AfterViewChecked, OnDestroy {
|
|
5
6
|
elementRef: ElementRef<HTMLElement>;
|
|
6
7
|
value: any;
|
|
7
|
-
get disabled():
|
|
8
|
-
set disabled(value:
|
|
8
|
+
get disabled(): boolean;
|
|
9
|
+
set disabled(value: boolean);
|
|
10
|
+
private _disabled;
|
|
11
|
+
get label(): string;
|
|
12
|
+
private _previousLabel?;
|
|
9
13
|
readonly stateChange$: Subject<{
|
|
10
14
|
value: any;
|
|
11
15
|
disabled: boolean;
|
|
12
16
|
label?: string | undefined;
|
|
13
17
|
}>;
|
|
14
|
-
private _disabled;
|
|
15
|
-
private _previousLabel;
|
|
16
18
|
constructor(elementRef: ElementRef<HTMLElement>);
|
|
17
|
-
get label(): string;
|
|
18
19
|
ngOnChanges(changes: SimpleChanges): void;
|
|
19
20
|
ngAfterViewChecked(): void;
|
|
20
21
|
ngOnDestroy(): void;
|
|
21
|
-
|
|
22
|
+
static ngAcceptInputType_disabled: BooleanInput;
|
|
22
23
|
static ɵfac: i0.ɵɵFactoryDeclaration<MtxOptionComponent, never>;
|
|
23
24
|
static ɵcmp: i0.ɵɵComponentDeclaration<MtxOptionComponent, "mtx-option", ["mtxOption"], { "value": "value"; "disabled": "disabled"; }, {}, never, ["*"]>;
|
|
24
25
|
}
|