@angular/material 19.0.0-next.4 → 19.0.0-next.5
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/index.d.ts +5 -15
- package/badge/index.d.ts +3 -7
- package/bottom-sheet/index.d.ts +5 -15
- package/button/index.d.ts +20 -24
- package/button-toggle/index.d.ts +5 -8
- package/card/index.d.ts +2 -2
- package/checkbox/index.d.ts +4 -6
- package/chips/index.d.ts +13 -24
- package/core/index.d.ts +14 -19
- package/datepicker/index.d.ts +44 -70
- package/dialog/index.d.ts +10 -34
- package/dialog/testing/index.d.ts +1 -1
- package/expansion/index.d.ts +9 -13
- package/fesm2022/autocomplete/testing.mjs.map +1 -1
- package/fesm2022/autocomplete.mjs +32 -62
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge/testing.mjs.map +1 -1
- package/fesm2022/badge.mjs +12 -19
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +17 -32
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button/testing.mjs.map +1 -1
- package/fesm2022/button-toggle/testing.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +18 -34
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +44 -113
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card/testing.mjs.map +1 -1
- package/fesm2022/card.mjs +5 -9
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox/testing.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +14 -24
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips/testing.mjs.map +1 -1
- package/fesm2022/chips.mjs +61 -112
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core/testing.mjs.map +1 -1
- package/fesm2022/core.mjs +31 -66
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker/testing.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +130 -266
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog/testing.mjs +3 -3
- package/fesm2022/dialog/testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +27 -85
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider/testing.mjs.map +1 -1
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion/testing.mjs.map +1 -1
- package/fesm2022/expansion.mjs +32 -67
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field/testing/control.mjs.map +1 -1
- package/fesm2022/form-field/testing.mjs.map +1 -1
- package/fesm2022/form-field.mjs +42 -62
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list/testing.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +16 -23
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +11 -20
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input/testing.mjs.map +1 -1
- package/fesm2022/input.mjs +23 -47
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list/testing.mjs.map +1 -1
- package/fesm2022/list.mjs +59 -98
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/material.mjs.map +1 -1
- package/fesm2022/menu/testing.mjs.map +1 -1
- package/fesm2022/menu.mjs +51 -99
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator/testing.mjs.map +1 -1
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar/testing.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +12 -19
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner/testing.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +8 -14
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio/testing.mjs.map +1 -1
- package/fesm2022/radio.mjs +21 -34
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select/testing.mjs.map +1 -1
- package/fesm2022/select.mjs +26 -58
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav/testing.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +50 -70
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle/testing.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +13 -21
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider/testing.mjs.map +1 -1
- package/fesm2022/slider.mjs +49 -57
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar/testing.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +30 -43
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort/testing.mjs.map +1 -1
- package/fesm2022/sort.mjs +18 -37
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper/testing.mjs.map +1 -1
- package/fesm2022/stepper.mjs +30 -42
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table/testing.mjs.map +1 -1
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs/testing.mjs.map +1 -1
- package/fesm2022/tabs.mjs +87 -142
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/toolbar/testing.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +8 -12
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip/testing.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +45 -59
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree/testing.mjs.map +1 -1
- package/fesm2022/tree.mjs +13 -40
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/index.d.ts +10 -24
- package/grid-list/index.d.ts +6 -8
- package/icon/index.d.ts +2 -2
- package/input/index.d.ts +3 -7
- package/list/index.d.ts +10 -14
- package/menu/index.d.ts +15 -49
- package/package.json +2 -2
- package/progress-bar/index.d.ts +3 -5
- package/progress-spinner/index.d.ts +2 -2
- package/radio/index.d.ts +5 -8
- package/schematics/ng-add/fonts/material-fonts.d.ts +1 -1
- package/schematics/ng-add/fonts/material-fonts.js +2 -2
- package/schematics/ng-add/fonts/material-fonts.mjs +2 -2
- package/schematics/ng-add/index.d.ts +1 -1
- package/schematics/ng-add/index.js +3 -3
- package/schematics/ng-add/index.mjs +3 -3
- package/schematics/ng-add/package-config.d.ts +1 -1
- package/schematics/ng-add/package-config.js +2 -2
- package/schematics/ng-add/package-config.mjs +2 -2
- package/schematics/ng-add/schema.d.ts +1 -1
- package/schematics/ng-add/schema.js +2 -2
- package/schematics/ng-add/schema.mjs +2 -2
- package/schematics/ng-add/setup-project.d.ts +1 -1
- package/schematics/ng-add/setup-project.js +3 -3
- package/schematics/ng-add/setup-project.mjs +3 -3
- package/schematics/ng-add/theming/create-custom-theme.d.ts +1 -1
- package/schematics/ng-add/theming/create-custom-theme.js +2 -2
- package/schematics/ng-add/theming/create-custom-theme.mjs +2 -2
- package/schematics/ng-add/theming/theming.d.ts +1 -1
- package/schematics/ng-add/theming/theming.js +2 -2
- package/schematics/ng-add/theming/theming.mjs +2 -2
- package/schematics/ng-generate/address-form/index.d.ts +1 -1
- package/schematics/ng-generate/address-form/index.js +2 -2
- package/schematics/ng-generate/address-form/index.mjs +2 -2
- package/schematics/ng-generate/address-form/schema.d.ts +1 -1
- package/schematics/ng-generate/address-form/schema.js +2 -2
- package/schematics/ng-generate/address-form/schema.mjs +2 -2
- package/schematics/ng-generate/dashboard/index.d.ts +1 -1
- package/schematics/ng-generate/dashboard/index.js +2 -2
- package/schematics/ng-generate/dashboard/index.mjs +2 -2
- package/schematics/ng-generate/dashboard/schema.d.ts +1 -1
- package/schematics/ng-generate/dashboard/schema.js +2 -2
- package/schematics/ng-generate/dashboard/schema.mjs +2 -2
- package/schematics/ng-generate/m3-theme/index_bundled.js +1 -1
- package/schematics/ng-generate/m3-theme/index_bundled.js.map +1 -1
- package/schematics/ng-generate/navigation/index.d.ts +1 -1
- package/schematics/ng-generate/navigation/index.js +2 -2
- package/schematics/ng-generate/navigation/index.mjs +2 -2
- package/schematics/ng-generate/navigation/schema.d.ts +1 -1
- package/schematics/ng-generate/navigation/schema.js +2 -2
- package/schematics/ng-generate/navigation/schema.mjs +2 -2
- package/schematics/ng-generate/table/index.d.ts +1 -1
- package/schematics/ng-generate/table/index.js +2 -2
- package/schematics/ng-generate/table/index.mjs +2 -2
- package/schematics/ng-generate/table/schema.d.ts +1 -1
- package/schematics/ng-generate/table/schema.js +2 -2
- package/schematics/ng-generate/table/schema.mjs +2 -2
- package/schematics/ng-generate/tree/index.d.ts +1 -1
- package/schematics/ng-generate/tree/index.js +2 -2
- package/schematics/ng-generate/tree/index.mjs +2 -2
- package/schematics/ng-generate/tree/schema.d.ts +1 -1
- package/schematics/ng-generate/tree/schema.js +2 -2
- package/schematics/ng-generate/tree/schema.mjs +2 -2
- package/schematics/ng-update/index_bundled.js +1 -1
- package/schematics/ng-update/index_bundled.js.map +1 -1
- package/select/index.d.ts +4 -14
- package/sidenav/index.d.ts +7 -17
- package/slide-toggle/index.d.ts +2 -2
- package/slider/index.d.ts +8 -8
- package/snack-bar/index.d.ts +6 -22
- package/sort/index.d.ts +4 -20
- package/stepper/index.d.ts +6 -13
- package/tabs/index.d.ts +21 -32
- package/toolbar/index.d.ts +3 -4
- package/tooltip/index.d.ts +5 -12
- package/tree/index.d.ts +5 -18
package/fesm2022/tabs.mjs
CHANGED
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken,
|
|
2
|
+
import { InjectionToken, inject, TemplateRef, Directive, ViewContainerRef, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, ViewChild, ElementRef, ChangeDetectorRef, NgZone, ANIMATION_MODULE_TYPE, EventEmitter, Injector, afterNextRender, numberAttribute, Output, ContentChildren, ComponentFactoryResolver, QueryList, forwardRef, HostAttributeToken, NgModule } from '@angular/core';
|
|
3
3
|
import { MatRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule } from '@angular/material/core';
|
|
4
4
|
import { CdkPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
|
|
5
5
|
import { Subject, fromEvent, of, merge, EMPTY, Observable, timer, Subscription, BehaviorSubject } from 'rxjs';
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import * as i3 from '@angular/cdk/platform';
|
|
9
|
-
import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
|
|
10
|
-
import * as i2 from '@angular/cdk/bidi';
|
|
11
|
-
import * as i4 from '@angular/cdk/a11y';
|
|
12
|
-
import { FocusKeyManager, CdkMonitorFocus } from '@angular/cdk/a11y';
|
|
6
|
+
import { FocusKeyManager, CdkMonitorFocus, FocusMonitor } from '@angular/cdk/a11y';
|
|
7
|
+
import { Directionality } from '@angular/cdk/bidi';
|
|
13
8
|
import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
|
|
14
9
|
import { SharedResizeObserver } from '@angular/cdk/observers/private';
|
|
10
|
+
import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
|
|
11
|
+
import { ViewportRuler, CdkScrollable } from '@angular/cdk/scrolling';
|
|
15
12
|
import { takeUntil, debounceTime, startWith, switchMap, skip, filter, distinctUntilChanged } from 'rxjs/operators';
|
|
16
13
|
import { CdkObserveContent } from '@angular/cdk/observers';
|
|
17
14
|
import { DOCUMENT } from '@angular/common';
|
|
@@ -25,10 +22,10 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
|
|
|
25
22
|
const MAT_TAB_CONTENT = new InjectionToken('MatTabContent');
|
|
26
23
|
/** Decorates the `ng-template` tags and reads out the template from it. */
|
|
27
24
|
class MatTabContent {
|
|
28
|
-
constructor(
|
|
29
|
-
this.template =
|
|
25
|
+
constructor() {
|
|
26
|
+
this.template = inject(TemplateRef);
|
|
30
27
|
}
|
|
31
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabContent, deps: [
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
32
29
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.3", type: MatTabContent, isStandalone: true, selector: "[matTabContent]", providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }], ngImport: i0 }); }
|
|
33
30
|
}
|
|
34
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabContent, decorators: [{
|
|
@@ -38,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
38
35
|
providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }],
|
|
39
36
|
standalone: true,
|
|
40
37
|
}]
|
|
41
|
-
}], ctorParameters: () => [
|
|
38
|
+
}], ctorParameters: () => [] });
|
|
42
39
|
|
|
43
40
|
/**
|
|
44
41
|
* Injection token that can be used to reference instances of `MatTabLabel`. It serves as
|
|
@@ -53,11 +50,11 @@ const MAT_TAB_LABEL = new InjectionToken('MatTabLabel');
|
|
|
53
50
|
const MAT_TAB = new InjectionToken('MAT_TAB');
|
|
54
51
|
/** Used to flag tab labels for use with the portal directive */
|
|
55
52
|
class MatTabLabel extends CdkPortal {
|
|
56
|
-
constructor(
|
|
57
|
-
super(
|
|
58
|
-
this._closestTab =
|
|
53
|
+
constructor() {
|
|
54
|
+
super(...arguments);
|
|
55
|
+
this._closestTab = inject(MAT_TAB, { optional: true });
|
|
59
56
|
}
|
|
60
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLabel, deps:
|
|
57
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
61
58
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.3", type: MatTabLabel, isStandalone: true, selector: "[mat-tab-label], [matTabLabel]", providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }], usesInheritance: true, ngImport: i0 }); }
|
|
62
59
|
}
|
|
63
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLabel, decorators: [{
|
|
@@ -67,12 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
67
64
|
providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }],
|
|
68
65
|
standalone: true,
|
|
69
66
|
}]
|
|
70
|
-
}]
|
|
71
|
-
type: Inject,
|
|
72
|
-
args: [MAT_TAB]
|
|
73
|
-
}, {
|
|
74
|
-
type: Optional
|
|
75
|
-
}] }] });
|
|
67
|
+
}] });
|
|
76
68
|
|
|
77
69
|
/**
|
|
78
70
|
* Used to provide a tab group to a tab without causing a circular dependency.
|
|
@@ -91,9 +83,9 @@ class MatTab {
|
|
|
91
83
|
get content() {
|
|
92
84
|
return this._contentPortal;
|
|
93
85
|
}
|
|
94
|
-
constructor(
|
|
95
|
-
this._viewContainerRef =
|
|
96
|
-
this._closestTabGroup =
|
|
86
|
+
constructor() {
|
|
87
|
+
this._viewContainerRef = inject(ViewContainerRef);
|
|
88
|
+
this._closestTabGroup = inject(MAT_TAB_GROUP, { optional: true });
|
|
97
89
|
/** whether the tab is disabled. */
|
|
98
90
|
this.disabled = false;
|
|
99
91
|
/**
|
|
@@ -147,7 +139,7 @@ class MatTab {
|
|
|
147
139
|
this._templateLabel = value;
|
|
148
140
|
}
|
|
149
141
|
}
|
|
150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTab, deps: [
|
|
142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
151
143
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatTab, isStandalone: true, selector: "mat-tab", inputs: { disabled: ["disabled", "disabled", booleanAttribute], textLabel: ["label", "textLabel"], ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], labelClass: "labelClass", bodyClass: "bodyClass" }, host: { attributes: { "hidden": "" } }, providers: [{ provide: MAT_TAB, useExisting: MatTab }], queries: [{ propertyName: "templateLabel", first: true, predicate: MatTabLabel, descendants: true }, { propertyName: "_explicitContent", first: true, predicate: MatTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["matTab"], usesOnChanges: true, ngImport: i0, template: "<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template><ng-content></ng-content></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
152
144
|
}
|
|
153
145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTab, decorators: [{
|
|
@@ -157,12 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
157
149
|
// Hide it so it doesn't cause a layout shift when it's removed on the client.
|
|
158
150
|
'hidden': '',
|
|
159
151
|
}, template: "<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template><ng-content></ng-content></ng-template>\n" }]
|
|
160
|
-
}], ctorParameters: () => [
|
|
161
|
-
type: Inject,
|
|
162
|
-
args: [MAT_TAB_GROUP]
|
|
163
|
-
}, {
|
|
164
|
-
type: Optional
|
|
165
|
-
}] }], propDecorators: { disabled: [{
|
|
152
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
166
153
|
type: Input,
|
|
167
154
|
args: [{ transform: booleanAttribute }]
|
|
168
155
|
}], templateLabel: [{
|
|
@@ -334,9 +321,9 @@ const _MAT_INK_BAR_POSITIONER = new InjectionToken('MatInkBarPositioner', {
|
|
|
334
321
|
* @docs-private
|
|
335
322
|
*/
|
|
336
323
|
class MatTabLabelWrapper extends InkBarItem {
|
|
337
|
-
constructor(
|
|
338
|
-
super();
|
|
339
|
-
this.elementRef =
|
|
324
|
+
constructor() {
|
|
325
|
+
super(...arguments);
|
|
326
|
+
this.elementRef = inject(ElementRef);
|
|
340
327
|
/** Whether the tab is disabled. */
|
|
341
328
|
this.disabled = false;
|
|
342
329
|
}
|
|
@@ -350,7 +337,7 @@ class MatTabLabelWrapper extends InkBarItem {
|
|
|
350
337
|
getOffsetWidth() {
|
|
351
338
|
return this.elementRef.nativeElement.offsetWidth;
|
|
352
339
|
}
|
|
353
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLabelWrapper, deps:
|
|
340
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLabelWrapper, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
354
341
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatTabLabelWrapper, isStandalone: true, selector: "[matTabLabelWrapper]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.mat-mdc-tab-disabled": "disabled", "attr.aria-disabled": "!!disabled" } }, usesInheritance: true, ngImport: i0 }); }
|
|
355
342
|
}
|
|
356
343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLabelWrapper, decorators: [{
|
|
@@ -363,7 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
363
350
|
},
|
|
364
351
|
standalone: true,
|
|
365
352
|
}]
|
|
366
|
-
}],
|
|
353
|
+
}], propDecorators: { disabled: [{
|
|
367
354
|
type: Input,
|
|
368
355
|
args: [{ transform: booleanAttribute }]
|
|
369
356
|
}] } });
|
|
@@ -401,14 +388,14 @@ class MatPaginatedTabHeader {
|
|
|
401
388
|
}
|
|
402
389
|
}
|
|
403
390
|
}
|
|
404
|
-
constructor(
|
|
405
|
-
this._elementRef =
|
|
406
|
-
this._changeDetectorRef =
|
|
407
|
-
this._viewportRuler =
|
|
408
|
-
this._dir =
|
|
409
|
-
this._ngZone =
|
|
410
|
-
this._platform =
|
|
411
|
-
this._animationMode =
|
|
391
|
+
constructor() {
|
|
392
|
+
this._elementRef = inject(ElementRef);
|
|
393
|
+
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
394
|
+
this._viewportRuler = inject(ViewportRuler);
|
|
395
|
+
this._dir = inject(Directionality, { optional: true });
|
|
396
|
+
this._ngZone = inject(NgZone);
|
|
397
|
+
this._platform = inject(Platform);
|
|
398
|
+
this._animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
412
399
|
/** The distance in pixels that the tab labels should be translated to the left. */
|
|
413
400
|
this._scrollDistance = 0;
|
|
414
401
|
/** Whether the header should scroll to the selected index after the view has been checked. */
|
|
@@ -436,12 +423,10 @@ class MatPaginatedTabHeader {
|
|
|
436
423
|
this._sharedResizeObserver = inject(SharedResizeObserver);
|
|
437
424
|
this._injector = inject(Injector);
|
|
438
425
|
// Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
|
|
439
|
-
_ngZone.runOutsideAngular(() => {
|
|
440
|
-
fromEvent(_elementRef.nativeElement, 'mouseleave')
|
|
426
|
+
this._ngZone.runOutsideAngular(() => {
|
|
427
|
+
fromEvent(this._elementRef.nativeElement, 'mouseleave')
|
|
441
428
|
.pipe(takeUntil(this._destroyed))
|
|
442
|
-
.subscribe(() =>
|
|
443
|
-
this._stopInterval();
|
|
444
|
-
});
|
|
429
|
+
.subscribe(() => this._stopInterval());
|
|
445
430
|
});
|
|
446
431
|
}
|
|
447
432
|
ngAfterViewInit() {
|
|
@@ -863,19 +848,12 @@ class MatPaginatedTabHeader {
|
|
|
863
848
|
this._checkScrollingControls();
|
|
864
849
|
return { maxScrollDistance, distance: this._scrollDistance };
|
|
865
850
|
}
|
|
866
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatPaginatedTabHeader, deps: [
|
|
851
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
867
852
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatPaginatedTabHeader, inputs: { disablePagination: ["disablePagination", "disablePagination", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 }); }
|
|
868
853
|
}
|
|
869
854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatPaginatedTabHeader, decorators: [{
|
|
870
855
|
type: Directive
|
|
871
|
-
}], ctorParameters: () => [
|
|
872
|
-
type: Optional
|
|
873
|
-
}] }, { type: i0.NgZone }, { type: i3.Platform }, { type: undefined, decorators: [{
|
|
874
|
-
type: Optional
|
|
875
|
-
}, {
|
|
876
|
-
type: Inject,
|
|
877
|
-
args: [ANIMATION_MODULE_TYPE]
|
|
878
|
-
}] }], propDecorators: { disablePagination: [{
|
|
856
|
+
}], ctorParameters: () => [], propDecorators: { disablePagination: [{
|
|
879
857
|
type: Input,
|
|
880
858
|
args: [{ transform: booleanAttribute }]
|
|
881
859
|
}], selectedIndex: [{
|
|
@@ -895,8 +873,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
895
873
|
* @docs-private
|
|
896
874
|
*/
|
|
897
875
|
class MatTabHeader extends MatPaginatedTabHeader {
|
|
898
|
-
constructor(
|
|
899
|
-
super(
|
|
876
|
+
constructor() {
|
|
877
|
+
super(...arguments);
|
|
900
878
|
/** Whether the ripple effect is disabled or not. */
|
|
901
879
|
this.disableRipple = false;
|
|
902
880
|
}
|
|
@@ -907,7 +885,7 @@ class MatTabHeader extends MatPaginatedTabHeader {
|
|
|
907
885
|
_itemSelected(event) {
|
|
908
886
|
event.preventDefault();
|
|
909
887
|
}
|
|
910
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabHeader, deps:
|
|
888
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
911
889
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatTabHeader, isStandalone: true, selector: "mat-tab-header", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { properties: { "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'" }, classAttribute: "mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: MatTabLabelWrapper }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div\n class=\"mat-mdc-tab-label-container\"\n #tabListContainer\n (keydown)=\"_handleKeydown($event)\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\">\n <div\n #tabList\n class=\"mat-mdc-tab-list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-labels\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-app-surface-variant))}.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container{border-bottom:none;border-top-style:solid;border-top-width:var(--mat-tab-header-divider-height, 1px);border-top-color:var(--mat-tab-header-divider-color, var(--mat-app-surface-variant))}.mat-mdc-tab-labels{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-labels,.mat-mdc-tab-labels.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab::before{margin:5px}@media(forced-colors: active){.mat-mdc-tab[aria-disabled=true]{color:GrayText}}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
912
890
|
}
|
|
913
891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabHeader, decorators: [{
|
|
@@ -917,14 +895,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
917
895
|
'[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls',
|
|
918
896
|
'[class.mat-mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
|
|
919
897
|
}, standalone: true, imports: [MatRipple, CdkObserveContent], template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div\n class=\"mat-mdc-tab-label-container\"\n #tabListContainer\n (keydown)=\"_handleKeydown($event)\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\">\n <div\n #tabList\n class=\"mat-mdc-tab-list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-labels\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-app-surface-variant))}.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container{border-bottom:none;border-top-style:solid;border-top-width:var(--mat-tab-header-divider-height, 1px);border-top-color:var(--mat-tab-header-divider-color, var(--mat-app-surface-variant))}.mat-mdc-tab-labels{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-labels,.mat-mdc-tab-labels.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab::before{margin:5px}@media(forced-colors: active){.mat-mdc-tab[aria-disabled=true]{color:GrayText}}"] }]
|
|
920
|
-
}],
|
|
921
|
-
type: Optional
|
|
922
|
-
}] }, { type: i0.NgZone }, { type: i3.Platform }, { type: undefined, decorators: [{
|
|
923
|
-
type: Optional
|
|
924
|
-
}, {
|
|
925
|
-
type: Inject,
|
|
926
|
-
args: [ANIMATION_MODULE_TYPE]
|
|
927
|
-
}] }], propDecorators: { _items: [{
|
|
898
|
+
}], propDecorators: { _items: [{
|
|
928
899
|
type: ContentChildren,
|
|
929
900
|
args: [MatTabLabelWrapper, { descendants: false }]
|
|
930
901
|
}], _tabListContainer: [{
|
|
@@ -998,9 +969,12 @@ const matTabsAnimations = {
|
|
|
998
969
|
* @docs-private
|
|
999
970
|
*/
|
|
1000
971
|
class MatTabBodyPortal extends CdkPortalOutlet {
|
|
1001
|
-
constructor(
|
|
972
|
+
constructor() {
|
|
973
|
+
const componentFactoryResolver = inject(ComponentFactoryResolver);
|
|
974
|
+
const viewContainerRef = inject(ViewContainerRef);
|
|
975
|
+
const _document = inject(DOCUMENT);
|
|
1002
976
|
super(componentFactoryResolver, viewContainerRef, _document);
|
|
1003
|
-
this._host =
|
|
977
|
+
this._host = inject(MatTabBody);
|
|
1004
978
|
/** Subscription to events for when the tab body begins centering. */
|
|
1005
979
|
this._centeringSub = Subscription.EMPTY;
|
|
1006
980
|
/** Subscription to events for when the tab body finishes leaving from center position. */
|
|
@@ -1028,7 +1002,7 @@ class MatTabBodyPortal extends CdkPortalOutlet {
|
|
|
1028
1002
|
this._centeringSub.unsubscribe();
|
|
1029
1003
|
this._leavingSub.unsubscribe();
|
|
1030
1004
|
}
|
|
1031
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabBodyPortal, deps: [
|
|
1005
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabBodyPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1032
1006
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.3", type: MatTabBodyPortal, isStandalone: true, selector: "[matTabBodyHost]", usesInheritance: true, ngImport: i0 }); }
|
|
1033
1007
|
}
|
|
1034
1008
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabBodyPortal, decorators: [{
|
|
@@ -1037,13 +1011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
1037
1011
|
selector: '[matTabBodyHost]',
|
|
1038
1012
|
standalone: true,
|
|
1039
1013
|
}]
|
|
1040
|
-
}], ctorParameters: () => [
|
|
1041
|
-
type: Inject,
|
|
1042
|
-
args: [forwardRef(() => MatTabBody)]
|
|
1043
|
-
}] }, { type: undefined, decorators: [{
|
|
1044
|
-
type: Inject,
|
|
1045
|
-
args: [DOCUMENT]
|
|
1046
|
-
}] }] });
|
|
1014
|
+
}], ctorParameters: () => [] });
|
|
1047
1015
|
/**
|
|
1048
1016
|
* Wrapper for the contents of a tab.
|
|
1049
1017
|
* @docs-private
|
|
@@ -1054,9 +1022,9 @@ class MatTabBody {
|
|
|
1054
1022
|
this._positionIndex = position;
|
|
1055
1023
|
this._computePositionAnimationState();
|
|
1056
1024
|
}
|
|
1057
|
-
constructor(
|
|
1058
|
-
this._elementRef =
|
|
1059
|
-
this._dir =
|
|
1025
|
+
constructor() {
|
|
1026
|
+
this._elementRef = inject(ElementRef);
|
|
1027
|
+
this._dir = inject(Directionality, { optional: true });
|
|
1060
1028
|
/** Subscription to the directionality change observable. */
|
|
1061
1029
|
this._dirChangeSubscription = Subscription.EMPTY;
|
|
1062
1030
|
/** Emits when an animation on the tab is complete. */
|
|
@@ -1075,8 +1043,9 @@ class MatTabBody {
|
|
|
1075
1043
|
this.animationDuration = '500ms';
|
|
1076
1044
|
/** Whether the tab's content should be kept in the DOM while it's off-screen. */
|
|
1077
1045
|
this.preserveContent = false;
|
|
1078
|
-
if (_dir) {
|
|
1079
|
-
|
|
1046
|
+
if (this._dir) {
|
|
1047
|
+
const changeDetectorRef = inject(ChangeDetectorRef);
|
|
1048
|
+
this._dirChangeSubscription = this._dir.change.subscribe((dir) => {
|
|
1080
1049
|
this._computePositionAnimationState(dir);
|
|
1081
1050
|
changeDetectorRef.markForCheck();
|
|
1082
1051
|
});
|
|
@@ -1148,7 +1117,7 @@ class MatTabBody {
|
|
|
1148
1117
|
}
|
|
1149
1118
|
return 'right-origin-center';
|
|
1150
1119
|
}
|
|
1151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabBody, deps: [
|
|
1120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1152
1121
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.3", type: MatTabBody, isStandalone: true, selector: "mat-tab-body", inputs: { _content: ["content", "_content"], origin: "origin", animationDuration: "animationDuration", preserveContent: "preserveContent", position: "position" }, outputs: { _onCentering: "_onCentering", _beforeCentering: "_beforeCentering", _afterLeavingCenter: "_afterLeavingCenter", _onCentered: "_onCentered" }, host: { classAttribute: "mat-mdc-tab-body" }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div class=\"mat-mdc-tab-body-content\" #content\n [@translateTab]=\"{\n value: _position,\n params: {animationDuration: animationDuration}\n }\"\n (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n (@translateTab.done)=\"_translateTabComplete.next($event)\"\n cdkScrollable>\n <ng-template matTabBodyHost></ng-template>\n</div>\n", styles: [".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-mdc-tab-body-content[style*=\"visibility: hidden\"]{display:none}"], dependencies: [{ kind: "directive", type: MatTabBodyPortal, selector: "[matTabBodyHost]" }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [matTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1153
1122
|
}
|
|
1154
1123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabBody, decorators: [{
|
|
@@ -1156,9 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
1156
1125
|
args: [{ selector: 'mat-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [matTabsAnimations.translateTab], host: {
|
|
1157
1126
|
'class': 'mat-mdc-tab-body',
|
|
1158
1127
|
}, standalone: true, imports: [MatTabBodyPortal, CdkScrollable], template: "<div class=\"mat-mdc-tab-body-content\" #content\n [@translateTab]=\"{\n value: _position,\n params: {animationDuration: animationDuration}\n }\"\n (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n (@translateTab.done)=\"_translateTabComplete.next($event)\"\n cdkScrollable>\n <ng-template matTabBodyHost></ng-template>\n</div>\n", styles: [".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-mdc-tab-body-content[style*=\"visibility: hidden\"]{display:none}"] }]
|
|
1159
|
-
}], ctorParameters: () => [
|
|
1160
|
-
type: Optional
|
|
1161
|
-
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { _onCentering: [{
|
|
1128
|
+
}], ctorParameters: () => [], propDecorators: { _onCentering: [{
|
|
1162
1129
|
type: Output
|
|
1163
1130
|
}], _beforeCentering: [{
|
|
1164
1131
|
type: Output
|
|
@@ -1251,10 +1218,10 @@ class MatTabGroup {
|
|
|
1251
1218
|
}
|
|
1252
1219
|
this._backgroundColor = value;
|
|
1253
1220
|
}
|
|
1254
|
-
constructor(
|
|
1255
|
-
this._elementRef =
|
|
1256
|
-
this._changeDetectorRef =
|
|
1257
|
-
this._animationMode =
|
|
1221
|
+
constructor() {
|
|
1222
|
+
this._elementRef = inject(ElementRef);
|
|
1223
|
+
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
1224
|
+
this._animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1258
1225
|
/** All of the tabs that belong to the group. */
|
|
1259
1226
|
this._tabs = new QueryList();
|
|
1260
1227
|
/** The tab index that should be selected after the content has been checked. */
|
|
@@ -1298,6 +1265,7 @@ class MatTabGroup {
|
|
|
1298
1265
|
this.selectedTabChange = new EventEmitter(true);
|
|
1299
1266
|
/** Whether the tab group is rendered on the server. */
|
|
1300
1267
|
this._isServer = !inject(Platform).isBrowser;
|
|
1268
|
+
const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true });
|
|
1301
1269
|
this._groupId = nextId++;
|
|
1302
1270
|
this.animationDuration =
|
|
1303
1271
|
defaultConfig && defaultConfig.animationDuration ? defaultConfig.animationDuration : '500ms';
|
|
@@ -1531,7 +1499,7 @@ class MatTabGroup {
|
|
|
1531
1499
|
this._tabHeader.focusIndex = index;
|
|
1532
1500
|
}
|
|
1533
1501
|
}
|
|
1534
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabGroup, deps: [
|
|
1502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1535
1503
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: MatTabGroup, isStandalone: true, selector: "mat-tab-group", inputs: { color: "color", fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], headerPosition: "headerPosition", animationDuration: "animationDuration", contentTabIndex: ["contentTabIndex", "contentTabIndex", numberAttribute], disablePagination: ["disablePagination", "disablePagination", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], preserveContent: ["preserveContent", "preserveContent", booleanAttribute], backgroundColor: "backgroundColor", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { properties: { "class": "\"mat-\" + (color || \"primary\")", "class.mat-mdc-tab-group-dynamic-height": "dynamicHeight", "class.mat-mdc-tab-group-inverted-header": "headerPosition === \"below\"", "class.mat-mdc-tab-group-stretch-tabs": "stretchTabs", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-group" }, providers: [
|
|
1536
1504
|
{
|
|
1537
1505
|
provide: MAT_TAB_GROUP,
|
|
@@ -1561,17 +1529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
1561
1529
|
CdkPortalOutlet,
|
|
1562
1530
|
MatTabBody,
|
|
1563
1531
|
], template: "<mat-tab-header #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [disableRipple]=\"disableRipple\"\n [disablePagination]=\"disablePagination\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"selectedIndex = $event\">\n\n @for (tab of _tabs; track tab; let i = $index) {\n <div class=\"mdc-tab mat-mdc-tab mat-focus-indicator\"\n #tabNode\n role=\"tab\"\n matTabLabelWrapper\n cdkMonitorElementFocus\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n [class.mdc-tab--active]=\"selectedIndex === i\"\n [class]=\"tab.labelClass\"\n [disabled]=\"tab.disabled\"\n [fitInkBarToContent]=\"fitInkBarToContent\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\">\n <span class=\"mdc-tab__ripple\"></span>\n\n <!-- Needs to be a separate element, because we can't put\n `overflow: hidden` on tab due to the ink bar. -->\n <div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"tabNode\"\n [matRippleDisabled]=\"tab.disabled || disableRipple\"></div>\n\n <span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <!--\n If there is a label template, use it, otherwise fall back to the text label.\n Note that we don't have indentation around the text label, because it adds\n whitespace around the text which breaks some internal tests.\n -->\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n } @else {{{tab.textLabel}}}\n </span>\n </span>\n </div>\n }\n</mat-tab-header>\n\n<!--\n We need to project the content somewhere to avoid hydration errors. Some observations:\n 1. This is only necessary on the server.\n 2. We get a hydration error if there aren't any nodes after the `ng-content`.\n 3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n <ng-content/>\n}\n\n<div\n class=\"mat-mdc-tab-body-wrapper\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n #tabBodyWrapper>\n @for (tab of _tabs; track tab; let i = $index) {\n <mat-tab-body role=\"tabpanel\"\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [attr.aria-hidden]=\"selectedIndex !== i\"\n [class.mat-mdc-tab-body-active]=\"selectedIndex === i\"\n [class]=\"tab.bodyClass\"\n [content]=\"tab.content!\"\n [position]=\"tab.position!\"\n [origin]=\"tab.origin\"\n [animationDuration]=\"animationDuration\"\n [preserveContent]=\"preserveContent\"\n (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n (_onCentering)=\"_setTabBodyWrapperHeight($event)\">\n </mat-tab-body>\n }\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-app-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-app-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-app-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-app-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-app-title-small-weight))}.mat-mdc-tab.mdc-tab{flex-grow:0}.mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-app-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-app-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-app-primary))}.mat-mdc-tab.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-app-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab{flex-grow:1}.mat-mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-focus-indicator::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mdc-tab__ripple::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header{flex-direction:column-reverse}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mat-mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable{transition:none !important;animation:none !important}"] }]
|
|
1564
|
-
}], ctorParameters: () => [
|
|
1565
|
-
type: Inject,
|
|
1566
|
-
args: [MAT_TABS_CONFIG]
|
|
1567
|
-
}, {
|
|
1568
|
-
type: Optional
|
|
1569
|
-
}] }, { type: undefined, decorators: [{
|
|
1570
|
-
type: Optional
|
|
1571
|
-
}, {
|
|
1572
|
-
type: Inject,
|
|
1573
|
-
args: [ANIMATION_MODULE_TYPE]
|
|
1574
|
-
}] }], propDecorators: { _allTabs: [{
|
|
1532
|
+
}], ctorParameters: () => [], propDecorators: { _allTabs: [{
|
|
1575
1533
|
type: ContentChildren,
|
|
1576
1534
|
args: [MatTab, { descendants: true }]
|
|
1577
1535
|
}], _tabBodyWrapper: [{
|
|
@@ -1671,7 +1629,15 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1671
1629
|
}
|
|
1672
1630
|
this._backgroundColor = value;
|
|
1673
1631
|
}
|
|
1674
|
-
constructor(
|
|
1632
|
+
constructor() {
|
|
1633
|
+
const elementRef = inject(ElementRef);
|
|
1634
|
+
const dir = inject(Directionality, { optional: true });
|
|
1635
|
+
const ngZone = inject(NgZone);
|
|
1636
|
+
const changeDetectorRef = inject(ChangeDetectorRef);
|
|
1637
|
+
const viewportRuler = inject(ViewportRuler);
|
|
1638
|
+
const platform = inject(Platform);
|
|
1639
|
+
const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1640
|
+
const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true });
|
|
1675
1641
|
super(elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode);
|
|
1676
1642
|
this._fitInkBarToContent = new BehaviorSubject(false);
|
|
1677
1643
|
/** Whether tabs should be stretched to fill the header. */
|
|
@@ -1738,7 +1704,7 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1738
1704
|
_getRole() {
|
|
1739
1705
|
return this.tabPanel ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
|
|
1740
1706
|
}
|
|
1741
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabNav, deps: [
|
|
1707
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1742
1708
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatTabNav, isStandalone: true, selector: "[mat-tab-nav-bar]", inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], animationDuration: "animationDuration", backgroundColor: "backgroundColor", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], color: "color", tabPanel: "tabPanel" }, host: { properties: { "attr.role": "_getRole()", "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'", "class.mat-mdc-tab-nav-bar-stretch-tabs": "stretchTabs", "class.mat-primary": "color !== \"warn\" && color !== \"accent\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "class._mat-animation-noopable": "_animationMode === \"NoopAnimations\"", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-nav-bar mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => MatTabLink), descendants: true }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], exportAs: ["matTabNavBar", "matTabNav"], usesInheritance: true, ngImport: i0, template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-mdc-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n <div class=\"mat-mdc-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-links\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-links,.mat-mdc-tab-links.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-app-surface-variant))}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1743
1709
|
}
|
|
1744
1710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabNav, decorators: [{
|
|
@@ -1755,19 +1721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
1755
1721
|
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
|
|
1756
1722
|
'[style.--mat-tab-animation-duration]': 'animationDuration',
|
|
1757
1723
|
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [MatRipple, CdkObserveContent], template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-mdc-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n <div class=\"mat-mdc-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-links\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-links,.mat-mdc-tab-links.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-app-surface-variant))}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}"] }]
|
|
1758
|
-
}], ctorParameters: () => [
|
|
1759
|
-
type: Optional
|
|
1760
|
-
}] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i3.Platform }, { type: undefined, decorators: [{
|
|
1761
|
-
type: Optional
|
|
1762
|
-
}, {
|
|
1763
|
-
type: Inject,
|
|
1764
|
-
args: [ANIMATION_MODULE_TYPE]
|
|
1765
|
-
}] }, { type: undefined, decorators: [{
|
|
1766
|
-
type: Optional
|
|
1767
|
-
}, {
|
|
1768
|
-
type: Inject,
|
|
1769
|
-
args: [MAT_TABS_CONFIG]
|
|
1770
|
-
}] }], propDecorators: { fitInkBarToContent: [{
|
|
1724
|
+
}], ctorParameters: () => [], propDecorators: { fitInkBarToContent: [{
|
|
1771
1725
|
type: Input,
|
|
1772
1726
|
args: [{ transform: booleanAttribute }]
|
|
1773
1727
|
}], stretchTabs: [{
|
|
@@ -1827,12 +1781,11 @@ class MatTabLink extends InkBarItem {
|
|
|
1827
1781
|
this._tabNavBar.disableRipple ||
|
|
1828
1782
|
!!this.rippleConfig.disabled);
|
|
1829
1783
|
}
|
|
1830
|
-
constructor(
|
|
1831
|
-
/** @docs-private */ elementRef, globalRippleOptions, tabIndex, _focusMonitor, animationMode) {
|
|
1784
|
+
constructor() {
|
|
1832
1785
|
super();
|
|
1833
|
-
this._tabNavBar =
|
|
1834
|
-
this.elementRef =
|
|
1835
|
-
this._focusMonitor =
|
|
1786
|
+
this._tabNavBar = inject(MatTabNav);
|
|
1787
|
+
this.elementRef = inject(ElementRef);
|
|
1788
|
+
this._focusMonitor = inject(FocusMonitor);
|
|
1836
1789
|
this._destroyed = new Subject();
|
|
1837
1790
|
/** Whether the tab link is active or not. */
|
|
1838
1791
|
this._isActive = false;
|
|
@@ -1843,12 +1796,17 @@ class MatTabLink extends InkBarItem {
|
|
|
1843
1796
|
this.tabIndex = 0;
|
|
1844
1797
|
/** Unique id for the tab. */
|
|
1845
1798
|
this.id = `mat-tab-link-${nextUniqueId++}`;
|
|
1799
|
+
const globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {
|
|
1800
|
+
optional: true,
|
|
1801
|
+
});
|
|
1802
|
+
const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
|
|
1803
|
+
const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1846
1804
|
this.rippleConfig = globalRippleOptions || {};
|
|
1847
|
-
this.tabIndex = parseInt(tabIndex) || 0;
|
|
1805
|
+
this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;
|
|
1848
1806
|
if (animationMode === 'NoopAnimations') {
|
|
1849
1807
|
this.rippleConfig.animation = { enterDuration: 0, exitDuration: 0 };
|
|
1850
1808
|
}
|
|
1851
|
-
_tabNavBar._fitInkBarToContent
|
|
1809
|
+
this._tabNavBar._fitInkBarToContent
|
|
1852
1810
|
.pipe(takeUntil(this._destroyed))
|
|
1853
1811
|
.subscribe(fitInkBarToContent => {
|
|
1854
1812
|
this.fitInkBarToContent = fitInkBarToContent;
|
|
@@ -1914,7 +1872,7 @@ class MatTabLink extends InkBarItem {
|
|
|
1914
1872
|
return this.disabled ? -1 : this.tabIndex;
|
|
1915
1873
|
}
|
|
1916
1874
|
}
|
|
1917
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLink, deps: [
|
|
1875
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1918
1876
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatTabLink, isStandalone: true, selector: "[mat-tab-link], [matTabLink]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], id: "id" }, host: { listeners: { "focus": "_handleFocus()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-controls": "_getAriaControls()", "attr.aria-current": "_getAriaCurrent()", "attr.aria-disabled": "disabled", "attr.aria-selected": "_getAriaSelected()", "attr.id": "id", "attr.tabIndex": "_getTabIndex()", "attr.role": "_getRole()", "class.mat-mdc-tab-disabled": "disabled", "class.mdc-tab--active": "active" }, classAttribute: "mdc-tab mat-mdc-tab-link mat-focus-indicator" }, exportAs: ["matTabLink"], usesInheritance: true, ngImport: i0, template: "<span class=\"mdc-tab__ripple\"></span>\n\n<div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"elementRef.nativeElement\"\n [matRippleDisabled]=\"rippleDisabled\"></div>\n\n<span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <ng-content></ng-content>\n </span>\n</span>\n\n", styles: [".mat-mdc-tab-link{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-app-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-app-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-app-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-app-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-app-title-small-weight))}.mat-mdc-tab-link.mdc-tab{flex-grow:0}.mat-mdc-tab-link .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-app-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab-link:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab-link.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-app-primary))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-app-primary))}.mat-mdc-tab-link.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab-link.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab-link .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-app-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab-link .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab-link:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab-link.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab-link.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab-link .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs .mat-mdc-tab-link{flex-grow:1}.mat-mdc-tab-link::before{margin:5px}@media(max-width: 599px){.mat-mdc-tab-link{min-width:72px}}"], 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 }); }
|
|
1919
1877
|
}
|
|
1920
1878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTabLink, decorators: [{
|
|
@@ -1933,20 +1891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
|
|
|
1933
1891
|
'(focus)': '_handleFocus()',
|
|
1934
1892
|
'(keydown)': '_handleKeydown($event)',
|
|
1935
1893
|
}, standalone: true, imports: [MatRipple], template: "<span class=\"mdc-tab__ripple\"></span>\n\n<div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"elementRef.nativeElement\"\n [matRippleDisabled]=\"rippleDisabled\"></div>\n\n<span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <ng-content></ng-content>\n </span>\n</span>\n\n", styles: [".mat-mdc-tab-link{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-app-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-app-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-app-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-app-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-app-title-small-weight))}.mat-mdc-tab-link.mdc-tab{flex-grow:0}.mat-mdc-tab-link .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-app-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab-link:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab-link.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-app-primary))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-app-primary))}.mat-mdc-tab-link.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab-link.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab-link .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-app-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab-link .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab-link:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab-link.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab-link.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab-link .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs .mat-mdc-tab-link{flex-grow:1}.mat-mdc-tab-link::before{margin:5px}@media(max-width: 599px){.mat-mdc-tab-link{min-width:72px}}"] }]
|
|
1936
|
-
}], ctorParameters: () => [
|
|
1937
|
-
type: Optional
|
|
1938
|
-
}, {
|
|
1939
|
-
type: Inject,
|
|
1940
|
-
args: [MAT_RIPPLE_GLOBAL_OPTIONS]
|
|
1941
|
-
}] }, { type: undefined, decorators: [{
|
|
1942
|
-
type: Attribute,
|
|
1943
|
-
args: ['tabindex']
|
|
1944
|
-
}] }, { type: i4.FocusMonitor }, { type: undefined, decorators: [{
|
|
1945
|
-
type: Optional
|
|
1946
|
-
}, {
|
|
1947
|
-
type: Inject,
|
|
1948
|
-
args: [ANIMATION_MODULE_TYPE]
|
|
1949
|
-
}] }], propDecorators: { active: [{
|
|
1894
|
+
}], ctorParameters: () => [], propDecorators: { active: [{
|
|
1950
1895
|
type: Input,
|
|
1951
1896
|
args: [{ transform: booleanAttribute }]
|
|
1952
1897
|
}], disabled: [{
|