@angular/material 19.0.0-next.9 → 19.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete/_autocomplete-theme.scss +8 -4
- package/autocomplete/index.d.ts +5 -6
- package/badge/_badge-theme.scss +10 -6
- package/badge/index.d.ts +1 -2
- package/bottom-sheet/_bottom-sheet-theme.scss +8 -4
- package/button/_button-theme.scss +10 -6
- package/button/_fab-theme.scss +10 -6
- package/button/_icon-button-theme.scss +8 -4
- package/button/index.d.ts +1 -1
- package/button-toggle/_button-toggle-theme.scss +11 -6
- package/button-toggle/index.d.ts +2 -1
- package/card/_card-theme.scss +8 -4
- package/card/index.d.ts +2 -3
- package/checkbox/_checkbox-theme.scss +10 -6
- package/chips/_chips-theme.scss +10 -6
- package/core/_core-theme.scss +4 -7
- package/core/_core.scss +2 -5
- package/core/m2/_theming.scss +2 -1
- package/core/option/_optgroup-theme.scss +8 -4
- package/core/option/_option-theme.scss +10 -6
- package/core/ripple/_ripple-theme.scss +8 -4
- package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +10 -6
- package/core/theming/_config-validation.scss +4 -4
- package/core/theming/_definition.scss +12 -2
- package/core/theming/_theming.scss +2 -1
- package/core/tokens/_m3-system.scss +55 -39
- package/core/tokens/_m3-tokens.scss +3 -3
- package/core/tokens/_token-definition.scss +4 -3
- package/core/tokens/m2/mat/_badge.scss +1 -1
- package/core/tokens/m2/mat/_datepicker.scss +1 -1
- package/core/tokens/m2/mat/_menu.scss +5 -3
- package/core/tokens/m2/mat/_sort.scss +1 -1
- package/core/tokens/m3/mat/_menu.scss +6 -3
- package/core/tokens/m3/mdc/_filled-text-field.scss +9 -11
- package/datepicker/_datepicker-theme.scss +10 -6
- package/datepicker/index.d.ts +36 -37
- package/dialog/_dialog-theme.scss +8 -4
- package/dialog/index.d.ts +1 -0
- package/divider/_divider-theme.scss +8 -4
- package/expansion/_expansion-theme.scss +8 -4
- package/fesm2022/autocomplete/testing.mjs +2 -5
- package/fesm2022/autocomplete/testing.mjs.map +1 -1
- package/fesm2022/autocomplete.mjs +225 -151
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge/testing.mjs +2 -5
- package/fesm2022/badge/testing.mjs.map +1 -1
- package/fesm2022/badge.mjs +45 -36
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet/testing.mjs +1 -1
- package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +79 -57
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button/testing.mjs +2 -2
- package/fesm2022/button/testing.mjs.map +1 -1
- package/fesm2022/button-toggle/testing.mjs +4 -7
- package/fesm2022/button-toggle/testing.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +84 -47
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +98 -71
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card/testing.mjs +3 -6
- package/fesm2022/card/testing.mjs.map +1 -1
- package/fesm2022/card.mjs +53 -55
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox/testing.mjs +4 -7
- package/fesm2022/checkbox/testing.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +105 -63
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips/testing.mjs +11 -14
- package/fesm2022/chips/testing.mjs.map +1 -1
- package/fesm2022/chips.mjs +317 -268
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core/testing.mjs +5 -11
- package/fesm2022/core/testing.mjs.map +1 -1
- package/fesm2022/core.mjs +237 -187
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker/testing.mjs +13 -22
- package/fesm2022/datepicker/testing.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +821 -568
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog/testing.mjs +15 -9
- package/fesm2022/dialog/testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +221 -153
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider/testing.mjs +1 -1
- package/fesm2022/divider/testing.mjs.map +1 -1
- package/fesm2022/divider.mjs +9 -11
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion/testing.mjs +7 -10
- package/fesm2022/expansion/testing.mjs.map +1 -1
- package/fesm2022/expansion.mjs +85 -76
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field/testing.mjs +12 -15
- package/fesm2022/form-field/testing.mjs.map +1 -1
- package/fesm2022/form-field.mjs +179 -126
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list/testing.mjs +11 -17
- package/fesm2022/grid-list/testing.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +72 -50
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +8 -8
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +65 -45
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input/testing.mjs +3 -3
- package/fesm2022/input/testing.mjs.map +1 -1
- package/fesm2022/input.mjs +104 -72
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list/testing.mjs +21 -38
- package/fesm2022/list/testing.mjs.map +1 -1
- package/fesm2022/list.mjs +191 -180
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu/testing.mjs +3 -6
- package/fesm2022/menu/testing.mjs.map +1 -1
- package/fesm2022/menu.mjs +178 -168
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator/testing.mjs +10 -13
- package/fesm2022/paginator/testing.mjs.map +1 -1
- package/fesm2022/paginator.mjs +84 -59
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar/testing.mjs +1 -1
- package/fesm2022/progress-bar/testing.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +35 -34
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner/testing.mjs +1 -1
- package/fesm2022/progress-spinner/testing.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +27 -13
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio/testing.mjs +6 -12
- package/fesm2022/radio/testing.mjs.map +1 -1
- package/fesm2022/radio.mjs +123 -88
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select/testing.mjs +6 -9
- package/fesm2022/select/testing.mjs.map +1 -1
- package/fesm2022/select.mjs +220 -182
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav/testing.mjs +6 -6
- package/fesm2022/sidenav/testing.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +132 -119
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle/testing.mjs +3 -6
- package/fesm2022/slide-toggle/testing.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +78 -49
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider/testing.mjs +2 -2
- package/fesm2022/slider/testing.mjs.map +1 -1
- package/fesm2022/slider.mjs +260 -190
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar/testing.mjs +4 -7
- package/fesm2022/snack-bar/testing.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +141 -107
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort/testing.mjs +3 -6
- package/fesm2022/sort/testing.mjs.map +1 -1
- package/fesm2022/sort.mjs +93 -72
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper/testing.mjs +4 -4
- package/fesm2022/stepper/testing.mjs.map +1 -1
- package/fesm2022/stepper.mjs +143 -105
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table/testing.mjs +13 -25
- package/fesm2022/table/testing.mjs.map +1 -1
- package/fesm2022/table.mjs +182 -177
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs/testing.mjs +5 -5
- package/fesm2022/tabs/testing.mjs.map +1 -1
- package/fesm2022/tabs.mjs +326 -247
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/timepicker/testing.mjs +7 -16
- package/fesm2022/timepicker/testing.mjs.map +1 -1
- package/fesm2022/timepicker.mjs +157 -153
- package/fesm2022/timepicker.mjs.map +1 -1
- package/fesm2022/toolbar/testing.mjs +2 -5
- package/fesm2022/toolbar/testing.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +25 -15
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip/testing.mjs +6 -9
- package/fesm2022/tooltip/testing.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +96 -72
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree/testing.mjs +3 -6
- package/fesm2022/tree/testing.mjs.map +1 -1
- package/fesm2022/tree.mjs +56 -54
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +9 -5
- package/form-field/index.d.ts +9 -9
- package/grid-list/_grid-list-theme.scss +8 -4
- package/icon/_icon-theme.scss +10 -6
- package/input/_input-theme.scss +8 -4
- package/list/_list-theme.scss +8 -4
- package/list/index.d.ts +20 -21
- package/menu/_menu-theme.scss +8 -4
- package/menu/index.d.ts +15 -17
- package/package.json +2 -2
- package/paginator/_paginator-theme.scss +8 -4
- package/prebuilt-themes/azure-blue.css +1 -1
- package/prebuilt-themes/cyan-orange.css +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/magenta-violet.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/prebuilt-themes/rose-red.css +1 -1
- package/progress-bar/_progress-bar-theme.scss +11 -9
- package/progress-spinner/_progress-spinner-theme.scss +11 -9
- package/progress-spinner/index.d.ts +3 -4
- package/radio/_radio-theme.scss +10 -6
- package/radio/index.d.ts +2 -3
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-add/theming/create-custom-theme.js +1 -6
- package/schematics/ng-add/theming/create-custom-theme.mjs +1 -6
- package/schematics/ng-generate/theme-color/index_bundled.js +35 -9
- package/schematics/ng-generate/theme-color/index_bundled.js.map +2 -2
- package/schematics/ng-update/index_bundled.js +6 -1
- package/schematics/ng-update/index_bundled.js.map +1 -1
- package/select/_select-theme.scss +10 -6
- package/select/index.d.ts +7 -7
- package/sidenav/_sidenav-theme.scss +8 -4
- package/slide-toggle/_slide-toggle-theme.scss +10 -6
- package/slider/_slider-theme.scss +10 -6
- package/snack-bar/_snack-bar-theme.scss +10 -6
- package/sort/_sort-theme.scss +8 -4
- package/stepper/_stepper-theme.scss +10 -6
- package/stepper/index.d.ts +14 -15
- package/table/_table-theme.scss +8 -4
- package/tabs/_tabs-theme.scss +10 -6
- package/timepicker/_timepicker-theme.scss +10 -6
- package/toolbar/_toolbar-theme.scss +10 -6
- package/tooltip/_tooltip-theme.scss +8 -4
- package/tooltip/index.d.ts +5 -6
- package/tree/_tree-theme.scss +8 -4
package/fesm2022/tabs.mjs
CHANGED
|
@@ -4,13 +4,13 @@ import { _StructuralStylesLoader, MatRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommo
|
|
|
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
6
|
import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
|
|
7
|
-
import { FocusKeyManager, CdkMonitorFocus, FocusMonitor } from '@angular/cdk/a11y';
|
|
7
|
+
import { FocusKeyManager, _IdGenerator, CdkMonitorFocus, FocusMonitor } from '@angular/cdk/a11y';
|
|
8
8
|
import { Directionality } from '@angular/cdk/bidi';
|
|
9
9
|
import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
|
|
10
10
|
import { SharedResizeObserver } from '@angular/cdk/observers/private';
|
|
11
11
|
import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
|
|
12
12
|
import { ViewportRuler, CdkScrollable } from '@angular/cdk/scrolling';
|
|
13
|
-
import { takeUntil, debounceTime, startWith, switchMap, skip, filter
|
|
13
|
+
import { takeUntil, debounceTime, startWith, switchMap, skip, filter } from 'rxjs/operators';
|
|
14
14
|
import { CdkObserveContent } from '@angular/cdk/observers';
|
|
15
15
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
16
16
|
|
|
@@ -22,13 +22,12 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
|
|
|
22
22
|
const MAT_TAB_CONTENT = new InjectionToken('MatTabContent');
|
|
23
23
|
/** Decorates the `ng-template` tags and reads out the template from it. */
|
|
24
24
|
class MatTabContent {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
static
|
|
29
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatTabContent, isStandalone: true, selector: "[matTabContent]", providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }], ngImport: i0 }); }
|
|
25
|
+
template = inject(TemplateRef);
|
|
26
|
+
constructor() { }
|
|
27
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
28
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabContent, isStandalone: true, selector: "[matTabContent]", providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }], ngImport: i0 });
|
|
30
29
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabContent, decorators: [{
|
|
32
31
|
type: Directive,
|
|
33
32
|
args: [{
|
|
34
33
|
selector: '[matTabContent]',
|
|
@@ -49,14 +48,11 @@ const MAT_TAB_LABEL = new InjectionToken('MatTabLabel');
|
|
|
49
48
|
const MAT_TAB = new InjectionToken('MAT_TAB');
|
|
50
49
|
/** Used to flag tab labels for use with the portal directive */
|
|
51
50
|
class MatTabLabel extends CdkPortal {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
57
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatTabLabel, isStandalone: true, selector: "[mat-tab-label], [matTabLabel]", providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }], usesInheritance: true, ngImport: i0 }); }
|
|
51
|
+
_closestTab = inject(MAT_TAB, { optional: true });
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
53
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabLabel, isStandalone: true, selector: "[mat-tab-label], [matTabLabel]", providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }], usesInheritance: true, ngImport: i0 });
|
|
58
54
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLabel, decorators: [{
|
|
60
56
|
type: Directive,
|
|
61
57
|
args: [{
|
|
62
58
|
selector: '[mat-tab-label], [matTabLabel]',
|
|
@@ -70,6 +66,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
70
66
|
*/
|
|
71
67
|
const MAT_TAB_GROUP = new InjectionToken('MAT_TAB_GROUP');
|
|
72
68
|
class MatTab {
|
|
69
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
70
|
+
_closestTabGroup = inject(MAT_TAB_GROUP, { optional: true });
|
|
71
|
+
/** whether the tab is disabled. */
|
|
72
|
+
disabled = false;
|
|
73
73
|
/** Content for the tab label given by `<ng-template mat-tab-label>`. */
|
|
74
74
|
get templateLabel() {
|
|
75
75
|
return this._templateLabel;
|
|
@@ -77,39 +77,49 @@ class MatTab {
|
|
|
77
77
|
set templateLabel(value) {
|
|
78
78
|
this._setTemplateLabelInput(value);
|
|
79
79
|
}
|
|
80
|
+
_templateLabel;
|
|
81
|
+
/**
|
|
82
|
+
* Template provided in the tab content that will be used if present, used to enable lazy-loading
|
|
83
|
+
*/
|
|
84
|
+
_explicitContent = undefined;
|
|
85
|
+
/** Template inside the MatTab view that contains an `<ng-content>`. */
|
|
86
|
+
_implicitContent;
|
|
87
|
+
/** Plain text label for the tab, used when there is no template label. */
|
|
88
|
+
textLabel = '';
|
|
89
|
+
/** Aria label for the tab. */
|
|
90
|
+
ariaLabel;
|
|
91
|
+
/**
|
|
92
|
+
* Reference to the element that the tab is labelled by.
|
|
93
|
+
* Will be cleared if `aria-label` is set at the same time.
|
|
94
|
+
*/
|
|
95
|
+
ariaLabelledby;
|
|
96
|
+
/** Classes to be passed to the tab label inside the mat-tab-header container. */
|
|
97
|
+
labelClass;
|
|
98
|
+
/** Classes to be passed to the tab mat-tab-body container. */
|
|
99
|
+
bodyClass;
|
|
100
|
+
/** Portal that will be the hosted content of the tab */
|
|
101
|
+
_contentPortal = null;
|
|
80
102
|
/** @docs-private */
|
|
81
103
|
get content() {
|
|
82
104
|
return this._contentPortal;
|
|
83
105
|
}
|
|
106
|
+
/** Emits whenever the internal state of the tab changes. */
|
|
107
|
+
_stateChanges = new Subject();
|
|
108
|
+
/**
|
|
109
|
+
* The relatively indexed position where 0 represents the center, negative is left, and positive
|
|
110
|
+
* represents the right.
|
|
111
|
+
*/
|
|
112
|
+
position = null;
|
|
113
|
+
/**
|
|
114
|
+
* The initial relatively index origin of the tab if it was created and selected after there
|
|
115
|
+
* was already a selected tab. Provides context of what position the tab should originate from.
|
|
116
|
+
*/
|
|
117
|
+
origin = null;
|
|
118
|
+
/**
|
|
119
|
+
* Whether the tab is currently active.
|
|
120
|
+
*/
|
|
121
|
+
isActive = false;
|
|
84
122
|
constructor() {
|
|
85
|
-
this._viewContainerRef = inject(ViewContainerRef);
|
|
86
|
-
this._closestTabGroup = inject(MAT_TAB_GROUP, { optional: true });
|
|
87
|
-
/** whether the tab is disabled. */
|
|
88
|
-
this.disabled = false;
|
|
89
|
-
/**
|
|
90
|
-
* Template provided in the tab content that will be used if present, used to enable lazy-loading
|
|
91
|
-
*/
|
|
92
|
-
this._explicitContent = undefined;
|
|
93
|
-
/** Plain text label for the tab, used when there is no template label. */
|
|
94
|
-
this.textLabel = '';
|
|
95
|
-
/** Portal that will be the hosted content of the tab */
|
|
96
|
-
this._contentPortal = null;
|
|
97
|
-
/** Emits whenever the internal state of the tab changes. */
|
|
98
|
-
this._stateChanges = new Subject();
|
|
99
|
-
/**
|
|
100
|
-
* The relatively indexed position where 0 represents the center, negative is left, and positive
|
|
101
|
-
* represents the right.
|
|
102
|
-
*/
|
|
103
|
-
this.position = null;
|
|
104
|
-
/**
|
|
105
|
-
* The initial relatively index origin of the tab if it was created and selected after there
|
|
106
|
-
* was already a selected tab. Provides context of what position the tab should originate from.
|
|
107
|
-
*/
|
|
108
|
-
this.origin = null;
|
|
109
|
-
/**
|
|
110
|
-
* Whether the tab is currently active.
|
|
111
|
-
*/
|
|
112
|
-
this.isActive = false;
|
|
113
123
|
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
114
124
|
}
|
|
115
125
|
ngOnChanges(changes) {
|
|
@@ -138,10 +148,10 @@ class MatTab {
|
|
|
138
148
|
this._templateLabel = value;
|
|
139
149
|
}
|
|
140
150
|
}
|
|
141
|
-
static
|
|
142
|
-
static
|
|
151
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", 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 });
|
|
143
153
|
}
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTab, decorators: [{
|
|
145
155
|
type: Component,
|
|
146
156
|
args: [{ selector: 'mat-tab', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, exportAs: 'matTab', providers: [{ provide: MAT_TAB, useExisting: MatTab }], host: {
|
|
147
157
|
// This element will be rendered on the server in order to support hydration.
|
|
@@ -184,6 +194,9 @@ const NO_TRANSITION_CLASS = 'mdc-tab-indicator--no-transition';
|
|
|
184
194
|
* @docs-private
|
|
185
195
|
*/
|
|
186
196
|
class MatInkBar {
|
|
197
|
+
_items;
|
|
198
|
+
/** Item to which the ink bar is aligned currently. */
|
|
199
|
+
_currentItem;
|
|
187
200
|
constructor(_items) {
|
|
188
201
|
this._items = _items;
|
|
189
202
|
}
|
|
@@ -208,10 +221,10 @@ class MatInkBar {
|
|
|
208
221
|
}
|
|
209
222
|
}
|
|
210
223
|
class InkBarItem {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
224
|
+
_elementRef = inject(ElementRef);
|
|
225
|
+
_inkBarElement;
|
|
226
|
+
_inkBarContentElement;
|
|
227
|
+
_fitToContent = false;
|
|
215
228
|
/** Whether the ink bar should fit to the entire tab or just its content. */
|
|
216
229
|
get fitInkBarToContent() {
|
|
217
230
|
return this._fitToContent;
|
|
@@ -289,10 +302,10 @@ class InkBarItem {
|
|
|
289
302
|
}
|
|
290
303
|
parentElement.appendChild(this._inkBarElement);
|
|
291
304
|
}
|
|
292
|
-
static
|
|
293
|
-
static
|
|
305
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: InkBarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
306
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: InkBarItem, isStandalone: true, inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute] }, ngImport: i0 });
|
|
294
307
|
}
|
|
295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: InkBarItem, decorators: [{
|
|
296
309
|
type: Directive
|
|
297
310
|
}], propDecorators: { fitInkBarToContent: [{
|
|
298
311
|
type: Input,
|
|
@@ -320,12 +333,9 @@ const _MAT_INK_BAR_POSITIONER = new InjectionToken('MatInkBarPositioner', {
|
|
|
320
333
|
* @docs-private
|
|
321
334
|
*/
|
|
322
335
|
class MatTabLabelWrapper extends InkBarItem {
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
/** Whether the tab is disabled. */
|
|
327
|
-
this.disabled = false;
|
|
328
|
-
}
|
|
336
|
+
elementRef = inject(ElementRef);
|
|
337
|
+
/** Whether the tab is disabled. */
|
|
338
|
+
disabled = false;
|
|
329
339
|
/** Sets focus on the wrapper element */
|
|
330
340
|
focus() {
|
|
331
341
|
this.elementRef.nativeElement.focus();
|
|
@@ -336,10 +346,10 @@ class MatTabLabelWrapper extends InkBarItem {
|
|
|
336
346
|
getOffsetWidth() {
|
|
337
347
|
return this.elementRef.nativeElement.offsetWidth;
|
|
338
348
|
}
|
|
339
|
-
static
|
|
340
|
-
static
|
|
349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLabelWrapper, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
350
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-rc.0", 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 });
|
|
341
351
|
}
|
|
342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLabelWrapper, decorators: [{
|
|
343
353
|
type: Directive,
|
|
344
354
|
args: [{
|
|
345
355
|
selector: '[matTabLabelWrapper]',
|
|
@@ -372,6 +382,43 @@ const HEADER_SCROLL_INTERVAL = 100;
|
|
|
372
382
|
* @docs-private
|
|
373
383
|
*/
|
|
374
384
|
class MatPaginatedTabHeader {
|
|
385
|
+
_elementRef = inject(ElementRef);
|
|
386
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
387
|
+
_viewportRuler = inject(ViewportRuler);
|
|
388
|
+
_dir = inject(Directionality, { optional: true });
|
|
389
|
+
_ngZone = inject(NgZone);
|
|
390
|
+
_platform = inject(Platform);
|
|
391
|
+
_animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
392
|
+
/** The distance in pixels that the tab labels should be translated to the left. */
|
|
393
|
+
_scrollDistance = 0;
|
|
394
|
+
/** Whether the header should scroll to the selected index after the view has been checked. */
|
|
395
|
+
_selectedIndexChanged = false;
|
|
396
|
+
/** Emits when the component is destroyed. */
|
|
397
|
+
_destroyed = new Subject();
|
|
398
|
+
/** Whether the controls for pagination should be displayed */
|
|
399
|
+
_showPaginationControls = false;
|
|
400
|
+
/** Whether the tab list can be scrolled more towards the end of the tab label list. */
|
|
401
|
+
_disableScrollAfter = true;
|
|
402
|
+
/** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
|
|
403
|
+
_disableScrollBefore = true;
|
|
404
|
+
/**
|
|
405
|
+
* The number of tab labels that are displayed on the header. When this changes, the header
|
|
406
|
+
* should re-evaluate the scroll position.
|
|
407
|
+
*/
|
|
408
|
+
_tabLabelCount;
|
|
409
|
+
/** Whether the scroll distance has changed and should be applied after the view is checked. */
|
|
410
|
+
_scrollDistanceChanged;
|
|
411
|
+
/** Used to manage focus between the tabs. */
|
|
412
|
+
_keyManager;
|
|
413
|
+
/** Cached text content of the header. */
|
|
414
|
+
_currentTextContent;
|
|
415
|
+
/** Stream that will stop the automated scrolling. */
|
|
416
|
+
_stopScrolling = new Subject();
|
|
417
|
+
/**
|
|
418
|
+
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
419
|
+
* layout recalculations if it's known that pagination won't be required.
|
|
420
|
+
*/
|
|
421
|
+
disablePagination = false;
|
|
375
422
|
/** The index of the active tab. */
|
|
376
423
|
get selectedIndex() {
|
|
377
424
|
return this._selectedIndex;
|
|
@@ -386,40 +433,14 @@ class MatPaginatedTabHeader {
|
|
|
386
433
|
}
|
|
387
434
|
}
|
|
388
435
|
}
|
|
436
|
+
_selectedIndex = 0;
|
|
437
|
+
/** Event emitted when the option is selected. */
|
|
438
|
+
selectFocusedIndex = new EventEmitter();
|
|
439
|
+
/** Event emitted when a label is focused. */
|
|
440
|
+
indexFocused = new EventEmitter();
|
|
441
|
+
_sharedResizeObserver = inject(SharedResizeObserver);
|
|
442
|
+
_injector = inject(Injector);
|
|
389
443
|
constructor() {
|
|
390
|
-
this._elementRef = inject(ElementRef);
|
|
391
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
392
|
-
this._viewportRuler = inject(ViewportRuler);
|
|
393
|
-
this._dir = inject(Directionality, { optional: true });
|
|
394
|
-
this._ngZone = inject(NgZone);
|
|
395
|
-
this._platform = inject(Platform);
|
|
396
|
-
this._animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
397
|
-
/** The distance in pixels that the tab labels should be translated to the left. */
|
|
398
|
-
this._scrollDistance = 0;
|
|
399
|
-
/** Whether the header should scroll to the selected index after the view has been checked. */
|
|
400
|
-
this._selectedIndexChanged = false;
|
|
401
|
-
/** Emits when the component is destroyed. */
|
|
402
|
-
this._destroyed = new Subject();
|
|
403
|
-
/** Whether the controls for pagination should be displayed */
|
|
404
|
-
this._showPaginationControls = false;
|
|
405
|
-
/** Whether the tab list can be scrolled more towards the end of the tab label list. */
|
|
406
|
-
this._disableScrollAfter = true;
|
|
407
|
-
/** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
|
|
408
|
-
this._disableScrollBefore = true;
|
|
409
|
-
/** Stream that will stop the automated scrolling. */
|
|
410
|
-
this._stopScrolling = new Subject();
|
|
411
|
-
/**
|
|
412
|
-
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
413
|
-
* layout recalculations if it's known that pagination won't be required.
|
|
414
|
-
*/
|
|
415
|
-
this.disablePagination = false;
|
|
416
|
-
this._selectedIndex = 0;
|
|
417
|
-
/** Event emitted when the option is selected. */
|
|
418
|
-
this.selectFocusedIndex = new EventEmitter();
|
|
419
|
-
/** Event emitted when a label is focused. */
|
|
420
|
-
this.indexFocused = new EventEmitter();
|
|
421
|
-
this._sharedResizeObserver = inject(SharedResizeObserver);
|
|
422
|
-
this._injector = inject(Injector);
|
|
423
444
|
// Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
|
|
424
445
|
this._ngZone.runOutsideAngular(() => {
|
|
425
446
|
fromEvent(this._elementRef.nativeElement, 'mouseleave')
|
|
@@ -846,10 +867,10 @@ class MatPaginatedTabHeader {
|
|
|
846
867
|
this._checkScrollingControls();
|
|
847
868
|
return { maxScrollDistance, distance: this._scrollDistance };
|
|
848
869
|
}
|
|
849
|
-
static
|
|
850
|
-
static
|
|
870
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
871
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatPaginatedTabHeader, isStandalone: true, inputs: { disablePagination: ["disablePagination", "disablePagination", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 });
|
|
851
872
|
}
|
|
852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatPaginatedTabHeader, decorators: [{
|
|
853
874
|
type: Directive
|
|
854
875
|
}], ctorParameters: () => [], propDecorators: { disablePagination: [{
|
|
855
876
|
type: Input,
|
|
@@ -871,11 +892,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
871
892
|
* @docs-private
|
|
872
893
|
*/
|
|
873
894
|
class MatTabHeader extends MatPaginatedTabHeader {
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
895
|
+
_items;
|
|
896
|
+
_tabListContainer;
|
|
897
|
+
_tabList;
|
|
898
|
+
_tabListInner;
|
|
899
|
+
_nextPaginator;
|
|
900
|
+
_previousPaginator;
|
|
901
|
+
_inkBar;
|
|
902
|
+
/** Aria label of the header. */
|
|
903
|
+
ariaLabel;
|
|
904
|
+
/** Sets the `aria-labelledby` of the header. */
|
|
905
|
+
ariaLabelledby;
|
|
906
|
+
/** Whether the ripple effect is disabled or not. */
|
|
907
|
+
disableRipple = false;
|
|
879
908
|
ngAfterContentInit() {
|
|
880
909
|
this._inkBar = new MatInkBar(this._items);
|
|
881
910
|
super.ngAfterContentInit();
|
|
@@ -883,10 +912,10 @@ class MatTabHeader extends MatPaginatedTabHeader {
|
|
|
883
912
|
_itemSelected(event) {
|
|
884
913
|
event.preventDefault();
|
|
885
914
|
}
|
|
886
|
-
static
|
|
887
|
-
static
|
|
915
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
916
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", 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-sys-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-sys-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-sys-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-sys-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 });
|
|
888
917
|
}
|
|
889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabHeader, decorators: [{
|
|
890
919
|
type: Component,
|
|
891
920
|
args: [{ selector: 'mat-tab-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, host: {
|
|
892
921
|
'class': 'mat-mdc-tab-header',
|
|
@@ -967,13 +996,13 @@ const matTabsAnimations = {
|
|
|
967
996
|
* @docs-private
|
|
968
997
|
*/
|
|
969
998
|
class MatTabBodyPortal extends CdkPortalOutlet {
|
|
999
|
+
_host = inject(MatTabBody);
|
|
1000
|
+
/** Subscription to events for when the tab body begins centering. */
|
|
1001
|
+
_centeringSub = Subscription.EMPTY;
|
|
1002
|
+
/** Subscription to events for when the tab body finishes leaving from center position. */
|
|
1003
|
+
_leavingSub = Subscription.EMPTY;
|
|
970
1004
|
constructor() {
|
|
971
1005
|
super();
|
|
972
|
-
this._host = inject(MatTabBody);
|
|
973
|
-
/** Subscription to events for when the tab body begins centering. */
|
|
974
|
-
this._centeringSub = Subscription.EMPTY;
|
|
975
|
-
/** Subscription to events for when the tab body finishes leaving from center position. */
|
|
976
|
-
this._leavingSub = Subscription.EMPTY;
|
|
977
1006
|
}
|
|
978
1007
|
/** Set initial visibility or set up subscription for changing visibility. */
|
|
979
1008
|
ngOnInit() {
|
|
@@ -997,10 +1026,10 @@ class MatTabBodyPortal extends CdkPortalOutlet {
|
|
|
997
1026
|
this._centeringSub.unsubscribe();
|
|
998
1027
|
this._leavingSub.unsubscribe();
|
|
999
1028
|
}
|
|
1000
|
-
static
|
|
1001
|
-
static
|
|
1029
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabBodyPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1030
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabBodyPortal, isStandalone: true, selector: "[matTabBodyHost]", usesInheritance: true, ngImport: i0 });
|
|
1002
1031
|
}
|
|
1003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
1032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabBodyPortal, decorators: [{
|
|
1004
1033
|
type: Directive,
|
|
1005
1034
|
args: [{
|
|
1006
1035
|
selector: '[matTabBodyHost]',
|
|
@@ -1011,32 +1040,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
1011
1040
|
* @docs-private
|
|
1012
1041
|
*/
|
|
1013
1042
|
class MatTabBody {
|
|
1043
|
+
_elementRef = inject(ElementRef);
|
|
1044
|
+
_dir = inject(Directionality, { optional: true });
|
|
1045
|
+
/** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
|
|
1046
|
+
_positionIndex;
|
|
1047
|
+
/** Subscription to the directionality change observable. */
|
|
1048
|
+
_dirChangeSubscription = Subscription.EMPTY;
|
|
1049
|
+
/** Tab body position state. Used by the animation trigger for the current state. */
|
|
1050
|
+
_position;
|
|
1051
|
+
/** Emits when an animation on the tab is complete. */
|
|
1052
|
+
_translateTabComplete = new Subject();
|
|
1053
|
+
/** Event emitted when the tab begins to animate towards the center as the active tab. */
|
|
1054
|
+
_onCentering = new EventEmitter();
|
|
1055
|
+
/** Event emitted before the centering of the tab begins. */
|
|
1056
|
+
_beforeCentering = new EventEmitter();
|
|
1057
|
+
/** Event emitted before the centering of the tab begins. */
|
|
1058
|
+
_afterLeavingCenter = new EventEmitter();
|
|
1059
|
+
/** Event emitted when the tab completes its animation towards the center. */
|
|
1060
|
+
_onCentered = new EventEmitter(true);
|
|
1061
|
+
/** The portal host inside of this container into which the tab body content will be loaded. */
|
|
1062
|
+
_portalHost;
|
|
1063
|
+
/** The tab body content to display. */
|
|
1064
|
+
_content;
|
|
1065
|
+
/** Position that will be used when the tab is immediately becoming visible after creation. */
|
|
1066
|
+
origin;
|
|
1067
|
+
// Note that the default value will always be overwritten by `MatTabBody`, but we need one
|
|
1068
|
+
// anyway to prevent the animations module from throwing an error if the body is used on its own.
|
|
1069
|
+
/** Duration for the tab's animation. */
|
|
1070
|
+
animationDuration = '500ms';
|
|
1071
|
+
/** Whether the tab's content should be kept in the DOM while it's off-screen. */
|
|
1072
|
+
preserveContent = false;
|
|
1014
1073
|
/** The shifted index position of the tab body, where zero represents the active center tab. */
|
|
1015
1074
|
set position(position) {
|
|
1016
1075
|
this._positionIndex = position;
|
|
1017
1076
|
this._computePositionAnimationState();
|
|
1018
1077
|
}
|
|
1019
1078
|
constructor() {
|
|
1020
|
-
this._elementRef = inject(ElementRef);
|
|
1021
|
-
this._dir = inject(Directionality, { optional: true });
|
|
1022
|
-
/** Subscription to the directionality change observable. */
|
|
1023
|
-
this._dirChangeSubscription = Subscription.EMPTY;
|
|
1024
|
-
/** Emits when an animation on the tab is complete. */
|
|
1025
|
-
this._translateTabComplete = new Subject();
|
|
1026
|
-
/** Event emitted when the tab begins to animate towards the center as the active tab. */
|
|
1027
|
-
this._onCentering = new EventEmitter();
|
|
1028
|
-
/** Event emitted before the centering of the tab begins. */
|
|
1029
|
-
this._beforeCentering = new EventEmitter();
|
|
1030
|
-
/** Event emitted before the centering of the tab begins. */
|
|
1031
|
-
this._afterLeavingCenter = new EventEmitter();
|
|
1032
|
-
/** Event emitted when the tab completes its animation towards the center. */
|
|
1033
|
-
this._onCentered = new EventEmitter(true);
|
|
1034
|
-
// Note that the default value will always be overwritten by `MatTabBody`, but we need one
|
|
1035
|
-
// anyway to prevent the animations module from throwing an error if the body is used on its own.
|
|
1036
|
-
/** Duration for the tab's animation. */
|
|
1037
|
-
this.animationDuration = '500ms';
|
|
1038
|
-
/** Whether the tab's content should be kept in the DOM while it's off-screen. */
|
|
1039
|
-
this.preserveContent = false;
|
|
1040
1079
|
if (this._dir) {
|
|
1041
1080
|
const changeDetectorRef = inject(ChangeDetectorRef);
|
|
1042
1081
|
this._dirChangeSubscription = this._dir.change.subscribe((dir) => {
|
|
@@ -1044,13 +1083,7 @@ class MatTabBody {
|
|
|
1044
1083
|
changeDetectorRef.markForCheck();
|
|
1045
1084
|
});
|
|
1046
1085
|
}
|
|
1047
|
-
|
|
1048
|
-
// invoked twice in some browsers. See https://github.com/angular/angular/issues/24084.
|
|
1049
|
-
this._translateTabComplete
|
|
1050
|
-
.pipe(distinctUntilChanged((x, y) => {
|
|
1051
|
-
return x.fromState === y.fromState && x.toState === y.toState;
|
|
1052
|
-
}))
|
|
1053
|
-
.subscribe(event => {
|
|
1086
|
+
this._translateTabComplete.subscribe(event => {
|
|
1054
1087
|
// If the transition to the center is complete, emit an event.
|
|
1055
1088
|
if (this._isCenterPosition(event.toState) && this._isCenterPosition(this._position)) {
|
|
1056
1089
|
this._onCentered.emit();
|
|
@@ -1111,10 +1144,10 @@ class MatTabBody {
|
|
|
1111
1144
|
}
|
|
1112
1145
|
return 'right-origin-center';
|
|
1113
1146
|
}
|
|
1114
|
-
static
|
|
1115
|
-
static
|
|
1147
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.0", 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 });
|
|
1116
1149
|
}
|
|
1117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
1150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabBody, decorators: [{
|
|
1118
1151
|
type: Component,
|
|
1119
1152
|
args: [{ selector: 'mat-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [matTabsAnimations.translateTab], host: {
|
|
1120
1153
|
'class': 'mat-mdc-tab-body',
|
|
@@ -1143,8 +1176,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
1143
1176
|
type: Input
|
|
1144
1177
|
}] } });
|
|
1145
1178
|
|
|
1146
|
-
/** Used to generate unique ID's for each tab component */
|
|
1147
|
-
let nextId = 0;
|
|
1148
1179
|
/** Boolean constant that determines whether the tab group supports the `backgroundColor` input */
|
|
1149
1180
|
const ENABLE_BACKGROUND_INPUT = true;
|
|
1150
1181
|
/**
|
|
@@ -1153,6 +1184,36 @@ const ENABLE_BACKGROUND_INPUT = true;
|
|
|
1153
1184
|
* See: https://material.io/design/components/tabs.html
|
|
1154
1185
|
*/
|
|
1155
1186
|
class MatTabGroup {
|
|
1187
|
+
_elementRef = inject(ElementRef);
|
|
1188
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
1189
|
+
_animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1190
|
+
/**
|
|
1191
|
+
* All tabs inside the tab group. This includes tabs that belong to groups that are nested
|
|
1192
|
+
* inside the current one. We filter out only the tabs that belong to this group in `_tabs`.
|
|
1193
|
+
*/
|
|
1194
|
+
_allTabs;
|
|
1195
|
+
_tabBodyWrapper;
|
|
1196
|
+
_tabHeader;
|
|
1197
|
+
/** All of the tabs that belong to the group. */
|
|
1198
|
+
_tabs = new QueryList();
|
|
1199
|
+
/** The tab index that should be selected after the content has been checked. */
|
|
1200
|
+
_indexToSelect = 0;
|
|
1201
|
+
/** Index of the tab that was focused last. */
|
|
1202
|
+
_lastFocusedTabIndex = null;
|
|
1203
|
+
/** Snapshot of the height of the tab body wrapper before another tab is activated. */
|
|
1204
|
+
_tabBodyWrapperHeight = 0;
|
|
1205
|
+
/** Subscription to tabs being added/removed. */
|
|
1206
|
+
_tabsSubscription = Subscription.EMPTY;
|
|
1207
|
+
/** Subscription to changes in the tab labels. */
|
|
1208
|
+
_tabLabelSubscription = Subscription.EMPTY;
|
|
1209
|
+
/**
|
|
1210
|
+
* Theme color of the tab group. This API is supported in M2 themes only, it
|
|
1211
|
+
* has no effect in M3 themes.
|
|
1212
|
+
*
|
|
1213
|
+
* For information on applying color variants in M3, see
|
|
1214
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
1215
|
+
*/
|
|
1216
|
+
color;
|
|
1156
1217
|
/** Whether the ink bar should fit its width to the size of the tab label content. */
|
|
1157
1218
|
get fitInkBarToContent() {
|
|
1158
1219
|
return this._fitInkBarToContent;
|
|
@@ -1161,6 +1222,13 @@ class MatTabGroup {
|
|
|
1161
1222
|
this._fitInkBarToContent = value;
|
|
1162
1223
|
this._changeDetectorRef.markForCheck();
|
|
1163
1224
|
}
|
|
1225
|
+
_fitInkBarToContent = false;
|
|
1226
|
+
/** Whether tabs should be stretched to fill the header. */
|
|
1227
|
+
stretchTabs = true;
|
|
1228
|
+
/** Alignment for tabs label. */
|
|
1229
|
+
alignTabs = null;
|
|
1230
|
+
/** Whether the tab group should grow to the size of the active tab. */
|
|
1231
|
+
dynamicHeight = false;
|
|
1164
1232
|
/** The index of the active tab. */
|
|
1165
1233
|
get selectedIndex() {
|
|
1166
1234
|
return this._selectedIndex;
|
|
@@ -1168,6 +1236,9 @@ class MatTabGroup {
|
|
|
1168
1236
|
set selectedIndex(value) {
|
|
1169
1237
|
this._indexToSelect = isNaN(value) ? null : value;
|
|
1170
1238
|
}
|
|
1239
|
+
_selectedIndex = null;
|
|
1240
|
+
/** Position of the tab header. */
|
|
1241
|
+
headerPosition = 'above';
|
|
1171
1242
|
/** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
|
|
1172
1243
|
get animationDuration() {
|
|
1173
1244
|
return this._animationDuration;
|
|
@@ -1176,6 +1247,7 @@ class MatTabGroup {
|
|
|
1176
1247
|
const stringValue = value + '';
|
|
1177
1248
|
this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
|
|
1178
1249
|
}
|
|
1250
|
+
_animationDuration;
|
|
1179
1251
|
/**
|
|
1180
1252
|
* `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
|
|
1181
1253
|
* accessibility when the tab does not have focusable elements or if it has scrollable content.
|
|
@@ -1188,6 +1260,20 @@ class MatTabGroup {
|
|
|
1188
1260
|
set contentTabIndex(value) {
|
|
1189
1261
|
this._contentTabIndex = isNaN(value) ? null : value;
|
|
1190
1262
|
}
|
|
1263
|
+
_contentTabIndex;
|
|
1264
|
+
/**
|
|
1265
|
+
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
1266
|
+
* layout recalculations if it's known that pagination won't be required.
|
|
1267
|
+
*/
|
|
1268
|
+
disablePagination = false;
|
|
1269
|
+
/** Whether ripples in the tab group are disabled. */
|
|
1270
|
+
disableRipple = false;
|
|
1271
|
+
/**
|
|
1272
|
+
* By default tabs remove their content from the DOM while it's off-screen.
|
|
1273
|
+
* Setting this to `true` will keep it in the DOM which will prevent elements
|
|
1274
|
+
* like iframes and videos from reloading next time it comes back into the view.
|
|
1275
|
+
*/
|
|
1276
|
+
preserveContent = false;
|
|
1191
1277
|
/**
|
|
1192
1278
|
* Theme color of the background of the tab group. This API is supported in M2 themes only, it
|
|
1193
1279
|
* has no effect in M3 themes.
|
|
@@ -1212,57 +1298,25 @@ class MatTabGroup {
|
|
|
1212
1298
|
}
|
|
1213
1299
|
this._backgroundColor = value;
|
|
1214
1300
|
}
|
|
1301
|
+
_backgroundColor;
|
|
1302
|
+
/** Aria label of the inner `tablist` of the group. */
|
|
1303
|
+
ariaLabel;
|
|
1304
|
+
/** Sets the `aria-labelledby` of the inner `tablist` of the group. */
|
|
1305
|
+
ariaLabelledby;
|
|
1306
|
+
/** Output to enable support for two-way binding on `[(selectedIndex)]` */
|
|
1307
|
+
selectedIndexChange = new EventEmitter();
|
|
1308
|
+
/** Event emitted when focus has changed within a tab group. */
|
|
1309
|
+
focusChange = new EventEmitter();
|
|
1310
|
+
/** Event emitted when the body animation has completed */
|
|
1311
|
+
animationDone = new EventEmitter();
|
|
1312
|
+
/** Event emitted when the tab selection has changed. */
|
|
1313
|
+
selectedTabChange = new EventEmitter(true);
|
|
1314
|
+
_groupId;
|
|
1315
|
+
/** Whether the tab group is rendered on the server. */
|
|
1316
|
+
_isServer = !inject(Platform).isBrowser;
|
|
1215
1317
|
constructor() {
|
|
1216
|
-
this._elementRef = inject(ElementRef);
|
|
1217
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
1218
|
-
this._animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1219
|
-
/** All of the tabs that belong to the group. */
|
|
1220
|
-
this._tabs = new QueryList();
|
|
1221
|
-
/** The tab index that should be selected after the content has been checked. */
|
|
1222
|
-
this._indexToSelect = 0;
|
|
1223
|
-
/** Index of the tab that was focused last. */
|
|
1224
|
-
this._lastFocusedTabIndex = null;
|
|
1225
|
-
/** Snapshot of the height of the tab body wrapper before another tab is activated. */
|
|
1226
|
-
this._tabBodyWrapperHeight = 0;
|
|
1227
|
-
/** Subscription to tabs being added/removed. */
|
|
1228
|
-
this._tabsSubscription = Subscription.EMPTY;
|
|
1229
|
-
/** Subscription to changes in the tab labels. */
|
|
1230
|
-
this._tabLabelSubscription = Subscription.EMPTY;
|
|
1231
|
-
this._fitInkBarToContent = false;
|
|
1232
|
-
/** Whether tabs should be stretched to fill the header. */
|
|
1233
|
-
this.stretchTabs = true;
|
|
1234
|
-
/** Alignment for tabs label. */
|
|
1235
|
-
this.alignTabs = null;
|
|
1236
|
-
/** Whether the tab group should grow to the size of the active tab. */
|
|
1237
|
-
this.dynamicHeight = false;
|
|
1238
|
-
this._selectedIndex = null;
|
|
1239
|
-
/** Position of the tab header. */
|
|
1240
|
-
this.headerPosition = 'above';
|
|
1241
|
-
/**
|
|
1242
|
-
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
1243
|
-
* layout recalculations if it's known that pagination won't be required.
|
|
1244
|
-
*/
|
|
1245
|
-
this.disablePagination = false;
|
|
1246
|
-
/** Whether ripples in the tab group are disabled. */
|
|
1247
|
-
this.disableRipple = false;
|
|
1248
|
-
/**
|
|
1249
|
-
* By default tabs remove their content from the DOM while it's off-screen.
|
|
1250
|
-
* Setting this to `true` will keep it in the DOM which will prevent elements
|
|
1251
|
-
* like iframes and videos from reloading next time it comes back into the view.
|
|
1252
|
-
*/
|
|
1253
|
-
this.preserveContent = false;
|
|
1254
|
-
/** Output to enable support for two-way binding on `[(selectedIndex)]` */
|
|
1255
|
-
this.selectedIndexChange = new EventEmitter();
|
|
1256
|
-
/** Event emitted when focus has changed within a tab group. */
|
|
1257
|
-
this.focusChange = new EventEmitter();
|
|
1258
|
-
/** Event emitted when the body animation has completed */
|
|
1259
|
-
this.animationDone = new EventEmitter();
|
|
1260
|
-
/** Event emitted when the tab selection has changed. */
|
|
1261
|
-
this.selectedTabChange = new EventEmitter(true);
|
|
1262
|
-
/** Whether the tab group is rendered on the server. */
|
|
1263
|
-
this._isServer = !inject(Platform).isBrowser;
|
|
1264
1318
|
const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true });
|
|
1265
|
-
this._groupId =
|
|
1319
|
+
this._groupId = inject(_IdGenerator).getId('mat-tab-group-');
|
|
1266
1320
|
this.animationDuration =
|
|
1267
1321
|
defaultConfig && defaultConfig.animationDuration ? defaultConfig.animationDuration : '500ms';
|
|
1268
1322
|
this.disablePagination =
|
|
@@ -1446,11 +1500,11 @@ class MatTabGroup {
|
|
|
1446
1500
|
}
|
|
1447
1501
|
/** Returns a unique id for each tab label element */
|
|
1448
1502
|
_getTabLabelId(i) {
|
|
1449
|
-
return
|
|
1503
|
+
return `${this._groupId}-label-${i}`;
|
|
1450
1504
|
}
|
|
1451
1505
|
/** Returns a unique id for each tab content element */
|
|
1452
1506
|
_getTabContentId(i) {
|
|
1453
|
-
return
|
|
1507
|
+
return `${this._groupId}-content-${i}`;
|
|
1454
1508
|
}
|
|
1455
1509
|
/**
|
|
1456
1510
|
* Sets the height of the body wrapper to the height of the activating tab if dynamic
|
|
@@ -1497,15 +1551,15 @@ class MatTabGroup {
|
|
|
1497
1551
|
this._tabHeader.focusIndex = index;
|
|
1498
1552
|
}
|
|
1499
1553
|
}
|
|
1500
|
-
static
|
|
1501
|
-
static
|
|
1554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1555
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.0", type: MatTabGroup, isStandalone: true, selector: "mat-tab-group", inputs: { color: "color", fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], alignTabs: ["mat-align-tabs", "alignTabs"], 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", "attr.mat-align-tabs": "alignTabs", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-group" }, providers: [
|
|
1502
1556
|
{
|
|
1503
1557
|
provide: MAT_TAB_GROUP,
|
|
1504
1558
|
useExisting: MatTabGroup,
|
|
1505
1559
|
},
|
|
1506
|
-
], queries: [{ propertyName: "_allTabs", predicate: MatTab, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["matTabGroup"], ngImport: i0, 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-sys-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-sys-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-sys-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-sys-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-sys-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-sys-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-sys-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-sys-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-sys-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-sys-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-sys-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-sys-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-sys-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}"], dependencies: [{ kind: "component", type: MatTabHeader, selector: "mat-tab-header", inputs: ["aria-label", "aria-labelledby", "disableRipple"] }, { kind: "directive", type: MatTabLabelWrapper, selector: "[matTabLabelWrapper]", inputs: ["disabled"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatTabBody, selector: "mat-tab-body", inputs: ["content", "origin", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_afterLeavingCenter", "_onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1560
|
+
], queries: [{ propertyName: "_allTabs", predicate: MatTab, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["matTabGroup"], ngImport: i0, 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-sys-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-sys-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-sys-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-sys-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-sys-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-sys-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-sys-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-sys-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-sys-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-sys-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-sys-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-sys-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-sys-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}"], dependencies: [{ kind: "component", type: MatTabHeader, selector: "mat-tab-header", inputs: ["aria-label", "aria-labelledby", "disableRipple"] }, { kind: "directive", type: MatTabLabelWrapper, selector: "[matTabLabelWrapper]", inputs: ["disabled"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatTabBody, selector: "mat-tab-body", inputs: ["content", "origin", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_afterLeavingCenter", "_onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
1507
1561
|
}
|
|
1508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
1562
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabGroup, decorators: [{
|
|
1509
1563
|
type: Component,
|
|
1510
1564
|
args: [{ selector: 'mat-tab-group', exportAs: 'matTabGroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
1511
1565
|
{
|
|
@@ -1589,10 +1643,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
1589
1643
|
}] } });
|
|
1590
1644
|
/** A simple change event emitted on focus or selection changes. */
|
|
1591
1645
|
class MatTabChangeEvent {
|
|
1646
|
+
/** Index of the currently-selected tab. */
|
|
1647
|
+
index;
|
|
1648
|
+
/** Reference to the currently-selected tab. */
|
|
1649
|
+
tab;
|
|
1592
1650
|
}
|
|
1593
1651
|
|
|
1594
|
-
// Increasing integer for generating unique ids for tab nav components.
|
|
1595
|
-
let nextUniqueId = 0;
|
|
1596
1652
|
/**
|
|
1597
1653
|
* Navigation component matching the styles of the tab group header.
|
|
1598
1654
|
* Provides anchored navigation with animated ink bar.
|
|
@@ -1606,6 +1662,9 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1606
1662
|
this._fitInkBarToContent.next(value);
|
|
1607
1663
|
this._changeDetectorRef.markForCheck();
|
|
1608
1664
|
}
|
|
1665
|
+
_fitInkBarToContent = new BehaviorSubject(false);
|
|
1666
|
+
/** Whether tabs should be stretched to fill the header. */
|
|
1667
|
+
stretchTabs = true;
|
|
1609
1668
|
get animationDuration() {
|
|
1610
1669
|
return this._animationDuration;
|
|
1611
1670
|
}
|
|
@@ -1613,6 +1672,9 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1613
1672
|
const stringValue = value + '';
|
|
1614
1673
|
this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
|
|
1615
1674
|
}
|
|
1675
|
+
_animationDuration;
|
|
1676
|
+
/** Query list of all tab links of the tab navigation. */
|
|
1677
|
+
_items;
|
|
1616
1678
|
/**
|
|
1617
1679
|
* Theme color of the background of the tab nav. This API is supported in M2 themes only, it
|
|
1618
1680
|
* has no effect in M3 themes.
|
|
@@ -1631,6 +1693,29 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1631
1693
|
}
|
|
1632
1694
|
this._backgroundColor = value;
|
|
1633
1695
|
}
|
|
1696
|
+
_backgroundColor;
|
|
1697
|
+
/** Whether the ripple effect is disabled or not. */
|
|
1698
|
+
disableRipple = false;
|
|
1699
|
+
/**
|
|
1700
|
+
* Theme color of the nav bar. This API is supported in M2 themes only, it has
|
|
1701
|
+
* no effect in M3 themes.
|
|
1702
|
+
*
|
|
1703
|
+
* For information on applying color variants in M3, see
|
|
1704
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
1705
|
+
*/
|
|
1706
|
+
color = 'primary';
|
|
1707
|
+
/**
|
|
1708
|
+
* Associated tab panel controlled by the nav bar. If not provided, then the nav bar
|
|
1709
|
+
* follows the ARIA link / navigation landmark pattern. If provided, it follows the
|
|
1710
|
+
* ARIA tabs design pattern.
|
|
1711
|
+
*/
|
|
1712
|
+
tabPanel;
|
|
1713
|
+
_tabListContainer;
|
|
1714
|
+
_tabList;
|
|
1715
|
+
_tabListInner;
|
|
1716
|
+
_nextPaginator;
|
|
1717
|
+
_previousPaginator;
|
|
1718
|
+
_inkBar;
|
|
1634
1719
|
constructor() {
|
|
1635
1720
|
const elementRef = inject(ElementRef);
|
|
1636
1721
|
const dir = inject(Directionality, { optional: true });
|
|
@@ -1641,19 +1726,6 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1641
1726
|
const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1642
1727
|
const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true });
|
|
1643
1728
|
super(elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode);
|
|
1644
|
-
this._fitInkBarToContent = new BehaviorSubject(false);
|
|
1645
|
-
/** Whether tabs should be stretched to fill the header. */
|
|
1646
|
-
this.stretchTabs = true;
|
|
1647
|
-
/** Whether the ripple effect is disabled or not. */
|
|
1648
|
-
this.disableRipple = false;
|
|
1649
|
-
/**
|
|
1650
|
-
* Theme color of the nav bar. This API is supported in M2 themes only, it has
|
|
1651
|
-
* no effect in M3 themes.
|
|
1652
|
-
*
|
|
1653
|
-
* For information on applying color variants in M3, see
|
|
1654
|
-
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
1655
|
-
*/
|
|
1656
|
-
this.color = 'primary';
|
|
1657
1729
|
this.disablePagination =
|
|
1658
1730
|
defaultConfig && defaultConfig.disablePagination != null
|
|
1659
1731
|
? defaultConfig.disablePagination
|
|
@@ -1706,10 +1778,10 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1706
1778
|
_getRole() {
|
|
1707
1779
|
return this.tabPanel ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
|
|
1708
1780
|
}
|
|
1709
|
-
static
|
|
1710
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", 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-sys-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-sys-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-sys-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 }); }
|
|
1781
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", 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-sys-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-sys-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-sys-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 });
|
|
1711
1783
|
}
|
|
1712
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabNav, decorators: [{
|
|
1713
1785
|
type: Component,
|
|
1714
1786
|
args: [{ selector: '[mat-tab-nav-bar]', exportAs: 'matTabNavBar, matTabNav', host: {
|
|
1715
1787
|
'[attr.role]': '_getRole()',
|
|
@@ -1763,6 +1835,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
1763
1835
|
* Link inside a `mat-tab-nav-bar`.
|
|
1764
1836
|
*/
|
|
1765
1837
|
class MatTabLink extends InkBarItem {
|
|
1838
|
+
_tabNavBar = inject(MatTabNav);
|
|
1839
|
+
elementRef = inject(ElementRef);
|
|
1840
|
+
_focusMonitor = inject(FocusMonitor);
|
|
1841
|
+
_destroyed = new Subject();
|
|
1842
|
+
/** Whether the tab link is active or not. */
|
|
1843
|
+
_isActive = false;
|
|
1766
1844
|
/** Whether the link is active. */
|
|
1767
1845
|
get active() {
|
|
1768
1846
|
return this._isActive;
|
|
@@ -1773,6 +1851,18 @@ class MatTabLink extends InkBarItem {
|
|
|
1773
1851
|
this._tabNavBar.updateActiveLink();
|
|
1774
1852
|
}
|
|
1775
1853
|
}
|
|
1854
|
+
/** Whether the tab link is disabled. */
|
|
1855
|
+
disabled = false;
|
|
1856
|
+
/** Whether ripples are disabled on the tab link. */
|
|
1857
|
+
disableRipple = false;
|
|
1858
|
+
tabIndex = 0;
|
|
1859
|
+
/**
|
|
1860
|
+
* Ripple configuration for ripples that are launched on pointer down. The ripple config
|
|
1861
|
+
* is set to the global ripple options since we don't have any configurable options for
|
|
1862
|
+
* the tab link ripples.
|
|
1863
|
+
* @docs-private
|
|
1864
|
+
*/
|
|
1865
|
+
rippleConfig;
|
|
1776
1866
|
/**
|
|
1777
1867
|
* Whether ripples are disabled on interaction.
|
|
1778
1868
|
* @docs-private
|
|
@@ -1783,21 +1873,10 @@ class MatTabLink extends InkBarItem {
|
|
|
1783
1873
|
this._tabNavBar.disableRipple ||
|
|
1784
1874
|
!!this.rippleConfig.disabled);
|
|
1785
1875
|
}
|
|
1876
|
+
/** Unique id for the tab. */
|
|
1877
|
+
id = inject(_IdGenerator).getId('mat-tab-link-');
|
|
1786
1878
|
constructor() {
|
|
1787
1879
|
super();
|
|
1788
|
-
this._tabNavBar = inject(MatTabNav);
|
|
1789
|
-
this.elementRef = inject(ElementRef);
|
|
1790
|
-
this._focusMonitor = inject(FocusMonitor);
|
|
1791
|
-
this._destroyed = new Subject();
|
|
1792
|
-
/** Whether the tab link is active or not. */
|
|
1793
|
-
this._isActive = false;
|
|
1794
|
-
/** Whether the tab link is disabled. */
|
|
1795
|
-
this.disabled = false;
|
|
1796
|
-
/** Whether ripples are disabled on the tab link. */
|
|
1797
|
-
this.disableRipple = false;
|
|
1798
|
-
this.tabIndex = 0;
|
|
1799
|
-
/** Unique id for the tab. */
|
|
1800
|
-
this.id = `mat-tab-link-${nextUniqueId++}`;
|
|
1801
1880
|
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
1802
1881
|
const globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {
|
|
1803
1882
|
optional: true,
|
|
@@ -1875,10 +1954,10 @@ class MatTabLink extends InkBarItem {
|
|
|
1875
1954
|
return this.disabled ? -1 : this.tabIndex;
|
|
1876
1955
|
}
|
|
1877
1956
|
}
|
|
1878
|
-
static
|
|
1879
|
-
static
|
|
1957
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1958
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", 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-sys-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-sys-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-sys-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-sys-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-sys-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-sys-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-sys-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-sys-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-sys-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-sys-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-sys-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-sys-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-sys-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 });
|
|
1880
1959
|
}
|
|
1881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
1960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLink, decorators: [{
|
|
1882
1961
|
type: Component,
|
|
1883
1962
|
args: [{ selector: '[mat-tab-link], [matTabLink]', exportAs: 'matTabLink', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1884
1963
|
'class': 'mdc-tab mat-mdc-tab-link mat-focus-indicator',
|
|
@@ -1915,14 +1994,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
1915
1994
|
* Tab panel component associated with MatTabNav.
|
|
1916
1995
|
*/
|
|
1917
1996
|
class MatTabNavPanel {
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
static
|
|
1923
|
-
static
|
|
1997
|
+
/** Unique id for the tab panel. */
|
|
1998
|
+
id = inject(_IdGenerator).getId('mat-tab-nav-panel-');
|
|
1999
|
+
/** Id of the active tab in the nav bar. */
|
|
2000
|
+
_activeTabId;
|
|
2001
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2002
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabNavPanel, isStandalone: true, selector: "mat-tab-nav-panel", inputs: { id: "id" }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.aria-labelledby": "_activeTabId", "attr.id": "id" }, classAttribute: "mat-mdc-tab-nav-panel" }, exportAs: ["matTabNavPanel"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1924
2003
|
}
|
|
1925
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
2004
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabNavPanel, decorators: [{
|
|
1926
2005
|
type: Component,
|
|
1927
2006
|
args: [{
|
|
1928
2007
|
selector: 'mat-tab-nav-panel',
|
|
@@ -1942,8 +2021,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
|
|
|
1942
2021
|
}] } });
|
|
1943
2022
|
|
|
1944
2023
|
class MatTabsModule {
|
|
1945
|
-
static
|
|
1946
|
-
static
|
|
2024
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2025
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabsModule, imports: [MatCommonModule,
|
|
1947
2026
|
MatTabContent,
|
|
1948
2027
|
MatTabLabel,
|
|
1949
2028
|
MatTab,
|
|
@@ -1957,10 +2036,10 @@ class MatTabsModule {
|
|
|
1957
2036
|
MatTabGroup,
|
|
1958
2037
|
MatTabNav,
|
|
1959
2038
|
MatTabNavPanel,
|
|
1960
|
-
MatTabLink] });
|
|
1961
|
-
static
|
|
2039
|
+
MatTabLink] });
|
|
2040
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabsModule, imports: [MatCommonModule, MatCommonModule] });
|
|
1962
2041
|
}
|
|
1963
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-
|
|
2042
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabsModule, decorators: [{
|
|
1964
2043
|
type: NgModule,
|
|
1965
2044
|
args: [{
|
|
1966
2045
|
imports: [
|