@angular/material 19.0.0-next.9 → 19.0.0-rc.1
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/autocomplete/_autocomplete-theme.scss +8 -4
- package/autocomplete/index.d.ts +5 -6
- package/badge/_badge-theme.scss +10 -6
- package/badge/index.d.ts +1 -2
- package/bottom-sheet/_bottom-sheet-theme.scss +8 -4
- package/button/_button-theme.scss +10 -6
- package/button/_fab-theme.scss +10 -6
- package/button/_icon-button-theme.scss +8 -4
- package/button/index.d.ts +1 -1
- package/button-toggle/_button-toggle-theme.scss +11 -6
- package/button-toggle/index.d.ts +2 -1
- package/card/_card-theme.scss +8 -4
- package/card/index.d.ts +2 -3
- package/checkbox/_checkbox-theme.scss +10 -6
- package/chips/_chips-theme.scss +10 -6
- package/core/_core-theme.scss +4 -7
- package/core/_core.scss +2 -5
- package/core/m2/_theming.scss +2 -1
- package/core/option/_optgroup-theme.scss +8 -4
- package/core/option/_option-theme.scss +10 -6
- package/core/ripple/_ripple-theme.scss +8 -4
- package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +10 -6
- package/core/theming/_config-validation.scss +4 -4
- package/core/theming/_definition.scss +12 -2
- package/core/theming/_theming.scss +2 -1
- package/core/tokens/_m3-system.scss +55 -39
- package/core/tokens/_m3-tokens.scss +3 -3
- package/core/tokens/_token-definition.scss +4 -3
- package/core/tokens/m2/mat/_badge.scss +1 -1
- package/core/tokens/m2/mat/_datepicker.scss +1 -1
- package/core/tokens/m2/mat/_menu.scss +5 -3
- package/core/tokens/m2/mat/_sort.scss +1 -1
- package/core/tokens/m3/mat/_menu.scss +6 -3
- package/core/tokens/m3/mdc/_filled-text-field.scss +9 -11
- package/datepicker/_datepicker-theme.scss +10 -6
- package/datepicker/index.d.ts +36 -37
- package/dialog/_dialog-theme.scss +8 -4
- package/dialog/index.d.ts +1 -0
- package/divider/_divider-theme.scss +8 -4
- package/expansion/_expansion-theme.scss +8 -4
- package/fesm2022/autocomplete/testing.mjs +2 -5
- package/fesm2022/autocomplete/testing.mjs.map +1 -1
- package/fesm2022/autocomplete.mjs +225 -151
- 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 -36
- 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 +79 -57
- 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 +84 -47
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +98 -71
- 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 +53 -55
- 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 +105 -63
- 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 +317 -268
- 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 +237 -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 +821 -568
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog/testing.mjs +15 -9
- package/fesm2022/dialog/testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +221 -153
- 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 +9 -11
- 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 +85 -76
- 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 -126
- 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 +72 -50
- 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 +65 -45
- 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 +104 -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 +191 -180
- 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 -168
- 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 +84 -59
- 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 +35 -34
- 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 +27 -13
- 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 -88
- 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 +220 -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 +132 -119
- 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 +78 -49
- 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 +260 -190
- 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 +141 -107
- 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 +93 -72
- 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 +143 -105
- 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 +182 -177
- 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 +326 -247
- 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 +157 -153
- 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 +25 -15
- 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 +96 -72
- 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 +56 -54
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +9 -5
- package/form-field/index.d.ts +9 -9
- package/grid-list/_grid-list-theme.scss +8 -4
- package/icon/_icon-theme.scss +10 -6
- package/input/_input-theme.scss +8 -4
- package/list/_list-theme.scss +8 -4
- package/list/index.d.ts +20 -21
- package/menu/_menu-theme.scss +8 -4
- package/menu/index.d.ts +15 -17
- package/package.json +2 -2
- package/paginator/_paginator-theme.scss +8 -4
- 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 +11 -9
- package/progress-spinner/_progress-spinner-theme.scss +11 -9
- package/progress-spinner/index.d.ts +3 -4
- package/radio/_radio-theme.scss +10 -6
- package/radio/index.d.ts +2 -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/theme-color/index_bundled.js +35 -9
- package/schematics/ng-generate/theme-color/index_bundled.js.map +2 -2
- package/schematics/ng-update/index_bundled.js +6 -1
- package/schematics/ng-update/index_bundled.js.map +1 -1
- package/select/_select-theme.scss +10 -6
- package/select/index.d.ts +7 -7
- package/sidenav/_sidenav-theme.scss +8 -4
- package/slide-toggle/_slide-toggle-theme.scss +10 -6
- package/slider/_slider-theme.scss +10 -6
- package/snack-bar/_snack-bar-theme.scss +10 -6
- package/sort/_sort-theme.scss +8 -4
- package/stepper/_stepper-theme.scss +10 -6
- package/stepper/index.d.ts +14 -15
- package/table/_table-theme.scss +8 -4
- package/tabs/_tabs-theme.scss +10 -6
- package/timepicker/_timepicker-theme.scss +10 -6
- package/toolbar/_toolbar-theme.scss +10 -6
- package/tooltip/_tooltip-theme.scss +8 -4
- package/tooltip/index.d.ts +5 -6
- package/tree/_tree-theme.scss +8 -4
package/fesm2022/menu.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, inject, ElementRef, ChangeDetectorRef, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, TemplateRef, ApplicationRef, Injector, ViewContainerRef, Directive, QueryList, EventEmitter, afterNextRender, ContentChildren, ViewChild, ContentChild, Output, NgZone, NgModule } from '@angular/core';
|
|
3
|
-
import { FocusMonitor, FocusKeyManager, isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
|
3
|
+
import { FocusMonitor, _IdGenerator, FocusKeyManager, isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
|
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-rc.0", ngImport: i0, type: MatMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.0", 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-
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenuItem, decorators: [{
|
|
125
125
|
type: Component,
|
|
126
126
|
args: [{ selector: '[mat-menu-item]', exportAs: 'matMenuItem', host: {
|
|
127
127
|
'[attr.role]': 'role',
|
|
@@ -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,10 +231,10 @@ 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-rc.0", ngImport: i0, type: MatMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
235
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", 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-
|
|
237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenuContent, decorators: [{
|
|
237
238
|
type: Directive,
|
|
238
239
|
args: [{
|
|
239
240
|
selector: 'ng-template[matMenuContent]',
|
|
@@ -294,7 +295,6 @@ const fadeInItems = matMenuAnimations.fadeInItems;
|
|
|
294
295
|
*/
|
|
295
296
|
const transformMenu = matMenuAnimations.transformMenu;
|
|
296
297
|
|
|
297
|
-
let menuPanelUid = 0;
|
|
298
298
|
/** Injection token to be used to override the default options for `mat-menu`. */
|
|
299
299
|
const MAT_MENU_DEFAULT_OPTIONS = new InjectionToken('mat-menu-default-options', {
|
|
300
300
|
providedIn: 'root',
|
|
@@ -310,6 +310,38 @@ function MAT_MENU_DEFAULT_OPTIONS_FACTORY() {
|
|
|
310
310
|
};
|
|
311
311
|
}
|
|
312
312
|
class MatMenu {
|
|
313
|
+
_elementRef = inject(ElementRef);
|
|
314
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
315
|
+
_keyManager;
|
|
316
|
+
_xPosition;
|
|
317
|
+
_yPosition;
|
|
318
|
+
_firstItemFocusRef;
|
|
319
|
+
/** All items inside the menu. Includes items nested inside another menu. */
|
|
320
|
+
_allItems;
|
|
321
|
+
/** Only the direct descendant menu items. */
|
|
322
|
+
_directDescendantItems = new QueryList();
|
|
323
|
+
/** Classes to be applied to the menu panel. */
|
|
324
|
+
_classList = {};
|
|
325
|
+
/** Current state of the panel animation. */
|
|
326
|
+
_panelAnimationState = 'void';
|
|
327
|
+
/** Emits whenever an animation on the menu completes. */
|
|
328
|
+
_animationDone = new Subject();
|
|
329
|
+
/** Whether the menu is animating. */
|
|
330
|
+
_isAnimating;
|
|
331
|
+
/** Parent menu of the current menu panel. */
|
|
332
|
+
parentMenu;
|
|
333
|
+
/** Layout direction of the menu. */
|
|
334
|
+
direction;
|
|
335
|
+
/** Class or list of classes to be added to the overlay panel. */
|
|
336
|
+
overlayPanelClass;
|
|
337
|
+
/** Class to be added to the backdrop element. */
|
|
338
|
+
backdropClass;
|
|
339
|
+
/** aria-label for the menu panel. */
|
|
340
|
+
ariaLabel;
|
|
341
|
+
/** aria-labelledby for the menu panel. */
|
|
342
|
+
ariaLabelledby;
|
|
343
|
+
/** aria-describedby for the menu panel. */
|
|
344
|
+
ariaDescribedby;
|
|
313
345
|
/** Position of the menu in the X axis. */
|
|
314
346
|
get xPosition() {
|
|
315
347
|
return this._xPosition;
|
|
@@ -334,6 +366,23 @@ class MatMenu {
|
|
|
334
366
|
this._yPosition = value;
|
|
335
367
|
this.setPositionClasses();
|
|
336
368
|
}
|
|
369
|
+
/** @docs-private */
|
|
370
|
+
templateRef;
|
|
371
|
+
/**
|
|
372
|
+
* List of the items inside of a menu.
|
|
373
|
+
* @deprecated
|
|
374
|
+
* @breaking-change 8.0.0
|
|
375
|
+
*/
|
|
376
|
+
items;
|
|
377
|
+
/**
|
|
378
|
+
* Menu content that will be rendered lazily.
|
|
379
|
+
* @docs-private
|
|
380
|
+
*/
|
|
381
|
+
lazyContent;
|
|
382
|
+
/** Whether the menu should overlap its trigger. */
|
|
383
|
+
overlapTrigger;
|
|
384
|
+
/** Whether the menu has a backdrop. */
|
|
385
|
+
hasBackdrop;
|
|
337
386
|
/**
|
|
338
387
|
* This method takes classes set on the host mat-menu element and applies them on the
|
|
339
388
|
* menu template that displays in the overlay container. Otherwise, it's difficult
|
|
@@ -357,6 +406,7 @@ class MatMenu {
|
|
|
357
406
|
}
|
|
358
407
|
this._classList = newClassList;
|
|
359
408
|
}
|
|
409
|
+
_previousPanelClass;
|
|
360
410
|
/**
|
|
361
411
|
* This method takes classes set on the host mat-menu element and applies them on the
|
|
362
412
|
* menu template that displays in the overlay container. Otherwise, it's difficult
|
|
@@ -370,29 +420,17 @@ class MatMenu {
|
|
|
370
420
|
set classList(classes) {
|
|
371
421
|
this.panelClass = classes;
|
|
372
422
|
}
|
|
423
|
+
/** Event emitted when the menu is closed. */
|
|
424
|
+
closed = new EventEmitter();
|
|
425
|
+
/**
|
|
426
|
+
* Event emitted when the menu is closed.
|
|
427
|
+
* @deprecated Switch to `closed` instead
|
|
428
|
+
* @breaking-change 8.0.0
|
|
429
|
+
*/
|
|
430
|
+
close = this.closed;
|
|
431
|
+
panelId = inject(_IdGenerator).getId('mat-menu-panel-');
|
|
432
|
+
_injector = inject(Injector);
|
|
373
433
|
constructor() {
|
|
374
|
-
this._elementRef = inject(ElementRef);
|
|
375
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
376
|
-
this._elevationPrefix = 'mat-elevation-z';
|
|
377
|
-
this._baseElevation = null;
|
|
378
|
-
/** Only the direct descendant menu items. */
|
|
379
|
-
this._directDescendantItems = new QueryList();
|
|
380
|
-
/** Classes to be applied to the menu panel. */
|
|
381
|
-
this._classList = {};
|
|
382
|
-
/** Current state of the panel animation. */
|
|
383
|
-
this._panelAnimationState = 'void';
|
|
384
|
-
/** Emits whenever an animation on the menu completes. */
|
|
385
|
-
this._animationDone = new Subject();
|
|
386
|
-
/** Event emitted when the menu is closed. */
|
|
387
|
-
this.closed = new EventEmitter();
|
|
388
|
-
/**
|
|
389
|
-
* Event emitted when the menu is closed.
|
|
390
|
-
* @deprecated Switch to `closed` instead
|
|
391
|
-
* @breaking-change 8.0.0
|
|
392
|
-
*/
|
|
393
|
-
this.close = this.closed;
|
|
394
|
-
this.panelId = `mat-menu-panel-${menuPanelUid++}`;
|
|
395
|
-
this._injector = inject(Injector);
|
|
396
434
|
const defaultOptions = inject(MAT_MENU_DEFAULT_OPTIONS);
|
|
397
435
|
this.overlayPanelClass = defaultOptions.overlayPanelClass || '';
|
|
398
436
|
this._xPosition = defaultOptions.xPosition;
|
|
@@ -529,36 +567,10 @@ class MatMenu {
|
|
|
529
567
|
this._keyManager.setActiveItem(-1);
|
|
530
568
|
}
|
|
531
569
|
/**
|
|
532
|
-
*
|
|
533
|
-
* @
|
|
570
|
+
* @deprecated No longer used and will be removed.
|
|
571
|
+
* @breaking-change 21.0.0
|
|
534
572
|
*/
|
|
535
|
-
setElevation(
|
|
536
|
-
// The base elevation depends on which version of the spec
|
|
537
|
-
// we're running so we have to resolve it at runtime.
|
|
538
|
-
if (this._baseElevation === null) {
|
|
539
|
-
const styles = typeof getComputedStyle === 'function'
|
|
540
|
-
? getComputedStyle(this._elementRef.nativeElement)
|
|
541
|
-
: null;
|
|
542
|
-
const value = styles?.getPropertyValue('--mat-menu-base-elevation-level') || '8';
|
|
543
|
-
this._baseElevation = parseInt(value);
|
|
544
|
-
}
|
|
545
|
-
// The elevation starts at the base and increases by one for each level.
|
|
546
|
-
// Capped at 24 because that's the maximum elevation defined in the Material design spec.
|
|
547
|
-
const elevation = Math.min(this._baseElevation + depth, 24);
|
|
548
|
-
const newElevation = `${this._elevationPrefix}${elevation}`;
|
|
549
|
-
const customElevation = Object.keys(this._classList).find(className => {
|
|
550
|
-
return className.startsWith(this._elevationPrefix);
|
|
551
|
-
});
|
|
552
|
-
if (!customElevation || customElevation === this._previousElevation) {
|
|
553
|
-
const newClassList = { ...this._classList };
|
|
554
|
-
if (this._previousElevation) {
|
|
555
|
-
newClassList[this._previousElevation] = false;
|
|
556
|
-
}
|
|
557
|
-
newClassList[newElevation] = true;
|
|
558
|
-
this._previousElevation = newElevation;
|
|
559
|
-
this._classList = newClassList;
|
|
560
|
-
}
|
|
561
|
-
}
|
|
573
|
+
setElevation(_depth) { }
|
|
562
574
|
/**
|
|
563
575
|
* Adds classes to the menu panel based on its position. Can be used by
|
|
564
576
|
* consumers to add specific styling based on the position.
|
|
@@ -617,16 +629,16 @@ class MatMenu {
|
|
|
617
629
|
this._directDescendantItems.notifyOnChanges();
|
|
618
630
|
});
|
|
619
631
|
}
|
|
620
|
-
static
|
|
621
|
-
static
|
|
632
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", 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\"\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));box-shadow:var(--mat-menu-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));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 });
|
|
622
634
|
}
|
|
623
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenu, decorators: [{
|
|
624
636
|
type: Component,
|
|
625
637
|
args: [{ selector: 'mat-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'matMenu', host: {
|
|
626
638
|
'[attr.aria-label]': 'null',
|
|
627
639
|
'[attr.aria-labelledby]': 'null',
|
|
628
640
|
'[attr.aria-describedby]': 'null',
|
|
629
|
-
}, animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems], providers: [{ provide: MAT_MENU_PANEL, useExisting: MatMenu }], template: "<ng-template>\n <div\n class=\"mat-mdc-menu-panel
|
|
641
|
+
}, animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems], providers: [{ provide: MAT_MENU_PANEL, useExisting: MatMenu }], template: "<ng-template>\n <div\n class=\"mat-mdc-menu-panel\"\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));box-shadow:var(--mat-menu-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));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}"] }]
|
|
630
642
|
}], ctorParameters: () => [], propDecorators: { _allItems: [{
|
|
631
643
|
type: ContentChildren,
|
|
632
644
|
args: [MatMenuItem, { descendants: true }]
|
|
@@ -699,6 +711,43 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
|
|
|
699
711
|
const MENU_PANEL_TOP_PADDING = 8;
|
|
700
712
|
/** Directive applied to an element that should trigger a `mat-menu`. */
|
|
701
713
|
class MatMenuTrigger {
|
|
714
|
+
_overlay = inject(Overlay);
|
|
715
|
+
_element = inject(ElementRef);
|
|
716
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
717
|
+
_menuItemInstance = inject(MatMenuItem, { optional: true, self: true });
|
|
718
|
+
_dir = inject(Directionality, { optional: true });
|
|
719
|
+
_focusMonitor = inject(FocusMonitor);
|
|
720
|
+
_ngZone = inject(NgZone);
|
|
721
|
+
_scrollStrategy = inject(MAT_MENU_SCROLL_STRATEGY);
|
|
722
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
723
|
+
_portal;
|
|
724
|
+
_overlayRef = null;
|
|
725
|
+
_menuOpen = false;
|
|
726
|
+
_closingActionsSubscription = Subscription.EMPTY;
|
|
727
|
+
_hoverSubscription = Subscription.EMPTY;
|
|
728
|
+
_menuCloseSubscription = Subscription.EMPTY;
|
|
729
|
+
/**
|
|
730
|
+
* We're specifically looking for a `MatMenu` here since the generic `MatMenuPanel`
|
|
731
|
+
* interface lacks some functionality around nested menus and animations.
|
|
732
|
+
*/
|
|
733
|
+
_parentMaterialMenu;
|
|
734
|
+
/**
|
|
735
|
+
* Cached value of the padding of the parent menu panel.
|
|
736
|
+
* Used to offset sub-menus to compensate for the padding.
|
|
737
|
+
*/
|
|
738
|
+
_parentInnerPadding;
|
|
739
|
+
/**
|
|
740
|
+
* Handles touch start events on the trigger.
|
|
741
|
+
* Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
|
|
742
|
+
*/
|
|
743
|
+
_handleTouchStart = (event) => {
|
|
744
|
+
if (!isFakeTouchstartFromScreenReader(event)) {
|
|
745
|
+
this._openedBy = 'touch';
|
|
746
|
+
}
|
|
747
|
+
};
|
|
748
|
+
// Tracking input type is necessary so it's possible to only auto-focus
|
|
749
|
+
// the first item of the list when the menu is opened via the keyboard
|
|
750
|
+
_openedBy = undefined;
|
|
702
751
|
/**
|
|
703
752
|
* @deprecated
|
|
704
753
|
* @breaking-change 8.0.0
|
|
@@ -733,57 +782,34 @@ class MatMenuTrigger {
|
|
|
733
782
|
}
|
|
734
783
|
this._menuItemInstance?._setTriggersSubmenu(this.triggersSubmenu());
|
|
735
784
|
}
|
|
785
|
+
_menu;
|
|
786
|
+
/** Data to be passed along to any lazily-rendered content. */
|
|
787
|
+
menuData;
|
|
788
|
+
/**
|
|
789
|
+
* Whether focus should be restored when the menu is closed.
|
|
790
|
+
* Note that disabling this option can have accessibility implications
|
|
791
|
+
* and it's up to you to manage focus, if you decide to turn it off.
|
|
792
|
+
*/
|
|
793
|
+
restoreFocus = true;
|
|
794
|
+
/** Event emitted when the associated menu is opened. */
|
|
795
|
+
menuOpened = new EventEmitter();
|
|
796
|
+
/**
|
|
797
|
+
* Event emitted when the associated menu is opened.
|
|
798
|
+
* @deprecated Switch to `menuOpened` instead
|
|
799
|
+
* @breaking-change 8.0.0
|
|
800
|
+
*/
|
|
801
|
+
// tslint:disable-next-line:no-output-on-prefix
|
|
802
|
+
onMenuOpen = this.menuOpened;
|
|
803
|
+
/** Event emitted when the associated menu is closed. */
|
|
804
|
+
menuClosed = new EventEmitter();
|
|
805
|
+
/**
|
|
806
|
+
* Event emitted when the associated menu is closed.
|
|
807
|
+
* @deprecated Switch to `menuClosed` instead
|
|
808
|
+
* @breaking-change 8.0.0
|
|
809
|
+
*/
|
|
810
|
+
// tslint:disable-next-line:no-output-on-prefix
|
|
811
|
+
onMenuClose = this.menuClosed;
|
|
736
812
|
constructor() {
|
|
737
|
-
this._overlay = inject(Overlay);
|
|
738
|
-
this._element = inject(ElementRef);
|
|
739
|
-
this._viewContainerRef = inject(ViewContainerRef);
|
|
740
|
-
this._menuItemInstance = inject(MatMenuItem, { optional: true, self: true });
|
|
741
|
-
this._dir = inject(Directionality, { optional: true });
|
|
742
|
-
this._focusMonitor = inject(FocusMonitor);
|
|
743
|
-
this._ngZone = inject(NgZone);
|
|
744
|
-
this._scrollStrategy = inject(MAT_MENU_SCROLL_STRATEGY);
|
|
745
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
746
|
-
this._overlayRef = null;
|
|
747
|
-
this._menuOpen = false;
|
|
748
|
-
this._closingActionsSubscription = Subscription.EMPTY;
|
|
749
|
-
this._hoverSubscription = Subscription.EMPTY;
|
|
750
|
-
this._menuCloseSubscription = Subscription.EMPTY;
|
|
751
|
-
/**
|
|
752
|
-
* Handles touch start events on the trigger.
|
|
753
|
-
* Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
|
|
754
|
-
*/
|
|
755
|
-
this._handleTouchStart = (event) => {
|
|
756
|
-
if (!isFakeTouchstartFromScreenReader(event)) {
|
|
757
|
-
this._openedBy = 'touch';
|
|
758
|
-
}
|
|
759
|
-
};
|
|
760
|
-
// Tracking input type is necessary so it's possible to only auto-focus
|
|
761
|
-
// the first item of the list when the menu is opened via the keyboard
|
|
762
|
-
this._openedBy = undefined;
|
|
763
|
-
/**
|
|
764
|
-
* Whether focus should be restored when the menu is closed.
|
|
765
|
-
* Note that disabling this option can have accessibility implications
|
|
766
|
-
* and it's up to you to manage focus, if you decide to turn it off.
|
|
767
|
-
*/
|
|
768
|
-
this.restoreFocus = true;
|
|
769
|
-
/** Event emitted when the associated menu is opened. */
|
|
770
|
-
this.menuOpened = new EventEmitter();
|
|
771
|
-
/**
|
|
772
|
-
* Event emitted when the associated menu is opened.
|
|
773
|
-
* @deprecated Switch to `menuOpened` instead
|
|
774
|
-
* @breaking-change 8.0.0
|
|
775
|
-
*/
|
|
776
|
-
// tslint:disable-next-line:no-output-on-prefix
|
|
777
|
-
this.onMenuOpen = this.menuOpened;
|
|
778
|
-
/** Event emitted when the associated menu is closed. */
|
|
779
|
-
this.menuClosed = new EventEmitter();
|
|
780
|
-
/**
|
|
781
|
-
* Event emitted when the associated menu is closed.
|
|
782
|
-
* @deprecated Switch to `menuClosed` instead
|
|
783
|
-
* @breaking-change 8.0.0
|
|
784
|
-
*/
|
|
785
|
-
// tslint:disable-next-line:no-output-on-prefix
|
|
786
|
-
this.onMenuClose = this.menuClosed;
|
|
787
813
|
const parentMenu = inject(MAT_MENU_PANEL, { optional: true });
|
|
788
814
|
this._parentMaterialMenu = parentMenu instanceof MatMenu ? parentMenu : undefined;
|
|
789
815
|
this._element.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
|
|
@@ -913,22 +939,9 @@ class MatMenuTrigger {
|
|
|
913
939
|
_initMenu(menu) {
|
|
914
940
|
menu.parentMenu = this.triggersSubmenu() ? this._parentMaterialMenu : undefined;
|
|
915
941
|
menu.direction = this.dir;
|
|
916
|
-
this._setMenuElevation(menu);
|
|
917
942
|
menu.focusFirstItem(this._openedBy || 'program');
|
|
918
943
|
this._setIsMenuOpen(true);
|
|
919
944
|
}
|
|
920
|
-
/** Updates the menu elevation based on the amount of parent menus that it has. */
|
|
921
|
-
_setMenuElevation(menu) {
|
|
922
|
-
if (menu.setElevation) {
|
|
923
|
-
let depth = 0;
|
|
924
|
-
let parentMenu = menu.parentMenu;
|
|
925
|
-
while (parentMenu) {
|
|
926
|
-
depth++;
|
|
927
|
-
parentMenu = parentMenu.parentMenu;
|
|
928
|
-
}
|
|
929
|
-
menu.setElevation(depth);
|
|
930
|
-
}
|
|
931
|
-
}
|
|
932
945
|
// set state rather than toggle to support triggers sharing a menu
|
|
933
946
|
_setIsMenuOpen(isOpen) {
|
|
934
947
|
if (isOpen !== this._menuOpen) {
|
|
@@ -1125,10 +1138,10 @@ class MatMenuTrigger {
|
|
|
1125
1138
|
}
|
|
1126
1139
|
return this._portal;
|
|
1127
1140
|
}
|
|
1128
|
-
static
|
|
1129
|
-
static
|
|
1141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1142
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", 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 });
|
|
1130
1143
|
}
|
|
1131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
1144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenuTrigger, decorators: [{
|
|
1132
1145
|
type: Directive,
|
|
1133
1146
|
args: [{
|
|
1134
1147
|
selector: `[mat-menu-trigger-for], [matMenuTriggerFor]`,
|
|
@@ -1166,9 +1179,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
1166
1179
|
}] } });
|
|
1167
1180
|
|
|
1168
1181
|
class MatMenuModule {
|
|
1169
|
-
static
|
|
1170
|
-
static
|
|
1171
|
-
MatRippleModule,
|
|
1182
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1183
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenuModule, imports: [MatRippleModule,
|
|
1172
1184
|
MatCommonModule,
|
|
1173
1185
|
OverlayModule,
|
|
1174
1186
|
MatMenu,
|
|
@@ -1179,18 +1191,16 @@ class MatMenuModule {
|
|
|
1179
1191
|
MatCommonModule,
|
|
1180
1192
|
MatMenuItem,
|
|
1181
1193
|
MatMenuContent,
|
|
1182
|
-
MatMenuTrigger] });
|
|
1183
|
-
static
|
|
1184
|
-
MatRippleModule,
|
|
1194
|
+
MatMenuTrigger] });
|
|
1195
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenuModule, providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [MatRippleModule,
|
|
1185
1196
|
MatCommonModule,
|
|
1186
1197
|
OverlayModule, CdkScrollableModule,
|
|
1187
|
-
MatCommonModule] });
|
|
1198
|
+
MatCommonModule] });
|
|
1188
1199
|
}
|
|
1189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
1200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatMenuModule, decorators: [{
|
|
1190
1201
|
type: NgModule,
|
|
1191
1202
|
args: [{
|
|
1192
1203
|
imports: [
|
|
1193
|
-
CommonModule,
|
|
1194
1204
|
MatRippleModule,
|
|
1195
1205
|
MatCommonModule,
|
|
1196
1206
|
OverlayModule,
|