@angular/material 19.2.0-next.1 → 19.2.0-next.3
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/bottom-sheet/index.d.ts +18 -8
- package/button/_button-base.scss +4 -4
- package/checkbox/_checkbox-common.scss +38 -25
- package/chips/index.d.ts +0 -2
- package/core/index.d.ts +1 -0
- package/datepicker/index.d.ts +3 -3
- package/dialog/index.d.ts +10 -3
- package/expansion/index.d.ts +7 -4
- package/fesm2022/autocomplete.mjs +13 -13
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge.mjs +10 -10
- 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 +138 -50
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +14 -14
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +42 -42
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card.mjs +46 -46
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +16 -16
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips.mjs +52 -53
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core.mjs +74 -76
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +205 -131
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog.mjs +123 -43
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider.mjs +7 -7
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion.mjs +97 -41
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field.mjs +68 -43
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +22 -22
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +7 -7
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +10 -10
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input.mjs +7 -7
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list.mjs +51 -51
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu.mjs +111 -51
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator.mjs +10 -10
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +7 -7
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +7 -7
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio.mjs +10 -10
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select.mjs +174 -69
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +94 -44
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +14 -14
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider.mjs +16 -16
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +179 -91
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort.mjs +299 -56
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper.mjs +169 -60
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table.mjs +55 -55
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs.mjs +171 -73
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/timepicker.mjs +36 -43
- package/fesm2022/timepicker.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +10 -10
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +46 -19
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree.mjs +25 -25
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/index.d.ts +1 -2
- package/menu/index.d.ts +5 -10
- package/package.json +2 -2
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/select/index.d.ts +12 -11
- package/sidenav/index.d.ts +1 -2
- package/snack-bar/index.d.ts +9 -8
- package/sort/index.d.ts +6 -7
- package/stepper/index.d.ts +2 -3
- package/tabs/index.d.ts +1 -2
- package/timepicker/index.d.ts +4 -1
- package/tooltip/index.d.ts +1 -2
package/fesm2022/menu.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, ElementRef, ChangeDetectorRef, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, TemplateRef, ApplicationRef, Injector, ViewContainerRef, Directive, QueryList, EventEmitter, ANIMATION_MODULE_TYPE, afterNextRender, ContentChildren, ViewChild, ContentChild, Output, NgZone, NgModule } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, ElementRef, ChangeDetectorRef, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, TemplateRef, ApplicationRef, Injector, ViewContainerRef, Directive, QueryList, EventEmitter, ANIMATION_MODULE_TYPE, afterNextRender, ContentChildren, ViewChild, ContentChild, Output, NgZone, Renderer2, NgModule } from '@angular/core';
|
|
3
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 } from 'rxjs';
|
|
@@ -10,9 +10,8 @@ import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
|
|
|
10
10
|
import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
11
11
|
import { Directionality } from '@angular/cdk/bidi';
|
|
12
12
|
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
13
|
-
import {
|
|
13
|
+
import { _bindEventWithOptions } from '@angular/cdk/platform';
|
|
14
14
|
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
|
15
|
-
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
16
15
|
|
|
17
16
|
/**
|
|
18
17
|
* Injection token used to provide the parent menu to menu-specific components.
|
|
@@ -118,10 +117,10 @@ class MatMenuItem {
|
|
|
118
117
|
_hasFocus() {
|
|
119
118
|
return this._document && this._document.activeElement === this._getHostElement();
|
|
120
119
|
}
|
|
121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.
|
|
120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", 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
122
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuItem, decorators: [{
|
|
125
124
|
type: Component,
|
|
126
125
|
args: [{ selector: '[mat-menu-item]', exportAs: 'matMenuItem', host: {
|
|
127
126
|
'[attr.role]': 'role',
|
|
@@ -230,10 +229,10 @@ class MatMenuContent {
|
|
|
230
229
|
this.detach();
|
|
231
230
|
this._outlet?.dispose();
|
|
232
231
|
}
|
|
233
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
234
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.
|
|
232
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
233
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: MatMenuContent, isStandalone: true, selector: "ng-template[matMenuContent]", providers: [{ provide: MAT_MENU_CONTENT, useExisting: MatMenuContent }], ngImport: i0 });
|
|
235
234
|
}
|
|
236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuContent, decorators: [{
|
|
237
236
|
type: Directive,
|
|
238
237
|
args: [{
|
|
239
238
|
selector: 'ng-template[matMenuContent]',
|
|
@@ -606,10 +605,10 @@ class MatMenu {
|
|
|
606
605
|
}
|
|
607
606
|
return menuPanel;
|
|
608
607
|
}
|
|
609
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
610
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.
|
|
608
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
609
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.3", 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 [class.mat-menu-panel-animations-disabled]=\"_animationsDisabled\"\n [class.mat-menu-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.mat-menu-panel-animating]=\"_isAnimating\"\n (click)=\"closed.emit('click')\"\n tabindex=\"-1\"\n role=\"menu\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\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))}@keyframes _mat-menu-enter{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:none}}@keyframes _mat-menu-exit{from{opacity:1}to{opacity:0}}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;box-sizing:border-box;outline:0;animation:_mat-menu-enter 120ms cubic-bezier(0, 0, 0.2, 1);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.mat-menu-panel-exit-animation{animation:_mat-menu-exit 100ms 25ms linear forwards}.mat-mdc-menu-panel.mat-menu-panel-animations-disabled{animation:none}.mat-mdc-menu-panel.mat-menu-panel-animating{pointer-events:none}.mat-mdc-menu-panel.mat-menu-panel-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}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
611
610
|
}
|
|
612
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenu, decorators: [{
|
|
613
612
|
type: Component,
|
|
614
613
|
args: [{ selector: 'mat-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'matMenu', host: {
|
|
615
614
|
'[attr.aria-label]': 'null',
|
|
@@ -679,7 +678,7 @@ const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER = {
|
|
|
679
678
|
useFactory: MAT_MENU_SCROLL_STRATEGY_FACTORY,
|
|
680
679
|
};
|
|
681
680
|
/** Options for binding a passive event listener. */
|
|
682
|
-
const passiveEventListenerOptions =
|
|
681
|
+
const passiveEventListenerOptions = { passive: true };
|
|
683
682
|
/**
|
|
684
683
|
* Default top padding of the menu panel.
|
|
685
684
|
* @deprecated No longer being used. Will be removed.
|
|
@@ -699,6 +698,7 @@ class MatMenuTrigger {
|
|
|
699
698
|
_ngZone = inject(NgZone);
|
|
700
699
|
_scrollStrategy = inject(MAT_MENU_SCROLL_STRATEGY);
|
|
701
700
|
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
701
|
+
_cleanupTouchstart;
|
|
702
702
|
_portal;
|
|
703
703
|
_overlayRef = null;
|
|
704
704
|
_menuOpen = false;
|
|
@@ -716,15 +716,6 @@ class MatMenuTrigger {
|
|
|
716
716
|
* Used to offset sub-menus to compensate for the padding.
|
|
717
717
|
*/
|
|
718
718
|
_parentInnerPadding;
|
|
719
|
-
/**
|
|
720
|
-
* Handles touch start events on the trigger.
|
|
721
|
-
* Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
|
|
722
|
-
*/
|
|
723
|
-
_handleTouchStart = (event) => {
|
|
724
|
-
if (!isFakeTouchstartFromScreenReader(event)) {
|
|
725
|
-
this._openedBy = 'touch';
|
|
726
|
-
}
|
|
727
|
-
};
|
|
728
719
|
// Tracking input type is necessary so it's possible to only auto-focus
|
|
729
720
|
// the first item of the list when the menu is opened via the keyboard
|
|
730
721
|
_openedBy = undefined;
|
|
@@ -791,8 +782,13 @@ class MatMenuTrigger {
|
|
|
791
782
|
onMenuClose = this.menuClosed;
|
|
792
783
|
constructor() {
|
|
793
784
|
const parentMenu = inject(MAT_MENU_PANEL, { optional: true });
|
|
785
|
+
const renderer = inject(Renderer2);
|
|
794
786
|
this._parentMaterialMenu = parentMenu instanceof MatMenu ? parentMenu : undefined;
|
|
795
|
-
this._element.nativeElement
|
|
787
|
+
this._cleanupTouchstart = _bindEventWithOptions(renderer, this._element.nativeElement, 'touchstart', (event) => {
|
|
788
|
+
if (!isFakeTouchstartFromScreenReader(event)) {
|
|
789
|
+
this._openedBy = 'touch';
|
|
790
|
+
}
|
|
791
|
+
}, passiveEventListenerOptions);
|
|
796
792
|
}
|
|
797
793
|
ngAfterContentInit() {
|
|
798
794
|
this._handleHover();
|
|
@@ -801,7 +797,7 @@ class MatMenuTrigger {
|
|
|
801
797
|
if (this.menu && this._ownsMenu(this.menu)) {
|
|
802
798
|
PANELS_TO_TRIGGERS.delete(this.menu);
|
|
803
799
|
}
|
|
804
|
-
this.
|
|
800
|
+
this._cleanupTouchstart();
|
|
805
801
|
this._pendingRemoval?.unsubscribe();
|
|
806
802
|
this._menuCloseSubscription.unsubscribe();
|
|
807
803
|
this._closingActionsSubscription.unsubscribe();
|
|
@@ -1115,10 +1111,10 @@ class MatMenuTrigger {
|
|
|
1115
1111
|
_ownsMenu(menu) {
|
|
1116
1112
|
return PANELS_TO_TRIGGERS.get(menu) === this;
|
|
1117
1113
|
}
|
|
1118
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
1119
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.
|
|
1114
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1115
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", 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 });
|
|
1120
1116
|
}
|
|
1121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
1117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuTrigger, decorators: [{
|
|
1122
1118
|
type: Directive,
|
|
1123
1119
|
args: [{
|
|
1124
1120
|
selector: `[mat-menu-trigger-for], [matMenuTriggerFor]`,
|
|
@@ -1156,8 +1152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
|
|
|
1156
1152
|
}] } });
|
|
1157
1153
|
|
|
1158
1154
|
class MatMenuModule {
|
|
1159
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
1160
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.
|
|
1155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1156
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: MatMenuModule, imports: [MatRippleModule,
|
|
1161
1157
|
MatCommonModule,
|
|
1162
1158
|
OverlayModule,
|
|
1163
1159
|
MatMenu,
|
|
@@ -1169,12 +1165,12 @@ class MatMenuModule {
|
|
|
1169
1165
|
MatMenuItem,
|
|
1170
1166
|
MatMenuContent,
|
|
1171
1167
|
MatMenuTrigger] });
|
|
1172
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.
|
|
1168
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuModule, providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [MatRippleModule,
|
|
1173
1169
|
MatCommonModule,
|
|
1174
1170
|
OverlayModule, CdkScrollableModule,
|
|
1175
1171
|
MatCommonModule] });
|
|
1176
1172
|
}
|
|
1177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
1173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatMenuModule, decorators: [{
|
|
1178
1174
|
type: NgModule,
|
|
1179
1175
|
args: [{
|
|
1180
1176
|
imports: [
|
|
@@ -1207,6 +1203,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
|
|
|
1207
1203
|
* @breaking-change 21.0.0
|
|
1208
1204
|
*/
|
|
1209
1205
|
const matMenuAnimations = {
|
|
1206
|
+
// Represents:
|
|
1207
|
+
// trigger('transformMenu', [
|
|
1208
|
+
// state(
|
|
1209
|
+
// 'void',
|
|
1210
|
+
// style({
|
|
1211
|
+
// opacity: 0,
|
|
1212
|
+
// transform: 'scale(0.8)',
|
|
1213
|
+
// }),
|
|
1214
|
+
// ),
|
|
1215
|
+
// transition(
|
|
1216
|
+
// 'void => enter',
|
|
1217
|
+
// animate(
|
|
1218
|
+
// '120ms cubic-bezier(0, 0, 0.2, 1)',
|
|
1219
|
+
// style({
|
|
1220
|
+
// opacity: 1,
|
|
1221
|
+
// transform: 'scale(1)',
|
|
1222
|
+
// }),
|
|
1223
|
+
// ),
|
|
1224
|
+
// ),
|
|
1225
|
+
// transition('* => void', animate('100ms 25ms linear', style({opacity: 0}))),
|
|
1226
|
+
// ])
|
|
1210
1227
|
/**
|
|
1211
1228
|
* This animation controls the menu panel's entry and exit from the page.
|
|
1212
1229
|
*
|
|
@@ -1215,30 +1232,73 @@ const matMenuAnimations = {
|
|
|
1215
1232
|
* When the menu panel is removed from the DOM, it simply fades out after a brief
|
|
1216
1233
|
* delay to display the ripple.
|
|
1217
1234
|
*/
|
|
1218
|
-
transformMenu:
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1235
|
+
transformMenu: {
|
|
1236
|
+
type: 7,
|
|
1237
|
+
name: 'transformMenu',
|
|
1238
|
+
definitions: [
|
|
1239
|
+
{
|
|
1240
|
+
type: 0,
|
|
1241
|
+
name: 'void',
|
|
1242
|
+
styles: { type: 6, styles: { opacity: 0, transform: 'scale(0.8)' }, offset: null },
|
|
1243
|
+
},
|
|
1244
|
+
{
|
|
1245
|
+
type: 1,
|
|
1246
|
+
expr: 'void => enter',
|
|
1247
|
+
animation: {
|
|
1248
|
+
type: 4,
|
|
1249
|
+
styles: { type: 6, styles: { opacity: 1, transform: 'scale(1)' }, offset: null },
|
|
1250
|
+
timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
|
|
1251
|
+
},
|
|
1252
|
+
options: null,
|
|
1253
|
+
},
|
|
1254
|
+
{
|
|
1255
|
+
type: 1,
|
|
1256
|
+
expr: '* => void',
|
|
1257
|
+
animation: {
|
|
1258
|
+
type: 4,
|
|
1259
|
+
styles: { type: 6, styles: { opacity: 0 }, offset: null },
|
|
1260
|
+
timings: '100ms 25ms linear',
|
|
1261
|
+
},
|
|
1262
|
+
options: null,
|
|
1263
|
+
},
|
|
1264
|
+
],
|
|
1265
|
+
options: {},
|
|
1266
|
+
},
|
|
1267
|
+
// Represents:
|
|
1268
|
+
// trigger('fadeInItems', [
|
|
1269
|
+
// // TODO(crisbeto): this is inside the `transformMenu`
|
|
1270
|
+
// // now. Remove next time we do breaking changes.
|
|
1271
|
+
// state('showing', style({opacity: 1})),
|
|
1272
|
+
// transition('void => *', [
|
|
1273
|
+
// style({opacity: 0}),
|
|
1274
|
+
// animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'),
|
|
1275
|
+
// ]),
|
|
1276
|
+
// ])
|
|
1229
1277
|
/**
|
|
1230
1278
|
* This animation fades in the background color and content of the menu panel
|
|
1231
1279
|
* after its containing element is scaled in.
|
|
1232
1280
|
*/
|
|
1233
|
-
fadeInItems:
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1281
|
+
fadeInItems: {
|
|
1282
|
+
type: 7,
|
|
1283
|
+
name: 'fadeInItems',
|
|
1284
|
+
definitions: [
|
|
1285
|
+
{
|
|
1286
|
+
type: 0,
|
|
1287
|
+
name: 'showing',
|
|
1288
|
+
styles: { type: 6, styles: { opacity: 1 }, offset: null },
|
|
1289
|
+
},
|
|
1290
|
+
{
|
|
1291
|
+
type: 1,
|
|
1292
|
+
expr: 'void => *',
|
|
1293
|
+
animation: [
|
|
1294
|
+
{ type: 6, styles: { opacity: 0 }, offset: null },
|
|
1295
|
+
{ type: 4, styles: null, timings: '400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)' },
|
|
1296
|
+
],
|
|
1297
|
+
options: null,
|
|
1298
|
+
},
|
|
1299
|
+
],
|
|
1300
|
+
options: {},
|
|
1301
|
+
},
|
|
1242
1302
|
};
|
|
1243
1303
|
/**
|
|
1244
1304
|
* @deprecated
|