@angular/material 19.0.0-next.8 → 19.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_index.scss +1 -2
- package/autocomplete/_autocomplete-theme.scss +37 -24
- package/autocomplete/index.d.ts +5 -6
- package/badge/_badge-theme.scss +38 -24
- package/bottom-sheet/_bottom-sheet-theme.scss +32 -20
- package/button/_button-theme.scss +229 -105
- package/button/_fab-theme.scss +95 -44
- package/button/_icon-button-theme.scss +38 -25
- package/button/index.d.ts +3 -3
- package/button-toggle/_button-toggle-theme.scss +62 -37
- package/card/_card-theme.scss +79 -38
- package/card/index.d.ts +2 -3
- package/checkbox/_checkbox-theme.scss +16 -10
- package/chips/_chips-theme.scss +64 -30
- package/core/_core-theme.scss +55 -37
- package/core/_core.scss +3 -6
- package/core/option/_optgroup-theme.scss +29 -18
- package/core/option/_option-theme.scss +34 -21
- package/core/ripple/_ripple-theme.scss +33 -21
- package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +49 -23
- package/core/theming/_config-validation.scss +4 -4
- package/core/theming/_definition.scss +12 -2
- package/core/tokens/_m3-system.scss +86 -42
- package/core/tokens/_token-utils.scss +91 -34
- package/core/tokens/m2/mat/_badge.scss +12 -3
- package/core/tokens/m2/mdc/_radio.scss +1 -1
- package/core/tokens/m3/definitions/_md-comp-elevated-card.scss +1 -1
- package/core/tokens/m3/mat/_badge.scss +6 -3
- package/datepicker/_datepicker-theme.scss +53 -32
- package/datepicker/index.d.ts +33 -34
- package/dialog/_dialog-theme.scss +46 -23
- package/divider/_divider-theme.scss +28 -17
- package/expansion/_expansion-theme.scss +36 -24
- package/fesm2022/autocomplete/testing.mjs +2 -5
- package/fesm2022/autocomplete/testing.mjs.map +1 -1
- package/fesm2022/autocomplete.mjs +225 -148
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge/testing.mjs +2 -5
- package/fesm2022/badge/testing.mjs.map +1 -1
- package/fesm2022/badge.mjs +45 -35
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet/testing.mjs +1 -1
- package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +80 -58
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button/testing.mjs +2 -2
- package/fesm2022/button/testing.mjs.map +1 -1
- package/fesm2022/button-toggle/testing.mjs +4 -7
- package/fesm2022/button-toggle/testing.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +82 -45
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +106 -79
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card/testing.mjs +3 -6
- package/fesm2022/card/testing.mjs.map +1 -1
- package/fesm2022/card.mjs +56 -69
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox/testing.mjs +4 -7
- package/fesm2022/checkbox/testing.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +104 -62
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips/testing.mjs +11 -14
- package/fesm2022/chips/testing.mjs.map +1 -1
- package/fesm2022/chips.mjs +322 -276
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core/testing.mjs +5 -11
- package/fesm2022/core/testing.mjs.map +1 -1
- package/fesm2022/core.mjs +242 -187
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker/testing.mjs +13 -22
- package/fesm2022/datepicker/testing.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +827 -582
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog/testing.mjs +15 -10
- package/fesm2022/dialog/testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +221 -156
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider/testing.mjs +1 -1
- package/fesm2022/divider/testing.mjs.map +1 -1
- package/fesm2022/divider.mjs +10 -12
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion/testing.mjs +7 -10
- package/fesm2022/expansion/testing.mjs.map +1 -1
- package/fesm2022/expansion.mjs +86 -80
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field/testing.mjs +12 -15
- package/fesm2022/form-field/testing.mjs.map +1 -1
- package/fesm2022/form-field.mjs +179 -132
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list/testing.mjs +11 -17
- package/fesm2022/grid-list/testing.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +75 -56
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +8 -8
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +66 -46
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input/testing.mjs +3 -3
- package/fesm2022/input/testing.mjs.map +1 -1
- package/fesm2022/input.mjs +103 -72
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list/testing.mjs +21 -38
- package/fesm2022/list/testing.mjs.map +1 -1
- package/fesm2022/list.mjs +197 -195
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu/testing.mjs +3 -6
- package/fesm2022/menu/testing.mjs.map +1 -1
- package/fesm2022/menu.mjs +178 -127
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator/testing.mjs +10 -13
- package/fesm2022/paginator/testing.mjs.map +1 -1
- package/fesm2022/paginator.mjs +83 -58
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar/testing.mjs +1 -1
- package/fesm2022/progress-bar/testing.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +36 -35
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner/testing.mjs +1 -1
- package/fesm2022/progress-spinner/testing.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +28 -14
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio/testing.mjs +6 -12
- package/fesm2022/radio/testing.mjs.map +1 -1
- package/fesm2022/radio.mjs +123 -87
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select/testing.mjs +6 -9
- package/fesm2022/select/testing.mjs.map +1 -1
- package/fesm2022/select.mjs +219 -182
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav/testing.mjs +6 -6
- package/fesm2022/sidenav/testing.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +136 -125
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle/testing.mjs +3 -6
- package/fesm2022/slide-toggle/testing.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +77 -47
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider/testing.mjs +2 -2
- package/fesm2022/slider/testing.mjs.map +1 -1
- package/fesm2022/slider.mjs +262 -194
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar/testing.mjs +4 -7
- package/fesm2022/snack-bar/testing.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +143 -111
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort/testing.mjs +3 -6
- package/fesm2022/sort/testing.mjs.map +1 -1
- package/fesm2022/sort.mjs +94 -74
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper/testing.mjs +4 -4
- package/fesm2022/stepper/testing.mjs.map +1 -1
- package/fesm2022/stepper.mjs +146 -113
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table/testing.mjs +13 -25
- package/fesm2022/table/testing.mjs.map +1 -1
- package/fesm2022/table.mjs +183 -194
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs/testing.mjs +5 -5
- package/fesm2022/tabs/testing.mjs.map +1 -1
- package/fesm2022/tabs.mjs +329 -251
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/timepicker/testing.mjs +7 -16
- package/fesm2022/timepicker/testing.mjs.map +1 -1
- package/fesm2022/timepicker.mjs +160 -155
- package/fesm2022/timepicker.mjs.map +1 -1
- package/fesm2022/toolbar/testing.mjs +2 -5
- package/fesm2022/toolbar/testing.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +26 -17
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip/testing.mjs +6 -9
- package/fesm2022/tooltip/testing.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +97 -74
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree/testing.mjs +3 -6
- package/fesm2022/tree/testing.mjs.map +1 -1
- package/fesm2022/tree.mjs +57 -61
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +114 -61
- package/form-field/index.d.ts +9 -10
- package/grid-list/_grid-list-theme.scss +25 -15
- package/icon/_icon-theme.scss +22 -14
- package/input/_input-theme.scss +18 -11
- package/list/_list-theme.scss +89 -47
- package/list/index.d.ts +20 -21
- package/menu/_menu-theme.scss +33 -21
- package/menu/index.d.ts +8 -9
- package/package.json +2 -2
- package/paginator/_paginator-theme.scss +39 -23
- package/prebuilt-themes/azure-blue.css +1 -1
- package/prebuilt-themes/cyan-orange.css +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/magenta-violet.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/prebuilt-themes/rose-red.css +1 -1
- package/progress-bar/_progress-bar-theme.scss +20 -16
- package/progress-spinner/_progress-spinner-theme.scss +41 -25
- package/progress-spinner/index.d.ts +3 -4
- package/radio/_radio-theme.scss +60 -32
- package/radio/index.d.ts +2 -3
- package/schematics/collection.json +3 -3
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-add/theming/create-custom-theme.js +1 -6
- package/schematics/ng-add/theming/create-custom-theme.mjs +1 -6
- package/schematics/ng-generate/{m3-theme → theme-color}/index_bundled.js +480 -288
- package/schematics/ng-generate/theme-color/index_bundled.js.map +7 -0
- package/schematics/ng-generate/{m3-theme → theme-color}/schema.json +7 -13
- package/schematics/ng-update/index_bundled.js +6 -1
- package/schematics/ng-update/index_bundled.js.map +1 -1
- package/select/_select-theme.scss +38 -25
- package/select/index.d.ts +6 -7
- package/sidenav/_sidenav-theme.scss +28 -17
- package/slide-toggle/_slide-toggle-theme.scss +52 -28
- package/slider/_slider-theme.scss +62 -38
- package/snack-bar/_snack-bar-theme.scss +29 -17
- package/sort/_sort-theme.scss +33 -21
- package/stepper/_stepper-theme.scss +40 -27
- package/stepper/index.d.ts +14 -15
- package/table/_table-theme.scss +36 -23
- package/tabs/_tabs-theme.scss +97 -50
- package/tabs/index.d.ts +2 -2
- package/timepicker/_timepicker-theme.scss +37 -24
- package/toolbar/_toolbar-theme.scss +35 -22
- package/tooltip/_tooltip-theme.scss +18 -15
- package/tooltip/index.d.ts +5 -6
- package/tree/_tree-theme.scss +33 -21
- package/schematics/ng-generate/m3-theme/index_bundled.js.map +0 -7
package/fesm2022/tabs.mjs
CHANGED
|
@@ -10,7 +10,7 @@ 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,18 +22,16 @@ 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.8", 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-next.10", ngImport: i0, type: MatTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
28
|
+
static ɵ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 });
|
|
30
29
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabContent, decorators: [{
|
|
32
31
|
type: Directive,
|
|
33
32
|
args: [{
|
|
34
33
|
selector: '[matTabContent]',
|
|
35
34
|
providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }],
|
|
36
|
-
standalone: true,
|
|
37
35
|
}]
|
|
38
36
|
}], ctorParameters: () => [] });
|
|
39
37
|
|
|
@@ -50,19 +48,15 @@ const MAT_TAB_LABEL = new InjectionToken('MatTabLabel');
|
|
|
50
48
|
const MAT_TAB = new InjectionToken('MAT_TAB');
|
|
51
49
|
/** Used to flag tab labels for use with the portal directive */
|
|
52
50
|
class MatTabLabel extends CdkPortal {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.8", ngImport: i0, type: MatTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
58
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.8", 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-next.10", ngImport: i0, type: MatTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
53
|
+
static ɵ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 });
|
|
59
54
|
}
|
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLabel, decorators: [{
|
|
61
56
|
type: Directive,
|
|
62
57
|
args: [{
|
|
63
58
|
selector: '[mat-tab-label], [matTabLabel]',
|
|
64
59
|
providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }],
|
|
65
|
-
standalone: true,
|
|
66
60
|
}]
|
|
67
61
|
}] });
|
|
68
62
|
|
|
@@ -72,6 +66,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
72
66
|
*/
|
|
73
67
|
const MAT_TAB_GROUP = new InjectionToken('MAT_TAB_GROUP');
|
|
74
68
|
class MatTab {
|
|
69
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
70
|
+
_closestTabGroup = inject(MAT_TAB_GROUP, { optional: true });
|
|
71
|
+
/** whether the tab is disabled. */
|
|
72
|
+
disabled = false;
|
|
75
73
|
/** Content for the tab label given by `<ng-template mat-tab-label>`. */
|
|
76
74
|
get templateLabel() {
|
|
77
75
|
return this._templateLabel;
|
|
@@ -79,39 +77,49 @@ class MatTab {
|
|
|
79
77
|
set templateLabel(value) {
|
|
80
78
|
this._setTemplateLabelInput(value);
|
|
81
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;
|
|
82
102
|
/** @docs-private */
|
|
83
103
|
get content() {
|
|
84
104
|
return this._contentPortal;
|
|
85
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;
|
|
86
122
|
constructor() {
|
|
87
|
-
this._viewContainerRef = inject(ViewContainerRef);
|
|
88
|
-
this._closestTabGroup = inject(MAT_TAB_GROUP, { optional: true });
|
|
89
|
-
/** whether the tab is disabled. */
|
|
90
|
-
this.disabled = false;
|
|
91
|
-
/**
|
|
92
|
-
* Template provided in the tab content that will be used if present, used to enable lazy-loading
|
|
93
|
-
*/
|
|
94
|
-
this._explicitContent = undefined;
|
|
95
|
-
/** Plain text label for the tab, used when there is no template label. */
|
|
96
|
-
this.textLabel = '';
|
|
97
|
-
/** Portal that will be the hosted content of the tab */
|
|
98
|
-
this._contentPortal = null;
|
|
99
|
-
/** Emits whenever the internal state of the tab changes. */
|
|
100
|
-
this._stateChanges = new Subject();
|
|
101
|
-
/**
|
|
102
|
-
* The relatively indexed position where 0 represents the center, negative is left, and positive
|
|
103
|
-
* represents the right.
|
|
104
|
-
*/
|
|
105
|
-
this.position = null;
|
|
106
|
-
/**
|
|
107
|
-
* The initial relatively index origin of the tab if it was created and selected after there
|
|
108
|
-
* was already a selected tab. Provides context of what position the tab should originate from.
|
|
109
|
-
*/
|
|
110
|
-
this.origin = null;
|
|
111
|
-
/**
|
|
112
|
-
* Whether the tab is currently active.
|
|
113
|
-
*/
|
|
114
|
-
this.isActive = false;
|
|
115
123
|
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
116
124
|
}
|
|
117
125
|
ngOnChanges(changes) {
|
|
@@ -140,12 +148,12 @@ class MatTab {
|
|
|
140
148
|
this._templateLabel = value;
|
|
141
149
|
}
|
|
142
150
|
}
|
|
143
|
-
static
|
|
144
|
-
static
|
|
151
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", 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 });
|
|
145
153
|
}
|
|
146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTab, decorators: [{
|
|
147
155
|
type: Component,
|
|
148
|
-
args: [{ selector: 'mat-tab', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, exportAs: 'matTab', providers: [{ provide: MAT_TAB, useExisting: MatTab }],
|
|
156
|
+
args: [{ selector: 'mat-tab', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, exportAs: 'matTab', providers: [{ provide: MAT_TAB, useExisting: MatTab }], host: {
|
|
149
157
|
// This element will be rendered on the server in order to support hydration.
|
|
150
158
|
// Hide it so it doesn't cause a layout shift when it's removed on the client.
|
|
151
159
|
'hidden': '',
|
|
@@ -186,6 +194,9 @@ const NO_TRANSITION_CLASS = 'mdc-tab-indicator--no-transition';
|
|
|
186
194
|
* @docs-private
|
|
187
195
|
*/
|
|
188
196
|
class MatInkBar {
|
|
197
|
+
_items;
|
|
198
|
+
/** Item to which the ink bar is aligned currently. */
|
|
199
|
+
_currentItem;
|
|
189
200
|
constructor(_items) {
|
|
190
201
|
this._items = _items;
|
|
191
202
|
}
|
|
@@ -210,10 +221,10 @@ class MatInkBar {
|
|
|
210
221
|
}
|
|
211
222
|
}
|
|
212
223
|
class InkBarItem {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
224
|
+
_elementRef = inject(ElementRef);
|
|
225
|
+
_inkBarElement;
|
|
226
|
+
_inkBarContentElement;
|
|
227
|
+
_fitToContent = false;
|
|
217
228
|
/** Whether the ink bar should fit to the entire tab or just its content. */
|
|
218
229
|
get fitInkBarToContent() {
|
|
219
230
|
return this._fitToContent;
|
|
@@ -291,10 +302,10 @@ class InkBarItem {
|
|
|
291
302
|
}
|
|
292
303
|
parentElement.appendChild(this._inkBarElement);
|
|
293
304
|
}
|
|
294
|
-
static
|
|
295
|
-
static
|
|
305
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: InkBarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
306
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.10", type: InkBarItem, isStandalone: true, inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute] }, ngImport: i0 });
|
|
296
307
|
}
|
|
297
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: InkBarItem, decorators: [{
|
|
298
309
|
type: Directive
|
|
299
310
|
}], propDecorators: { fitInkBarToContent: [{
|
|
300
311
|
type: Input,
|
|
@@ -322,12 +333,9 @@ const _MAT_INK_BAR_POSITIONER = new InjectionToken('MatInkBarPositioner', {
|
|
|
322
333
|
* @docs-private
|
|
323
334
|
*/
|
|
324
335
|
class MatTabLabelWrapper extends InkBarItem {
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
/** Whether the tab is disabled. */
|
|
329
|
-
this.disabled = false;
|
|
330
|
-
}
|
|
336
|
+
elementRef = inject(ElementRef);
|
|
337
|
+
/** Whether the tab is disabled. */
|
|
338
|
+
disabled = false;
|
|
331
339
|
/** Sets focus on the wrapper element */
|
|
332
340
|
focus() {
|
|
333
341
|
this.elementRef.nativeElement.focus();
|
|
@@ -338,10 +346,10 @@ class MatTabLabelWrapper extends InkBarItem {
|
|
|
338
346
|
getOffsetWidth() {
|
|
339
347
|
return this.elementRef.nativeElement.offsetWidth;
|
|
340
348
|
}
|
|
341
|
-
static
|
|
342
|
-
static
|
|
349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLabelWrapper, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
350
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.10", 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 });
|
|
343
351
|
}
|
|
344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLabelWrapper, decorators: [{
|
|
345
353
|
type: Directive,
|
|
346
354
|
args: [{
|
|
347
355
|
selector: '[matTabLabelWrapper]',
|
|
@@ -349,7 +357,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
349
357
|
'[class.mat-mdc-tab-disabled]': 'disabled',
|
|
350
358
|
'[attr.aria-disabled]': '!!disabled',
|
|
351
359
|
},
|
|
352
|
-
standalone: true,
|
|
353
360
|
}]
|
|
354
361
|
}], propDecorators: { disabled: [{
|
|
355
362
|
type: Input,
|
|
@@ -375,6 +382,43 @@ const HEADER_SCROLL_INTERVAL = 100;
|
|
|
375
382
|
* @docs-private
|
|
376
383
|
*/
|
|
377
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;
|
|
378
422
|
/** The index of the active tab. */
|
|
379
423
|
get selectedIndex() {
|
|
380
424
|
return this._selectedIndex;
|
|
@@ -389,40 +433,14 @@ class MatPaginatedTabHeader {
|
|
|
389
433
|
}
|
|
390
434
|
}
|
|
391
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);
|
|
392
443
|
constructor() {
|
|
393
|
-
this._elementRef = inject(ElementRef);
|
|
394
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
395
|
-
this._viewportRuler = inject(ViewportRuler);
|
|
396
|
-
this._dir = inject(Directionality, { optional: true });
|
|
397
|
-
this._ngZone = inject(NgZone);
|
|
398
|
-
this._platform = inject(Platform);
|
|
399
|
-
this._animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
400
|
-
/** The distance in pixels that the tab labels should be translated to the left. */
|
|
401
|
-
this._scrollDistance = 0;
|
|
402
|
-
/** Whether the header should scroll to the selected index after the view has been checked. */
|
|
403
|
-
this._selectedIndexChanged = false;
|
|
404
|
-
/** Emits when the component is destroyed. */
|
|
405
|
-
this._destroyed = new Subject();
|
|
406
|
-
/** Whether the controls for pagination should be displayed */
|
|
407
|
-
this._showPaginationControls = false;
|
|
408
|
-
/** Whether the tab list can be scrolled more towards the end of the tab label list. */
|
|
409
|
-
this._disableScrollAfter = true;
|
|
410
|
-
/** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
|
|
411
|
-
this._disableScrollBefore = true;
|
|
412
|
-
/** Stream that will stop the automated scrolling. */
|
|
413
|
-
this._stopScrolling = new Subject();
|
|
414
|
-
/**
|
|
415
|
-
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
416
|
-
* layout recalculations if it's known that pagination won't be required.
|
|
417
|
-
*/
|
|
418
|
-
this.disablePagination = false;
|
|
419
|
-
this._selectedIndex = 0;
|
|
420
|
-
/** Event emitted when the option is selected. */
|
|
421
|
-
this.selectFocusedIndex = new EventEmitter();
|
|
422
|
-
/** Event emitted when a label is focused. */
|
|
423
|
-
this.indexFocused = new EventEmitter();
|
|
424
|
-
this._sharedResizeObserver = inject(SharedResizeObserver);
|
|
425
|
-
this._injector = inject(Injector);
|
|
426
444
|
// Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
|
|
427
445
|
this._ngZone.runOutsideAngular(() => {
|
|
428
446
|
fromEvent(this._elementRef.nativeElement, 'mouseleave')
|
|
@@ -849,10 +867,10 @@ class MatPaginatedTabHeader {
|
|
|
849
867
|
this._checkScrollingControls();
|
|
850
868
|
return { maxScrollDistance, distance: this._scrollDistance };
|
|
851
869
|
}
|
|
852
|
-
static
|
|
853
|
-
static
|
|
870
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
871
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatPaginatedTabHeader, isStandalone: true, inputs: { disablePagination: ["disablePagination", "disablePagination", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 });
|
|
854
872
|
}
|
|
855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatPaginatedTabHeader, decorators: [{
|
|
856
874
|
type: Directive
|
|
857
875
|
}], ctorParameters: () => [], propDecorators: { disablePagination: [{
|
|
858
876
|
type: Input,
|
|
@@ -874,11 +892,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
874
892
|
* @docs-private
|
|
875
893
|
*/
|
|
876
894
|
class MatTabHeader extends MatPaginatedTabHeader {
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
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;
|
|
882
908
|
ngAfterContentInit() {
|
|
883
909
|
this._inkBar = new MatInkBar(this._items);
|
|
884
910
|
super.ngAfterContentInit();
|
|
@@ -886,16 +912,16 @@ class MatTabHeader extends MatPaginatedTabHeader {
|
|
|
886
912
|
_itemSelected(event) {
|
|
887
913
|
event.preventDefault();
|
|
888
914
|
}
|
|
889
|
-
static
|
|
890
|
-
static
|
|
915
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
916
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", 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 });
|
|
891
917
|
}
|
|
892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabHeader, decorators: [{
|
|
893
919
|
type: Component,
|
|
894
920
|
args: [{ selector: 'mat-tab-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, host: {
|
|
895
921
|
'class': 'mat-mdc-tab-header',
|
|
896
922
|
'[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls',
|
|
897
923
|
'[class.mat-mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
|
|
898
|
-
},
|
|
924
|
+
}, imports: [MatRipple, CdkObserveContent], template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div\n class=\"mat-mdc-tab-label-container\"\n #tabListContainer\n (keydown)=\"_handleKeydown($event)\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\">\n <div\n #tabList\n class=\"mat-mdc-tab-list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-labels\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-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}}"] }]
|
|
899
925
|
}], propDecorators: { _items: [{
|
|
900
926
|
type: ContentChildren,
|
|
901
927
|
args: [MatTabLabelWrapper, { descendants: false }]
|
|
@@ -970,13 +996,13 @@ const matTabsAnimations = {
|
|
|
970
996
|
* @docs-private
|
|
971
997
|
*/
|
|
972
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;
|
|
973
1004
|
constructor() {
|
|
974
1005
|
super();
|
|
975
|
-
this._host = inject(MatTabBody);
|
|
976
|
-
/** Subscription to events for when the tab body begins centering. */
|
|
977
|
-
this._centeringSub = Subscription.EMPTY;
|
|
978
|
-
/** Subscription to events for when the tab body finishes leaving from center position. */
|
|
979
|
-
this._leavingSub = Subscription.EMPTY;
|
|
980
1006
|
}
|
|
981
1007
|
/** Set initial visibility or set up subscription for changing visibility. */
|
|
982
1008
|
ngOnInit() {
|
|
@@ -1000,14 +1026,13 @@ class MatTabBodyPortal extends CdkPortalOutlet {
|
|
|
1000
1026
|
this._centeringSub.unsubscribe();
|
|
1001
1027
|
this._leavingSub.unsubscribe();
|
|
1002
1028
|
}
|
|
1003
|
-
static
|
|
1004
|
-
static
|
|
1029
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabBodyPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1030
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatTabBodyPortal, isStandalone: true, selector: "[matTabBodyHost]", usesInheritance: true, ngImport: i0 });
|
|
1005
1031
|
}
|
|
1006
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
1032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabBodyPortal, decorators: [{
|
|
1007
1033
|
type: Directive,
|
|
1008
1034
|
args: [{
|
|
1009
1035
|
selector: '[matTabBodyHost]',
|
|
1010
|
-
standalone: true,
|
|
1011
1036
|
}]
|
|
1012
1037
|
}], ctorParameters: () => [] });
|
|
1013
1038
|
/**
|
|
@@ -1015,32 +1040,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1015
1040
|
* @docs-private
|
|
1016
1041
|
*/
|
|
1017
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;
|
|
1018
1073
|
/** The shifted index position of the tab body, where zero represents the active center tab. */
|
|
1019
1074
|
set position(position) {
|
|
1020
1075
|
this._positionIndex = position;
|
|
1021
1076
|
this._computePositionAnimationState();
|
|
1022
1077
|
}
|
|
1023
1078
|
constructor() {
|
|
1024
|
-
this._elementRef = inject(ElementRef);
|
|
1025
|
-
this._dir = inject(Directionality, { optional: true });
|
|
1026
|
-
/** Subscription to the directionality change observable. */
|
|
1027
|
-
this._dirChangeSubscription = Subscription.EMPTY;
|
|
1028
|
-
/** Emits when an animation on the tab is complete. */
|
|
1029
|
-
this._translateTabComplete = new Subject();
|
|
1030
|
-
/** Event emitted when the tab begins to animate towards the center as the active tab. */
|
|
1031
|
-
this._onCentering = new EventEmitter();
|
|
1032
|
-
/** Event emitted before the centering of the tab begins. */
|
|
1033
|
-
this._beforeCentering = new EventEmitter();
|
|
1034
|
-
/** Event emitted before the centering of the tab begins. */
|
|
1035
|
-
this._afterLeavingCenter = new EventEmitter();
|
|
1036
|
-
/** Event emitted when the tab completes its animation towards the center. */
|
|
1037
|
-
this._onCentered = new EventEmitter(true);
|
|
1038
|
-
// Note that the default value will always be overwritten by `MatTabBody`, but we need one
|
|
1039
|
-
// anyway to prevent the animations module from throwing an error if the body is used on its own.
|
|
1040
|
-
/** Duration for the tab's animation. */
|
|
1041
|
-
this.animationDuration = '500ms';
|
|
1042
|
-
/** Whether the tab's content should be kept in the DOM while it's off-screen. */
|
|
1043
|
-
this.preserveContent = false;
|
|
1044
1079
|
if (this._dir) {
|
|
1045
1080
|
const changeDetectorRef = inject(ChangeDetectorRef);
|
|
1046
1081
|
this._dirChangeSubscription = this._dir.change.subscribe((dir) => {
|
|
@@ -1048,13 +1083,7 @@ class MatTabBody {
|
|
|
1048
1083
|
changeDetectorRef.markForCheck();
|
|
1049
1084
|
});
|
|
1050
1085
|
}
|
|
1051
|
-
|
|
1052
|
-
// invoked twice in some browsers. See https://github.com/angular/angular/issues/24084.
|
|
1053
|
-
this._translateTabComplete
|
|
1054
|
-
.pipe(distinctUntilChanged((x, y) => {
|
|
1055
|
-
return x.fromState === y.fromState && x.toState === y.toState;
|
|
1056
|
-
}))
|
|
1057
|
-
.subscribe(event => {
|
|
1086
|
+
this._translateTabComplete.subscribe(event => {
|
|
1058
1087
|
// If the transition to the center is complete, emit an event.
|
|
1059
1088
|
if (this._isCenterPosition(event.toState) && this._isCenterPosition(this._position)) {
|
|
1060
1089
|
this._onCentered.emit();
|
|
@@ -1115,14 +1144,14 @@ class MatTabBody {
|
|
|
1115
1144
|
}
|
|
1116
1145
|
return 'right-origin-center';
|
|
1117
1146
|
}
|
|
1118
|
-
static
|
|
1119
|
-
static
|
|
1147
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.10", 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 });
|
|
1120
1149
|
}
|
|
1121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
1150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabBody, decorators: [{
|
|
1122
1151
|
type: Component,
|
|
1123
1152
|
args: [{ selector: 'mat-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [matTabsAnimations.translateTab], host: {
|
|
1124
1153
|
'class': 'mat-mdc-tab-body',
|
|
1125
|
-
},
|
|
1154
|
+
}, imports: [MatTabBodyPortal, CdkScrollable], template: "<div class=\"mat-mdc-tab-body-content\" #content\n [@translateTab]=\"{\n value: _position,\n params: {animationDuration: animationDuration}\n }\"\n (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n (@translateTab.done)=\"_translateTabComplete.next($event)\"\n cdkScrollable>\n <ng-template matTabBodyHost></ng-template>\n</div>\n", styles: [".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-mdc-tab-body-content[style*=\"visibility: hidden\"]{display:none}"] }]
|
|
1126
1155
|
}], ctorParameters: () => [], propDecorators: { _onCentering: [{
|
|
1127
1156
|
type: Output
|
|
1128
1157
|
}], _beforeCentering: [{
|
|
@@ -1157,6 +1186,36 @@ const ENABLE_BACKGROUND_INPUT = true;
|
|
|
1157
1186
|
* See: https://material.io/design/components/tabs.html
|
|
1158
1187
|
*/
|
|
1159
1188
|
class MatTabGroup {
|
|
1189
|
+
_elementRef = inject(ElementRef);
|
|
1190
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
1191
|
+
_animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1192
|
+
/**
|
|
1193
|
+
* All tabs inside the tab group. This includes tabs that belong to groups that are nested
|
|
1194
|
+
* inside the current one. We filter out only the tabs that belong to this group in `_tabs`.
|
|
1195
|
+
*/
|
|
1196
|
+
_allTabs;
|
|
1197
|
+
_tabBodyWrapper;
|
|
1198
|
+
_tabHeader;
|
|
1199
|
+
/** All of the tabs that belong to the group. */
|
|
1200
|
+
_tabs = new QueryList();
|
|
1201
|
+
/** The tab index that should be selected after the content has been checked. */
|
|
1202
|
+
_indexToSelect = 0;
|
|
1203
|
+
/** Index of the tab that was focused last. */
|
|
1204
|
+
_lastFocusedTabIndex = null;
|
|
1205
|
+
/** Snapshot of the height of the tab body wrapper before another tab is activated. */
|
|
1206
|
+
_tabBodyWrapperHeight = 0;
|
|
1207
|
+
/** Subscription to tabs being added/removed. */
|
|
1208
|
+
_tabsSubscription = Subscription.EMPTY;
|
|
1209
|
+
/** Subscription to changes in the tab labels. */
|
|
1210
|
+
_tabLabelSubscription = Subscription.EMPTY;
|
|
1211
|
+
/**
|
|
1212
|
+
* Theme color of the tab group. This API is supported in M2 themes only, it
|
|
1213
|
+
* has no effect in M3 themes.
|
|
1214
|
+
*
|
|
1215
|
+
* For information on applying color variants in M3, see
|
|
1216
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
1217
|
+
*/
|
|
1218
|
+
color;
|
|
1160
1219
|
/** Whether the ink bar should fit its width to the size of the tab label content. */
|
|
1161
1220
|
get fitInkBarToContent() {
|
|
1162
1221
|
return this._fitInkBarToContent;
|
|
@@ -1165,6 +1224,13 @@ class MatTabGroup {
|
|
|
1165
1224
|
this._fitInkBarToContent = value;
|
|
1166
1225
|
this._changeDetectorRef.markForCheck();
|
|
1167
1226
|
}
|
|
1227
|
+
_fitInkBarToContent = false;
|
|
1228
|
+
/** Whether tabs should be stretched to fill the header. */
|
|
1229
|
+
stretchTabs = true;
|
|
1230
|
+
/** Alignment for tabs label. */
|
|
1231
|
+
alignTabs = null;
|
|
1232
|
+
/** Whether the tab group should grow to the size of the active tab. */
|
|
1233
|
+
dynamicHeight = false;
|
|
1168
1234
|
/** The index of the active tab. */
|
|
1169
1235
|
get selectedIndex() {
|
|
1170
1236
|
return this._selectedIndex;
|
|
@@ -1172,6 +1238,9 @@ class MatTabGroup {
|
|
|
1172
1238
|
set selectedIndex(value) {
|
|
1173
1239
|
this._indexToSelect = isNaN(value) ? null : value;
|
|
1174
1240
|
}
|
|
1241
|
+
_selectedIndex = null;
|
|
1242
|
+
/** Position of the tab header. */
|
|
1243
|
+
headerPosition = 'above';
|
|
1175
1244
|
/** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
|
|
1176
1245
|
get animationDuration() {
|
|
1177
1246
|
return this._animationDuration;
|
|
@@ -1180,6 +1249,7 @@ class MatTabGroup {
|
|
|
1180
1249
|
const stringValue = value + '';
|
|
1181
1250
|
this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
|
|
1182
1251
|
}
|
|
1252
|
+
_animationDuration;
|
|
1183
1253
|
/**
|
|
1184
1254
|
* `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
|
|
1185
1255
|
* accessibility when the tab does not have focusable elements or if it has scrollable content.
|
|
@@ -1192,6 +1262,20 @@ class MatTabGroup {
|
|
|
1192
1262
|
set contentTabIndex(value) {
|
|
1193
1263
|
this._contentTabIndex = isNaN(value) ? null : value;
|
|
1194
1264
|
}
|
|
1265
|
+
_contentTabIndex;
|
|
1266
|
+
/**
|
|
1267
|
+
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
1268
|
+
* layout recalculations if it's known that pagination won't be required.
|
|
1269
|
+
*/
|
|
1270
|
+
disablePagination = false;
|
|
1271
|
+
/** Whether ripples in the tab group are disabled. */
|
|
1272
|
+
disableRipple = false;
|
|
1273
|
+
/**
|
|
1274
|
+
* By default tabs remove their content from the DOM while it's off-screen.
|
|
1275
|
+
* Setting this to `true` will keep it in the DOM which will prevent elements
|
|
1276
|
+
* like iframes and videos from reloading next time it comes back into the view.
|
|
1277
|
+
*/
|
|
1278
|
+
preserveContent = false;
|
|
1195
1279
|
/**
|
|
1196
1280
|
* Theme color of the background of the tab group. This API is supported in M2 themes only, it
|
|
1197
1281
|
* has no effect in M3 themes.
|
|
@@ -1216,55 +1300,23 @@ class MatTabGroup {
|
|
|
1216
1300
|
}
|
|
1217
1301
|
this._backgroundColor = value;
|
|
1218
1302
|
}
|
|
1303
|
+
_backgroundColor;
|
|
1304
|
+
/** Aria label of the inner `tablist` of the group. */
|
|
1305
|
+
ariaLabel;
|
|
1306
|
+
/** Sets the `aria-labelledby` of the inner `tablist` of the group. */
|
|
1307
|
+
ariaLabelledby;
|
|
1308
|
+
/** Output to enable support for two-way binding on `[(selectedIndex)]` */
|
|
1309
|
+
selectedIndexChange = new EventEmitter();
|
|
1310
|
+
/** Event emitted when focus has changed within a tab group. */
|
|
1311
|
+
focusChange = new EventEmitter();
|
|
1312
|
+
/** Event emitted when the body animation has completed */
|
|
1313
|
+
animationDone = new EventEmitter();
|
|
1314
|
+
/** Event emitted when the tab selection has changed. */
|
|
1315
|
+
selectedTabChange = new EventEmitter(true);
|
|
1316
|
+
_groupId;
|
|
1317
|
+
/** Whether the tab group is rendered on the server. */
|
|
1318
|
+
_isServer = !inject(Platform).isBrowser;
|
|
1219
1319
|
constructor() {
|
|
1220
|
-
this._elementRef = inject(ElementRef);
|
|
1221
|
-
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
1222
|
-
this._animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1223
|
-
/** All of the tabs that belong to the group. */
|
|
1224
|
-
this._tabs = new QueryList();
|
|
1225
|
-
/** The tab index that should be selected after the content has been checked. */
|
|
1226
|
-
this._indexToSelect = 0;
|
|
1227
|
-
/** Index of the tab that was focused last. */
|
|
1228
|
-
this._lastFocusedTabIndex = null;
|
|
1229
|
-
/** Snapshot of the height of the tab body wrapper before another tab is activated. */
|
|
1230
|
-
this._tabBodyWrapperHeight = 0;
|
|
1231
|
-
/** Subscription to tabs being added/removed. */
|
|
1232
|
-
this._tabsSubscription = Subscription.EMPTY;
|
|
1233
|
-
/** Subscription to changes in the tab labels. */
|
|
1234
|
-
this._tabLabelSubscription = Subscription.EMPTY;
|
|
1235
|
-
this._fitInkBarToContent = false;
|
|
1236
|
-
/** Whether tabs should be stretched to fill the header. */
|
|
1237
|
-
this.stretchTabs = true;
|
|
1238
|
-
/** Alignment for tabs label. */
|
|
1239
|
-
this.alignTabs = null;
|
|
1240
|
-
/** Whether the tab group should grow to the size of the active tab. */
|
|
1241
|
-
this.dynamicHeight = false;
|
|
1242
|
-
this._selectedIndex = null;
|
|
1243
|
-
/** Position of the tab header. */
|
|
1244
|
-
this.headerPosition = 'above';
|
|
1245
|
-
/**
|
|
1246
|
-
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
1247
|
-
* layout recalculations if it's known that pagination won't be required.
|
|
1248
|
-
*/
|
|
1249
|
-
this.disablePagination = false;
|
|
1250
|
-
/** Whether ripples in the tab group are disabled. */
|
|
1251
|
-
this.disableRipple = false;
|
|
1252
|
-
/**
|
|
1253
|
-
* By default tabs remove their content from the DOM while it's off-screen.
|
|
1254
|
-
* Setting this to `true` will keep it in the DOM which will prevent elements
|
|
1255
|
-
* like iframes and videos from reloading next time it comes back into the view.
|
|
1256
|
-
*/
|
|
1257
|
-
this.preserveContent = false;
|
|
1258
|
-
/** Output to enable support for two-way binding on `[(selectedIndex)]` */
|
|
1259
|
-
this.selectedIndexChange = new EventEmitter();
|
|
1260
|
-
/** Event emitted when focus has changed within a tab group. */
|
|
1261
|
-
this.focusChange = new EventEmitter();
|
|
1262
|
-
/** Event emitted when the body animation has completed */
|
|
1263
|
-
this.animationDone = new EventEmitter();
|
|
1264
|
-
/** Event emitted when the tab selection has changed. */
|
|
1265
|
-
this.selectedTabChange = new EventEmitter(true);
|
|
1266
|
-
/** Whether the tab group is rendered on the server. */
|
|
1267
|
-
this._isServer = !inject(Platform).isBrowser;
|
|
1268
1320
|
const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true });
|
|
1269
1321
|
this._groupId = nextId++;
|
|
1270
1322
|
this.animationDuration =
|
|
@@ -1501,15 +1553,15 @@ class MatTabGroup {
|
|
|
1501
1553
|
this._tabHeader.focusIndex = index;
|
|
1502
1554
|
}
|
|
1503
1555
|
}
|
|
1504
|
-
static
|
|
1505
|
-
static
|
|
1556
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", 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: [
|
|
1506
1558
|
{
|
|
1507
1559
|
provide: MAT_TAB_GROUP,
|
|
1508
1560
|
useExisting: MatTabGroup,
|
|
1509
1561
|
},
|
|
1510
|
-
], 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-app-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-app-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-app-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-app-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-app-title-small-weight))}.mat-mdc-tab.mdc-tab{flex-grow:0}.mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-app-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-app-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-app-primary))}.mat-mdc-tab.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-app-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab{flex-grow:1}.mat-mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-focus-indicator::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mdc-tab__ripple::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header{flex-direction:column-reverse}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mat-mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable{transition:none !important;animation:none !important}"], 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 }); }
|
|
1562
|
+
], 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 });
|
|
1511
1563
|
}
|
|
1512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
1564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabGroup, decorators: [{
|
|
1513
1565
|
type: Component,
|
|
1514
1566
|
args: [{ selector: 'mat-tab-group', exportAs: 'matTabGroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
1515
1567
|
{
|
|
@@ -1524,14 +1576,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1524
1576
|
'[class.mat-mdc-tab-group-stretch-tabs]': 'stretchTabs',
|
|
1525
1577
|
'[attr.mat-align-tabs]': 'alignTabs',
|
|
1526
1578
|
'[style.--mat-tab-animation-duration]': 'animationDuration',
|
|
1527
|
-
},
|
|
1579
|
+
}, imports: [
|
|
1528
1580
|
MatTabHeader,
|
|
1529
1581
|
MatTabLabelWrapper,
|
|
1530
1582
|
CdkMonitorFocus,
|
|
1531
1583
|
MatRipple,
|
|
1532
1584
|
CdkPortalOutlet,
|
|
1533
1585
|
MatTabBody,
|
|
1534
|
-
], template: "<mat-tab-header #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [disableRipple]=\"disableRipple\"\n [disablePagination]=\"disablePagination\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"selectedIndex = $event\">\n\n @for (tab of _tabs; track tab; let i = $index) {\n <div class=\"mdc-tab mat-mdc-tab mat-focus-indicator\"\n #tabNode\n role=\"tab\"\n matTabLabelWrapper\n cdkMonitorElementFocus\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n [class.mdc-tab--active]=\"selectedIndex === i\"\n [class]=\"tab.labelClass\"\n [disabled]=\"tab.disabled\"\n [fitInkBarToContent]=\"fitInkBarToContent\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\">\n <span class=\"mdc-tab__ripple\"></span>\n\n <!-- Needs to be a separate element, because we can't put\n `overflow: hidden` on tab due to the ink bar. -->\n <div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"tabNode\"\n [matRippleDisabled]=\"tab.disabled || disableRipple\"></div>\n\n <span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <!--\n If there is a label template, use it, otherwise fall back to the text label.\n Note that we don't have indentation around the text label, because it adds\n whitespace around the text which breaks some internal tests.\n -->\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n } @else {{{tab.textLabel}}}\n </span>\n </span>\n </div>\n }\n</mat-tab-header>\n\n<!--\n We need to project the content somewhere to avoid hydration errors. Some observations:\n 1. This is only necessary on the server.\n 2. We get a hydration error if there aren't any nodes after the `ng-content`.\n 3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n <ng-content/>\n}\n\n<div\n class=\"mat-mdc-tab-body-wrapper\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n #tabBodyWrapper>\n @for (tab of _tabs; track tab; let i = $index) {\n <mat-tab-body role=\"tabpanel\"\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [attr.aria-hidden]=\"selectedIndex !== i\"\n [class.mat-mdc-tab-body-active]=\"selectedIndex === i\"\n [class]=\"tab.bodyClass\"\n [content]=\"tab.content!\"\n [position]=\"tab.position!\"\n [origin]=\"tab.origin\"\n [animationDuration]=\"animationDuration\"\n [preserveContent]=\"preserveContent\"\n (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n (_onCentering)=\"_setTabBodyWrapperHeight($event)\">\n </mat-tab-body>\n }\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-app-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-app-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-app-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-app-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-app-title-small-weight))}.mat-mdc-tab.mdc-tab{flex-grow:0}.mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-app-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-app-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-app-on-surface))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-app-primary))}.mat-mdc-tab.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-app-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab{flex-grow:1}.mat-mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-focus-indicator::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mdc-tab__ripple::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header{flex-direction:column-reverse}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mat-mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable{transition:none !important;animation:none !important}"] }]
|
|
1586
|
+
], 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}"] }]
|
|
1535
1587
|
}], ctorParameters: () => [], propDecorators: { _allTabs: [{
|
|
1536
1588
|
type: ContentChildren,
|
|
1537
1589
|
args: [MatTab, { descendants: true }]
|
|
@@ -1593,6 +1645,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1593
1645
|
}] } });
|
|
1594
1646
|
/** A simple change event emitted on focus or selection changes. */
|
|
1595
1647
|
class MatTabChangeEvent {
|
|
1648
|
+
/** Index of the currently-selected tab. */
|
|
1649
|
+
index;
|
|
1650
|
+
/** Reference to the currently-selected tab. */
|
|
1651
|
+
tab;
|
|
1596
1652
|
}
|
|
1597
1653
|
|
|
1598
1654
|
// Increasing integer for generating unique ids for tab nav components.
|
|
@@ -1610,6 +1666,9 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1610
1666
|
this._fitInkBarToContent.next(value);
|
|
1611
1667
|
this._changeDetectorRef.markForCheck();
|
|
1612
1668
|
}
|
|
1669
|
+
_fitInkBarToContent = new BehaviorSubject(false);
|
|
1670
|
+
/** Whether tabs should be stretched to fill the header. */
|
|
1671
|
+
stretchTabs = true;
|
|
1613
1672
|
get animationDuration() {
|
|
1614
1673
|
return this._animationDuration;
|
|
1615
1674
|
}
|
|
@@ -1617,6 +1676,9 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1617
1676
|
const stringValue = value + '';
|
|
1618
1677
|
this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
|
|
1619
1678
|
}
|
|
1679
|
+
_animationDuration;
|
|
1680
|
+
/** Query list of all tab links of the tab navigation. */
|
|
1681
|
+
_items;
|
|
1620
1682
|
/**
|
|
1621
1683
|
* Theme color of the background of the tab nav. This API is supported in M2 themes only, it
|
|
1622
1684
|
* has no effect in M3 themes.
|
|
@@ -1635,6 +1697,29 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1635
1697
|
}
|
|
1636
1698
|
this._backgroundColor = value;
|
|
1637
1699
|
}
|
|
1700
|
+
_backgroundColor;
|
|
1701
|
+
/** Whether the ripple effect is disabled or not. */
|
|
1702
|
+
disableRipple = false;
|
|
1703
|
+
/**
|
|
1704
|
+
* Theme color of the nav bar. This API is supported in M2 themes only, it has
|
|
1705
|
+
* no effect in M3 themes.
|
|
1706
|
+
*
|
|
1707
|
+
* For information on applying color variants in M3, see
|
|
1708
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
1709
|
+
*/
|
|
1710
|
+
color = 'primary';
|
|
1711
|
+
/**
|
|
1712
|
+
* Associated tab panel controlled by the nav bar. If not provided, then the nav bar
|
|
1713
|
+
* follows the ARIA link / navigation landmark pattern. If provided, it follows the
|
|
1714
|
+
* ARIA tabs design pattern.
|
|
1715
|
+
*/
|
|
1716
|
+
tabPanel;
|
|
1717
|
+
_tabListContainer;
|
|
1718
|
+
_tabList;
|
|
1719
|
+
_tabListInner;
|
|
1720
|
+
_nextPaginator;
|
|
1721
|
+
_previousPaginator;
|
|
1722
|
+
_inkBar;
|
|
1638
1723
|
constructor() {
|
|
1639
1724
|
const elementRef = inject(ElementRef);
|
|
1640
1725
|
const dir = inject(Directionality, { optional: true });
|
|
@@ -1645,19 +1730,6 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1645
1730
|
const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
|
|
1646
1731
|
const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true });
|
|
1647
1732
|
super(elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode);
|
|
1648
|
-
this._fitInkBarToContent = new BehaviorSubject(false);
|
|
1649
|
-
/** Whether tabs should be stretched to fill the header. */
|
|
1650
|
-
this.stretchTabs = true;
|
|
1651
|
-
/** Whether the ripple effect is disabled or not. */
|
|
1652
|
-
this.disableRipple = false;
|
|
1653
|
-
/**
|
|
1654
|
-
* Theme color of the nav bar. This API is supported in M2 themes only, it has
|
|
1655
|
-
* no effect in M3 themes.
|
|
1656
|
-
*
|
|
1657
|
-
* For information on applying color variants in M3, see
|
|
1658
|
-
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
1659
|
-
*/
|
|
1660
|
-
this.color = 'primary';
|
|
1661
1733
|
this.disablePagination =
|
|
1662
1734
|
defaultConfig && defaultConfig.disablePagination != null
|
|
1663
1735
|
? defaultConfig.disablePagination
|
|
@@ -1710,10 +1782,10 @@ class MatTabNav extends MatPaginatedTabHeader {
|
|
|
1710
1782
|
_getRole() {
|
|
1711
1783
|
return this.tabPanel ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
|
|
1712
1784
|
}
|
|
1713
|
-
static
|
|
1714
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.8", type: MatTabNav, isStandalone: true, selector: "[mat-tab-nav-bar]", inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], animationDuration: "animationDuration", backgroundColor: "backgroundColor", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], color: "color", tabPanel: "tabPanel" }, host: { properties: { "attr.role": "_getRole()", "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'", "class.mat-mdc-tab-nav-bar-stretch-tabs": "stretchTabs", "class.mat-primary": "color !== \"warn\" && color !== \"accent\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "class._mat-animation-noopable": "_animationMode === \"NoopAnimations\"", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-nav-bar mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => MatTabLink), descendants: true }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], exportAs: ["matTabNavBar", "matTabNav"], usesInheritance: true, ngImport: i0, template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-mdc-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n <div class=\"mat-mdc-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-links\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-app-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-links,.mat-mdc-tab-links.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-app-surface-variant))}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1785
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1786
|
+
static ɵ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 });
|
|
1715
1787
|
}
|
|
1716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
1788
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabNav, decorators: [{
|
|
1717
1789
|
type: Component,
|
|
1718
1790
|
args: [{ selector: '[mat-tab-nav-bar]', exportAs: 'matTabNavBar, matTabNav', host: {
|
|
1719
1791
|
'[attr.role]': '_getRole()',
|
|
@@ -1726,7 +1798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1726
1798
|
'[class.mat-warn]': 'color === "warn"',
|
|
1727
1799
|
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
|
|
1728
1800
|
'[style.--mat-tab-animation-duration]': 'animationDuration',
|
|
1729
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default,
|
|
1801
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [MatRipple, CdkObserveContent], template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-mdc-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n <div class=\"mat-mdc-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-links\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-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)}"] }]
|
|
1730
1802
|
}], ctorParameters: () => [], propDecorators: { fitInkBarToContent: [{
|
|
1731
1803
|
type: Input,
|
|
1732
1804
|
args: [{ transform: booleanAttribute }]
|
|
@@ -1767,6 +1839,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1767
1839
|
* Link inside a `mat-tab-nav-bar`.
|
|
1768
1840
|
*/
|
|
1769
1841
|
class MatTabLink extends InkBarItem {
|
|
1842
|
+
_tabNavBar = inject(MatTabNav);
|
|
1843
|
+
elementRef = inject(ElementRef);
|
|
1844
|
+
_focusMonitor = inject(FocusMonitor);
|
|
1845
|
+
_destroyed = new Subject();
|
|
1846
|
+
/** Whether the tab link is active or not. */
|
|
1847
|
+
_isActive = false;
|
|
1770
1848
|
/** Whether the link is active. */
|
|
1771
1849
|
get active() {
|
|
1772
1850
|
return this._isActive;
|
|
@@ -1777,6 +1855,18 @@ class MatTabLink extends InkBarItem {
|
|
|
1777
1855
|
this._tabNavBar.updateActiveLink();
|
|
1778
1856
|
}
|
|
1779
1857
|
}
|
|
1858
|
+
/** Whether the tab link is disabled. */
|
|
1859
|
+
disabled = false;
|
|
1860
|
+
/** Whether ripples are disabled on the tab link. */
|
|
1861
|
+
disableRipple = false;
|
|
1862
|
+
tabIndex = 0;
|
|
1863
|
+
/**
|
|
1864
|
+
* Ripple configuration for ripples that are launched on pointer down. The ripple config
|
|
1865
|
+
* is set to the global ripple options since we don't have any configurable options for
|
|
1866
|
+
* the tab link ripples.
|
|
1867
|
+
* @docs-private
|
|
1868
|
+
*/
|
|
1869
|
+
rippleConfig;
|
|
1780
1870
|
/**
|
|
1781
1871
|
* Whether ripples are disabled on interaction.
|
|
1782
1872
|
* @docs-private
|
|
@@ -1787,21 +1877,10 @@ class MatTabLink extends InkBarItem {
|
|
|
1787
1877
|
this._tabNavBar.disableRipple ||
|
|
1788
1878
|
!!this.rippleConfig.disabled);
|
|
1789
1879
|
}
|
|
1880
|
+
/** Unique id for the tab. */
|
|
1881
|
+
id = `mat-tab-link-${nextUniqueId++}`;
|
|
1790
1882
|
constructor() {
|
|
1791
1883
|
super();
|
|
1792
|
-
this._tabNavBar = inject(MatTabNav);
|
|
1793
|
-
this.elementRef = inject(ElementRef);
|
|
1794
|
-
this._focusMonitor = inject(FocusMonitor);
|
|
1795
|
-
this._destroyed = new Subject();
|
|
1796
|
-
/** Whether the tab link is active or not. */
|
|
1797
|
-
this._isActive = false;
|
|
1798
|
-
/** Whether the tab link is disabled. */
|
|
1799
|
-
this.disabled = false;
|
|
1800
|
-
/** Whether ripples are disabled on the tab link. */
|
|
1801
|
-
this.disableRipple = false;
|
|
1802
|
-
this.tabIndex = 0;
|
|
1803
|
-
/** Unique id for the tab. */
|
|
1804
|
-
this.id = `mat-tab-link-${nextUniqueId++}`;
|
|
1805
1884
|
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
1806
1885
|
const globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {
|
|
1807
1886
|
optional: true,
|
|
@@ -1879,10 +1958,10 @@ class MatTabLink extends InkBarItem {
|
|
|
1879
1958
|
return this.disabled ? -1 : this.tabIndex;
|
|
1880
1959
|
}
|
|
1881
1960
|
}
|
|
1882
|
-
static
|
|
1883
|
-
static
|
|
1961
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1962
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", 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 });
|
|
1884
1963
|
}
|
|
1885
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
1964
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLink, decorators: [{
|
|
1886
1965
|
type: Component,
|
|
1887
1966
|
args: [{ selector: '[mat-tab-link], [matTabLink]', exportAs: 'matTabLink', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1888
1967
|
'class': 'mdc-tab mat-mdc-tab-link mat-focus-indicator',
|
|
@@ -1897,7 +1976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1897
1976
|
'[class.mdc-tab--active]': 'active',
|
|
1898
1977
|
'(focus)': '_handleFocus()',
|
|
1899
1978
|
'(keydown)': '_handleKeydown($event)',
|
|
1900
|
-
},
|
|
1979
|
+
}, imports: [MatRipple], template: "<span class=\"mdc-tab__ripple\"></span>\n\n<div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"elementRef.nativeElement\"\n [matRippleDisabled]=\"rippleDisabled\"></div>\n\n<span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <ng-content></ng-content>\n </span>\n</span>\n\n", styles: [".mat-mdc-tab-link{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-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}}"] }]
|
|
1901
1980
|
}], ctorParameters: () => [], propDecorators: { active: [{
|
|
1902
1981
|
type: Input,
|
|
1903
1982
|
args: [{ transform: booleanAttribute }]
|
|
@@ -1919,14 +1998,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1919
1998
|
* Tab panel component associated with MatTabNav.
|
|
1920
1999
|
*/
|
|
1921
2000
|
class MatTabNavPanel {
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
static
|
|
1927
|
-
static
|
|
2001
|
+
/** Unique id for the tab panel. */
|
|
2002
|
+
id = `mat-tab-nav-panel-${nextUniqueId++}`;
|
|
2003
|
+
/** Id of the active tab in the nav bar. */
|
|
2004
|
+
_activeTabId;
|
|
2005
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2006
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.10", 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 });
|
|
1928
2007
|
}
|
|
1929
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
2008
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabNavPanel, decorators: [{
|
|
1930
2009
|
type: Component,
|
|
1931
2010
|
args: [{
|
|
1932
2011
|
selector: 'mat-tab-nav-panel',
|
|
@@ -1940,15 +2019,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
1940
2019
|
},
|
|
1941
2020
|
encapsulation: ViewEncapsulation.None,
|
|
1942
2021
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1943
|
-
standalone: true,
|
|
1944
2022
|
}]
|
|
1945
2023
|
}], propDecorators: { id: [{
|
|
1946
2024
|
type: Input
|
|
1947
2025
|
}] } });
|
|
1948
2026
|
|
|
1949
2027
|
class MatTabsModule {
|
|
1950
|
-
static
|
|
1951
|
-
static
|
|
2028
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2029
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabsModule, imports: [MatCommonModule,
|
|
1952
2030
|
MatTabContent,
|
|
1953
2031
|
MatTabLabel,
|
|
1954
2032
|
MatTab,
|
|
@@ -1962,10 +2040,10 @@ class MatTabsModule {
|
|
|
1962
2040
|
MatTabGroup,
|
|
1963
2041
|
MatTabNav,
|
|
1964
2042
|
MatTabNavPanel,
|
|
1965
|
-
MatTabLink] });
|
|
1966
|
-
static
|
|
2043
|
+
MatTabLink] });
|
|
2044
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabsModule, imports: [MatCommonModule, MatCommonModule] });
|
|
1967
2045
|
}
|
|
1968
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
2046
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabsModule, decorators: [{
|
|
1969
2047
|
type: NgModule,
|
|
1970
2048
|
args: [{
|
|
1971
2049
|
imports: [
|