@angular/material 19.0.0-next.8 → 19.0.0-rc.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/_index.scss +1 -2
- package/autocomplete/_autocomplete-theme.scss +37 -24
- package/autocomplete/index.d.ts +5 -6
- package/badge/_badge-theme.scss +38 -24
- package/bottom-sheet/_bottom-sheet-theme.scss +32 -20
- package/button/_button-theme.scss +229 -105
- package/button/_fab-theme.scss +95 -44
- package/button/_icon-button-theme.scss +38 -25
- package/button/index.d.ts +3 -3
- package/button-toggle/_button-toggle-theme.scss +62 -37
- package/card/_card-theme.scss +79 -38
- package/card/index.d.ts +2 -3
- package/checkbox/_checkbox-theme.scss +16 -10
- package/chips/_chips-theme.scss +64 -30
- package/core/_core-theme.scss +55 -37
- package/core/_core.scss +3 -6
- package/core/option/_optgroup-theme.scss +29 -18
- package/core/option/_option-theme.scss +34 -21
- package/core/ripple/_ripple-theme.scss +33 -21
- package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +49 -23
- package/core/theming/_config-validation.scss +4 -4
- package/core/theming/_definition.scss +12 -2
- package/core/tokens/_m3-system.scss +86 -42
- package/core/tokens/_token-utils.scss +91 -34
- package/core/tokens/m2/mat/_badge.scss +12 -3
- package/core/tokens/m2/mdc/_radio.scss +1 -1
- package/core/tokens/m3/definitions/_md-comp-elevated-card.scss +1 -1
- package/core/tokens/m3/mat/_badge.scss +6 -3
- package/datepicker/_datepicker-theme.scss +53 -32
- package/datepicker/index.d.ts +33 -34
- package/dialog/_dialog-theme.scss +46 -23
- package/divider/_divider-theme.scss +28 -17
- package/expansion/_expansion-theme.scss +36 -24
- package/fesm2022/autocomplete/testing.mjs +2 -5
- package/fesm2022/autocomplete/testing.mjs.map +1 -1
- package/fesm2022/autocomplete.mjs +225 -148
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge/testing.mjs +2 -5
- package/fesm2022/badge/testing.mjs.map +1 -1
- package/fesm2022/badge.mjs +45 -35
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet/testing.mjs +1 -1
- package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +80 -58
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button/testing.mjs +2 -2
- package/fesm2022/button/testing.mjs.map +1 -1
- package/fesm2022/button-toggle/testing.mjs +4 -7
- package/fesm2022/button-toggle/testing.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +82 -45
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +106 -79
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card/testing.mjs +3 -6
- package/fesm2022/card/testing.mjs.map +1 -1
- package/fesm2022/card.mjs +56 -69
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox/testing.mjs +4 -7
- package/fesm2022/checkbox/testing.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +104 -62
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips/testing.mjs +11 -14
- package/fesm2022/chips/testing.mjs.map +1 -1
- package/fesm2022/chips.mjs +322 -276
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core/testing.mjs +5 -11
- package/fesm2022/core/testing.mjs.map +1 -1
- package/fesm2022/core.mjs +242 -187
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker/testing.mjs +13 -22
- package/fesm2022/datepicker/testing.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +827 -582
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog/testing.mjs +15 -10
- package/fesm2022/dialog/testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +221 -156
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider/testing.mjs +1 -1
- package/fesm2022/divider/testing.mjs.map +1 -1
- package/fesm2022/divider.mjs +10 -12
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion/testing.mjs +7 -10
- package/fesm2022/expansion/testing.mjs.map +1 -1
- package/fesm2022/expansion.mjs +86 -80
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field/testing.mjs +12 -15
- package/fesm2022/form-field/testing.mjs.map +1 -1
- package/fesm2022/form-field.mjs +179 -132
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list/testing.mjs +11 -17
- package/fesm2022/grid-list/testing.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +75 -56
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +8 -8
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +66 -46
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input/testing.mjs +3 -3
- package/fesm2022/input/testing.mjs.map +1 -1
- package/fesm2022/input.mjs +103 -72
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list/testing.mjs +21 -38
- package/fesm2022/list/testing.mjs.map +1 -1
- package/fesm2022/list.mjs +197 -195
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu/testing.mjs +3 -6
- package/fesm2022/menu/testing.mjs.map +1 -1
- package/fesm2022/menu.mjs +178 -127
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator/testing.mjs +10 -13
- package/fesm2022/paginator/testing.mjs.map +1 -1
- package/fesm2022/paginator.mjs +83 -58
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar/testing.mjs +1 -1
- package/fesm2022/progress-bar/testing.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +36 -35
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner/testing.mjs +1 -1
- package/fesm2022/progress-spinner/testing.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +28 -14
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio/testing.mjs +6 -12
- package/fesm2022/radio/testing.mjs.map +1 -1
- package/fesm2022/radio.mjs +123 -87
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select/testing.mjs +6 -9
- package/fesm2022/select/testing.mjs.map +1 -1
- package/fesm2022/select.mjs +219 -182
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav/testing.mjs +6 -6
- package/fesm2022/sidenav/testing.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +136 -125
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle/testing.mjs +3 -6
- package/fesm2022/slide-toggle/testing.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +77 -47
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider/testing.mjs +2 -2
- package/fesm2022/slider/testing.mjs.map +1 -1
- package/fesm2022/slider.mjs +262 -194
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar/testing.mjs +4 -7
- package/fesm2022/snack-bar/testing.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +143 -111
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort/testing.mjs +3 -6
- package/fesm2022/sort/testing.mjs.map +1 -1
- package/fesm2022/sort.mjs +94 -74
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper/testing.mjs +4 -4
- package/fesm2022/stepper/testing.mjs.map +1 -1
- package/fesm2022/stepper.mjs +146 -113
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table/testing.mjs +13 -25
- package/fesm2022/table/testing.mjs.map +1 -1
- package/fesm2022/table.mjs +183 -194
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs/testing.mjs +5 -5
- package/fesm2022/tabs/testing.mjs.map +1 -1
- package/fesm2022/tabs.mjs +329 -251
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/timepicker/testing.mjs +7 -16
- package/fesm2022/timepicker/testing.mjs.map +1 -1
- package/fesm2022/timepicker.mjs +160 -155
- package/fesm2022/timepicker.mjs.map +1 -1
- package/fesm2022/toolbar/testing.mjs +2 -5
- package/fesm2022/toolbar/testing.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +26 -17
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip/testing.mjs +6 -9
- package/fesm2022/tooltip/testing.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +97 -74
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree/testing.mjs +3 -6
- package/fesm2022/tree/testing.mjs.map +1 -1
- package/fesm2022/tree.mjs +57 -61
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +114 -61
- package/form-field/index.d.ts +9 -10
- package/grid-list/_grid-list-theme.scss +25 -15
- package/icon/_icon-theme.scss +22 -14
- package/input/_input-theme.scss +18 -11
- package/list/_list-theme.scss +89 -47
- package/list/index.d.ts +20 -21
- package/menu/_menu-theme.scss +33 -21
- package/menu/index.d.ts +8 -9
- package/package.json +2 -2
- package/paginator/_paginator-theme.scss +39 -23
- package/prebuilt-themes/azure-blue.css +1 -1
- package/prebuilt-themes/cyan-orange.css +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/magenta-violet.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/prebuilt-themes/rose-red.css +1 -1
- package/progress-bar/_progress-bar-theme.scss +20 -16
- package/progress-spinner/_progress-spinner-theme.scss +41 -25
- package/progress-spinner/index.d.ts +3 -4
- package/radio/_radio-theme.scss +60 -32
- package/radio/index.d.ts +2 -3
- package/schematics/collection.json +3 -3
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-add/theming/create-custom-theme.js +1 -6
- package/schematics/ng-add/theming/create-custom-theme.mjs +1 -6
- package/schematics/ng-generate/{m3-theme → theme-color}/index_bundled.js +480 -288
- package/schematics/ng-generate/theme-color/index_bundled.js.map +7 -0
- package/schematics/ng-generate/{m3-theme → theme-color}/schema.json +7 -13
- package/schematics/ng-update/index_bundled.js +6 -1
- package/schematics/ng-update/index_bundled.js.map +1 -1
- package/select/_select-theme.scss +38 -25
- package/select/index.d.ts +6 -7
- package/sidenav/_sidenav-theme.scss +28 -17
- package/slide-toggle/_slide-toggle-theme.scss +52 -28
- package/slider/_slider-theme.scss +62 -38
- package/snack-bar/_snack-bar-theme.scss +29 -17
- package/sort/_sort-theme.scss +33 -21
- package/stepper/_stepper-theme.scss +40 -27
- package/stepper/index.d.ts +14 -15
- package/table/_table-theme.scss +36 -23
- package/tabs/_tabs-theme.scss +97 -50
- package/tabs/index.d.ts +2 -2
- package/timepicker/_timepicker-theme.scss +37 -24
- package/toolbar/_toolbar-theme.scss +35 -22
- package/tooltip/_tooltip-theme.scss +18 -15
- package/tooltip/index.d.ts +5 -6
- package/tree/_tree-theme.scss +33 -21
- package/schematics/ng-generate/m3-theme/index_bundled.js.map +0 -7
package/fesm2022/menu.mjs
CHANGED
|
@@ -4,7 +4,7 @@ import { FocusMonitor, FocusKeyManager, isFakeTouchstartFromScreenReader, isFake
|
|
|
4
4
|
import { UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
|
|
5
5
|
import { Subject, merge, Subscription, of, asapScheduler } from 'rxjs';
|
|
6
6
|
import { startWith, switchMap, takeUntil, filter, take, delay } from 'rxjs/operators';
|
|
7
|
-
import { DOCUMENT
|
|
7
|
+
import { DOCUMENT } from '@angular/common';
|
|
8
8
|
import { _StructuralStylesLoader, MatRipple, MatRippleModule, MatCommonModule } from '@angular/material/core';
|
|
9
9
|
import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
|
|
10
10
|
import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
@@ -24,26 +24,26 @@ const MAT_MENU_PANEL = new InjectionToken('MAT_MENU_PANEL');
|
|
|
24
24
|
* Single item inside a `mat-menu`. Provides the menu item styling and accessibility treatment.
|
|
25
25
|
*/
|
|
26
26
|
class MatMenuItem {
|
|
27
|
+
_elementRef = inject(ElementRef);
|
|
28
|
+
_document = inject(DOCUMENT);
|
|
29
|
+
_focusMonitor = inject(FocusMonitor);
|
|
30
|
+
_parentMenu = inject(MAT_MENU_PANEL, { optional: true });
|
|
31
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
32
|
+
/** ARIA role for the menu item. */
|
|
33
|
+
role = 'menuitem';
|
|
34
|
+
/** Whether the menu item is disabled. */
|
|
35
|
+
disabled = false;
|
|
36
|
+
/** Whether ripples are disabled on the menu item. */
|
|
37
|
+
disableRipple = false;
|
|
38
|
+
/** Stream that emits when the menu item is hovered. */
|
|
39
|
+
_hovered = new Subject();
|
|
40
|
+
/** Stream that emits when the menu item is focused. */
|
|
41
|
+
_focused = new Subject();
|
|
42
|
+
/** Whether the menu item is highlighted. */
|
|
43
|
+
_highlighted = false;
|
|
44
|
+
/** Whether the menu item acts as a trigger for a sub-menu. */
|
|
45
|
+
_triggersSubmenu = false;
|
|
27
46
|
constructor() {
|
|
28
|
-
this._elementRef = inject(ElementRef);
|
|
29
|
-
this._document = inject(DOCUMENT);
|
|
30
|
-
this._focusMonitor = inject(FocusMonitor);
|
|
31
|
-
this._parentMenu = inject(MAT_MENU_PANEL, { optional: true });
|
|
32
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
33
|
-
/** ARIA role for the menu item. */
|
|
34
|
-
this.role = 'menuitem';
|
|
35
|
-
/** Whether the menu item is disabled. */
|
|
36
|
-
this.disabled = false;
|
|
37
|
-
/** Whether ripples are disabled on the menu item. */
|
|
38
|
-
this.disableRipple = false;
|
|
39
|
-
/** Stream that emits when the menu item is hovered. */
|
|
40
|
-
this._hovered = new Subject();
|
|
41
|
-
/** Stream that emits when the menu item is focused. */
|
|
42
|
-
this._focused = new Subject();
|
|
43
|
-
/** Whether the menu item is highlighted. */
|
|
44
|
-
this._highlighted = false;
|
|
45
|
-
/** Whether the menu item acts as a trigger for a sub-menu. */
|
|
46
|
-
this._triggersSubmenu = false;
|
|
47
47
|
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
48
48
|
this._parentMenu?.addItem?.(this);
|
|
49
49
|
}
|
|
@@ -118,10 +118,10 @@ class MatMenuItem {
|
|
|
118
118
|
_hasFocus() {
|
|
119
119
|
return this._document && this._document.activeElement === this._getHostElement();
|
|
120
120
|
}
|
|
121
|
-
static
|
|
122
|
-
static
|
|
121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: MatMenuItem, isStandalone: true, selector: "[mat-menu-item]", inputs: { role: "role", disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "class.mat-mdc-menu-item-highlighted": "_highlighted", "class.mat-mdc-menu-item-submenu-trigger": "_triggersSubmenu", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled", "attr.disabled": "disabled || null" }, classAttribute: "mat-mdc-menu-item mat-focus-indicator" }, exportAs: ["matMenuItem"], ngImport: i0, template: "<ng-content select=\"mat-icon, [matMenuItemIcon]\"></ng-content>\n<span class=\"mat-mdc-menu-item-text\"><ng-content></ng-content></span>\n<div class=\"mat-mdc-menu-ripple\" matRipple\n [matRippleDisabled]=\"disableRipple || disabled\"\n [matRippleTrigger]=\"_getHostElement()\">\n</div>\n\n@if (_triggersSubmenu) {\n <svg\n class=\"mat-mdc-menu-submenu-icon\"\n viewBox=\"0 0 5 10\"\n focusable=\"false\"\n aria-hidden=\"true\"><polygon points=\"0,0 5,5 0,10\"/></svg>\n}\n", dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
123
123
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuItem, decorators: [{
|
|
125
125
|
type: Component,
|
|
126
126
|
args: [{ selector: '[mat-menu-item]', exportAs: 'matMenuItem', host: {
|
|
127
127
|
'[attr.role]': 'role',
|
|
@@ -133,7 +133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
133
133
|
'[attr.disabled]': 'disabled || null',
|
|
134
134
|
'(click)': '_checkDisabled($event)',
|
|
135
135
|
'(mouseenter)': '_handleMouseEnter()',
|
|
136
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None,
|
|
136
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatRipple], template: "<ng-content select=\"mat-icon, [matMenuItemIcon]\"></ng-content>\n<span class=\"mat-mdc-menu-item-text\"><ng-content></ng-content></span>\n<div class=\"mat-mdc-menu-ripple\" matRipple\n [matRippleDisabled]=\"disableRipple || disabled\"\n [matRippleTrigger]=\"_getHostElement()\">\n</div>\n\n@if (_triggersSubmenu) {\n <svg\n class=\"mat-mdc-menu-submenu-icon\"\n viewBox=\"0 0 5 10\"\n focusable=\"false\"\n aria-hidden=\"true\"><polygon points=\"0,0 5,5 0,10\"/></svg>\n}\n" }]
|
|
137
137
|
}], ctorParameters: () => [], propDecorators: { role: [{
|
|
138
138
|
type: Input
|
|
139
139
|
}], disabled: [{
|
|
@@ -180,16 +180,17 @@ function throwMatMenuRecursiveError() {
|
|
|
180
180
|
const MAT_MENU_CONTENT = new InjectionToken('MatMenuContent');
|
|
181
181
|
/** Menu content that will be rendered lazily once the menu is opened. */
|
|
182
182
|
class MatMenuContent {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
183
|
+
_template = inject(TemplateRef);
|
|
184
|
+
_appRef = inject(ApplicationRef);
|
|
185
|
+
_injector = inject(Injector);
|
|
186
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
187
|
+
_document = inject(DOCUMENT);
|
|
188
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
189
|
+
_portal;
|
|
190
|
+
_outlet;
|
|
191
|
+
/** Emits when the menu content has been attached. */
|
|
192
|
+
_attached = new Subject();
|
|
193
|
+
constructor() { }
|
|
193
194
|
/**
|
|
194
195
|
* Attaches the content with a particular context.
|
|
195
196
|
* @docs-private
|
|
@@ -230,15 +231,14 @@ class MatMenuContent {
|
|
|
230
231
|
this._outlet.dispose();
|
|
231
232
|
}
|
|
232
233
|
}
|
|
233
|
-
static
|
|
234
|
-
static
|
|
234
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
235
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatMenuContent, isStandalone: true, selector: "ng-template[matMenuContent]", providers: [{ provide: MAT_MENU_CONTENT, useExisting: MatMenuContent }], ngImport: i0 });
|
|
235
236
|
}
|
|
236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuContent, decorators: [{
|
|
237
238
|
type: Directive,
|
|
238
239
|
args: [{
|
|
239
240
|
selector: 'ng-template[matMenuContent]',
|
|
240
241
|
providers: [{ provide: MAT_MENU_CONTENT, useExisting: MatMenuContent }],
|
|
241
|
-
standalone: true,
|
|
242
242
|
}]
|
|
243
243
|
}], ctorParameters: () => [] });
|
|
244
244
|
|
|
@@ -311,6 +311,41 @@ function MAT_MENU_DEFAULT_OPTIONS_FACTORY() {
|
|
|
311
311
|
};
|
|
312
312
|
}
|
|
313
313
|
class MatMenu {
|
|
314
|
+
_elementRef = inject(ElementRef);
|
|
315
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
316
|
+
_keyManager;
|
|
317
|
+
_xPosition;
|
|
318
|
+
_yPosition;
|
|
319
|
+
_firstItemFocusRef;
|
|
320
|
+
_previousElevation;
|
|
321
|
+
_elevationPrefix = 'mat-elevation-z';
|
|
322
|
+
_baseElevation = null;
|
|
323
|
+
/** All items inside the menu. Includes items nested inside another menu. */
|
|
324
|
+
_allItems;
|
|
325
|
+
/** Only the direct descendant menu items. */
|
|
326
|
+
_directDescendantItems = new QueryList();
|
|
327
|
+
/** Classes to be applied to the menu panel. */
|
|
328
|
+
_classList = {};
|
|
329
|
+
/** Current state of the panel animation. */
|
|
330
|
+
_panelAnimationState = 'void';
|
|
331
|
+
/** Emits whenever an animation on the menu completes. */
|
|
332
|
+
_animationDone = new Subject();
|
|
333
|
+
/** Whether the menu is animating. */
|
|
334
|
+
_isAnimating;
|
|
335
|
+
/** Parent menu of the current menu panel. */
|
|
336
|
+
parentMenu;
|
|
337
|
+
/** Layout direction of the menu. */
|
|
338
|
+
direction;
|
|
339
|
+
/** Class or list of classes to be added to the overlay panel. */
|
|
340
|
+
overlayPanelClass;
|
|
341
|
+
/** Class to be added to the backdrop element. */
|
|
342
|
+
backdropClass;
|
|
343
|
+
/** aria-label for the menu panel. */
|
|
344
|
+
ariaLabel;
|
|
345
|
+
/** aria-labelledby for the menu panel. */
|
|
346
|
+
ariaLabelledby;
|
|
347
|
+
/** aria-describedby for the menu panel. */
|
|
348
|
+
ariaDescribedby;
|
|
314
349
|
/** Position of the menu in the X axis. */
|
|
315
350
|
get xPosition() {
|
|
316
351
|
return this._xPosition;
|
|
@@ -335,6 +370,23 @@ class MatMenu {
|
|
|
335
370
|
this._yPosition = value;
|
|
336
371
|
this.setPositionClasses();
|
|
337
372
|
}
|
|
373
|
+
/** @docs-private */
|
|
374
|
+
templateRef;
|
|
375
|
+
/**
|
|
376
|
+
* List of the items inside of a menu.
|
|
377
|
+
* @deprecated
|
|
378
|
+
* @breaking-change 8.0.0
|
|
379
|
+
*/
|
|
380
|
+
items;
|
|
381
|
+
/**
|
|
382
|
+
* Menu content that will be rendered lazily.
|
|
383
|
+
* @docs-private
|
|
384
|
+
*/
|
|
385
|
+
lazyContent;
|
|
386
|
+
/** Whether the menu should overlap its trigger. */
|
|
387
|
+
overlapTrigger;
|
|
388
|
+
/** Whether the menu has a backdrop. */
|
|
389
|
+
hasBackdrop;
|
|
338
390
|
/**
|
|
339
391
|
* This method takes classes set on the host mat-menu element and applies them on the
|
|
340
392
|
* menu template that displays in the overlay container. Otherwise, it's difficult
|
|
@@ -358,6 +410,7 @@ class MatMenu {
|
|
|
358
410
|
}
|
|
359
411
|
this._classList = newClassList;
|
|
360
412
|
}
|
|
413
|
+
_previousPanelClass;
|
|
361
414
|
/**
|
|
362
415
|
* This method takes classes set on the host mat-menu element and applies them on the
|
|
363
416
|
* menu template that displays in the overlay container. Otherwise, it's difficult
|
|
@@ -371,29 +424,17 @@ class MatMenu {
|
|
|
371
424
|
set classList(classes) {
|
|
372
425
|
this.panelClass = classes;
|
|
373
426
|
}
|
|
427
|
+
/** Event emitted when the menu is closed. */
|
|
428
|
+
closed = new EventEmitter();
|
|
429
|
+
/**
|
|
430
|
+
* Event emitted when the menu is closed.
|
|
431
|
+
* @deprecated Switch to `closed` instead
|
|
432
|
+
* @breaking-change 8.0.0
|
|
433
|
+
*/
|
|
434
|
+
close = this.closed;
|
|
435
|
+
panelId = `mat-menu-panel-${menuPanelUid++}`;
|
|
436
|
+
_injector = inject(Injector);
|
|
374
437
|
constructor() {
|
|
375
|
-
this._elementRef = inject(ElementRef);
|
|
376
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
377
|
-
this._elevationPrefix = 'mat-elevation-z';
|
|
378
|
-
this._baseElevation = null;
|
|
379
|
-
/** Only the direct descendant menu items. */
|
|
380
|
-
this._directDescendantItems = new QueryList();
|
|
381
|
-
/** Classes to be applied to the menu panel. */
|
|
382
|
-
this._classList = {};
|
|
383
|
-
/** Current state of the panel animation. */
|
|
384
|
-
this._panelAnimationState = 'void';
|
|
385
|
-
/** Emits whenever an animation on the menu completes. */
|
|
386
|
-
this._animationDone = new Subject();
|
|
387
|
-
/** Event emitted when the menu is closed. */
|
|
388
|
-
this.closed = new EventEmitter();
|
|
389
|
-
/**
|
|
390
|
-
* Event emitted when the menu is closed.
|
|
391
|
-
* @deprecated Switch to `closed` instead
|
|
392
|
-
* @breaking-change 8.0.0
|
|
393
|
-
*/
|
|
394
|
-
this.close = this.closed;
|
|
395
|
-
this.panelId = `mat-menu-panel-${menuPanelUid++}`;
|
|
396
|
-
this._injector = inject(Injector);
|
|
397
438
|
const defaultOptions = inject(MAT_MENU_DEFAULT_OPTIONS);
|
|
398
439
|
this.overlayPanelClass = defaultOptions.overlayPanelClass || '';
|
|
399
440
|
this._xPosition = defaultOptions.xPosition;
|
|
@@ -618,16 +659,16 @@ class MatMenu {
|
|
|
618
659
|
this._directDescendantItems.notifyOnChanges();
|
|
619
660
|
});
|
|
620
661
|
}
|
|
621
|
-
static
|
|
622
|
-
static
|
|
662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
663
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatMenu, isStandalone: true, selector: "mat-menu", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], xPosition: "xPosition", yPosition: "yPosition", overlapTrigger: ["overlapTrigger", "overlapTrigger", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", (value) => (value == null ? null : booleanAttribute(value))], panelClass: ["class", "panelClass"], classList: "classList" }, outputs: { closed: "closed", close: "close" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, providers: [{ provide: MAT_MENU_PANEL, useExisting: MatMenu }], queries: [{ propertyName: "lazyContent", first: true, predicate: MAT_MENU_CONTENT, descendants: true }, { propertyName: "_allItems", predicate: MatMenuItem, descendants: true }, { propertyName: "items", predicate: MatMenuItem }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["matMenu"], ngImport: i0, template: "<ng-template>\n <div\n class=\"mat-mdc-menu-panel mat-mdc-elevation-specific\"\n [id]=\"panelId\"\n [class]=\"_classList\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"closed.emit('click')\"\n [@transformMenu]=\"_panelAnimationState\"\n (@transformMenu.start)=\"_onAnimationStart($event)\"\n (@transformMenu.done)=\"_onAnimationDone($event)\"\n tabindex=\"-1\"\n role=\"menu\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\">\n <div class=\"mat-mdc-menu-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: ["mat-menu{display:none}.mat-mdc-menu-content{margin:0;padding:8px 0;outline:0}.mat-mdc-menu-content,.mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;white-space:normal;font-family:var(--mat-menu-item-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-menu-item-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-menu-item-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mat-menu-item-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-menu-item-label-text-weight, var(--mat-sys-label-large-weight))}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--mat-menu-container-color, var(--mat-sys-surface-container));will-change:transform,opacity}.mat-mdc-menu-panel.ng-animating{pointer-events:none}.mat-mdc-menu-panel.ng-animating:has(.mat-mdc-menu-content:empty){display:none}@media(forced-colors: active){.mat-mdc-menu-panel{outline:solid 1px}}.mat-mdc-menu-panel .mat-divider{color:var(--mat-menu-divider-color, var(--mat-sys-surface-variant));margin-bottom:var(--mat-menu-divider-bottom-spacing, 8px);margin-top:var(--mat-menu-divider-top-spacing, 8px)}.mat-mdc-menu-item{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;padding:0;cursor:pointer;width:100%;text-align:left;box-sizing:border-box;color:inherit;font-size:inherit;background:none;text-decoration:none;margin:0;min-height:48px;padding-left:var(--mat-menu-item-leading-spacing, 12px);padding-right:var(--mat-menu-item-trailing-spacing, 12px);-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-menu-item::-moz-focus-inner{border:0}[dir=rtl] .mat-mdc-menu-item{padding-left:var(--mat-menu-item-trailing-spacing, 12px);padding-right:var(--mat-menu-item-leading-spacing, 12px)}.mat-mdc-menu-item:has(.material-icons,mat-icon,[matButtonIcon]){padding-left:var(--mat-menu-item-with-icon-leading-spacing, 12px);padding-right:var(--mat-menu-item-with-icon-trailing-spacing, 12px)}[dir=rtl] .mat-mdc-menu-item:has(.material-icons,mat-icon,[matButtonIcon]){padding-left:var(--mat-menu-item-with-icon-trailing-spacing, 12px);padding-right:var(--mat-menu-item-with-icon-leading-spacing, 12px)}.mat-mdc-menu-item,.mat-mdc-menu-item:visited,.mat-mdc-menu-item:link{color:var(--mat-menu-item-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-menu-item .mat-icon-no-color,.mat-mdc-menu-item .mat-mdc-menu-submenu-icon{color:var(--mat-menu-item-icon-color, var(--mat-sys-on-surface-variant))}.mat-mdc-menu-item[disabled]{cursor:default;opacity:.38}.mat-mdc-menu-item[disabled]::after{display:block;position:absolute;content:\"\";top:0;left:0;bottom:0;right:0}.mat-mdc-menu-item:focus{outline:0}.mat-mdc-menu-item .mat-icon{flex-shrink:0;margin-right:var(--mat-menu-item-spacing, 12px);height:var(--mat-menu-item-icon-size, 24px);width:var(--mat-menu-item-icon-size, 24px)}[dir=rtl] .mat-mdc-menu-item{text-align:right}[dir=rtl] .mat-mdc-menu-item .mat-icon{margin-right:0;margin-left:var(--mat-menu-item-spacing, 12px)}.mat-mdc-menu-item:not([disabled]):hover{background-color:var(--mat-menu-item-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-mdc-menu-item:not([disabled]).cdk-program-focused,.mat-mdc-menu-item:not([disabled]).cdk-keyboard-focused,.mat-mdc-menu-item:not([disabled]).mat-mdc-menu-item-highlighted{background-color:var(--mat-menu-item-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media(forced-colors: active){.mat-mdc-menu-item{margin-top:1px}}.mat-mdc-menu-submenu-icon{width:var(--mat-menu-item-icon-size, 24px);height:10px;fill:currentColor;padding-left:var(--mat-menu-item-spacing, 12px)}[dir=rtl] .mat-mdc-menu-submenu-icon{padding-right:var(--mat-menu-item-spacing, 12px);padding-left:0}[dir=rtl] .mat-mdc-menu-submenu-icon polygon{transform:scaleX(-1);transform-origin:center}@media(forced-colors: active){.mat-mdc-menu-submenu-icon{fill:CanvasText}}.mat-mdc-menu-item .mat-mdc-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}"], animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
623
664
|
}
|
|
624
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenu, decorators: [{
|
|
625
666
|
type: Component,
|
|
626
667
|
args: [{ selector: 'mat-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'matMenu', host: {
|
|
627
668
|
'[attr.aria-label]': 'null',
|
|
628
669
|
'[attr.aria-labelledby]': 'null',
|
|
629
670
|
'[attr.aria-describedby]': 'null',
|
|
630
|
-
}, animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems], providers: [{ provide: MAT_MENU_PANEL, useExisting: MatMenu }],
|
|
671
|
+
}, animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems], providers: [{ provide: MAT_MENU_PANEL, useExisting: MatMenu }], template: "<ng-template>\n <div\n class=\"mat-mdc-menu-panel mat-mdc-elevation-specific\"\n [id]=\"panelId\"\n [class]=\"_classList\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"closed.emit('click')\"\n [@transformMenu]=\"_panelAnimationState\"\n (@transformMenu.start)=\"_onAnimationStart($event)\"\n (@transformMenu.done)=\"_onAnimationDone($event)\"\n tabindex=\"-1\"\n role=\"menu\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\">\n <div class=\"mat-mdc-menu-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: ["mat-menu{display:none}.mat-mdc-menu-content{margin:0;padding:8px 0;outline:0}.mat-mdc-menu-content,.mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;white-space:normal;font-family:var(--mat-menu-item-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-menu-item-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-menu-item-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mat-menu-item-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-menu-item-label-text-weight, var(--mat-sys-label-large-weight))}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--mat-menu-container-color, var(--mat-sys-surface-container));will-change:transform,opacity}.mat-mdc-menu-panel.ng-animating{pointer-events:none}.mat-mdc-menu-panel.ng-animating:has(.mat-mdc-menu-content:empty){display:none}@media(forced-colors: active){.mat-mdc-menu-panel{outline:solid 1px}}.mat-mdc-menu-panel .mat-divider{color:var(--mat-menu-divider-color, var(--mat-sys-surface-variant));margin-bottom:var(--mat-menu-divider-bottom-spacing, 8px);margin-top:var(--mat-menu-divider-top-spacing, 8px)}.mat-mdc-menu-item{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;padding:0;cursor:pointer;width:100%;text-align:left;box-sizing:border-box;color:inherit;font-size:inherit;background:none;text-decoration:none;margin:0;min-height:48px;padding-left:var(--mat-menu-item-leading-spacing, 12px);padding-right:var(--mat-menu-item-trailing-spacing, 12px);-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-menu-item::-moz-focus-inner{border:0}[dir=rtl] .mat-mdc-menu-item{padding-left:var(--mat-menu-item-trailing-spacing, 12px);padding-right:var(--mat-menu-item-leading-spacing, 12px)}.mat-mdc-menu-item:has(.material-icons,mat-icon,[matButtonIcon]){padding-left:var(--mat-menu-item-with-icon-leading-spacing, 12px);padding-right:var(--mat-menu-item-with-icon-trailing-spacing, 12px)}[dir=rtl] .mat-mdc-menu-item:has(.material-icons,mat-icon,[matButtonIcon]){padding-left:var(--mat-menu-item-with-icon-trailing-spacing, 12px);padding-right:var(--mat-menu-item-with-icon-leading-spacing, 12px)}.mat-mdc-menu-item,.mat-mdc-menu-item:visited,.mat-mdc-menu-item:link{color:var(--mat-menu-item-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-menu-item .mat-icon-no-color,.mat-mdc-menu-item .mat-mdc-menu-submenu-icon{color:var(--mat-menu-item-icon-color, var(--mat-sys-on-surface-variant))}.mat-mdc-menu-item[disabled]{cursor:default;opacity:.38}.mat-mdc-menu-item[disabled]::after{display:block;position:absolute;content:\"\";top:0;left:0;bottom:0;right:0}.mat-mdc-menu-item:focus{outline:0}.mat-mdc-menu-item .mat-icon{flex-shrink:0;margin-right:var(--mat-menu-item-spacing, 12px);height:var(--mat-menu-item-icon-size, 24px);width:var(--mat-menu-item-icon-size, 24px)}[dir=rtl] .mat-mdc-menu-item{text-align:right}[dir=rtl] .mat-mdc-menu-item .mat-icon{margin-right:0;margin-left:var(--mat-menu-item-spacing, 12px)}.mat-mdc-menu-item:not([disabled]):hover{background-color:var(--mat-menu-item-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-mdc-menu-item:not([disabled]).cdk-program-focused,.mat-mdc-menu-item:not([disabled]).cdk-keyboard-focused,.mat-mdc-menu-item:not([disabled]).mat-mdc-menu-item-highlighted{background-color:var(--mat-menu-item-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media(forced-colors: active){.mat-mdc-menu-item{margin-top:1px}}.mat-mdc-menu-submenu-icon{width:var(--mat-menu-item-icon-size, 24px);height:10px;fill:currentColor;padding-left:var(--mat-menu-item-spacing, 12px)}[dir=rtl] .mat-mdc-menu-submenu-icon{padding-right:var(--mat-menu-item-spacing, 12px);padding-left:0}[dir=rtl] .mat-mdc-menu-submenu-icon polygon{transform:scaleX(-1);transform-origin:center}@media(forced-colors: active){.mat-mdc-menu-submenu-icon{fill:CanvasText}}.mat-mdc-menu-item .mat-mdc-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}"] }]
|
|
631
672
|
}], ctorParameters: () => [], propDecorators: { _allItems: [{
|
|
632
673
|
type: ContentChildren,
|
|
633
674
|
args: [MatMenuItem, { descendants: true }]
|
|
@@ -700,6 +741,43 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
|
|
|
700
741
|
const MENU_PANEL_TOP_PADDING = 8;
|
|
701
742
|
/** Directive applied to an element that should trigger a `mat-menu`. */
|
|
702
743
|
class MatMenuTrigger {
|
|
744
|
+
_overlay = inject(Overlay);
|
|
745
|
+
_element = inject(ElementRef);
|
|
746
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
747
|
+
_menuItemInstance = inject(MatMenuItem, { optional: true, self: true });
|
|
748
|
+
_dir = inject(Directionality, { optional: true });
|
|
749
|
+
_focusMonitor = inject(FocusMonitor);
|
|
750
|
+
_ngZone = inject(NgZone);
|
|
751
|
+
_scrollStrategy = inject(MAT_MENU_SCROLL_STRATEGY);
|
|
752
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
753
|
+
_portal;
|
|
754
|
+
_overlayRef = null;
|
|
755
|
+
_menuOpen = false;
|
|
756
|
+
_closingActionsSubscription = Subscription.EMPTY;
|
|
757
|
+
_hoverSubscription = Subscription.EMPTY;
|
|
758
|
+
_menuCloseSubscription = Subscription.EMPTY;
|
|
759
|
+
/**
|
|
760
|
+
* We're specifically looking for a `MatMenu` here since the generic `MatMenuPanel`
|
|
761
|
+
* interface lacks some functionality around nested menus and animations.
|
|
762
|
+
*/
|
|
763
|
+
_parentMaterialMenu;
|
|
764
|
+
/**
|
|
765
|
+
* Cached value of the padding of the parent menu panel.
|
|
766
|
+
* Used to offset sub-menus to compensate for the padding.
|
|
767
|
+
*/
|
|
768
|
+
_parentInnerPadding;
|
|
769
|
+
/**
|
|
770
|
+
* Handles touch start events on the trigger.
|
|
771
|
+
* Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
|
|
772
|
+
*/
|
|
773
|
+
_handleTouchStart = (event) => {
|
|
774
|
+
if (!isFakeTouchstartFromScreenReader(event)) {
|
|
775
|
+
this._openedBy = 'touch';
|
|
776
|
+
}
|
|
777
|
+
};
|
|
778
|
+
// Tracking input type is necessary so it's possible to only auto-focus
|
|
779
|
+
// the first item of the list when the menu is opened via the keyboard
|
|
780
|
+
_openedBy = undefined;
|
|
703
781
|
/**
|
|
704
782
|
* @deprecated
|
|
705
783
|
* @breaking-change 8.0.0
|
|
@@ -734,57 +812,34 @@ class MatMenuTrigger {
|
|
|
734
812
|
}
|
|
735
813
|
this._menuItemInstance?._setTriggersSubmenu(this.triggersSubmenu());
|
|
736
814
|
}
|
|
815
|
+
_menu;
|
|
816
|
+
/** Data to be passed along to any lazily-rendered content. */
|
|
817
|
+
menuData;
|
|
818
|
+
/**
|
|
819
|
+
* Whether focus should be restored when the menu is closed.
|
|
820
|
+
* Note that disabling this option can have accessibility implications
|
|
821
|
+
* and it's up to you to manage focus, if you decide to turn it off.
|
|
822
|
+
*/
|
|
823
|
+
restoreFocus = true;
|
|
824
|
+
/** Event emitted when the associated menu is opened. */
|
|
825
|
+
menuOpened = new EventEmitter();
|
|
826
|
+
/**
|
|
827
|
+
* Event emitted when the associated menu is opened.
|
|
828
|
+
* @deprecated Switch to `menuOpened` instead
|
|
829
|
+
* @breaking-change 8.0.0
|
|
830
|
+
*/
|
|
831
|
+
// tslint:disable-next-line:no-output-on-prefix
|
|
832
|
+
onMenuOpen = this.menuOpened;
|
|
833
|
+
/** Event emitted when the associated menu is closed. */
|
|
834
|
+
menuClosed = new EventEmitter();
|
|
835
|
+
/**
|
|
836
|
+
* Event emitted when the associated menu is closed.
|
|
837
|
+
* @deprecated Switch to `menuClosed` instead
|
|
838
|
+
* @breaking-change 8.0.0
|
|
839
|
+
*/
|
|
840
|
+
// tslint:disable-next-line:no-output-on-prefix
|
|
841
|
+
onMenuClose = this.menuClosed;
|
|
737
842
|
constructor() {
|
|
738
|
-
this._overlay = inject(Overlay);
|
|
739
|
-
this._element = inject(ElementRef);
|
|
740
|
-
this._viewContainerRef = inject(ViewContainerRef);
|
|
741
|
-
this._menuItemInstance = inject(MatMenuItem, { optional: true, self: true });
|
|
742
|
-
this._dir = inject(Directionality, { optional: true });
|
|
743
|
-
this._focusMonitor = inject(FocusMonitor);
|
|
744
|
-
this._ngZone = inject(NgZone);
|
|
745
|
-
this._scrollStrategy = inject(MAT_MENU_SCROLL_STRATEGY);
|
|
746
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
747
|
-
this._overlayRef = null;
|
|
748
|
-
this._menuOpen = false;
|
|
749
|
-
this._closingActionsSubscription = Subscription.EMPTY;
|
|
750
|
-
this._hoverSubscription = Subscription.EMPTY;
|
|
751
|
-
this._menuCloseSubscription = Subscription.EMPTY;
|
|
752
|
-
/**
|
|
753
|
-
* Handles touch start events on the trigger.
|
|
754
|
-
* Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
|
|
755
|
-
*/
|
|
756
|
-
this._handleTouchStart = (event) => {
|
|
757
|
-
if (!isFakeTouchstartFromScreenReader(event)) {
|
|
758
|
-
this._openedBy = 'touch';
|
|
759
|
-
}
|
|
760
|
-
};
|
|
761
|
-
// Tracking input type is necessary so it's possible to only auto-focus
|
|
762
|
-
// the first item of the list when the menu is opened via the keyboard
|
|
763
|
-
this._openedBy = undefined;
|
|
764
|
-
/**
|
|
765
|
-
* Whether focus should be restored when the menu is closed.
|
|
766
|
-
* Note that disabling this option can have accessibility implications
|
|
767
|
-
* and it's up to you to manage focus, if you decide to turn it off.
|
|
768
|
-
*/
|
|
769
|
-
this.restoreFocus = true;
|
|
770
|
-
/** Event emitted when the associated menu is opened. */
|
|
771
|
-
this.menuOpened = new EventEmitter();
|
|
772
|
-
/**
|
|
773
|
-
* Event emitted when the associated menu is opened.
|
|
774
|
-
* @deprecated Switch to `menuOpened` instead
|
|
775
|
-
* @breaking-change 8.0.0
|
|
776
|
-
*/
|
|
777
|
-
// tslint:disable-next-line:no-output-on-prefix
|
|
778
|
-
this.onMenuOpen = this.menuOpened;
|
|
779
|
-
/** Event emitted when the associated menu is closed. */
|
|
780
|
-
this.menuClosed = new EventEmitter();
|
|
781
|
-
/**
|
|
782
|
-
* Event emitted when the associated menu is closed.
|
|
783
|
-
* @deprecated Switch to `menuClosed` instead
|
|
784
|
-
* @breaking-change 8.0.0
|
|
785
|
-
*/
|
|
786
|
-
// tslint:disable-next-line:no-output-on-prefix
|
|
787
|
-
this.onMenuClose = this.menuClosed;
|
|
788
843
|
const parentMenu = inject(MAT_MENU_PANEL, { optional: true });
|
|
789
844
|
this._parentMaterialMenu = parentMenu instanceof MatMenu ? parentMenu : undefined;
|
|
790
845
|
this._element.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
|
|
@@ -1126,10 +1181,10 @@ class MatMenuTrigger {
|
|
|
1126
1181
|
}
|
|
1127
1182
|
return this._portal;
|
|
1128
1183
|
}
|
|
1129
|
-
static
|
|
1130
|
-
static
|
|
1184
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1185
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatMenuTrigger, isStandalone: true, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: { _deprecatedMatMenuTriggerFor: ["mat-menu-trigger-for", "_deprecatedMatMenuTriggerFor"], menu: ["matMenuTriggerFor", "menu"], menuData: ["matMenuTriggerData", "menuData"], restoreFocus: ["matMenuTriggerRestoreFocus", "restoreFocus"] }, outputs: { menuOpened: "menuOpened", onMenuOpen: "onMenuOpen", menuClosed: "menuClosed", onMenuClose: "onMenuClose" }, host: { listeners: { "click": "_handleClick($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-haspopup": "menu ? \"menu\" : null", "attr.aria-expanded": "menuOpen", "attr.aria-controls": "menuOpen ? menu.panelId : null" }, classAttribute: "mat-mdc-menu-trigger" }, exportAs: ["matMenuTrigger"], ngImport: i0 });
|
|
1131
1186
|
}
|
|
1132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
1187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuTrigger, decorators: [{
|
|
1133
1188
|
type: Directive,
|
|
1134
1189
|
args: [{
|
|
1135
1190
|
selector: `[mat-menu-trigger-for], [matMenuTriggerFor]`,
|
|
@@ -1143,7 +1198,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1143
1198
|
'(keydown)': '_handleKeydown($event)',
|
|
1144
1199
|
},
|
|
1145
1200
|
exportAs: 'matMenuTrigger',
|
|
1146
|
-
standalone: true,
|
|
1147
1201
|
}]
|
|
1148
1202
|
}], ctorParameters: () => [], propDecorators: { _deprecatedMatMenuTriggerFor: [{
|
|
1149
1203
|
type: Input,
|
|
@@ -1168,9 +1222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1168
1222
|
}] } });
|
|
1169
1223
|
|
|
1170
1224
|
class MatMenuModule {
|
|
1171
|
-
static
|
|
1172
|
-
static
|
|
1173
|
-
MatRippleModule,
|
|
1225
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1226
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuModule, imports: [MatRippleModule,
|
|
1174
1227
|
MatCommonModule,
|
|
1175
1228
|
OverlayModule,
|
|
1176
1229
|
MatMenu,
|
|
@@ -1181,18 +1234,16 @@ class MatMenuModule {
|
|
|
1181
1234
|
MatCommonModule,
|
|
1182
1235
|
MatMenuItem,
|
|
1183
1236
|
MatMenuContent,
|
|
1184
|
-
MatMenuTrigger] });
|
|
1185
|
-
static
|
|
1186
|
-
MatRippleModule,
|
|
1237
|
+
MatMenuTrigger] });
|
|
1238
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuModule, providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [MatRippleModule,
|
|
1187
1239
|
MatCommonModule,
|
|
1188
1240
|
OverlayModule, CdkScrollableModule,
|
|
1189
|
-
MatCommonModule] });
|
|
1241
|
+
MatCommonModule] });
|
|
1190
1242
|
}
|
|
1191
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
1243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatMenuModule, decorators: [{
|
|
1192
1244
|
type: NgModule,
|
|
1193
1245
|
args: [{
|
|
1194
1246
|
imports: [
|
|
1195
|
-
CommonModule,
|
|
1196
1247
|
MatRippleModule,
|
|
1197
1248
|
MatCommonModule,
|
|
1198
1249
|
OverlayModule,
|