@mxtommy/kip 3.9.0-beta.2 → 3.9.0-beta.21
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/.github/copilot-instructions.md +1 -1
- package/.github/instructions/angular.instructions.md +46 -0
- package/README.md +49 -12
- package/package.json +2 -4
- package/public/3rdpartylicenses.txt +77 -77
- package/public/app-help.component.css.map +7 -0
- package/public/app.component.css.map +7 -0
- package/public/assets/help-docs/configuration.md +4 -4
- package/public/assets/help-docs/dashboards.md +4 -2
- package/public/assets/svg/icons.svg +1 -1
- package/public/boolean-control-config.component.css.map +7 -0
- package/public/boolean-multicontrol-options.component.css.map +7 -0
- package/public/chunk-3EWIS24B.js +5237 -0
- package/public/chunk-3EWIS24B.js.map +1 -0
- package/public/chunk-3VR3EA35.js +1022 -0
- package/public/chunk-3VR3EA35.js.map +1 -0
- package/public/chunk-63ILPRXC.js +2091 -0
- package/public/chunk-63ILPRXC.js.map +1 -0
- package/public/chunk-65ZWQBS6.js +3102 -0
- package/public/chunk-65ZWQBS6.js.map +1 -0
- package/public/chunk-B3LKEWZP.js +4950 -0
- package/public/chunk-B3LKEWZP.js.map +1 -0
- package/public/chunk-BIBIW64D.js +16773 -0
- package/public/chunk-BIBIW64D.js.map +1 -0
- package/public/chunk-BM53SC5N.js +77 -0
- package/public/chunk-BM53SC5N.js.map +7 -0
- package/public/chunk-D7ILNFDM.js +3059 -0
- package/public/chunk-D7ILNFDM.js.map +1 -0
- package/public/chunk-E24UNLSJ.js +2228 -0
- package/public/chunk-E24UNLSJ.js.map +1 -0
- package/public/chunk-J42S2ELC.js +5927 -0
- package/public/chunk-J42S2ELC.js.map +1 -0
- package/public/chunk-KC22A6VH.js +17 -0
- package/public/chunk-KC22A6VH.js.map +7 -0
- package/public/chunk-MCEJWZB2.js +116 -0
- package/public/chunk-MCEJWZB2.js.map +1 -0
- package/public/chunk-NBF6SE6O.js +89 -0
- package/public/chunk-NBF6SE6O.js.map +7 -0
- package/public/chunk-QC7VGVAR.js +343 -0
- package/public/chunk-QC7VGVAR.js.map +7 -0
- package/public/chunk-SDOP6T56.js +42377 -0
- package/public/chunk-SDOP6T56.js.map +1 -0
- package/public/chunk-U2DCSTRY.js +159 -0
- package/public/chunk-U2DCSTRY.js.map +7 -0
- package/public/chunk-UHVNAEXC.js +4752 -0
- package/public/chunk-UHVNAEXC.js.map +1 -0
- package/public/chunk-UQYTD5AC.js +2723 -0
- package/public/chunk-UQYTD5AC.js.map +1 -0
- package/public/chunk-XSABJ5NZ.js +272 -0
- package/public/chunk-XSABJ5NZ.js.map +7 -0
- package/public/chunk-Y6N6O2IP.js +19852 -0
- package/public/chunk-Y6N6O2IP.js.map +1 -0
- package/public/chunk-YGJLBLOX.js +2708 -0
- package/public/chunk-YGJLBLOX.js.map +1 -0
- package/public/chunk-YT33DHC3.js +591 -0
- package/public/chunk-YT33DHC3.js.map +7 -0
- package/public/chunk-YZXYVP72.js +4934 -0
- package/public/chunk-YZXYVP72.js.map +1 -0
- package/public/chunk-ZEHRDSTB.js +13727 -0
- package/public/chunk-ZEHRDSTB.js.map +1 -0
- package/public/config.component.css.map +7 -0
- package/public/dashboard-scroller.component.css.map +7 -0
- package/public/dashboard.component.css.map +7 -0
- package/public/dashboards-editor.component.css.map +7 -0
- package/public/data-inspector-row.component.css.map +7 -0
- package/public/data-inspector.component.css.map +7 -0
- package/public/dataset-chart-options.component.css.map +7 -0
- package/public/datasets.component.css.map +7 -0
- package/public/dialog-confirmation.component.css.map +7 -0
- package/public/dialog-dashboard-page-editor.component.css.map +7 -0
- package/public/dialog-frame.component.css.map +7 -0
- package/public/dialog-name.component.css.map +7 -0
- package/public/display-chart-options.component.css.map +7 -0
- package/public/display.component.css.map +7 -0
- package/public/gauge-steel.component.css.map +7 -0
- package/public/home.component.css.map +7 -0
- package/public/index.html +19 -17
- package/public/main.js +36423 -0
- package/public/main.js.map +1 -0
- package/public/menu-actions.component.css.map +7 -0
- package/public/menu-notifications.component.css.map +7 -0
- package/public/minichart.component.css.map +7 -0
- package/public/modal-user-credential.component.css.map +7 -0
- package/public/modal-widget-config.component.css.map +7 -0
- package/public/notification-badge.component.css.map +7 -0
- package/public/page-header.component.css.map +7 -0
- package/public/path-control-config.component.css.map +7 -0
- package/public/paths-options.component.css.map +7 -0
- package/public/polyfills.js +4422 -0
- package/public/polyfills.js.map +1 -0
- package/public/select-autopilot.component.css.map +7 -0
- package/public/select-icon.component.css.map +7 -0
- package/public/settings.component.css.map +7 -0
- package/public/signalk.component.css.map +7 -0
- package/public/styles.css +1651 -0
- package/public/styles.css.map +7 -0
- package/public/svg-autopilot.component.css.map +7 -0
- package/public/svg-racesteer.component.css.map +7 -0
- package/public/svg-simple-linear-gauge.component.css.map +7 -0
- package/public/svg-windsteer.component.css.map +7 -0
- package/public/tile-large-icon.component.css.map +7 -0
- package/public/units.component.css.map +7 -0
- package/public/upgrade-config.component.css.map +7 -0
- package/public/widget-autopilot.component.css.map +7 -0
- package/public/widget-boolean-switch.component.css.map +7 -0
- package/public/widget-datetime.component.css.map +7 -0
- package/public/widget-freeboardsk.component.css.map +7 -0
- package/public/widget-gauge-ng-compass.component.css.map +7 -0
- package/public/widget-gauge-ng-linear.component.css.map +7 -0
- package/public/widget-gauge-ng-radial.component.css.map +7 -0
- package/public/widget-gauge-steel.component.css.map +7 -0
- package/public/widget-horizon.component.css.map +7 -0
- package/public/widget-host.component.css.map +7 -0
- package/public/widget-iframe.component.css.map +7 -0
- package/public/widget-label.component.css.map +7 -0
- package/public/widget-list-card.component.css.map +7 -0
- package/public/widget-numeric.component.css.map +7 -0
- package/public/widget-position.component.css.map +7 -0
- package/public/widget-race-timer.component.css.map +7 -0
- package/public/widget-racer-line.component.css.map +7 -0
- package/public/widget-racer-timer.component.css.map +7 -0
- package/public/widget-simple-linear.component.css.map +7 -0
- package/public/widget-slider.component.css.map +7 -0
- package/public/widget-text.component.css.map +7 -0
- package/public/widget-title.component.css.map +7 -0
- package/public/widget-tutorial.component.css.map +7 -0
- package/public/widgets-list.component.css.map +7 -0
- package/public/assets/hammer.min.js +0 -7
- package/public/chunk-2YVW3TBK.js +0 -2
- package/public/chunk-35L7BBBD.js +0 -15
- package/public/chunk-3LEMFOCV.js +0 -3
- package/public/chunk-3LJAKLLW.js +0 -1
- package/public/chunk-4JJLPUET.js +0 -60
- package/public/chunk-CBUY7NMR.js +0 -2
- package/public/chunk-CQXWGD3T.js +0 -2
- package/public/chunk-EUFDL4TJ.js +0 -6
- package/public/chunk-FBFTGVZ6.js +0 -1
- package/public/chunk-HCXH72CD.js +0 -5
- package/public/chunk-JY3WVS7C.js +0 -2
- package/public/chunk-KTDDP73O.js +0 -2
- package/public/chunk-NMEZOCU2.js +0 -1
- package/public/chunk-NS2FPVWM.js +0 -4
- package/public/chunk-OSYHJB4F.js +0 -11
- package/public/chunk-PKNLASTF.js +0 -4
- package/public/chunk-Q2Y75POI.js +0 -1
- package/public/chunk-RRTCHHRC.js +0 -3
- package/public/chunk-TA4GACKT.js +0 -4
- package/public/chunk-TXPLRBW5.js +0 -2
- package/public/chunk-VHFBF47T.js +0 -1
- package/public/chunk-VYUMZVH2.js +0 -2
- package/public/chunk-XRGAX4LS.js +0 -2
- package/public/chunk-YNJRIFUM.js +0 -1
- package/public/chunk-ZBCOJLI4.js +0 -6
- package/public/main-XM5EHMUE.js +0 -50
- package/public/polyfills-KH22MU6U.js +0 -2
- package/public/styles-RECKN66R.css +0 -1
- /package/public/media/{KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP-ILKS6RVC.woff2 → KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ-MJ3CERJ6.woff2 → KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP-UW3XWY7P.woff2 → KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP-U3JTBV4H.woff2 → KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP-36ULTGLY.woff2 → KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP-5NJLO2HW.woff2 → KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP-2EL65J2O.woff2 → KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP-XWLWMQVU.woff2 → KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ-PWGJWDFE.woff2 → KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP-ITB7NUJC.woff2 → KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP-32PLHKPQ.woff2 → KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP-QPSNQEDD.woff2 → KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP-JKBSJZY3.woff2 → KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP-OG5AHRIX.woff2 → KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2} +0 -0
- /package/public/media/{KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz-PPTELUJT.woff2 → KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2} +0 -0
- /package/public/media/{KFOmCnqEu92Fr1Mu4mxKKTU1Kg-SNGEW7FX.woff2 → KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2} +0 -0
- /package/public/media/{KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz-DRL4U32S.woff2 → KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2} +0 -0
- /package/public/media/{KFOmCnqEu92Fr1Mu72xKKTU1Kvnz-PRJ7OQMU.woff2 → KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2} +0 -0
- /package/public/media/{KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz-HW6RMPJ3.woff2 → KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2} +0 -0
- /package/public/media/{KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz-KZD6JQRT.woff2 → KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2} +0 -0
- /package/public/media/{KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz-Z72STTMG.woff2 → KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2} +0 -0
- /package/public/media/{flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ-CN2J7AYH.woff2 → flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2} +0 -0
|
@@ -0,0 +1,3059 @@
|
|
|
1
|
+
import {
|
|
2
|
+
SharedResizeObserver,
|
|
3
|
+
SignalKConnectionService
|
|
4
|
+
} from "./chunk-BIBIW64D.js";
|
|
5
|
+
import {
|
|
6
|
+
BehaviorSubject,
|
|
7
|
+
CdkMonitorFocus,
|
|
8
|
+
CdkObserveContent,
|
|
9
|
+
CdkPortal,
|
|
10
|
+
CdkPortalOutlet,
|
|
11
|
+
CdkScrollable,
|
|
12
|
+
ChangeDetectionStrategy,
|
|
13
|
+
ChangeDetectorRef,
|
|
14
|
+
Component,
|
|
15
|
+
ContentChild,
|
|
16
|
+
ContentChildren,
|
|
17
|
+
Directionality,
|
|
18
|
+
Directive,
|
|
19
|
+
EMPTY,
|
|
20
|
+
ENTER,
|
|
21
|
+
ElementRef,
|
|
22
|
+
EventEmitter,
|
|
23
|
+
FocusKeyManager,
|
|
24
|
+
FocusMonitor,
|
|
25
|
+
HostAttributeToken,
|
|
26
|
+
Injectable,
|
|
27
|
+
InjectionToken,
|
|
28
|
+
Injector,
|
|
29
|
+
Input,
|
|
30
|
+
MAT_RIPPLE_GLOBAL_OPTIONS,
|
|
31
|
+
MatCommonModule,
|
|
32
|
+
MatRipple,
|
|
33
|
+
NgModule,
|
|
34
|
+
NgZone,
|
|
35
|
+
Observable,
|
|
36
|
+
Output,
|
|
37
|
+
Platform,
|
|
38
|
+
QueryList,
|
|
39
|
+
Renderer2,
|
|
40
|
+
SPACE,
|
|
41
|
+
Subject,
|
|
42
|
+
Subscription,
|
|
43
|
+
TemplatePortal,
|
|
44
|
+
TemplateRef,
|
|
45
|
+
ViewChild,
|
|
46
|
+
ViewChildren,
|
|
47
|
+
ViewContainerRef,
|
|
48
|
+
ViewEncapsulation,
|
|
49
|
+
ViewportRuler,
|
|
50
|
+
_CdkPrivateStyleLoader,
|
|
51
|
+
_IdGenerator,
|
|
52
|
+
_StructuralStylesLoader,
|
|
53
|
+
__async,
|
|
54
|
+
_animationsDisabled,
|
|
55
|
+
afterNextRender,
|
|
56
|
+
booleanAttribute,
|
|
57
|
+
computed,
|
|
58
|
+
debounceTime,
|
|
59
|
+
filter,
|
|
60
|
+
forwardRef,
|
|
61
|
+
hasModifierKey,
|
|
62
|
+
inject,
|
|
63
|
+
merge,
|
|
64
|
+
numberAttribute,
|
|
65
|
+
of,
|
|
66
|
+
resource,
|
|
67
|
+
setClassMetadata,
|
|
68
|
+
signal,
|
|
69
|
+
skip,
|
|
70
|
+
startWith,
|
|
71
|
+
switchMap,
|
|
72
|
+
takeUntil,
|
|
73
|
+
timer,
|
|
74
|
+
toSignal,
|
|
75
|
+
ɵɵInheritDefinitionFeature,
|
|
76
|
+
ɵɵNgOnChangesFeature,
|
|
77
|
+
ɵɵProvidersFeature,
|
|
78
|
+
ɵɵadvance,
|
|
79
|
+
ɵɵattribute,
|
|
80
|
+
ɵɵclassMap,
|
|
81
|
+
ɵɵclassProp,
|
|
82
|
+
ɵɵconditional,
|
|
83
|
+
ɵɵconditionalCreate,
|
|
84
|
+
ɵɵcontentQuery,
|
|
85
|
+
ɵɵdefineComponent,
|
|
86
|
+
ɵɵdefineDirective,
|
|
87
|
+
ɵɵdefineInjectable,
|
|
88
|
+
ɵɵdefineInjector,
|
|
89
|
+
ɵɵdefineNgModule,
|
|
90
|
+
ɵɵdomTemplate,
|
|
91
|
+
ɵɵelement,
|
|
92
|
+
ɵɵelementEnd,
|
|
93
|
+
ɵɵelementStart,
|
|
94
|
+
ɵɵgetCurrentView,
|
|
95
|
+
ɵɵgetInheritedFactory,
|
|
96
|
+
ɵɵlistener,
|
|
97
|
+
ɵɵloadQuery,
|
|
98
|
+
ɵɵnextContext,
|
|
99
|
+
ɵɵprojection,
|
|
100
|
+
ɵɵprojectionDef,
|
|
101
|
+
ɵɵproperty,
|
|
102
|
+
ɵɵqueryRefresh,
|
|
103
|
+
ɵɵreference,
|
|
104
|
+
ɵɵrepeater,
|
|
105
|
+
ɵɵrepeaterCreate,
|
|
106
|
+
ɵɵrepeaterTrackByIdentity,
|
|
107
|
+
ɵɵresetView,
|
|
108
|
+
ɵɵrestoreView,
|
|
109
|
+
ɵɵstyleProp,
|
|
110
|
+
ɵɵtemplate,
|
|
111
|
+
ɵɵtext,
|
|
112
|
+
ɵɵtextInterpolate,
|
|
113
|
+
ɵɵviewQuery
|
|
114
|
+
} from "./chunk-SDOP6T56.js";
|
|
115
|
+
|
|
116
|
+
// node_modules/@angular/material/fesm2022/tabs.mjs
|
|
117
|
+
var _c0 = ["*"];
|
|
118
|
+
function MatTab_ng_template_0_Template(rf, ctx) {
|
|
119
|
+
if (rf & 1) {
|
|
120
|
+
\u0275\u0275projection(0);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
var _c1 = ["tabListContainer"];
|
|
124
|
+
var _c2 = ["tabList"];
|
|
125
|
+
var _c3 = ["tabListInner"];
|
|
126
|
+
var _c4 = ["nextPaginator"];
|
|
127
|
+
var _c5 = ["previousPaginator"];
|
|
128
|
+
var _c6 = ["content"];
|
|
129
|
+
function MatTabBody_ng_template_2_Template(rf, ctx) {
|
|
130
|
+
}
|
|
131
|
+
var _c7 = ["tabBodyWrapper"];
|
|
132
|
+
var _c8 = ["tabHeader"];
|
|
133
|
+
function MatTabGroup_For_3_Conditional_6_ng_template_0_Template(rf, ctx) {
|
|
134
|
+
}
|
|
135
|
+
function MatTabGroup_For_3_Conditional_6_Template(rf, ctx) {
|
|
136
|
+
if (rf & 1) {
|
|
137
|
+
\u0275\u0275template(0, MatTabGroup_For_3_Conditional_6_ng_template_0_Template, 0, 0, "ng-template", 12);
|
|
138
|
+
}
|
|
139
|
+
if (rf & 2) {
|
|
140
|
+
const tab_r4 = \u0275\u0275nextContext().$implicit;
|
|
141
|
+
\u0275\u0275property("cdkPortalOutlet", tab_r4.templateLabel);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
function MatTabGroup_For_3_Conditional_7_Template(rf, ctx) {
|
|
145
|
+
if (rf & 1) {
|
|
146
|
+
\u0275\u0275text(0);
|
|
147
|
+
}
|
|
148
|
+
if (rf & 2) {
|
|
149
|
+
const tab_r4 = \u0275\u0275nextContext().$implicit;
|
|
150
|
+
\u0275\u0275textInterpolate(tab_r4.textLabel);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
function MatTabGroup_For_3_Template(rf, ctx) {
|
|
154
|
+
if (rf & 1) {
|
|
155
|
+
const _r2 = \u0275\u0275getCurrentView();
|
|
156
|
+
\u0275\u0275elementStart(0, "div", 7, 2);
|
|
157
|
+
\u0275\u0275listener("click", function MatTabGroup_For_3_Template_div_click_0_listener() {
|
|
158
|
+
const ctx_r2 = \u0275\u0275restoreView(_r2);
|
|
159
|
+
const tab_r4 = ctx_r2.$implicit;
|
|
160
|
+
const $index_r5 = ctx_r2.$index;
|
|
161
|
+
const ctx_r5 = \u0275\u0275nextContext();
|
|
162
|
+
const tabHeader_r7 = \u0275\u0275reference(1);
|
|
163
|
+
return \u0275\u0275resetView(ctx_r5._handleClick(tab_r4, tabHeader_r7, $index_r5));
|
|
164
|
+
})("cdkFocusChange", function MatTabGroup_For_3_Template_div_cdkFocusChange_0_listener($event) {
|
|
165
|
+
const $index_r5 = \u0275\u0275restoreView(_r2).$index;
|
|
166
|
+
const ctx_r5 = \u0275\u0275nextContext();
|
|
167
|
+
return \u0275\u0275resetView(ctx_r5._tabFocusChanged($event, $index_r5));
|
|
168
|
+
});
|
|
169
|
+
\u0275\u0275element(2, "span", 8)(3, "div", 9);
|
|
170
|
+
\u0275\u0275elementStart(4, "span", 10)(5, "span", 11);
|
|
171
|
+
\u0275\u0275conditionalCreate(6, MatTabGroup_For_3_Conditional_6_Template, 1, 1, null, 12)(7, MatTabGroup_For_3_Conditional_7_Template, 1, 1);
|
|
172
|
+
\u0275\u0275elementEnd()()();
|
|
173
|
+
}
|
|
174
|
+
if (rf & 2) {
|
|
175
|
+
const tab_r4 = ctx.$implicit;
|
|
176
|
+
const $index_r5 = ctx.$index;
|
|
177
|
+
const tabNode_r8 = \u0275\u0275reference(1);
|
|
178
|
+
const ctx_r5 = \u0275\u0275nextContext();
|
|
179
|
+
\u0275\u0275classMap(tab_r4.labelClass);
|
|
180
|
+
\u0275\u0275classProp("mdc-tab--active", ctx_r5.selectedIndex === $index_r5);
|
|
181
|
+
\u0275\u0275property("id", ctx_r5._getTabLabelId(tab_r4, $index_r5))("disabled", tab_r4.disabled)("fitInkBarToContent", ctx_r5.fitInkBarToContent);
|
|
182
|
+
\u0275\u0275attribute("tabIndex", ctx_r5._getTabIndex($index_r5))("aria-posinset", $index_r5 + 1)("aria-setsize", ctx_r5._tabs.length)("aria-controls", ctx_r5._getTabContentId($index_r5))("aria-selected", ctx_r5.selectedIndex === $index_r5)("aria-label", tab_r4.ariaLabel || null)("aria-labelledby", !tab_r4.ariaLabel && tab_r4.ariaLabelledby ? tab_r4.ariaLabelledby : null);
|
|
183
|
+
\u0275\u0275advance(3);
|
|
184
|
+
\u0275\u0275property("matRippleTrigger", tabNode_r8)("matRippleDisabled", tab_r4.disabled || ctx_r5.disableRipple);
|
|
185
|
+
\u0275\u0275advance(3);
|
|
186
|
+
\u0275\u0275conditional(tab_r4.templateLabel ? 6 : 7);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
function MatTabGroup_Conditional_4_Template(rf, ctx) {
|
|
190
|
+
if (rf & 1) {
|
|
191
|
+
\u0275\u0275projection(0);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
function MatTabGroup_For_8_Template(rf, ctx) {
|
|
195
|
+
if (rf & 1) {
|
|
196
|
+
const _r9 = \u0275\u0275getCurrentView();
|
|
197
|
+
\u0275\u0275elementStart(0, "mat-tab-body", 13);
|
|
198
|
+
\u0275\u0275listener("_onCentered", function MatTabGroup_For_8_Template_mat_tab_body__onCentered_0_listener() {
|
|
199
|
+
\u0275\u0275restoreView(_r9);
|
|
200
|
+
const ctx_r5 = \u0275\u0275nextContext();
|
|
201
|
+
return \u0275\u0275resetView(ctx_r5._removeTabBodyWrapperHeight());
|
|
202
|
+
})("_onCentering", function MatTabGroup_For_8_Template_mat_tab_body__onCentering_0_listener($event) {
|
|
203
|
+
\u0275\u0275restoreView(_r9);
|
|
204
|
+
const ctx_r5 = \u0275\u0275nextContext();
|
|
205
|
+
return \u0275\u0275resetView(ctx_r5._setTabBodyWrapperHeight($event));
|
|
206
|
+
})("_beforeCentering", function MatTabGroup_For_8_Template_mat_tab_body__beforeCentering_0_listener($event) {
|
|
207
|
+
\u0275\u0275restoreView(_r9);
|
|
208
|
+
const ctx_r5 = \u0275\u0275nextContext();
|
|
209
|
+
return \u0275\u0275resetView(ctx_r5._bodyCentered($event));
|
|
210
|
+
});
|
|
211
|
+
\u0275\u0275elementEnd();
|
|
212
|
+
}
|
|
213
|
+
if (rf & 2) {
|
|
214
|
+
const tab_r10 = ctx.$implicit;
|
|
215
|
+
const $index_r11 = ctx.$index;
|
|
216
|
+
const ctx_r5 = \u0275\u0275nextContext();
|
|
217
|
+
\u0275\u0275classMap(tab_r10.bodyClass);
|
|
218
|
+
\u0275\u0275property("id", ctx_r5._getTabContentId($index_r11))("content", tab_r10.content)("position", tab_r10.position)("animationDuration", ctx_r5.animationDuration)("preserveContent", ctx_r5.preserveContent);
|
|
219
|
+
\u0275\u0275attribute("tabindex", ctx_r5.contentTabIndex != null && ctx_r5.selectedIndex === $index_r11 ? ctx_r5.contentTabIndex : null)("aria-labelledby", ctx_r5._getTabLabelId(tab_r10, $index_r11))("aria-hidden", ctx_r5.selectedIndex !== $index_r11);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
var _c9 = ["mat-tab-nav-bar", ""];
|
|
223
|
+
var _c10 = ["mat-tab-link", ""];
|
|
224
|
+
var MAT_TAB_CONTENT = new InjectionToken("MatTabContent");
|
|
225
|
+
var MatTabContent = class _MatTabContent {
|
|
226
|
+
template = inject(TemplateRef);
|
|
227
|
+
constructor() {
|
|
228
|
+
}
|
|
229
|
+
static \u0275fac = function MatTabContent_Factory(__ngFactoryType__) {
|
|
230
|
+
return new (__ngFactoryType__ || _MatTabContent)();
|
|
231
|
+
};
|
|
232
|
+
static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
|
|
233
|
+
type: _MatTabContent,
|
|
234
|
+
selectors: [["", "matTabContent", ""]],
|
|
235
|
+
features: [\u0275\u0275ProvidersFeature([{
|
|
236
|
+
provide: MAT_TAB_CONTENT,
|
|
237
|
+
useExisting: _MatTabContent
|
|
238
|
+
}])]
|
|
239
|
+
});
|
|
240
|
+
};
|
|
241
|
+
(() => {
|
|
242
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabContent, [{
|
|
243
|
+
type: Directive,
|
|
244
|
+
args: [{
|
|
245
|
+
selector: "[matTabContent]",
|
|
246
|
+
providers: [{
|
|
247
|
+
provide: MAT_TAB_CONTENT,
|
|
248
|
+
useExisting: MatTabContent
|
|
249
|
+
}]
|
|
250
|
+
}]
|
|
251
|
+
}], () => [], null);
|
|
252
|
+
})();
|
|
253
|
+
var MAT_TAB_LABEL = new InjectionToken("MatTabLabel");
|
|
254
|
+
var MAT_TAB = new InjectionToken("MAT_TAB");
|
|
255
|
+
var MatTabLabel = class _MatTabLabel extends CdkPortal {
|
|
256
|
+
_closestTab = inject(MAT_TAB, {
|
|
257
|
+
optional: true
|
|
258
|
+
});
|
|
259
|
+
static \u0275fac = /* @__PURE__ */ (() => {
|
|
260
|
+
let \u0275MatTabLabel_BaseFactory;
|
|
261
|
+
return function MatTabLabel_Factory(__ngFactoryType__) {
|
|
262
|
+
return (\u0275MatTabLabel_BaseFactory || (\u0275MatTabLabel_BaseFactory = \u0275\u0275getInheritedFactory(_MatTabLabel)))(__ngFactoryType__ || _MatTabLabel);
|
|
263
|
+
};
|
|
264
|
+
})();
|
|
265
|
+
static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
|
|
266
|
+
type: _MatTabLabel,
|
|
267
|
+
selectors: [["", "mat-tab-label", ""], ["", "matTabLabel", ""]],
|
|
268
|
+
features: [\u0275\u0275ProvidersFeature([{
|
|
269
|
+
provide: MAT_TAB_LABEL,
|
|
270
|
+
useExisting: _MatTabLabel
|
|
271
|
+
}]), \u0275\u0275InheritDefinitionFeature]
|
|
272
|
+
});
|
|
273
|
+
};
|
|
274
|
+
(() => {
|
|
275
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabLabel, [{
|
|
276
|
+
type: Directive,
|
|
277
|
+
args: [{
|
|
278
|
+
selector: "[mat-tab-label], [matTabLabel]",
|
|
279
|
+
providers: [{
|
|
280
|
+
provide: MAT_TAB_LABEL,
|
|
281
|
+
useExisting: MatTabLabel
|
|
282
|
+
}]
|
|
283
|
+
}]
|
|
284
|
+
}], null, null);
|
|
285
|
+
})();
|
|
286
|
+
var MAT_TAB_GROUP = new InjectionToken("MAT_TAB_GROUP");
|
|
287
|
+
var MatTab = class _MatTab {
|
|
288
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
289
|
+
_closestTabGroup = inject(MAT_TAB_GROUP, {
|
|
290
|
+
optional: true
|
|
291
|
+
});
|
|
292
|
+
/** whether the tab is disabled. */
|
|
293
|
+
disabled = false;
|
|
294
|
+
/** Content for the tab label given by `<ng-template mat-tab-label>`. */
|
|
295
|
+
get templateLabel() {
|
|
296
|
+
return this._templateLabel;
|
|
297
|
+
}
|
|
298
|
+
set templateLabel(value) {
|
|
299
|
+
this._setTemplateLabelInput(value);
|
|
300
|
+
}
|
|
301
|
+
_templateLabel;
|
|
302
|
+
/**
|
|
303
|
+
* Template provided in the tab content that will be used if present, used to enable lazy-loading
|
|
304
|
+
*/
|
|
305
|
+
_explicitContent = void 0;
|
|
306
|
+
/** Template inside the MatTab view that contains an `<ng-content>`. */
|
|
307
|
+
_implicitContent;
|
|
308
|
+
/** Plain text label for the tab, used when there is no template label. */
|
|
309
|
+
textLabel = "";
|
|
310
|
+
/** Aria label for the tab. */
|
|
311
|
+
ariaLabel;
|
|
312
|
+
/**
|
|
313
|
+
* Reference to the element that the tab is labelled by.
|
|
314
|
+
* Will be cleared if `aria-label` is set at the same time.
|
|
315
|
+
*/
|
|
316
|
+
ariaLabelledby;
|
|
317
|
+
/** Classes to be passed to the tab label inside the mat-tab-header container. */
|
|
318
|
+
labelClass;
|
|
319
|
+
/** Classes to be passed to the tab mat-tab-body container. */
|
|
320
|
+
bodyClass;
|
|
321
|
+
/**
|
|
322
|
+
* Custom ID for the tab, overriding the auto-generated one by Material.
|
|
323
|
+
* Note that when using this input, it's your responsibility to ensure that the ID is unique.
|
|
324
|
+
*/
|
|
325
|
+
id = null;
|
|
326
|
+
/** Portal that will be the hosted content of the tab */
|
|
327
|
+
_contentPortal = null;
|
|
328
|
+
/** @docs-private */
|
|
329
|
+
get content() {
|
|
330
|
+
return this._contentPortal;
|
|
331
|
+
}
|
|
332
|
+
/** Emits whenever the internal state of the tab changes. */
|
|
333
|
+
_stateChanges = new Subject();
|
|
334
|
+
/**
|
|
335
|
+
* The relatively indexed position where 0 represents the center, negative is left, and positive
|
|
336
|
+
* represents the right.
|
|
337
|
+
*/
|
|
338
|
+
position = null;
|
|
339
|
+
// TODO(crisbeto): we no longer use this, but some internal apps appear to rely on it.
|
|
340
|
+
/**
|
|
341
|
+
* The initial relatively index origin of the tab if it was created and selected after there
|
|
342
|
+
* was already a selected tab. Provides context of what position the tab should originate from.
|
|
343
|
+
*/
|
|
344
|
+
origin = null;
|
|
345
|
+
/**
|
|
346
|
+
* Whether the tab is currently active.
|
|
347
|
+
*/
|
|
348
|
+
isActive = false;
|
|
349
|
+
constructor() {
|
|
350
|
+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
351
|
+
}
|
|
352
|
+
ngOnChanges(changes) {
|
|
353
|
+
if (changes.hasOwnProperty("textLabel") || changes.hasOwnProperty("disabled")) {
|
|
354
|
+
this._stateChanges.next();
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
ngOnDestroy() {
|
|
358
|
+
this._stateChanges.complete();
|
|
359
|
+
}
|
|
360
|
+
ngOnInit() {
|
|
361
|
+
this._contentPortal = new TemplatePortal(this._explicitContent || this._implicitContent, this._viewContainerRef);
|
|
362
|
+
}
|
|
363
|
+
/**
|
|
364
|
+
* This has been extracted to a util because of TS 4 and VE.
|
|
365
|
+
* View Engine doesn't support property rename inheritance.
|
|
366
|
+
* TS 4.0 doesn't allow properties to override accessors or vice-versa.
|
|
367
|
+
* @docs-private
|
|
368
|
+
*/
|
|
369
|
+
_setTemplateLabelInput(value) {
|
|
370
|
+
if (value && value._closestTab === this) {
|
|
371
|
+
this._templateLabel = value;
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
static \u0275fac = function MatTab_Factory(__ngFactoryType__) {
|
|
375
|
+
return new (__ngFactoryType__ || _MatTab)();
|
|
376
|
+
};
|
|
377
|
+
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
|
|
378
|
+
type: _MatTab,
|
|
379
|
+
selectors: [["mat-tab"]],
|
|
380
|
+
contentQueries: function MatTab_ContentQueries(rf, ctx, dirIndex) {
|
|
381
|
+
if (rf & 1) {
|
|
382
|
+
\u0275\u0275contentQuery(dirIndex, MatTabLabel, 5);
|
|
383
|
+
\u0275\u0275contentQuery(dirIndex, MatTabContent, 7, TemplateRef);
|
|
384
|
+
}
|
|
385
|
+
if (rf & 2) {
|
|
386
|
+
let _t;
|
|
387
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx.templateLabel = _t.first);
|
|
388
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._explicitContent = _t.first);
|
|
389
|
+
}
|
|
390
|
+
},
|
|
391
|
+
viewQuery: function MatTab_Query(rf, ctx) {
|
|
392
|
+
if (rf & 1) {
|
|
393
|
+
\u0275\u0275viewQuery(TemplateRef, 7);
|
|
394
|
+
}
|
|
395
|
+
if (rf & 2) {
|
|
396
|
+
let _t;
|
|
397
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._implicitContent = _t.first);
|
|
398
|
+
}
|
|
399
|
+
},
|
|
400
|
+
hostAttrs: ["hidden", ""],
|
|
401
|
+
hostVars: 1,
|
|
402
|
+
hostBindings: function MatTab_HostBindings(rf, ctx) {
|
|
403
|
+
if (rf & 2) {
|
|
404
|
+
\u0275\u0275attribute("id", null);
|
|
405
|
+
}
|
|
406
|
+
},
|
|
407
|
+
inputs: {
|
|
408
|
+
disabled: [2, "disabled", "disabled", booleanAttribute],
|
|
409
|
+
textLabel: [0, "label", "textLabel"],
|
|
410
|
+
ariaLabel: [0, "aria-label", "ariaLabel"],
|
|
411
|
+
ariaLabelledby: [0, "aria-labelledby", "ariaLabelledby"],
|
|
412
|
+
labelClass: "labelClass",
|
|
413
|
+
bodyClass: "bodyClass",
|
|
414
|
+
id: "id"
|
|
415
|
+
},
|
|
416
|
+
exportAs: ["matTab"],
|
|
417
|
+
features: [\u0275\u0275ProvidersFeature([{
|
|
418
|
+
provide: MAT_TAB,
|
|
419
|
+
useExisting: _MatTab
|
|
420
|
+
}]), \u0275\u0275NgOnChangesFeature],
|
|
421
|
+
ngContentSelectors: _c0,
|
|
422
|
+
decls: 1,
|
|
423
|
+
vars: 0,
|
|
424
|
+
template: function MatTab_Template(rf, ctx) {
|
|
425
|
+
if (rf & 1) {
|
|
426
|
+
\u0275\u0275projectionDef();
|
|
427
|
+
\u0275\u0275domTemplate(0, MatTab_ng_template_0_Template, 1, 0, "ng-template");
|
|
428
|
+
}
|
|
429
|
+
},
|
|
430
|
+
encapsulation: 2
|
|
431
|
+
});
|
|
432
|
+
};
|
|
433
|
+
(() => {
|
|
434
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTab, [{
|
|
435
|
+
type: Component,
|
|
436
|
+
args: [{
|
|
437
|
+
selector: "mat-tab",
|
|
438
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
439
|
+
encapsulation: ViewEncapsulation.None,
|
|
440
|
+
exportAs: "matTab",
|
|
441
|
+
providers: [{
|
|
442
|
+
provide: MAT_TAB,
|
|
443
|
+
useExisting: MatTab
|
|
444
|
+
}],
|
|
445
|
+
host: {
|
|
446
|
+
// This element will be rendered on the server in order to support hydration.
|
|
447
|
+
// Hide it so it doesn't cause a layout shift when it's removed on the client.
|
|
448
|
+
"hidden": "",
|
|
449
|
+
// Clear any custom IDs from the tab since they'll be forwarded to the actual tab.
|
|
450
|
+
"[attr.id]": "null"
|
|
451
|
+
},
|
|
452
|
+
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"
|
|
453
|
+
}]
|
|
454
|
+
}], () => [], {
|
|
455
|
+
disabled: [{
|
|
456
|
+
type: Input,
|
|
457
|
+
args: [{
|
|
458
|
+
transform: booleanAttribute
|
|
459
|
+
}]
|
|
460
|
+
}],
|
|
461
|
+
templateLabel: [{
|
|
462
|
+
type: ContentChild,
|
|
463
|
+
args: [MatTabLabel]
|
|
464
|
+
}],
|
|
465
|
+
_explicitContent: [{
|
|
466
|
+
type: ContentChild,
|
|
467
|
+
args: [MatTabContent, {
|
|
468
|
+
read: TemplateRef,
|
|
469
|
+
static: true
|
|
470
|
+
}]
|
|
471
|
+
}],
|
|
472
|
+
_implicitContent: [{
|
|
473
|
+
type: ViewChild,
|
|
474
|
+
args: [TemplateRef, {
|
|
475
|
+
static: true
|
|
476
|
+
}]
|
|
477
|
+
}],
|
|
478
|
+
textLabel: [{
|
|
479
|
+
type: Input,
|
|
480
|
+
args: ["label"]
|
|
481
|
+
}],
|
|
482
|
+
ariaLabel: [{
|
|
483
|
+
type: Input,
|
|
484
|
+
args: ["aria-label"]
|
|
485
|
+
}],
|
|
486
|
+
ariaLabelledby: [{
|
|
487
|
+
type: Input,
|
|
488
|
+
args: ["aria-labelledby"]
|
|
489
|
+
}],
|
|
490
|
+
labelClass: [{
|
|
491
|
+
type: Input
|
|
492
|
+
}],
|
|
493
|
+
bodyClass: [{
|
|
494
|
+
type: Input
|
|
495
|
+
}],
|
|
496
|
+
id: [{
|
|
497
|
+
type: Input
|
|
498
|
+
}]
|
|
499
|
+
});
|
|
500
|
+
})();
|
|
501
|
+
var ACTIVE_CLASS = "mdc-tab-indicator--active";
|
|
502
|
+
var NO_TRANSITION_CLASS = "mdc-tab-indicator--no-transition";
|
|
503
|
+
var MatInkBar = class {
|
|
504
|
+
_items;
|
|
505
|
+
/** Item to which the ink bar is aligned currently. */
|
|
506
|
+
_currentItem;
|
|
507
|
+
constructor(_items) {
|
|
508
|
+
this._items = _items;
|
|
509
|
+
}
|
|
510
|
+
/** Hides the ink bar. */
|
|
511
|
+
hide() {
|
|
512
|
+
this._items.forEach((item) => item.deactivateInkBar());
|
|
513
|
+
this._currentItem = void 0;
|
|
514
|
+
}
|
|
515
|
+
/** Aligns the ink bar to a DOM node. */
|
|
516
|
+
alignToElement(element) {
|
|
517
|
+
const correspondingItem = this._items.find((item) => item.elementRef.nativeElement === element);
|
|
518
|
+
const currentItem = this._currentItem;
|
|
519
|
+
if (correspondingItem === currentItem) {
|
|
520
|
+
return;
|
|
521
|
+
}
|
|
522
|
+
currentItem?.deactivateInkBar();
|
|
523
|
+
if (correspondingItem) {
|
|
524
|
+
const domRect = currentItem?.elementRef.nativeElement.getBoundingClientRect?.();
|
|
525
|
+
correspondingItem.activateInkBar(domRect);
|
|
526
|
+
this._currentItem = correspondingItem;
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
};
|
|
530
|
+
var InkBarItem = class _InkBarItem {
|
|
531
|
+
_elementRef = inject(ElementRef);
|
|
532
|
+
_inkBarElement;
|
|
533
|
+
_inkBarContentElement;
|
|
534
|
+
_fitToContent = false;
|
|
535
|
+
/** Whether the ink bar should fit to the entire tab or just its content. */
|
|
536
|
+
get fitInkBarToContent() {
|
|
537
|
+
return this._fitToContent;
|
|
538
|
+
}
|
|
539
|
+
set fitInkBarToContent(newValue) {
|
|
540
|
+
if (this._fitToContent !== newValue) {
|
|
541
|
+
this._fitToContent = newValue;
|
|
542
|
+
if (this._inkBarElement) {
|
|
543
|
+
this._appendInkBarElement();
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
/** Aligns the ink bar to the current item. */
|
|
548
|
+
activateInkBar(previousIndicatorClientRect) {
|
|
549
|
+
const element = this._elementRef.nativeElement;
|
|
550
|
+
if (!previousIndicatorClientRect || !element.getBoundingClientRect || !this._inkBarContentElement) {
|
|
551
|
+
element.classList.add(ACTIVE_CLASS);
|
|
552
|
+
return;
|
|
553
|
+
}
|
|
554
|
+
const currentClientRect = element.getBoundingClientRect();
|
|
555
|
+
const widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
|
|
556
|
+
const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
|
|
557
|
+
element.classList.add(NO_TRANSITION_CLASS);
|
|
558
|
+
this._inkBarContentElement.style.setProperty("transform", `translateX(${xPosition}px) scaleX(${widthDelta})`);
|
|
559
|
+
element.getBoundingClientRect();
|
|
560
|
+
element.classList.remove(NO_TRANSITION_CLASS);
|
|
561
|
+
element.classList.add(ACTIVE_CLASS);
|
|
562
|
+
this._inkBarContentElement.style.setProperty("transform", "");
|
|
563
|
+
}
|
|
564
|
+
/** Removes the ink bar from the current item. */
|
|
565
|
+
deactivateInkBar() {
|
|
566
|
+
this._elementRef.nativeElement.classList.remove(ACTIVE_CLASS);
|
|
567
|
+
}
|
|
568
|
+
/** Initializes the foundation. */
|
|
569
|
+
ngOnInit() {
|
|
570
|
+
this._createInkBarElement();
|
|
571
|
+
}
|
|
572
|
+
/** Destroys the foundation. */
|
|
573
|
+
ngOnDestroy() {
|
|
574
|
+
this._inkBarElement?.remove();
|
|
575
|
+
this._inkBarElement = this._inkBarContentElement = null;
|
|
576
|
+
}
|
|
577
|
+
/** Creates and appends the ink bar element. */
|
|
578
|
+
_createInkBarElement() {
|
|
579
|
+
const documentNode = this._elementRef.nativeElement.ownerDocument || document;
|
|
580
|
+
const inkBarElement = this._inkBarElement = documentNode.createElement("span");
|
|
581
|
+
const inkBarContentElement = this._inkBarContentElement = documentNode.createElement("span");
|
|
582
|
+
inkBarElement.className = "mdc-tab-indicator";
|
|
583
|
+
inkBarContentElement.className = "mdc-tab-indicator__content mdc-tab-indicator__content--underline";
|
|
584
|
+
inkBarElement.appendChild(this._inkBarContentElement);
|
|
585
|
+
this._appendInkBarElement();
|
|
586
|
+
}
|
|
587
|
+
/**
|
|
588
|
+
* Appends the ink bar to the tab host element or content, depending on whether
|
|
589
|
+
* the ink bar should fit to content.
|
|
590
|
+
*/
|
|
591
|
+
_appendInkBarElement() {
|
|
592
|
+
if (!this._inkBarElement && (typeof ngDevMode === "undefined" || ngDevMode)) {
|
|
593
|
+
throw Error("Ink bar element has not been created and cannot be appended");
|
|
594
|
+
}
|
|
595
|
+
const parentElement = this._fitToContent ? this._elementRef.nativeElement.querySelector(".mdc-tab__content") : this._elementRef.nativeElement;
|
|
596
|
+
if (!parentElement && (typeof ngDevMode === "undefined" || ngDevMode)) {
|
|
597
|
+
throw Error("Missing element to host the ink bar");
|
|
598
|
+
}
|
|
599
|
+
parentElement.appendChild(this._inkBarElement);
|
|
600
|
+
}
|
|
601
|
+
static \u0275fac = function InkBarItem_Factory(__ngFactoryType__) {
|
|
602
|
+
return new (__ngFactoryType__ || _InkBarItem)();
|
|
603
|
+
};
|
|
604
|
+
static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
|
|
605
|
+
type: _InkBarItem,
|
|
606
|
+
inputs: {
|
|
607
|
+
fitInkBarToContent: [2, "fitInkBarToContent", "fitInkBarToContent", booleanAttribute]
|
|
608
|
+
}
|
|
609
|
+
});
|
|
610
|
+
};
|
|
611
|
+
(() => {
|
|
612
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(InkBarItem, [{
|
|
613
|
+
type: Directive
|
|
614
|
+
}], null, {
|
|
615
|
+
fitInkBarToContent: [{
|
|
616
|
+
type: Input,
|
|
617
|
+
args: [{
|
|
618
|
+
transform: booleanAttribute
|
|
619
|
+
}]
|
|
620
|
+
}]
|
|
621
|
+
});
|
|
622
|
+
})();
|
|
623
|
+
function _MAT_INK_BAR_POSITIONER_FACTORY() {
|
|
624
|
+
const method = (element) => ({
|
|
625
|
+
left: element ? (element.offsetLeft || 0) + "px" : "0",
|
|
626
|
+
width: element ? (element.offsetWidth || 0) + "px" : "0"
|
|
627
|
+
});
|
|
628
|
+
return method;
|
|
629
|
+
}
|
|
630
|
+
var _MAT_INK_BAR_POSITIONER = new InjectionToken("MatInkBarPositioner", {
|
|
631
|
+
providedIn: "root",
|
|
632
|
+
factory: _MAT_INK_BAR_POSITIONER_FACTORY
|
|
633
|
+
});
|
|
634
|
+
var MatTabLabelWrapper = class _MatTabLabelWrapper extends InkBarItem {
|
|
635
|
+
elementRef = inject(ElementRef);
|
|
636
|
+
/** Whether the tab is disabled. */
|
|
637
|
+
disabled = false;
|
|
638
|
+
/** Sets focus on the wrapper element */
|
|
639
|
+
focus() {
|
|
640
|
+
this.elementRef.nativeElement.focus();
|
|
641
|
+
}
|
|
642
|
+
getOffsetLeft() {
|
|
643
|
+
return this.elementRef.nativeElement.offsetLeft;
|
|
644
|
+
}
|
|
645
|
+
getOffsetWidth() {
|
|
646
|
+
return this.elementRef.nativeElement.offsetWidth;
|
|
647
|
+
}
|
|
648
|
+
static \u0275fac = /* @__PURE__ */ (() => {
|
|
649
|
+
let \u0275MatTabLabelWrapper_BaseFactory;
|
|
650
|
+
return function MatTabLabelWrapper_Factory(__ngFactoryType__) {
|
|
651
|
+
return (\u0275MatTabLabelWrapper_BaseFactory || (\u0275MatTabLabelWrapper_BaseFactory = \u0275\u0275getInheritedFactory(_MatTabLabelWrapper)))(__ngFactoryType__ || _MatTabLabelWrapper);
|
|
652
|
+
};
|
|
653
|
+
})();
|
|
654
|
+
static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
|
|
655
|
+
type: _MatTabLabelWrapper,
|
|
656
|
+
selectors: [["", "matTabLabelWrapper", ""]],
|
|
657
|
+
hostVars: 3,
|
|
658
|
+
hostBindings: function MatTabLabelWrapper_HostBindings(rf, ctx) {
|
|
659
|
+
if (rf & 2) {
|
|
660
|
+
\u0275\u0275attribute("aria-disabled", !!ctx.disabled);
|
|
661
|
+
\u0275\u0275classProp("mat-mdc-tab-disabled", ctx.disabled);
|
|
662
|
+
}
|
|
663
|
+
},
|
|
664
|
+
inputs: {
|
|
665
|
+
disabled: [2, "disabled", "disabled", booleanAttribute]
|
|
666
|
+
},
|
|
667
|
+
features: [\u0275\u0275InheritDefinitionFeature]
|
|
668
|
+
});
|
|
669
|
+
};
|
|
670
|
+
(() => {
|
|
671
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabLabelWrapper, [{
|
|
672
|
+
type: Directive,
|
|
673
|
+
args: [{
|
|
674
|
+
selector: "[matTabLabelWrapper]",
|
|
675
|
+
host: {
|
|
676
|
+
"[class.mat-mdc-tab-disabled]": "disabled",
|
|
677
|
+
"[attr.aria-disabled]": "!!disabled"
|
|
678
|
+
}
|
|
679
|
+
}]
|
|
680
|
+
}], null, {
|
|
681
|
+
disabled: [{
|
|
682
|
+
type: Input,
|
|
683
|
+
args: [{
|
|
684
|
+
transform: booleanAttribute
|
|
685
|
+
}]
|
|
686
|
+
}]
|
|
687
|
+
});
|
|
688
|
+
})();
|
|
689
|
+
var passiveEventListenerOptions = {
|
|
690
|
+
passive: true
|
|
691
|
+
};
|
|
692
|
+
var HEADER_SCROLL_DELAY = 650;
|
|
693
|
+
var HEADER_SCROLL_INTERVAL = 100;
|
|
694
|
+
var MatPaginatedTabHeader = class _MatPaginatedTabHeader {
|
|
695
|
+
_elementRef = inject(ElementRef);
|
|
696
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
697
|
+
_viewportRuler = inject(ViewportRuler);
|
|
698
|
+
_dir = inject(Directionality, {
|
|
699
|
+
optional: true
|
|
700
|
+
});
|
|
701
|
+
_ngZone = inject(NgZone);
|
|
702
|
+
_platform = inject(Platform);
|
|
703
|
+
_sharedResizeObserver = inject(SharedResizeObserver);
|
|
704
|
+
_injector = inject(Injector);
|
|
705
|
+
_renderer = inject(Renderer2);
|
|
706
|
+
_animationsDisabled = _animationsDisabled();
|
|
707
|
+
_eventCleanups;
|
|
708
|
+
/** The distance in pixels that the tab labels should be translated to the left. */
|
|
709
|
+
_scrollDistance = 0;
|
|
710
|
+
/** Whether the header should scroll to the selected index after the view has been checked. */
|
|
711
|
+
_selectedIndexChanged = false;
|
|
712
|
+
/** Emits when the component is destroyed. */
|
|
713
|
+
_destroyed = new Subject();
|
|
714
|
+
/** Whether the controls for pagination should be displayed */
|
|
715
|
+
_showPaginationControls = false;
|
|
716
|
+
/** Whether the tab list can be scrolled more towards the end of the tab label list. */
|
|
717
|
+
_disableScrollAfter = true;
|
|
718
|
+
/** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
|
|
719
|
+
_disableScrollBefore = true;
|
|
720
|
+
/**
|
|
721
|
+
* The number of tab labels that are displayed on the header. When this changes, the header
|
|
722
|
+
* should re-evaluate the scroll position.
|
|
723
|
+
*/
|
|
724
|
+
_tabLabelCount;
|
|
725
|
+
/** Whether the scroll distance has changed and should be applied after the view is checked. */
|
|
726
|
+
_scrollDistanceChanged;
|
|
727
|
+
/** Used to manage focus between the tabs. */
|
|
728
|
+
_keyManager;
|
|
729
|
+
/** Cached text content of the header. */
|
|
730
|
+
_currentTextContent;
|
|
731
|
+
/** Stream that will stop the automated scrolling. */
|
|
732
|
+
_stopScrolling = new Subject();
|
|
733
|
+
/**
|
|
734
|
+
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
735
|
+
* layout recalculations if it's known that pagination won't be required.
|
|
736
|
+
*/
|
|
737
|
+
disablePagination = false;
|
|
738
|
+
/** The index of the active tab. */
|
|
739
|
+
get selectedIndex() {
|
|
740
|
+
return this._selectedIndex;
|
|
741
|
+
}
|
|
742
|
+
set selectedIndex(v) {
|
|
743
|
+
const value = isNaN(v) ? 0 : v;
|
|
744
|
+
if (this._selectedIndex != value) {
|
|
745
|
+
this._selectedIndexChanged = true;
|
|
746
|
+
this._selectedIndex = value;
|
|
747
|
+
if (this._keyManager) {
|
|
748
|
+
this._keyManager.updateActiveItem(value);
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
_selectedIndex = 0;
|
|
753
|
+
/** Event emitted when the option is selected. */
|
|
754
|
+
selectFocusedIndex = new EventEmitter();
|
|
755
|
+
/** Event emitted when a label is focused. */
|
|
756
|
+
indexFocused = new EventEmitter();
|
|
757
|
+
constructor() {
|
|
758
|
+
this._eventCleanups = this._ngZone.runOutsideAngular(() => [this._renderer.listen(this._elementRef.nativeElement, "mouseleave", () => this._stopInterval())]);
|
|
759
|
+
}
|
|
760
|
+
ngAfterViewInit() {
|
|
761
|
+
this._eventCleanups.push(this._renderer.listen(this._previousPaginator.nativeElement, "touchstart", () => this._handlePaginatorPress("before"), passiveEventListenerOptions), this._renderer.listen(this._nextPaginator.nativeElement, "touchstart", () => this._handlePaginatorPress("after"), passiveEventListenerOptions));
|
|
762
|
+
}
|
|
763
|
+
ngAfterContentInit() {
|
|
764
|
+
const dirChange = this._dir ? this._dir.change : of("ltr");
|
|
765
|
+
const resize = this._sharedResizeObserver.observe(this._elementRef.nativeElement).pipe(debounceTime(32), takeUntil(this._destroyed));
|
|
766
|
+
const viewportResize = this._viewportRuler.change(150).pipe(takeUntil(this._destroyed));
|
|
767
|
+
const realign = () => {
|
|
768
|
+
this.updatePagination();
|
|
769
|
+
this._alignInkBarToSelectedTab();
|
|
770
|
+
};
|
|
771
|
+
this._keyManager = new FocusKeyManager(this._items).withHorizontalOrientation(this._getLayoutDirection()).withHomeAndEnd().withWrap().skipPredicate(() => false);
|
|
772
|
+
this._keyManager.updateActiveItem(Math.max(this._selectedIndex, 0));
|
|
773
|
+
afterNextRender(realign, {
|
|
774
|
+
injector: this._injector
|
|
775
|
+
});
|
|
776
|
+
merge(dirChange, viewportResize, resize, this._items.changes, this._itemsResized()).pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
777
|
+
this._ngZone.run(() => {
|
|
778
|
+
Promise.resolve().then(() => {
|
|
779
|
+
this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), this._scrollDistance));
|
|
780
|
+
realign();
|
|
781
|
+
});
|
|
782
|
+
});
|
|
783
|
+
this._keyManager?.withHorizontalOrientation(this._getLayoutDirection());
|
|
784
|
+
});
|
|
785
|
+
this._keyManager.change.subscribe((newFocusIndex) => {
|
|
786
|
+
this.indexFocused.emit(newFocusIndex);
|
|
787
|
+
this._setTabFocus(newFocusIndex);
|
|
788
|
+
});
|
|
789
|
+
}
|
|
790
|
+
/** Sends any changes that could affect the layout of the items. */
|
|
791
|
+
_itemsResized() {
|
|
792
|
+
if (typeof ResizeObserver !== "function") {
|
|
793
|
+
return EMPTY;
|
|
794
|
+
}
|
|
795
|
+
return this._items.changes.pipe(
|
|
796
|
+
startWith(this._items),
|
|
797
|
+
switchMap((tabItems) => new Observable((observer) => this._ngZone.runOutsideAngular(() => {
|
|
798
|
+
const resizeObserver = new ResizeObserver((entries) => observer.next(entries));
|
|
799
|
+
tabItems.forEach((item) => resizeObserver.observe(item.elementRef.nativeElement));
|
|
800
|
+
return () => {
|
|
801
|
+
resizeObserver.disconnect();
|
|
802
|
+
};
|
|
803
|
+
}))),
|
|
804
|
+
// Skip the first emit since the resize observer emits when an item
|
|
805
|
+
// is observed for new items when the tab is already inserted
|
|
806
|
+
skip(1),
|
|
807
|
+
// Skip emissions where all the elements are invisible since we don't want
|
|
808
|
+
// the header to try and re-render with invalid measurements. See #25574.
|
|
809
|
+
filter((entries) => entries.some((e) => e.contentRect.width > 0 && e.contentRect.height > 0))
|
|
810
|
+
);
|
|
811
|
+
}
|
|
812
|
+
ngAfterContentChecked() {
|
|
813
|
+
if (this._tabLabelCount != this._items.length) {
|
|
814
|
+
this.updatePagination();
|
|
815
|
+
this._tabLabelCount = this._items.length;
|
|
816
|
+
this._changeDetectorRef.markForCheck();
|
|
817
|
+
}
|
|
818
|
+
if (this._selectedIndexChanged) {
|
|
819
|
+
this._scrollToLabel(this._selectedIndex);
|
|
820
|
+
this._checkScrollingControls();
|
|
821
|
+
this._alignInkBarToSelectedTab();
|
|
822
|
+
this._selectedIndexChanged = false;
|
|
823
|
+
this._changeDetectorRef.markForCheck();
|
|
824
|
+
}
|
|
825
|
+
if (this._scrollDistanceChanged) {
|
|
826
|
+
this._updateTabScrollPosition();
|
|
827
|
+
this._scrollDistanceChanged = false;
|
|
828
|
+
this._changeDetectorRef.markForCheck();
|
|
829
|
+
}
|
|
830
|
+
}
|
|
831
|
+
ngOnDestroy() {
|
|
832
|
+
this._eventCleanups.forEach((cleanup) => cleanup());
|
|
833
|
+
this._keyManager?.destroy();
|
|
834
|
+
this._destroyed.next();
|
|
835
|
+
this._destroyed.complete();
|
|
836
|
+
this._stopScrolling.complete();
|
|
837
|
+
}
|
|
838
|
+
/** Handles keyboard events on the header. */
|
|
839
|
+
_handleKeydown(event) {
|
|
840
|
+
if (hasModifierKey(event)) {
|
|
841
|
+
return;
|
|
842
|
+
}
|
|
843
|
+
switch (event.keyCode) {
|
|
844
|
+
case ENTER:
|
|
845
|
+
case SPACE:
|
|
846
|
+
if (this.focusIndex !== this.selectedIndex) {
|
|
847
|
+
const item = this._items.get(this.focusIndex);
|
|
848
|
+
if (item && !item.disabled) {
|
|
849
|
+
this.selectFocusedIndex.emit(this.focusIndex);
|
|
850
|
+
this._itemSelected(event);
|
|
851
|
+
}
|
|
852
|
+
}
|
|
853
|
+
break;
|
|
854
|
+
default:
|
|
855
|
+
this._keyManager?.onKeydown(event);
|
|
856
|
+
}
|
|
857
|
+
}
|
|
858
|
+
/**
|
|
859
|
+
* Callback for when the MutationObserver detects that the content has changed.
|
|
860
|
+
*/
|
|
861
|
+
_onContentChanges() {
|
|
862
|
+
const textContent = this._elementRef.nativeElement.textContent;
|
|
863
|
+
if (textContent !== this._currentTextContent) {
|
|
864
|
+
this._currentTextContent = textContent || "";
|
|
865
|
+
this._ngZone.run(() => {
|
|
866
|
+
this.updatePagination();
|
|
867
|
+
this._alignInkBarToSelectedTab();
|
|
868
|
+
this._changeDetectorRef.markForCheck();
|
|
869
|
+
});
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
/**
|
|
873
|
+
* Updates the view whether pagination should be enabled or not.
|
|
874
|
+
*
|
|
875
|
+
* WARNING: Calling this method can be very costly in terms of performance. It should be called
|
|
876
|
+
* as infrequently as possible from outside of the Tabs component as it causes a reflow of the
|
|
877
|
+
* page.
|
|
878
|
+
*/
|
|
879
|
+
updatePagination() {
|
|
880
|
+
this._checkPaginationEnabled();
|
|
881
|
+
this._checkScrollingControls();
|
|
882
|
+
this._updateTabScrollPosition();
|
|
883
|
+
}
|
|
884
|
+
/** Tracks which element has focus; used for keyboard navigation */
|
|
885
|
+
get focusIndex() {
|
|
886
|
+
return this._keyManager ? this._keyManager.activeItemIndex : 0;
|
|
887
|
+
}
|
|
888
|
+
/** When the focus index is set, we must manually send focus to the correct label */
|
|
889
|
+
set focusIndex(value) {
|
|
890
|
+
if (!this._isValidIndex(value) || this.focusIndex === value || !this._keyManager) {
|
|
891
|
+
return;
|
|
892
|
+
}
|
|
893
|
+
this._keyManager.setActiveItem(value);
|
|
894
|
+
}
|
|
895
|
+
/**
|
|
896
|
+
* Determines if an index is valid. If the tabs are not ready yet, we assume that the user is
|
|
897
|
+
* providing a valid index and return true.
|
|
898
|
+
*/
|
|
899
|
+
_isValidIndex(index) {
|
|
900
|
+
return this._items ? !!this._items.toArray()[index] : true;
|
|
901
|
+
}
|
|
902
|
+
/**
|
|
903
|
+
* Sets focus on the HTML element for the label wrapper and scrolls it into the view if
|
|
904
|
+
* scrolling is enabled.
|
|
905
|
+
*/
|
|
906
|
+
_setTabFocus(tabIndex) {
|
|
907
|
+
if (this._showPaginationControls) {
|
|
908
|
+
this._scrollToLabel(tabIndex);
|
|
909
|
+
}
|
|
910
|
+
if (this._items && this._items.length) {
|
|
911
|
+
this._items.toArray()[tabIndex].focus();
|
|
912
|
+
const containerEl = this._tabListContainer.nativeElement;
|
|
913
|
+
const dir = this._getLayoutDirection();
|
|
914
|
+
if (dir == "ltr") {
|
|
915
|
+
containerEl.scrollLeft = 0;
|
|
916
|
+
} else {
|
|
917
|
+
containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth;
|
|
918
|
+
}
|
|
919
|
+
}
|
|
920
|
+
}
|
|
921
|
+
/** The layout direction of the containing app. */
|
|
922
|
+
_getLayoutDirection() {
|
|
923
|
+
return this._dir && this._dir.value === "rtl" ? "rtl" : "ltr";
|
|
924
|
+
}
|
|
925
|
+
/** Performs the CSS transformation on the tab list that will cause the list to scroll. */
|
|
926
|
+
_updateTabScrollPosition() {
|
|
927
|
+
if (this.disablePagination) {
|
|
928
|
+
return;
|
|
929
|
+
}
|
|
930
|
+
const scrollDistance = this.scrollDistance;
|
|
931
|
+
const translateX = this._getLayoutDirection() === "ltr" ? -scrollDistance : scrollDistance;
|
|
932
|
+
this._tabList.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
|
|
933
|
+
if (this._platform.TRIDENT || this._platform.EDGE) {
|
|
934
|
+
this._tabListContainer.nativeElement.scrollLeft = 0;
|
|
935
|
+
}
|
|
936
|
+
}
|
|
937
|
+
/** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
|
|
938
|
+
get scrollDistance() {
|
|
939
|
+
return this._scrollDistance;
|
|
940
|
+
}
|
|
941
|
+
set scrollDistance(value) {
|
|
942
|
+
this._scrollTo(value);
|
|
943
|
+
}
|
|
944
|
+
/**
|
|
945
|
+
* Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
|
|
946
|
+
* the end of the list, respectively). The distance to scroll is computed to be a third of the
|
|
947
|
+
* length of the tab list view window.
|
|
948
|
+
*
|
|
949
|
+
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
|
|
950
|
+
* should be called sparingly.
|
|
951
|
+
*/
|
|
952
|
+
_scrollHeader(direction) {
|
|
953
|
+
const viewLength = this._tabListContainer.nativeElement.offsetWidth;
|
|
954
|
+
const scrollAmount = (direction == "before" ? -1 : 1) * viewLength / 3;
|
|
955
|
+
return this._scrollTo(this._scrollDistance + scrollAmount);
|
|
956
|
+
}
|
|
957
|
+
/** Handles click events on the pagination arrows. */
|
|
958
|
+
_handlePaginatorClick(direction) {
|
|
959
|
+
this._stopInterval();
|
|
960
|
+
this._scrollHeader(direction);
|
|
961
|
+
}
|
|
962
|
+
/**
|
|
963
|
+
* Moves the tab list such that the desired tab label (marked by index) is moved into view.
|
|
964
|
+
*
|
|
965
|
+
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
|
|
966
|
+
* should be called sparingly.
|
|
967
|
+
*/
|
|
968
|
+
_scrollToLabel(labelIndex) {
|
|
969
|
+
if (this.disablePagination) {
|
|
970
|
+
return;
|
|
971
|
+
}
|
|
972
|
+
const selectedLabel = this._items ? this._items.toArray()[labelIndex] : null;
|
|
973
|
+
if (!selectedLabel) {
|
|
974
|
+
return;
|
|
975
|
+
}
|
|
976
|
+
const viewLength = this._tabListContainer.nativeElement.offsetWidth;
|
|
977
|
+
const {
|
|
978
|
+
offsetLeft,
|
|
979
|
+
offsetWidth
|
|
980
|
+
} = selectedLabel.elementRef.nativeElement;
|
|
981
|
+
let labelBeforePos, labelAfterPos;
|
|
982
|
+
if (this._getLayoutDirection() == "ltr") {
|
|
983
|
+
labelBeforePos = offsetLeft;
|
|
984
|
+
labelAfterPos = labelBeforePos + offsetWidth;
|
|
985
|
+
} else {
|
|
986
|
+
labelAfterPos = this._tabListInner.nativeElement.offsetWidth - offsetLeft;
|
|
987
|
+
labelBeforePos = labelAfterPos - offsetWidth;
|
|
988
|
+
}
|
|
989
|
+
const beforeVisiblePos = this.scrollDistance;
|
|
990
|
+
const afterVisiblePos = this.scrollDistance + viewLength;
|
|
991
|
+
if (labelBeforePos < beforeVisiblePos) {
|
|
992
|
+
this.scrollDistance -= beforeVisiblePos - labelBeforePos;
|
|
993
|
+
} else if (labelAfterPos > afterVisiblePos) {
|
|
994
|
+
this.scrollDistance += Math.min(labelAfterPos - afterVisiblePos, labelBeforePos - beforeVisiblePos);
|
|
995
|
+
}
|
|
996
|
+
}
|
|
997
|
+
/**
|
|
998
|
+
* Evaluate whether the pagination controls should be displayed. If the scroll width of the
|
|
999
|
+
* tab list is wider than the size of the header container, then the pagination controls should
|
|
1000
|
+
* be shown.
|
|
1001
|
+
*
|
|
1002
|
+
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
|
|
1003
|
+
* should be called sparingly.
|
|
1004
|
+
*/
|
|
1005
|
+
_checkPaginationEnabled() {
|
|
1006
|
+
if (this.disablePagination) {
|
|
1007
|
+
this._showPaginationControls = false;
|
|
1008
|
+
} else {
|
|
1009
|
+
const scrollWidth = this._tabListInner.nativeElement.scrollWidth;
|
|
1010
|
+
const containerWidth = this._elementRef.nativeElement.offsetWidth;
|
|
1011
|
+
const isEnabled = scrollWidth - containerWidth >= 5;
|
|
1012
|
+
if (!isEnabled) {
|
|
1013
|
+
this.scrollDistance = 0;
|
|
1014
|
+
}
|
|
1015
|
+
if (isEnabled !== this._showPaginationControls) {
|
|
1016
|
+
this._showPaginationControls = isEnabled;
|
|
1017
|
+
this._changeDetectorRef.markForCheck();
|
|
1018
|
+
}
|
|
1019
|
+
}
|
|
1020
|
+
}
|
|
1021
|
+
/**
|
|
1022
|
+
* Evaluate whether the before and after controls should be enabled or disabled.
|
|
1023
|
+
* If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
|
|
1024
|
+
* before button. If the header is at the end of the list (scroll distance is equal to the
|
|
1025
|
+
* maximum distance we can scroll), then disable the after button.
|
|
1026
|
+
*
|
|
1027
|
+
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
|
|
1028
|
+
* should be called sparingly.
|
|
1029
|
+
*/
|
|
1030
|
+
_checkScrollingControls() {
|
|
1031
|
+
if (this.disablePagination) {
|
|
1032
|
+
this._disableScrollAfter = this._disableScrollBefore = true;
|
|
1033
|
+
} else {
|
|
1034
|
+
this._disableScrollBefore = this.scrollDistance == 0;
|
|
1035
|
+
this._disableScrollAfter = this.scrollDistance == this._getMaxScrollDistance();
|
|
1036
|
+
this._changeDetectorRef.markForCheck();
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
/**
|
|
1040
|
+
* Determines what is the maximum length in pixels that can be set for the scroll distance. This
|
|
1041
|
+
* is equal to the difference in width between the tab list container and tab header container.
|
|
1042
|
+
*
|
|
1043
|
+
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
|
|
1044
|
+
* should be called sparingly.
|
|
1045
|
+
*/
|
|
1046
|
+
_getMaxScrollDistance() {
|
|
1047
|
+
const lengthOfTabList = this._tabListInner.nativeElement.scrollWidth;
|
|
1048
|
+
const viewLength = this._tabListContainer.nativeElement.offsetWidth;
|
|
1049
|
+
return lengthOfTabList - viewLength || 0;
|
|
1050
|
+
}
|
|
1051
|
+
/** Tells the ink-bar to align itself to the current label wrapper */
|
|
1052
|
+
_alignInkBarToSelectedTab() {
|
|
1053
|
+
const selectedItem = this._items && this._items.length ? this._items.toArray()[this.selectedIndex] : null;
|
|
1054
|
+
const selectedLabelWrapper = selectedItem ? selectedItem.elementRef.nativeElement : null;
|
|
1055
|
+
if (selectedLabelWrapper) {
|
|
1056
|
+
this._inkBar.alignToElement(selectedLabelWrapper);
|
|
1057
|
+
} else {
|
|
1058
|
+
this._inkBar.hide();
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
/** Stops the currently-running paginator interval. */
|
|
1062
|
+
_stopInterval() {
|
|
1063
|
+
this._stopScrolling.next();
|
|
1064
|
+
}
|
|
1065
|
+
/**
|
|
1066
|
+
* Handles the user pressing down on one of the paginators.
|
|
1067
|
+
* Starts scrolling the header after a certain amount of time.
|
|
1068
|
+
* @param direction In which direction the paginator should be scrolled.
|
|
1069
|
+
*/
|
|
1070
|
+
_handlePaginatorPress(direction, mouseEvent) {
|
|
1071
|
+
if (mouseEvent && mouseEvent.button != null && mouseEvent.button !== 0) {
|
|
1072
|
+
return;
|
|
1073
|
+
}
|
|
1074
|
+
this._stopInterval();
|
|
1075
|
+
timer(HEADER_SCROLL_DELAY, HEADER_SCROLL_INTERVAL).pipe(takeUntil(merge(this._stopScrolling, this._destroyed))).subscribe(() => {
|
|
1076
|
+
const {
|
|
1077
|
+
maxScrollDistance,
|
|
1078
|
+
distance
|
|
1079
|
+
} = this._scrollHeader(direction);
|
|
1080
|
+
if (distance === 0 || distance >= maxScrollDistance) {
|
|
1081
|
+
this._stopInterval();
|
|
1082
|
+
}
|
|
1083
|
+
});
|
|
1084
|
+
}
|
|
1085
|
+
/**
|
|
1086
|
+
* Scrolls the header to a given position.
|
|
1087
|
+
* @param position Position to which to scroll.
|
|
1088
|
+
* @returns Information on the current scroll distance and the maximum.
|
|
1089
|
+
*/
|
|
1090
|
+
_scrollTo(position) {
|
|
1091
|
+
if (this.disablePagination) {
|
|
1092
|
+
return {
|
|
1093
|
+
maxScrollDistance: 0,
|
|
1094
|
+
distance: 0
|
|
1095
|
+
};
|
|
1096
|
+
}
|
|
1097
|
+
const maxScrollDistance = this._getMaxScrollDistance();
|
|
1098
|
+
this._scrollDistance = Math.max(0, Math.min(maxScrollDistance, position));
|
|
1099
|
+
this._scrollDistanceChanged = true;
|
|
1100
|
+
this._checkScrollingControls();
|
|
1101
|
+
return {
|
|
1102
|
+
maxScrollDistance,
|
|
1103
|
+
distance: this._scrollDistance
|
|
1104
|
+
};
|
|
1105
|
+
}
|
|
1106
|
+
static \u0275fac = function MatPaginatedTabHeader_Factory(__ngFactoryType__) {
|
|
1107
|
+
return new (__ngFactoryType__ || _MatPaginatedTabHeader)();
|
|
1108
|
+
};
|
|
1109
|
+
static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
|
|
1110
|
+
type: _MatPaginatedTabHeader,
|
|
1111
|
+
inputs: {
|
|
1112
|
+
disablePagination: [2, "disablePagination", "disablePagination", booleanAttribute],
|
|
1113
|
+
selectedIndex: [2, "selectedIndex", "selectedIndex", numberAttribute]
|
|
1114
|
+
},
|
|
1115
|
+
outputs: {
|
|
1116
|
+
selectFocusedIndex: "selectFocusedIndex",
|
|
1117
|
+
indexFocused: "indexFocused"
|
|
1118
|
+
}
|
|
1119
|
+
});
|
|
1120
|
+
};
|
|
1121
|
+
(() => {
|
|
1122
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatPaginatedTabHeader, [{
|
|
1123
|
+
type: Directive
|
|
1124
|
+
}], () => [], {
|
|
1125
|
+
disablePagination: [{
|
|
1126
|
+
type: Input,
|
|
1127
|
+
args: [{
|
|
1128
|
+
transform: booleanAttribute
|
|
1129
|
+
}]
|
|
1130
|
+
}],
|
|
1131
|
+
selectedIndex: [{
|
|
1132
|
+
type: Input,
|
|
1133
|
+
args: [{
|
|
1134
|
+
transform: numberAttribute
|
|
1135
|
+
}]
|
|
1136
|
+
}],
|
|
1137
|
+
selectFocusedIndex: [{
|
|
1138
|
+
type: Output
|
|
1139
|
+
}],
|
|
1140
|
+
indexFocused: [{
|
|
1141
|
+
type: Output
|
|
1142
|
+
}]
|
|
1143
|
+
});
|
|
1144
|
+
})();
|
|
1145
|
+
var MatTabHeader = class _MatTabHeader extends MatPaginatedTabHeader {
|
|
1146
|
+
_items;
|
|
1147
|
+
_tabListContainer;
|
|
1148
|
+
_tabList;
|
|
1149
|
+
_tabListInner;
|
|
1150
|
+
_nextPaginator;
|
|
1151
|
+
_previousPaginator;
|
|
1152
|
+
_inkBar;
|
|
1153
|
+
/** Aria label of the header. */
|
|
1154
|
+
ariaLabel;
|
|
1155
|
+
/** Sets the `aria-labelledby` of the header. */
|
|
1156
|
+
ariaLabelledby;
|
|
1157
|
+
/** Whether the ripple effect is disabled or not. */
|
|
1158
|
+
disableRipple = false;
|
|
1159
|
+
ngAfterContentInit() {
|
|
1160
|
+
this._inkBar = new MatInkBar(this._items);
|
|
1161
|
+
super.ngAfterContentInit();
|
|
1162
|
+
}
|
|
1163
|
+
_itemSelected(event) {
|
|
1164
|
+
event.preventDefault();
|
|
1165
|
+
}
|
|
1166
|
+
static \u0275fac = /* @__PURE__ */ (() => {
|
|
1167
|
+
let \u0275MatTabHeader_BaseFactory;
|
|
1168
|
+
return function MatTabHeader_Factory(__ngFactoryType__) {
|
|
1169
|
+
return (\u0275MatTabHeader_BaseFactory || (\u0275MatTabHeader_BaseFactory = \u0275\u0275getInheritedFactory(_MatTabHeader)))(__ngFactoryType__ || _MatTabHeader);
|
|
1170
|
+
};
|
|
1171
|
+
})();
|
|
1172
|
+
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
|
|
1173
|
+
type: _MatTabHeader,
|
|
1174
|
+
selectors: [["mat-tab-header"]],
|
|
1175
|
+
contentQueries: function MatTabHeader_ContentQueries(rf, ctx, dirIndex) {
|
|
1176
|
+
if (rf & 1) {
|
|
1177
|
+
\u0275\u0275contentQuery(dirIndex, MatTabLabelWrapper, 4);
|
|
1178
|
+
}
|
|
1179
|
+
if (rf & 2) {
|
|
1180
|
+
let _t;
|
|
1181
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._items = _t);
|
|
1182
|
+
}
|
|
1183
|
+
},
|
|
1184
|
+
viewQuery: function MatTabHeader_Query(rf, ctx) {
|
|
1185
|
+
if (rf & 1) {
|
|
1186
|
+
\u0275\u0275viewQuery(_c1, 7);
|
|
1187
|
+
\u0275\u0275viewQuery(_c2, 7);
|
|
1188
|
+
\u0275\u0275viewQuery(_c3, 7);
|
|
1189
|
+
\u0275\u0275viewQuery(_c4, 5);
|
|
1190
|
+
\u0275\u0275viewQuery(_c5, 5);
|
|
1191
|
+
}
|
|
1192
|
+
if (rf & 2) {
|
|
1193
|
+
let _t;
|
|
1194
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabListContainer = _t.first);
|
|
1195
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabList = _t.first);
|
|
1196
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabListInner = _t.first);
|
|
1197
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._nextPaginator = _t.first);
|
|
1198
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._previousPaginator = _t.first);
|
|
1199
|
+
}
|
|
1200
|
+
},
|
|
1201
|
+
hostAttrs: [1, "mat-mdc-tab-header"],
|
|
1202
|
+
hostVars: 4,
|
|
1203
|
+
hostBindings: function MatTabHeader_HostBindings(rf, ctx) {
|
|
1204
|
+
if (rf & 2) {
|
|
1205
|
+
\u0275\u0275classProp("mat-mdc-tab-header-pagination-controls-enabled", ctx._showPaginationControls)("mat-mdc-tab-header-rtl", ctx._getLayoutDirection() == "rtl");
|
|
1206
|
+
}
|
|
1207
|
+
},
|
|
1208
|
+
inputs: {
|
|
1209
|
+
ariaLabel: [0, "aria-label", "ariaLabel"],
|
|
1210
|
+
ariaLabelledby: [0, "aria-labelledby", "ariaLabelledby"],
|
|
1211
|
+
disableRipple: [2, "disableRipple", "disableRipple", booleanAttribute]
|
|
1212
|
+
},
|
|
1213
|
+
features: [\u0275\u0275InheritDefinitionFeature],
|
|
1214
|
+
ngContentSelectors: _c0,
|
|
1215
|
+
decls: 13,
|
|
1216
|
+
vars: 10,
|
|
1217
|
+
consts: [["previousPaginator", ""], ["tabListContainer", ""], ["tabList", ""], ["tabListInner", ""], ["nextPaginator", ""], ["mat-ripple", "", 1, "mat-mdc-tab-header-pagination", "mat-mdc-tab-header-pagination-before", 3, "click", "mousedown", "touchend", "matRippleDisabled"], [1, "mat-mdc-tab-header-pagination-chevron"], [1, "mat-mdc-tab-label-container", 3, "keydown"], ["role", "tablist", 1, "mat-mdc-tab-list", 3, "cdkObserveContent"], [1, "mat-mdc-tab-labels"], ["mat-ripple", "", 1, "mat-mdc-tab-header-pagination", "mat-mdc-tab-header-pagination-after", 3, "mousedown", "click", "touchend", "matRippleDisabled"]],
|
|
1218
|
+
template: function MatTabHeader_Template(rf, ctx) {
|
|
1219
|
+
if (rf & 1) {
|
|
1220
|
+
const _r1 = \u0275\u0275getCurrentView();
|
|
1221
|
+
\u0275\u0275projectionDef();
|
|
1222
|
+
\u0275\u0275elementStart(0, "div", 5, 0);
|
|
1223
|
+
\u0275\u0275listener("click", function MatTabHeader_Template_div_click_0_listener() {
|
|
1224
|
+
\u0275\u0275restoreView(_r1);
|
|
1225
|
+
return \u0275\u0275resetView(ctx._handlePaginatorClick("before"));
|
|
1226
|
+
})("mousedown", function MatTabHeader_Template_div_mousedown_0_listener($event) {
|
|
1227
|
+
\u0275\u0275restoreView(_r1);
|
|
1228
|
+
return \u0275\u0275resetView(ctx._handlePaginatorPress("before", $event));
|
|
1229
|
+
})("touchend", function MatTabHeader_Template_div_touchend_0_listener() {
|
|
1230
|
+
\u0275\u0275restoreView(_r1);
|
|
1231
|
+
return \u0275\u0275resetView(ctx._stopInterval());
|
|
1232
|
+
});
|
|
1233
|
+
\u0275\u0275element(2, "div", 6);
|
|
1234
|
+
\u0275\u0275elementEnd();
|
|
1235
|
+
\u0275\u0275elementStart(3, "div", 7, 1);
|
|
1236
|
+
\u0275\u0275listener("keydown", function MatTabHeader_Template_div_keydown_3_listener($event) {
|
|
1237
|
+
\u0275\u0275restoreView(_r1);
|
|
1238
|
+
return \u0275\u0275resetView(ctx._handleKeydown($event));
|
|
1239
|
+
});
|
|
1240
|
+
\u0275\u0275elementStart(5, "div", 8, 2);
|
|
1241
|
+
\u0275\u0275listener("cdkObserveContent", function MatTabHeader_Template_div_cdkObserveContent_5_listener() {
|
|
1242
|
+
\u0275\u0275restoreView(_r1);
|
|
1243
|
+
return \u0275\u0275resetView(ctx._onContentChanges());
|
|
1244
|
+
});
|
|
1245
|
+
\u0275\u0275elementStart(7, "div", 9, 3);
|
|
1246
|
+
\u0275\u0275projection(9);
|
|
1247
|
+
\u0275\u0275elementEnd()()();
|
|
1248
|
+
\u0275\u0275elementStart(10, "div", 10, 4);
|
|
1249
|
+
\u0275\u0275listener("mousedown", function MatTabHeader_Template_div_mousedown_10_listener($event) {
|
|
1250
|
+
\u0275\u0275restoreView(_r1);
|
|
1251
|
+
return \u0275\u0275resetView(ctx._handlePaginatorPress("after", $event));
|
|
1252
|
+
})("click", function MatTabHeader_Template_div_click_10_listener() {
|
|
1253
|
+
\u0275\u0275restoreView(_r1);
|
|
1254
|
+
return \u0275\u0275resetView(ctx._handlePaginatorClick("after"));
|
|
1255
|
+
})("touchend", function MatTabHeader_Template_div_touchend_10_listener() {
|
|
1256
|
+
\u0275\u0275restoreView(_r1);
|
|
1257
|
+
return \u0275\u0275resetView(ctx._stopInterval());
|
|
1258
|
+
});
|
|
1259
|
+
\u0275\u0275element(12, "div", 6);
|
|
1260
|
+
\u0275\u0275elementEnd();
|
|
1261
|
+
}
|
|
1262
|
+
if (rf & 2) {
|
|
1263
|
+
\u0275\u0275classProp("mat-mdc-tab-header-pagination-disabled", ctx._disableScrollBefore);
|
|
1264
|
+
\u0275\u0275property("matRippleDisabled", ctx._disableScrollBefore || ctx.disableRipple);
|
|
1265
|
+
\u0275\u0275advance(3);
|
|
1266
|
+
\u0275\u0275classProp("_mat-animation-noopable", ctx._animationsDisabled);
|
|
1267
|
+
\u0275\u0275advance(2);
|
|
1268
|
+
\u0275\u0275attribute("aria-label", ctx.ariaLabel || null)("aria-labelledby", ctx.ariaLabelledby || null);
|
|
1269
|
+
\u0275\u0275advance(5);
|
|
1270
|
+
\u0275\u0275classProp("mat-mdc-tab-header-pagination-disabled", ctx._disableScrollAfter);
|
|
1271
|
+
\u0275\u0275property("matRippleDisabled", ctx._disableScrollAfter || ctx.disableRipple);
|
|
1272
|
+
}
|
|
1273
|
+
},
|
|
1274
|
+
dependencies: [MatRipple, CdkObserveContent],
|
|
1275
|
+
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-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-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-divider-height, 1px);border-bottom-color:var(--mat-tab-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-divider-height, 1px);border-top-color:var(--mat-tab-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(--mat-tab-container-height, 48px)}.mat-mdc-tab::before{margin:5px}@media(forced-colors: active){.mat-mdc-tab[aria-disabled=true]{color:GrayText}}\n"],
|
|
1276
|
+
encapsulation: 2
|
|
1277
|
+
});
|
|
1278
|
+
};
|
|
1279
|
+
(() => {
|
|
1280
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabHeader, [{
|
|
1281
|
+
type: Component,
|
|
1282
|
+
args: [{
|
|
1283
|
+
selector: "mat-tab-header",
|
|
1284
|
+
encapsulation: ViewEncapsulation.None,
|
|
1285
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
1286
|
+
host: {
|
|
1287
|
+
"class": "mat-mdc-tab-header",
|
|
1288
|
+
"[class.mat-mdc-tab-header-pagination-controls-enabled]": "_showPaginationControls",
|
|
1289
|
+
"[class.mat-mdc-tab-header-rtl]": "_getLayoutDirection() == 'rtl'"
|
|
1290
|
+
},
|
|
1291
|
+
imports: [MatRipple, CdkObserveContent],
|
|
1292
|
+
template: `<!--
|
|
1293
|
+
Note that this intentionally uses a \`div\` instead of a \`button\`, because it's not part of
|
|
1294
|
+
the regular tabs flow and is only here to support mouse users. It should also not be focusable.
|
|
1295
|
+
-->
|
|
1296
|
+
<div class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
|
|
1297
|
+
#previousPaginator
|
|
1298
|
+
mat-ripple
|
|
1299
|
+
[matRippleDisabled]="_disableScrollBefore || disableRipple"
|
|
1300
|
+
[class.mat-mdc-tab-header-pagination-disabled]="_disableScrollBefore"
|
|
1301
|
+
(click)="_handlePaginatorClick('before')"
|
|
1302
|
+
(mousedown)="_handlePaginatorPress('before', $event)"
|
|
1303
|
+
(touchend)="_stopInterval()">
|
|
1304
|
+
<div class="mat-mdc-tab-header-pagination-chevron"></div>
|
|
1305
|
+
</div>
|
|
1306
|
+
|
|
1307
|
+
<div
|
|
1308
|
+
class="mat-mdc-tab-label-container"
|
|
1309
|
+
#tabListContainer
|
|
1310
|
+
(keydown)="_handleKeydown($event)"
|
|
1311
|
+
[class._mat-animation-noopable]="_animationsDisabled">
|
|
1312
|
+
<div
|
|
1313
|
+
#tabList
|
|
1314
|
+
class="mat-mdc-tab-list"
|
|
1315
|
+
role="tablist"
|
|
1316
|
+
[attr.aria-label]="ariaLabel || null"
|
|
1317
|
+
[attr.aria-labelledby]="ariaLabelledby || null"
|
|
1318
|
+
(cdkObserveContent)="_onContentChanges()">
|
|
1319
|
+
<div class="mat-mdc-tab-labels" #tabListInner>
|
|
1320
|
+
<ng-content></ng-content>
|
|
1321
|
+
</div>
|
|
1322
|
+
</div>
|
|
1323
|
+
</div>
|
|
1324
|
+
|
|
1325
|
+
<div class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
|
|
1326
|
+
#nextPaginator
|
|
1327
|
+
mat-ripple
|
|
1328
|
+
[matRippleDisabled]="_disableScrollAfter || disableRipple"
|
|
1329
|
+
[class.mat-mdc-tab-header-pagination-disabled]="_disableScrollAfter"
|
|
1330
|
+
(mousedown)="_handlePaginatorPress('after', $event)"
|
|
1331
|
+
(click)="_handlePaginatorClick('after')"
|
|
1332
|
+
(touchend)="_stopInterval()">
|
|
1333
|
+
<div class="mat-mdc-tab-header-pagination-chevron"></div>
|
|
1334
|
+
</div>
|
|
1335
|
+
`,
|
|
1336
|
+
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-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-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-divider-height, 1px);border-bottom-color:var(--mat-tab-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-divider-height, 1px);border-top-color:var(--mat-tab-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(--mat-tab-container-height, 48px)}.mat-mdc-tab::before{margin:5px}@media(forced-colors: active){.mat-mdc-tab[aria-disabled=true]{color:GrayText}}\n"]
|
|
1337
|
+
}]
|
|
1338
|
+
}], null, {
|
|
1339
|
+
_items: [{
|
|
1340
|
+
type: ContentChildren,
|
|
1341
|
+
args: [MatTabLabelWrapper, {
|
|
1342
|
+
descendants: false
|
|
1343
|
+
}]
|
|
1344
|
+
}],
|
|
1345
|
+
_tabListContainer: [{
|
|
1346
|
+
type: ViewChild,
|
|
1347
|
+
args: ["tabListContainer", {
|
|
1348
|
+
static: true
|
|
1349
|
+
}]
|
|
1350
|
+
}],
|
|
1351
|
+
_tabList: [{
|
|
1352
|
+
type: ViewChild,
|
|
1353
|
+
args: ["tabList", {
|
|
1354
|
+
static: true
|
|
1355
|
+
}]
|
|
1356
|
+
}],
|
|
1357
|
+
_tabListInner: [{
|
|
1358
|
+
type: ViewChild,
|
|
1359
|
+
args: ["tabListInner", {
|
|
1360
|
+
static: true
|
|
1361
|
+
}]
|
|
1362
|
+
}],
|
|
1363
|
+
_nextPaginator: [{
|
|
1364
|
+
type: ViewChild,
|
|
1365
|
+
args: ["nextPaginator"]
|
|
1366
|
+
}],
|
|
1367
|
+
_previousPaginator: [{
|
|
1368
|
+
type: ViewChild,
|
|
1369
|
+
args: ["previousPaginator"]
|
|
1370
|
+
}],
|
|
1371
|
+
ariaLabel: [{
|
|
1372
|
+
type: Input,
|
|
1373
|
+
args: ["aria-label"]
|
|
1374
|
+
}],
|
|
1375
|
+
ariaLabelledby: [{
|
|
1376
|
+
type: Input,
|
|
1377
|
+
args: ["aria-labelledby"]
|
|
1378
|
+
}],
|
|
1379
|
+
disableRipple: [{
|
|
1380
|
+
type: Input,
|
|
1381
|
+
args: [{
|
|
1382
|
+
transform: booleanAttribute
|
|
1383
|
+
}]
|
|
1384
|
+
}]
|
|
1385
|
+
});
|
|
1386
|
+
})();
|
|
1387
|
+
var MAT_TABS_CONFIG = new InjectionToken("MAT_TABS_CONFIG");
|
|
1388
|
+
var MatTabBodyPortal = class _MatTabBodyPortal extends CdkPortalOutlet {
|
|
1389
|
+
_host = inject(MatTabBody);
|
|
1390
|
+
/** Subscription to events for when the tab body begins centering. */
|
|
1391
|
+
_centeringSub = Subscription.EMPTY;
|
|
1392
|
+
/** Subscription to events for when the tab body finishes leaving from center position. */
|
|
1393
|
+
_leavingSub = Subscription.EMPTY;
|
|
1394
|
+
constructor() {
|
|
1395
|
+
super();
|
|
1396
|
+
}
|
|
1397
|
+
/** Set initial visibility or set up subscription for changing visibility. */
|
|
1398
|
+
ngOnInit() {
|
|
1399
|
+
super.ngOnInit();
|
|
1400
|
+
this._centeringSub = this._host._beforeCentering.pipe(startWith(this._host._isCenterPosition())).subscribe((isCentering) => {
|
|
1401
|
+
if (this._host._content && isCentering && !this.hasAttached()) {
|
|
1402
|
+
this.attach(this._host._content);
|
|
1403
|
+
}
|
|
1404
|
+
});
|
|
1405
|
+
this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {
|
|
1406
|
+
if (!this._host.preserveContent) {
|
|
1407
|
+
this.detach();
|
|
1408
|
+
}
|
|
1409
|
+
});
|
|
1410
|
+
}
|
|
1411
|
+
/** Clean up centering subscription. */
|
|
1412
|
+
ngOnDestroy() {
|
|
1413
|
+
super.ngOnDestroy();
|
|
1414
|
+
this._centeringSub.unsubscribe();
|
|
1415
|
+
this._leavingSub.unsubscribe();
|
|
1416
|
+
}
|
|
1417
|
+
static \u0275fac = function MatTabBodyPortal_Factory(__ngFactoryType__) {
|
|
1418
|
+
return new (__ngFactoryType__ || _MatTabBodyPortal)();
|
|
1419
|
+
};
|
|
1420
|
+
static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
|
|
1421
|
+
type: _MatTabBodyPortal,
|
|
1422
|
+
selectors: [["", "matTabBodyHost", ""]],
|
|
1423
|
+
features: [\u0275\u0275InheritDefinitionFeature]
|
|
1424
|
+
});
|
|
1425
|
+
};
|
|
1426
|
+
(() => {
|
|
1427
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabBodyPortal, [{
|
|
1428
|
+
type: Directive,
|
|
1429
|
+
args: [{
|
|
1430
|
+
selector: "[matTabBodyHost]"
|
|
1431
|
+
}]
|
|
1432
|
+
}], () => [], null);
|
|
1433
|
+
})();
|
|
1434
|
+
var MatTabBody = class _MatTabBody {
|
|
1435
|
+
_elementRef = inject(ElementRef);
|
|
1436
|
+
_dir = inject(Directionality, {
|
|
1437
|
+
optional: true
|
|
1438
|
+
});
|
|
1439
|
+
_ngZone = inject(NgZone);
|
|
1440
|
+
_injector = inject(Injector);
|
|
1441
|
+
_renderer = inject(Renderer2);
|
|
1442
|
+
_diAnimationsDisabled = _animationsDisabled();
|
|
1443
|
+
_eventCleanups;
|
|
1444
|
+
_initialized;
|
|
1445
|
+
_fallbackTimer;
|
|
1446
|
+
/** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
|
|
1447
|
+
_positionIndex;
|
|
1448
|
+
/** Subscription to the directionality change observable. */
|
|
1449
|
+
_dirChangeSubscription = Subscription.EMPTY;
|
|
1450
|
+
/** Current position of the body within the tab group. */
|
|
1451
|
+
_position;
|
|
1452
|
+
/** Previous position of the body. */
|
|
1453
|
+
_previousPosition;
|
|
1454
|
+
/** Event emitted when the tab begins to animate towards the center as the active tab. */
|
|
1455
|
+
_onCentering = new EventEmitter();
|
|
1456
|
+
/** Event emitted before the centering of the tab begins. */
|
|
1457
|
+
_beforeCentering = new EventEmitter();
|
|
1458
|
+
/** Event emitted before the centering of the tab begins. */
|
|
1459
|
+
_afterLeavingCenter = new EventEmitter();
|
|
1460
|
+
/** Event emitted when the tab completes its animation towards the center. */
|
|
1461
|
+
_onCentered = new EventEmitter(true);
|
|
1462
|
+
/** The portal host inside of this container into which the tab body content will be loaded. */
|
|
1463
|
+
_portalHost;
|
|
1464
|
+
/** Element in which the content is rendered. */
|
|
1465
|
+
_contentElement;
|
|
1466
|
+
/** The tab body content to display. */
|
|
1467
|
+
_content;
|
|
1468
|
+
// Note that the default value will always be overwritten by `MatTabBody`, but we need one
|
|
1469
|
+
// anyway to prevent the animations module from throwing an error if the body is used on its own.
|
|
1470
|
+
/** Duration for the tab's animation. */
|
|
1471
|
+
animationDuration = "500ms";
|
|
1472
|
+
/** Whether the tab's content should be kept in the DOM while it's off-screen. */
|
|
1473
|
+
preserveContent = false;
|
|
1474
|
+
/** The shifted index position of the tab body, where zero represents the active center tab. */
|
|
1475
|
+
set position(position) {
|
|
1476
|
+
this._positionIndex = position;
|
|
1477
|
+
this._computePositionAnimationState();
|
|
1478
|
+
}
|
|
1479
|
+
constructor() {
|
|
1480
|
+
if (this._dir) {
|
|
1481
|
+
const changeDetectorRef = inject(ChangeDetectorRef);
|
|
1482
|
+
this._dirChangeSubscription = this._dir.change.subscribe((dir) => {
|
|
1483
|
+
this._computePositionAnimationState(dir);
|
|
1484
|
+
changeDetectorRef.markForCheck();
|
|
1485
|
+
});
|
|
1486
|
+
}
|
|
1487
|
+
}
|
|
1488
|
+
ngOnInit() {
|
|
1489
|
+
this._bindTransitionEvents();
|
|
1490
|
+
if (this._position === "center") {
|
|
1491
|
+
this._setActiveClass(true);
|
|
1492
|
+
afterNextRender(() => this._onCentering.emit(this._elementRef.nativeElement.clientHeight), {
|
|
1493
|
+
injector: this._injector
|
|
1494
|
+
});
|
|
1495
|
+
}
|
|
1496
|
+
this._initialized = true;
|
|
1497
|
+
}
|
|
1498
|
+
ngOnDestroy() {
|
|
1499
|
+
clearTimeout(this._fallbackTimer);
|
|
1500
|
+
this._eventCleanups?.forEach((cleanup) => cleanup());
|
|
1501
|
+
this._dirChangeSubscription.unsubscribe();
|
|
1502
|
+
}
|
|
1503
|
+
/** Sets up the transition events. */
|
|
1504
|
+
_bindTransitionEvents() {
|
|
1505
|
+
this._ngZone.runOutsideAngular(() => {
|
|
1506
|
+
const element = this._elementRef.nativeElement;
|
|
1507
|
+
const transitionDone = (event) => {
|
|
1508
|
+
if (event.target === this._contentElement?.nativeElement) {
|
|
1509
|
+
this._elementRef.nativeElement.classList.remove("mat-tab-body-animating");
|
|
1510
|
+
if (event.type === "transitionend") {
|
|
1511
|
+
this._transitionDone();
|
|
1512
|
+
}
|
|
1513
|
+
}
|
|
1514
|
+
};
|
|
1515
|
+
this._eventCleanups = [this._renderer.listen(element, "transitionstart", (event) => {
|
|
1516
|
+
if (event.target === this._contentElement?.nativeElement) {
|
|
1517
|
+
this._elementRef.nativeElement.classList.add("mat-tab-body-animating");
|
|
1518
|
+
this._transitionStarted();
|
|
1519
|
+
}
|
|
1520
|
+
}), this._renderer.listen(element, "transitionend", transitionDone), this._renderer.listen(element, "transitioncancel", transitionDone)];
|
|
1521
|
+
});
|
|
1522
|
+
}
|
|
1523
|
+
/** Called when a transition has started. */
|
|
1524
|
+
_transitionStarted() {
|
|
1525
|
+
clearTimeout(this._fallbackTimer);
|
|
1526
|
+
const isCentering = this._position === "center";
|
|
1527
|
+
this._beforeCentering.emit(isCentering);
|
|
1528
|
+
if (isCentering) {
|
|
1529
|
+
this._onCentering.emit(this._elementRef.nativeElement.clientHeight);
|
|
1530
|
+
}
|
|
1531
|
+
}
|
|
1532
|
+
/** Called when a transition is done. */
|
|
1533
|
+
_transitionDone() {
|
|
1534
|
+
if (this._position === "center") {
|
|
1535
|
+
this._onCentered.emit();
|
|
1536
|
+
} else if (this._previousPosition === "center") {
|
|
1537
|
+
this._afterLeavingCenter.emit();
|
|
1538
|
+
}
|
|
1539
|
+
}
|
|
1540
|
+
/** Sets the active styling on the tab body based on its current position. */
|
|
1541
|
+
_setActiveClass(isActive) {
|
|
1542
|
+
this._elementRef.nativeElement.classList.toggle("mat-mdc-tab-body-active", isActive);
|
|
1543
|
+
}
|
|
1544
|
+
/** The text direction of the containing app. */
|
|
1545
|
+
_getLayoutDirection() {
|
|
1546
|
+
return this._dir && this._dir.value === "rtl" ? "rtl" : "ltr";
|
|
1547
|
+
}
|
|
1548
|
+
/** Whether the provided position state is considered center, regardless of origin. */
|
|
1549
|
+
_isCenterPosition() {
|
|
1550
|
+
return this._positionIndex === 0;
|
|
1551
|
+
}
|
|
1552
|
+
/** Computes the position state that will be used for the tab-body animation trigger. */
|
|
1553
|
+
_computePositionAnimationState(dir = this._getLayoutDirection()) {
|
|
1554
|
+
this._previousPosition = this._position;
|
|
1555
|
+
if (this._positionIndex < 0) {
|
|
1556
|
+
this._position = dir == "ltr" ? "left" : "right";
|
|
1557
|
+
} else if (this._positionIndex > 0) {
|
|
1558
|
+
this._position = dir == "ltr" ? "right" : "left";
|
|
1559
|
+
} else {
|
|
1560
|
+
this._position = "center";
|
|
1561
|
+
}
|
|
1562
|
+
if (this._animationsDisabled()) {
|
|
1563
|
+
this._simulateTransitionEvents();
|
|
1564
|
+
} else if (this._initialized && (this._position === "center" || this._previousPosition === "center")) {
|
|
1565
|
+
clearTimeout(this._fallbackTimer);
|
|
1566
|
+
this._fallbackTimer = this._ngZone.runOutsideAngular(() => setTimeout(() => this._simulateTransitionEvents(), 100));
|
|
1567
|
+
}
|
|
1568
|
+
}
|
|
1569
|
+
/** Simulates the body's transition events in an environment where they might not fire. */
|
|
1570
|
+
_simulateTransitionEvents() {
|
|
1571
|
+
this._transitionStarted();
|
|
1572
|
+
afterNextRender(() => this._transitionDone(), {
|
|
1573
|
+
injector: this._injector
|
|
1574
|
+
});
|
|
1575
|
+
}
|
|
1576
|
+
/** Whether animations are disabled for the tab group. */
|
|
1577
|
+
_animationsDisabled() {
|
|
1578
|
+
return this._diAnimationsDisabled || this.animationDuration === "0ms" || this.animationDuration === "0s";
|
|
1579
|
+
}
|
|
1580
|
+
static \u0275fac = function MatTabBody_Factory(__ngFactoryType__) {
|
|
1581
|
+
return new (__ngFactoryType__ || _MatTabBody)();
|
|
1582
|
+
};
|
|
1583
|
+
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
|
|
1584
|
+
type: _MatTabBody,
|
|
1585
|
+
selectors: [["mat-tab-body"]],
|
|
1586
|
+
viewQuery: function MatTabBody_Query(rf, ctx) {
|
|
1587
|
+
if (rf & 1) {
|
|
1588
|
+
\u0275\u0275viewQuery(MatTabBodyPortal, 5);
|
|
1589
|
+
\u0275\u0275viewQuery(_c6, 5);
|
|
1590
|
+
}
|
|
1591
|
+
if (rf & 2) {
|
|
1592
|
+
let _t;
|
|
1593
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._portalHost = _t.first);
|
|
1594
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._contentElement = _t.first);
|
|
1595
|
+
}
|
|
1596
|
+
},
|
|
1597
|
+
hostAttrs: [1, "mat-mdc-tab-body"],
|
|
1598
|
+
hostVars: 1,
|
|
1599
|
+
hostBindings: function MatTabBody_HostBindings(rf, ctx) {
|
|
1600
|
+
if (rf & 2) {
|
|
1601
|
+
\u0275\u0275attribute("inert", ctx._position === "center" ? null : "");
|
|
1602
|
+
}
|
|
1603
|
+
},
|
|
1604
|
+
inputs: {
|
|
1605
|
+
_content: [0, "content", "_content"],
|
|
1606
|
+
animationDuration: "animationDuration",
|
|
1607
|
+
preserveContent: "preserveContent",
|
|
1608
|
+
position: "position"
|
|
1609
|
+
},
|
|
1610
|
+
outputs: {
|
|
1611
|
+
_onCentering: "_onCentering",
|
|
1612
|
+
_beforeCentering: "_beforeCentering",
|
|
1613
|
+
_onCentered: "_onCentered"
|
|
1614
|
+
},
|
|
1615
|
+
decls: 3,
|
|
1616
|
+
vars: 6,
|
|
1617
|
+
consts: [["content", ""], ["cdkScrollable", "", 1, "mat-mdc-tab-body-content"], ["matTabBodyHost", ""]],
|
|
1618
|
+
template: function MatTabBody_Template(rf, ctx) {
|
|
1619
|
+
if (rf & 1) {
|
|
1620
|
+
\u0275\u0275elementStart(0, "div", 1, 0);
|
|
1621
|
+
\u0275\u0275template(2, MatTabBody_ng_template_2_Template, 0, 0, "ng-template", 2);
|
|
1622
|
+
\u0275\u0275elementEnd();
|
|
1623
|
+
}
|
|
1624
|
+
if (rf & 2) {
|
|
1625
|
+
\u0275\u0275classProp("mat-tab-body-content-left", ctx._position === "left")("mat-tab-body-content-right", ctx._position === "right")("mat-tab-body-content-can-animate", ctx._position === "center" || ctx._previousPosition === "center");
|
|
1626
|
+
}
|
|
1627
|
+
},
|
|
1628
|
+
dependencies: [MatTabBodyPortal, CdkScrollable],
|
|
1629
|
+
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;transform:none;visibility:hidden}.mat-tab-body-animating>.mat-mdc-tab-body-content,.mat-mdc-tab-body-active>.mat-mdc-tab-body-content{visibility:visible}.mat-tab-body-animating>.mat-mdc-tab-body-content{min-height:1px}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-tab-body-content-can-animate{transition:transform var(--mat-tab-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable .mat-tab-body-content-can-animate{transition:none}.mat-tab-body-content-left{transform:translate3d(-100%, 0, 0)}.mat-tab-body-content-right{transform:translate3d(100%, 0, 0)}\n"],
|
|
1630
|
+
encapsulation: 2
|
|
1631
|
+
});
|
|
1632
|
+
};
|
|
1633
|
+
(() => {
|
|
1634
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabBody, [{
|
|
1635
|
+
type: Component,
|
|
1636
|
+
args: [{
|
|
1637
|
+
selector: "mat-tab-body",
|
|
1638
|
+
encapsulation: ViewEncapsulation.None,
|
|
1639
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
1640
|
+
host: {
|
|
1641
|
+
"class": "mat-mdc-tab-body",
|
|
1642
|
+
// In most cases the `visibility: hidden` that we set on the off-screen content is enough
|
|
1643
|
+
// to stop interactions with it, but if a child element sets its own `visibility`, it'll
|
|
1644
|
+
// override the one from the parent. This ensures that even those elements will be removed
|
|
1645
|
+
// from the accessibility tree.
|
|
1646
|
+
"[attr.inert]": '_position === "center" ? null : ""'
|
|
1647
|
+
},
|
|
1648
|
+
imports: [MatTabBodyPortal, CdkScrollable],
|
|
1649
|
+
template: `<div
|
|
1650
|
+
class="mat-mdc-tab-body-content"
|
|
1651
|
+
#content
|
|
1652
|
+
cdkScrollable
|
|
1653
|
+
[class.mat-tab-body-content-left]="_position === 'left'"
|
|
1654
|
+
[class.mat-tab-body-content-right]="_position === 'right'"
|
|
1655
|
+
[class.mat-tab-body-content-can-animate]="_position === 'center' || _previousPosition === 'center'">
|
|
1656
|
+
<ng-template matTabBodyHost></ng-template>
|
|
1657
|
+
</div>
|
|
1658
|
+
`,
|
|
1659
|
+
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;transform:none;visibility:hidden}.mat-tab-body-animating>.mat-mdc-tab-body-content,.mat-mdc-tab-body-active>.mat-mdc-tab-body-content{visibility:visible}.mat-tab-body-animating>.mat-mdc-tab-body-content{min-height:1px}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-tab-body-content-can-animate{transition:transform var(--mat-tab-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable .mat-tab-body-content-can-animate{transition:none}.mat-tab-body-content-left{transform:translate3d(-100%, 0, 0)}.mat-tab-body-content-right{transform:translate3d(100%, 0, 0)}\n"]
|
|
1660
|
+
}]
|
|
1661
|
+
}], () => [], {
|
|
1662
|
+
_onCentering: [{
|
|
1663
|
+
type: Output
|
|
1664
|
+
}],
|
|
1665
|
+
_beforeCentering: [{
|
|
1666
|
+
type: Output
|
|
1667
|
+
}],
|
|
1668
|
+
_onCentered: [{
|
|
1669
|
+
type: Output
|
|
1670
|
+
}],
|
|
1671
|
+
_portalHost: [{
|
|
1672
|
+
type: ViewChild,
|
|
1673
|
+
args: [MatTabBodyPortal]
|
|
1674
|
+
}],
|
|
1675
|
+
_contentElement: [{
|
|
1676
|
+
type: ViewChild,
|
|
1677
|
+
args: ["content"]
|
|
1678
|
+
}],
|
|
1679
|
+
_content: [{
|
|
1680
|
+
type: Input,
|
|
1681
|
+
args: ["content"]
|
|
1682
|
+
}],
|
|
1683
|
+
animationDuration: [{
|
|
1684
|
+
type: Input
|
|
1685
|
+
}],
|
|
1686
|
+
preserveContent: [{
|
|
1687
|
+
type: Input
|
|
1688
|
+
}],
|
|
1689
|
+
position: [{
|
|
1690
|
+
type: Input
|
|
1691
|
+
}]
|
|
1692
|
+
});
|
|
1693
|
+
})();
|
|
1694
|
+
var MatTabGroup = class _MatTabGroup {
|
|
1695
|
+
_elementRef = inject(ElementRef);
|
|
1696
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
1697
|
+
_ngZone = inject(NgZone);
|
|
1698
|
+
_tabsSubscription = Subscription.EMPTY;
|
|
1699
|
+
_tabLabelSubscription = Subscription.EMPTY;
|
|
1700
|
+
_tabBodySubscription = Subscription.EMPTY;
|
|
1701
|
+
_diAnimationsDisabled = _animationsDisabled();
|
|
1702
|
+
/**
|
|
1703
|
+
* All tabs inside the tab group. This includes tabs that belong to groups that are nested
|
|
1704
|
+
* inside the current one. We filter out only the tabs that belong to this group in `_tabs`.
|
|
1705
|
+
*/
|
|
1706
|
+
_allTabs;
|
|
1707
|
+
_tabBodies;
|
|
1708
|
+
_tabBodyWrapper;
|
|
1709
|
+
_tabHeader;
|
|
1710
|
+
/** All of the tabs that belong to the group. */
|
|
1711
|
+
_tabs = new QueryList();
|
|
1712
|
+
/** The tab index that should be selected after the content has been checked. */
|
|
1713
|
+
_indexToSelect = 0;
|
|
1714
|
+
/** Index of the tab that was focused last. */
|
|
1715
|
+
_lastFocusedTabIndex = null;
|
|
1716
|
+
/** Snapshot of the height of the tab body wrapper before another tab is activated. */
|
|
1717
|
+
_tabBodyWrapperHeight = 0;
|
|
1718
|
+
/**
|
|
1719
|
+
* Theme color of the tab group. This API is supported in M2 themes only, it
|
|
1720
|
+
* has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
|
|
1721
|
+
*
|
|
1722
|
+
* For information on applying color variants in M3, see
|
|
1723
|
+
* https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
|
|
1724
|
+
*/
|
|
1725
|
+
color;
|
|
1726
|
+
/** Whether the ink bar should fit its width to the size of the tab label content. */
|
|
1727
|
+
get fitInkBarToContent() {
|
|
1728
|
+
return this._fitInkBarToContent;
|
|
1729
|
+
}
|
|
1730
|
+
set fitInkBarToContent(value) {
|
|
1731
|
+
this._fitInkBarToContent = value;
|
|
1732
|
+
this._changeDetectorRef.markForCheck();
|
|
1733
|
+
}
|
|
1734
|
+
_fitInkBarToContent = false;
|
|
1735
|
+
/** Whether tabs should be stretched to fill the header. */
|
|
1736
|
+
stretchTabs = true;
|
|
1737
|
+
/** Alignment for tabs label. */
|
|
1738
|
+
alignTabs = null;
|
|
1739
|
+
/** Whether the tab group should grow to the size of the active tab. */
|
|
1740
|
+
dynamicHeight = false;
|
|
1741
|
+
/** The index of the active tab. */
|
|
1742
|
+
get selectedIndex() {
|
|
1743
|
+
return this._selectedIndex;
|
|
1744
|
+
}
|
|
1745
|
+
set selectedIndex(value) {
|
|
1746
|
+
this._indexToSelect = isNaN(value) ? null : value;
|
|
1747
|
+
}
|
|
1748
|
+
_selectedIndex = null;
|
|
1749
|
+
/** Position of the tab header. */
|
|
1750
|
+
headerPosition = "above";
|
|
1751
|
+
/** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
|
|
1752
|
+
get animationDuration() {
|
|
1753
|
+
return this._animationDuration;
|
|
1754
|
+
}
|
|
1755
|
+
set animationDuration(value) {
|
|
1756
|
+
const stringValue = value + "";
|
|
1757
|
+
this._animationDuration = /^\d+$/.test(stringValue) ? value + "ms" : stringValue;
|
|
1758
|
+
}
|
|
1759
|
+
_animationDuration;
|
|
1760
|
+
/**
|
|
1761
|
+
* `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
|
|
1762
|
+
* accessibility when the tab does not have focusable elements or if it has scrollable content.
|
|
1763
|
+
* The `tabindex` will be removed automatically for inactive tabs.
|
|
1764
|
+
* Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html
|
|
1765
|
+
*/
|
|
1766
|
+
get contentTabIndex() {
|
|
1767
|
+
return this._contentTabIndex;
|
|
1768
|
+
}
|
|
1769
|
+
set contentTabIndex(value) {
|
|
1770
|
+
this._contentTabIndex = isNaN(value) ? null : value;
|
|
1771
|
+
}
|
|
1772
|
+
_contentTabIndex;
|
|
1773
|
+
/**
|
|
1774
|
+
* Whether pagination should be disabled. This can be used to avoid unnecessary
|
|
1775
|
+
* layout recalculations if it's known that pagination won't be required.
|
|
1776
|
+
*/
|
|
1777
|
+
disablePagination = false;
|
|
1778
|
+
/** Whether ripples in the tab group are disabled. */
|
|
1779
|
+
disableRipple = false;
|
|
1780
|
+
/**
|
|
1781
|
+
* By default tabs remove their content from the DOM while it's off-screen.
|
|
1782
|
+
* Setting this to `true` will keep it in the DOM which will prevent elements
|
|
1783
|
+
* like iframes and videos from reloading next time it comes back into the view.
|
|
1784
|
+
*/
|
|
1785
|
+
preserveContent = false;
|
|
1786
|
+
/**
|
|
1787
|
+
* Theme color of the background of the tab group. This API is supported in M2 themes only, it
|
|
1788
|
+
* has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
|
|
1789
|
+
*
|
|
1790
|
+
* For information on applying color variants in M3, see
|
|
1791
|
+
* https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
|
|
1792
|
+
*
|
|
1793
|
+
* @deprecated The background color should be customized through Sass theming APIs.
|
|
1794
|
+
* @breaking-change 20.0.0 Remove this input
|
|
1795
|
+
*/
|
|
1796
|
+
get backgroundColor() {
|
|
1797
|
+
return this._backgroundColor;
|
|
1798
|
+
}
|
|
1799
|
+
set backgroundColor(value) {
|
|
1800
|
+
const classList = this._elementRef.nativeElement.classList;
|
|
1801
|
+
classList.remove("mat-tabs-with-background", `mat-background-${this.backgroundColor}`);
|
|
1802
|
+
if (value) {
|
|
1803
|
+
classList.add("mat-tabs-with-background", `mat-background-${value}`);
|
|
1804
|
+
}
|
|
1805
|
+
this._backgroundColor = value;
|
|
1806
|
+
}
|
|
1807
|
+
_backgroundColor;
|
|
1808
|
+
/** Aria label of the inner `tablist` of the group. */
|
|
1809
|
+
ariaLabel;
|
|
1810
|
+
/** Sets the `aria-labelledby` of the inner `tablist` of the group. */
|
|
1811
|
+
ariaLabelledby;
|
|
1812
|
+
/** Output to enable support for two-way binding on `[(selectedIndex)]` */
|
|
1813
|
+
selectedIndexChange = new EventEmitter();
|
|
1814
|
+
/** Event emitted when focus has changed within a tab group. */
|
|
1815
|
+
focusChange = new EventEmitter();
|
|
1816
|
+
/** Event emitted when the body animation has completed */
|
|
1817
|
+
animationDone = new EventEmitter();
|
|
1818
|
+
/** Event emitted when the tab selection has changed. */
|
|
1819
|
+
selectedTabChange = new EventEmitter(true);
|
|
1820
|
+
_groupId;
|
|
1821
|
+
/** Whether the tab group is rendered on the server. */
|
|
1822
|
+
_isServer = !inject(Platform).isBrowser;
|
|
1823
|
+
constructor() {
|
|
1824
|
+
const defaultConfig = inject(MAT_TABS_CONFIG, {
|
|
1825
|
+
optional: true
|
|
1826
|
+
});
|
|
1827
|
+
this._groupId = inject(_IdGenerator).getId("mat-tab-group-");
|
|
1828
|
+
this.animationDuration = defaultConfig && defaultConfig.animationDuration ? defaultConfig.animationDuration : "500ms";
|
|
1829
|
+
this.disablePagination = defaultConfig && defaultConfig.disablePagination != null ? defaultConfig.disablePagination : false;
|
|
1830
|
+
this.dynamicHeight = defaultConfig && defaultConfig.dynamicHeight != null ? defaultConfig.dynamicHeight : false;
|
|
1831
|
+
if (defaultConfig?.contentTabIndex != null) {
|
|
1832
|
+
this.contentTabIndex = defaultConfig.contentTabIndex;
|
|
1833
|
+
}
|
|
1834
|
+
this.preserveContent = !!defaultConfig?.preserveContent;
|
|
1835
|
+
this.fitInkBarToContent = defaultConfig && defaultConfig.fitInkBarToContent != null ? defaultConfig.fitInkBarToContent : false;
|
|
1836
|
+
this.stretchTabs = defaultConfig && defaultConfig.stretchTabs != null ? defaultConfig.stretchTabs : true;
|
|
1837
|
+
this.alignTabs = defaultConfig && defaultConfig.alignTabs != null ? defaultConfig.alignTabs : null;
|
|
1838
|
+
}
|
|
1839
|
+
/**
|
|
1840
|
+
* After the content is checked, this component knows what tabs have been defined
|
|
1841
|
+
* and what the selected index should be. This is where we can know exactly what position
|
|
1842
|
+
* each tab should be in according to the new selected index, and additionally we know how
|
|
1843
|
+
* a new selected tab should transition in (from the left or right).
|
|
1844
|
+
*/
|
|
1845
|
+
ngAfterContentChecked() {
|
|
1846
|
+
const indexToSelect = this._indexToSelect = this._clampTabIndex(this._indexToSelect);
|
|
1847
|
+
if (this._selectedIndex != indexToSelect) {
|
|
1848
|
+
const isFirstRun = this._selectedIndex == null;
|
|
1849
|
+
if (!isFirstRun) {
|
|
1850
|
+
this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));
|
|
1851
|
+
const wrapper = this._tabBodyWrapper.nativeElement;
|
|
1852
|
+
wrapper.style.minHeight = wrapper.clientHeight + "px";
|
|
1853
|
+
}
|
|
1854
|
+
Promise.resolve().then(() => {
|
|
1855
|
+
this._tabs.forEach((tab, index) => tab.isActive = index === indexToSelect);
|
|
1856
|
+
if (!isFirstRun) {
|
|
1857
|
+
this.selectedIndexChange.emit(indexToSelect);
|
|
1858
|
+
this._tabBodyWrapper.nativeElement.style.minHeight = "";
|
|
1859
|
+
}
|
|
1860
|
+
});
|
|
1861
|
+
}
|
|
1862
|
+
this._tabs.forEach((tab, index) => {
|
|
1863
|
+
tab.position = index - indexToSelect;
|
|
1864
|
+
if (this._selectedIndex != null && tab.position == 0 && !tab.origin) {
|
|
1865
|
+
tab.origin = indexToSelect - this._selectedIndex;
|
|
1866
|
+
}
|
|
1867
|
+
});
|
|
1868
|
+
if (this._selectedIndex !== indexToSelect) {
|
|
1869
|
+
this._selectedIndex = indexToSelect;
|
|
1870
|
+
this._lastFocusedTabIndex = null;
|
|
1871
|
+
this._changeDetectorRef.markForCheck();
|
|
1872
|
+
}
|
|
1873
|
+
}
|
|
1874
|
+
ngAfterContentInit() {
|
|
1875
|
+
this._subscribeToAllTabChanges();
|
|
1876
|
+
this._subscribeToTabLabels();
|
|
1877
|
+
this._tabsSubscription = this._tabs.changes.subscribe(() => {
|
|
1878
|
+
const indexToSelect = this._clampTabIndex(this._indexToSelect);
|
|
1879
|
+
if (indexToSelect === this._selectedIndex) {
|
|
1880
|
+
const tabs = this._tabs.toArray();
|
|
1881
|
+
let selectedTab;
|
|
1882
|
+
for (let i = 0; i < tabs.length; i++) {
|
|
1883
|
+
if (tabs[i].isActive) {
|
|
1884
|
+
this._indexToSelect = this._selectedIndex = i;
|
|
1885
|
+
this._lastFocusedTabIndex = null;
|
|
1886
|
+
selectedTab = tabs[i];
|
|
1887
|
+
break;
|
|
1888
|
+
}
|
|
1889
|
+
}
|
|
1890
|
+
if (!selectedTab && tabs[indexToSelect]) {
|
|
1891
|
+
Promise.resolve().then(() => {
|
|
1892
|
+
tabs[indexToSelect].isActive = true;
|
|
1893
|
+
this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));
|
|
1894
|
+
});
|
|
1895
|
+
}
|
|
1896
|
+
}
|
|
1897
|
+
this._changeDetectorRef.markForCheck();
|
|
1898
|
+
});
|
|
1899
|
+
}
|
|
1900
|
+
ngAfterViewInit() {
|
|
1901
|
+
this._tabBodySubscription = this._tabBodies.changes.subscribe(() => this._bodyCentered(true));
|
|
1902
|
+
}
|
|
1903
|
+
/** Listens to changes in all of the tabs. */
|
|
1904
|
+
_subscribeToAllTabChanges() {
|
|
1905
|
+
this._allTabs.changes.pipe(startWith(this._allTabs)).subscribe((tabs) => {
|
|
1906
|
+
this._tabs.reset(tabs.filter((tab) => {
|
|
1907
|
+
return tab._closestTabGroup === this || !tab._closestTabGroup;
|
|
1908
|
+
}));
|
|
1909
|
+
this._tabs.notifyOnChanges();
|
|
1910
|
+
});
|
|
1911
|
+
}
|
|
1912
|
+
ngOnDestroy() {
|
|
1913
|
+
this._tabs.destroy();
|
|
1914
|
+
this._tabsSubscription.unsubscribe();
|
|
1915
|
+
this._tabLabelSubscription.unsubscribe();
|
|
1916
|
+
this._tabBodySubscription.unsubscribe();
|
|
1917
|
+
}
|
|
1918
|
+
/** Re-aligns the ink bar to the selected tab element. */
|
|
1919
|
+
realignInkBar() {
|
|
1920
|
+
if (this._tabHeader) {
|
|
1921
|
+
this._tabHeader._alignInkBarToSelectedTab();
|
|
1922
|
+
}
|
|
1923
|
+
}
|
|
1924
|
+
/**
|
|
1925
|
+
* Recalculates the tab group's pagination dimensions.
|
|
1926
|
+
*
|
|
1927
|
+
* WARNING: Calling this method can be very costly in terms of performance. It should be called
|
|
1928
|
+
* as infrequently as possible from outside of the Tabs component as it causes a reflow of the
|
|
1929
|
+
* page.
|
|
1930
|
+
*/
|
|
1931
|
+
updatePagination() {
|
|
1932
|
+
if (this._tabHeader) {
|
|
1933
|
+
this._tabHeader.updatePagination();
|
|
1934
|
+
}
|
|
1935
|
+
}
|
|
1936
|
+
/**
|
|
1937
|
+
* Sets focus to a particular tab.
|
|
1938
|
+
* @param index Index of the tab to be focused.
|
|
1939
|
+
*/
|
|
1940
|
+
focusTab(index) {
|
|
1941
|
+
const header = this._tabHeader;
|
|
1942
|
+
if (header) {
|
|
1943
|
+
header.focusIndex = index;
|
|
1944
|
+
}
|
|
1945
|
+
}
|
|
1946
|
+
_focusChanged(index) {
|
|
1947
|
+
this._lastFocusedTabIndex = index;
|
|
1948
|
+
this.focusChange.emit(this._createChangeEvent(index));
|
|
1949
|
+
}
|
|
1950
|
+
_createChangeEvent(index) {
|
|
1951
|
+
const event = new MatTabChangeEvent();
|
|
1952
|
+
event.index = index;
|
|
1953
|
+
if (this._tabs && this._tabs.length) {
|
|
1954
|
+
event.tab = this._tabs.toArray()[index];
|
|
1955
|
+
}
|
|
1956
|
+
return event;
|
|
1957
|
+
}
|
|
1958
|
+
/**
|
|
1959
|
+
* Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
|
|
1960
|
+
* on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the
|
|
1961
|
+
* binding to be updated, we need to subscribe to changes in it and trigger change detection
|
|
1962
|
+
* manually.
|
|
1963
|
+
*/
|
|
1964
|
+
_subscribeToTabLabels() {
|
|
1965
|
+
if (this._tabLabelSubscription) {
|
|
1966
|
+
this._tabLabelSubscription.unsubscribe();
|
|
1967
|
+
}
|
|
1968
|
+
this._tabLabelSubscription = merge(...this._tabs.map((tab) => tab._stateChanges)).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
1969
|
+
}
|
|
1970
|
+
/** Clamps the given index to the bounds of 0 and the tabs length. */
|
|
1971
|
+
_clampTabIndex(index) {
|
|
1972
|
+
return Math.min(this._tabs.length - 1, Math.max(index || 0, 0));
|
|
1973
|
+
}
|
|
1974
|
+
/** Returns a unique id for each tab label element */
|
|
1975
|
+
_getTabLabelId(tab, index) {
|
|
1976
|
+
return tab.id || `${this._groupId}-label-${index}`;
|
|
1977
|
+
}
|
|
1978
|
+
/** Returns a unique id for each tab content element */
|
|
1979
|
+
_getTabContentId(index) {
|
|
1980
|
+
return `${this._groupId}-content-${index}`;
|
|
1981
|
+
}
|
|
1982
|
+
/**
|
|
1983
|
+
* Sets the height of the body wrapper to the height of the activating tab if dynamic
|
|
1984
|
+
* height property is true.
|
|
1985
|
+
*/
|
|
1986
|
+
_setTabBodyWrapperHeight(tabHeight) {
|
|
1987
|
+
if (!this.dynamicHeight || !this._tabBodyWrapperHeight) {
|
|
1988
|
+
this._tabBodyWrapperHeight = tabHeight;
|
|
1989
|
+
return;
|
|
1990
|
+
}
|
|
1991
|
+
const wrapper = this._tabBodyWrapper.nativeElement;
|
|
1992
|
+
wrapper.style.height = this._tabBodyWrapperHeight + "px";
|
|
1993
|
+
if (this._tabBodyWrapper.nativeElement.offsetHeight) {
|
|
1994
|
+
wrapper.style.height = tabHeight + "px";
|
|
1995
|
+
}
|
|
1996
|
+
}
|
|
1997
|
+
/** Removes the height of the tab body wrapper. */
|
|
1998
|
+
_removeTabBodyWrapperHeight() {
|
|
1999
|
+
const wrapper = this._tabBodyWrapper.nativeElement;
|
|
2000
|
+
this._tabBodyWrapperHeight = wrapper.clientHeight;
|
|
2001
|
+
wrapper.style.height = "";
|
|
2002
|
+
this._ngZone.run(() => this.animationDone.emit());
|
|
2003
|
+
}
|
|
2004
|
+
/** Handle click events, setting new selected index if appropriate. */
|
|
2005
|
+
_handleClick(tab, tabHeader, index) {
|
|
2006
|
+
tabHeader.focusIndex = index;
|
|
2007
|
+
if (!tab.disabled) {
|
|
2008
|
+
this.selectedIndex = index;
|
|
2009
|
+
}
|
|
2010
|
+
}
|
|
2011
|
+
/** Retrieves the tabindex for the tab. */
|
|
2012
|
+
_getTabIndex(index) {
|
|
2013
|
+
const targetIndex = this._lastFocusedTabIndex ?? this.selectedIndex;
|
|
2014
|
+
return index === targetIndex ? 0 : -1;
|
|
2015
|
+
}
|
|
2016
|
+
/** Callback for when the focused state of a tab has changed. */
|
|
2017
|
+
_tabFocusChanged(focusOrigin, index) {
|
|
2018
|
+
if (focusOrigin && focusOrigin !== "mouse" && focusOrigin !== "touch") {
|
|
2019
|
+
this._tabHeader.focusIndex = index;
|
|
2020
|
+
}
|
|
2021
|
+
}
|
|
2022
|
+
/**
|
|
2023
|
+
* Callback invoked when the centered state of a tab body changes.
|
|
2024
|
+
* @param isCenter Whether the tab will be in the center.
|
|
2025
|
+
*/
|
|
2026
|
+
_bodyCentered(isCenter) {
|
|
2027
|
+
if (isCenter) {
|
|
2028
|
+
this._tabBodies?.forEach((body, i) => body._setActiveClass(i === this._selectedIndex));
|
|
2029
|
+
}
|
|
2030
|
+
}
|
|
2031
|
+
_animationsDisabled() {
|
|
2032
|
+
return this._diAnimationsDisabled || this.animationDuration === "0" || this.animationDuration === "0ms";
|
|
2033
|
+
}
|
|
2034
|
+
static \u0275fac = function MatTabGroup_Factory(__ngFactoryType__) {
|
|
2035
|
+
return new (__ngFactoryType__ || _MatTabGroup)();
|
|
2036
|
+
};
|
|
2037
|
+
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
|
|
2038
|
+
type: _MatTabGroup,
|
|
2039
|
+
selectors: [["mat-tab-group"]],
|
|
2040
|
+
contentQueries: function MatTabGroup_ContentQueries(rf, ctx, dirIndex) {
|
|
2041
|
+
if (rf & 1) {
|
|
2042
|
+
\u0275\u0275contentQuery(dirIndex, MatTab, 5);
|
|
2043
|
+
}
|
|
2044
|
+
if (rf & 2) {
|
|
2045
|
+
let _t;
|
|
2046
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._allTabs = _t);
|
|
2047
|
+
}
|
|
2048
|
+
},
|
|
2049
|
+
viewQuery: function MatTabGroup_Query(rf, ctx) {
|
|
2050
|
+
if (rf & 1) {
|
|
2051
|
+
\u0275\u0275viewQuery(_c7, 5);
|
|
2052
|
+
\u0275\u0275viewQuery(_c8, 5);
|
|
2053
|
+
\u0275\u0275viewQuery(MatTabBody, 5);
|
|
2054
|
+
}
|
|
2055
|
+
if (rf & 2) {
|
|
2056
|
+
let _t;
|
|
2057
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabBodyWrapper = _t.first);
|
|
2058
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabHeader = _t.first);
|
|
2059
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabBodies = _t);
|
|
2060
|
+
}
|
|
2061
|
+
},
|
|
2062
|
+
hostAttrs: [1, "mat-mdc-tab-group"],
|
|
2063
|
+
hostVars: 11,
|
|
2064
|
+
hostBindings: function MatTabGroup_HostBindings(rf, ctx) {
|
|
2065
|
+
if (rf & 2) {
|
|
2066
|
+
\u0275\u0275attribute("mat-align-tabs", ctx.alignTabs);
|
|
2067
|
+
\u0275\u0275classMap("mat-" + (ctx.color || "primary"));
|
|
2068
|
+
\u0275\u0275styleProp("--mat-tab-animation-duration", ctx.animationDuration);
|
|
2069
|
+
\u0275\u0275classProp("mat-mdc-tab-group-dynamic-height", ctx.dynamicHeight)("mat-mdc-tab-group-inverted-header", ctx.headerPosition === "below")("mat-mdc-tab-group-stretch-tabs", ctx.stretchTabs);
|
|
2070
|
+
}
|
|
2071
|
+
},
|
|
2072
|
+
inputs: {
|
|
2073
|
+
color: "color",
|
|
2074
|
+
fitInkBarToContent: [2, "fitInkBarToContent", "fitInkBarToContent", booleanAttribute],
|
|
2075
|
+
stretchTabs: [2, "mat-stretch-tabs", "stretchTabs", booleanAttribute],
|
|
2076
|
+
alignTabs: [0, "mat-align-tabs", "alignTabs"],
|
|
2077
|
+
dynamicHeight: [2, "dynamicHeight", "dynamicHeight", booleanAttribute],
|
|
2078
|
+
selectedIndex: [2, "selectedIndex", "selectedIndex", numberAttribute],
|
|
2079
|
+
headerPosition: "headerPosition",
|
|
2080
|
+
animationDuration: "animationDuration",
|
|
2081
|
+
contentTabIndex: [2, "contentTabIndex", "contentTabIndex", numberAttribute],
|
|
2082
|
+
disablePagination: [2, "disablePagination", "disablePagination", booleanAttribute],
|
|
2083
|
+
disableRipple: [2, "disableRipple", "disableRipple", booleanAttribute],
|
|
2084
|
+
preserveContent: [2, "preserveContent", "preserveContent", booleanAttribute],
|
|
2085
|
+
backgroundColor: "backgroundColor",
|
|
2086
|
+
ariaLabel: [0, "aria-label", "ariaLabel"],
|
|
2087
|
+
ariaLabelledby: [0, "aria-labelledby", "ariaLabelledby"]
|
|
2088
|
+
},
|
|
2089
|
+
outputs: {
|
|
2090
|
+
selectedIndexChange: "selectedIndexChange",
|
|
2091
|
+
focusChange: "focusChange",
|
|
2092
|
+
animationDone: "animationDone",
|
|
2093
|
+
selectedTabChange: "selectedTabChange"
|
|
2094
|
+
},
|
|
2095
|
+
exportAs: ["matTabGroup"],
|
|
2096
|
+
features: [\u0275\u0275ProvidersFeature([{
|
|
2097
|
+
provide: MAT_TAB_GROUP,
|
|
2098
|
+
useExisting: _MatTabGroup
|
|
2099
|
+
}])],
|
|
2100
|
+
ngContentSelectors: _c0,
|
|
2101
|
+
decls: 9,
|
|
2102
|
+
vars: 8,
|
|
2103
|
+
consts: [["tabHeader", ""], ["tabBodyWrapper", ""], ["tabNode", ""], [3, "indexFocused", "selectFocusedIndex", "selectedIndex", "disableRipple", "disablePagination", "aria-label", "aria-labelledby"], ["role", "tab", "matTabLabelWrapper", "", "cdkMonitorElementFocus", "", 1, "mdc-tab", "mat-mdc-tab", "mat-focus-indicator", 3, "id", "mdc-tab--active", "class", "disabled", "fitInkBarToContent"], [1, "mat-mdc-tab-body-wrapper"], ["role", "tabpanel", 3, "id", "class", "content", "position", "animationDuration", "preserveContent"], ["role", "tab", "matTabLabelWrapper", "", "cdkMonitorElementFocus", "", 1, "mdc-tab", "mat-mdc-tab", "mat-focus-indicator", 3, "click", "cdkFocusChange", "id", "disabled", "fitInkBarToContent"], [1, "mdc-tab__ripple"], ["mat-ripple", "", 1, "mat-mdc-tab-ripple", 3, "matRippleTrigger", "matRippleDisabled"], [1, "mdc-tab__content"], [1, "mdc-tab__text-label"], [3, "cdkPortalOutlet"], ["role", "tabpanel", 3, "_onCentered", "_onCentering", "_beforeCentering", "id", "content", "position", "animationDuration", "preserveContent"]],
|
|
2104
|
+
template: function MatTabGroup_Template(rf, ctx) {
|
|
2105
|
+
if (rf & 1) {
|
|
2106
|
+
const _r1 = \u0275\u0275getCurrentView();
|
|
2107
|
+
\u0275\u0275projectionDef();
|
|
2108
|
+
\u0275\u0275elementStart(0, "mat-tab-header", 3, 0);
|
|
2109
|
+
\u0275\u0275listener("indexFocused", function MatTabGroup_Template_mat_tab_header_indexFocused_0_listener($event) {
|
|
2110
|
+
\u0275\u0275restoreView(_r1);
|
|
2111
|
+
return \u0275\u0275resetView(ctx._focusChanged($event));
|
|
2112
|
+
})("selectFocusedIndex", function MatTabGroup_Template_mat_tab_header_selectFocusedIndex_0_listener($event) {
|
|
2113
|
+
\u0275\u0275restoreView(_r1);
|
|
2114
|
+
return \u0275\u0275resetView(ctx.selectedIndex = $event);
|
|
2115
|
+
});
|
|
2116
|
+
\u0275\u0275repeaterCreate(2, MatTabGroup_For_3_Template, 8, 17, "div", 4, \u0275\u0275repeaterTrackByIdentity);
|
|
2117
|
+
\u0275\u0275elementEnd();
|
|
2118
|
+
\u0275\u0275conditionalCreate(4, MatTabGroup_Conditional_4_Template, 1, 0);
|
|
2119
|
+
\u0275\u0275elementStart(5, "div", 5, 1);
|
|
2120
|
+
\u0275\u0275repeaterCreate(7, MatTabGroup_For_8_Template, 1, 10, "mat-tab-body", 6, \u0275\u0275repeaterTrackByIdentity);
|
|
2121
|
+
\u0275\u0275elementEnd();
|
|
2122
|
+
}
|
|
2123
|
+
if (rf & 2) {
|
|
2124
|
+
\u0275\u0275property("selectedIndex", ctx.selectedIndex || 0)("disableRipple", ctx.disableRipple)("disablePagination", ctx.disablePagination)("aria-label", ctx.ariaLabel)("aria-labelledby", ctx.ariaLabelledby);
|
|
2125
|
+
\u0275\u0275advance(2);
|
|
2126
|
+
\u0275\u0275repeater(ctx._tabs);
|
|
2127
|
+
\u0275\u0275advance(2);
|
|
2128
|
+
\u0275\u0275conditional(ctx._isServer ? 4 : -1);
|
|
2129
|
+
\u0275\u0275advance();
|
|
2130
|
+
\u0275\u0275classProp("_mat-animation-noopable", ctx._animationsDisabled());
|
|
2131
|
+
\u0275\u0275advance(2);
|
|
2132
|
+
\u0275\u0275repeater(ctx._tabs);
|
|
2133
|
+
}
|
|
2134
|
+
},
|
|
2135
|
+
dependencies: [MatTabHeader, MatTabLabelWrapper, CdkMonitorFocus, MatRipple, CdkPortalOutlet, MatTabBody],
|
|
2136
|
+
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;touch-action:manipulation}.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(--mat-tab-container-height, 48px);font-family:var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-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(--mat-tab-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mat-tab-active-indicator-height, 2px);border-radius:var(--mat-tab-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-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-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-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-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-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-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-disabled-ripple-color, var(--mat-sys-on-surface-variant))}.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-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-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-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-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-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-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-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-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-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-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-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}\n'],
|
|
2137
|
+
encapsulation: 2
|
|
2138
|
+
});
|
|
2139
|
+
};
|
|
2140
|
+
(() => {
|
|
2141
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabGroup, [{
|
|
2142
|
+
type: Component,
|
|
2143
|
+
args: [{
|
|
2144
|
+
selector: "mat-tab-group",
|
|
2145
|
+
exportAs: "matTabGroup",
|
|
2146
|
+
encapsulation: ViewEncapsulation.None,
|
|
2147
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
2148
|
+
providers: [{
|
|
2149
|
+
provide: MAT_TAB_GROUP,
|
|
2150
|
+
useExisting: MatTabGroup
|
|
2151
|
+
}],
|
|
2152
|
+
host: {
|
|
2153
|
+
"class": "mat-mdc-tab-group",
|
|
2154
|
+
"[class]": '"mat-" + (color || "primary")',
|
|
2155
|
+
"[class.mat-mdc-tab-group-dynamic-height]": "dynamicHeight",
|
|
2156
|
+
"[class.mat-mdc-tab-group-inverted-header]": 'headerPosition === "below"',
|
|
2157
|
+
"[class.mat-mdc-tab-group-stretch-tabs]": "stretchTabs",
|
|
2158
|
+
"[attr.mat-align-tabs]": "alignTabs",
|
|
2159
|
+
"[style.--mat-tab-animation-duration]": "animationDuration"
|
|
2160
|
+
},
|
|
2161
|
+
imports: [MatTabHeader, MatTabLabelWrapper, CdkMonitorFocus, MatRipple, CdkPortalOutlet, MatTabBody],
|
|
2162
|
+
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) {\n <div class="mdc-tab mat-mdc-tab mat-focus-indicator"\n #tabNode\n role="tab"\n matTabLabelWrapper\n cdkMonitorElementFocus\n [id]="_getTabLabelId(tab, $index)"\n [attr.tabIndex]="_getTabIndex($index)"\n [attr.aria-posinset]="$index + 1"\n [attr.aria-setsize]="_tabs.length"\n [attr.aria-controls]="_getTabContentId($index)"\n [attr.aria-selected]="selectedIndex === $index"\n [attr.aria-label]="tab.ariaLabel || null"\n [attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"\n [class.mdc-tab--active]="selectedIndex === $index"\n [class]="tab.labelClass"\n [disabled]="tab.disabled"\n [fitInkBarToContent]="fitInkBarToContent"\n (click)="_handleClick(tab, tabHeader, $index)"\n (cdkFocusChange)="_tabFocusChanged($event, $index)">\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]="_animationsDisabled()"\n #tabBodyWrapper>\n @for (tab of _tabs; track tab;) {\n <mat-tab-body role="tabpanel"\n [id]="_getTabContentId($index)"\n [attr.tabindex]="(contentTabIndex != null && selectedIndex === $index) ? contentTabIndex : null"\n [attr.aria-labelledby]="_getTabLabelId(tab, $index)"\n [attr.aria-hidden]="selectedIndex !== $index"\n [class]="tab.bodyClass"\n [content]="tab.content!"\n [position]="tab.position!"\n [animationDuration]="animationDuration"\n [preserveContent]="preserveContent"\n (_onCentered)="_removeTabBodyWrapperHeight()"\n (_onCentering)="_setTabBodyWrapperHeight($event)"\n (_beforeCentering)="_bodyCentered($event)"/>\n }\n</div>\n',
|
|
2163
|
+
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;touch-action:manipulation}.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(--mat-tab-container-height, 48px);font-family:var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-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(--mat-tab-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mat-tab-active-indicator-height, 2px);border-radius:var(--mat-tab-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-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-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-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-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-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-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-disabled-ripple-color, var(--mat-sys-on-surface-variant))}.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-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-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-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-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-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-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-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-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-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-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-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}\n']
|
|
2164
|
+
}]
|
|
2165
|
+
}], () => [], {
|
|
2166
|
+
_allTabs: [{
|
|
2167
|
+
type: ContentChildren,
|
|
2168
|
+
args: [MatTab, {
|
|
2169
|
+
descendants: true
|
|
2170
|
+
}]
|
|
2171
|
+
}],
|
|
2172
|
+
_tabBodies: [{
|
|
2173
|
+
type: ViewChildren,
|
|
2174
|
+
args: [MatTabBody]
|
|
2175
|
+
}],
|
|
2176
|
+
_tabBodyWrapper: [{
|
|
2177
|
+
type: ViewChild,
|
|
2178
|
+
args: ["tabBodyWrapper"]
|
|
2179
|
+
}],
|
|
2180
|
+
_tabHeader: [{
|
|
2181
|
+
type: ViewChild,
|
|
2182
|
+
args: ["tabHeader"]
|
|
2183
|
+
}],
|
|
2184
|
+
color: [{
|
|
2185
|
+
type: Input
|
|
2186
|
+
}],
|
|
2187
|
+
fitInkBarToContent: [{
|
|
2188
|
+
type: Input,
|
|
2189
|
+
args: [{
|
|
2190
|
+
transform: booleanAttribute
|
|
2191
|
+
}]
|
|
2192
|
+
}],
|
|
2193
|
+
stretchTabs: [{
|
|
2194
|
+
type: Input,
|
|
2195
|
+
args: [{
|
|
2196
|
+
alias: "mat-stretch-tabs",
|
|
2197
|
+
transform: booleanAttribute
|
|
2198
|
+
}]
|
|
2199
|
+
}],
|
|
2200
|
+
alignTabs: [{
|
|
2201
|
+
type: Input,
|
|
2202
|
+
args: [{
|
|
2203
|
+
alias: "mat-align-tabs"
|
|
2204
|
+
}]
|
|
2205
|
+
}],
|
|
2206
|
+
dynamicHeight: [{
|
|
2207
|
+
type: Input,
|
|
2208
|
+
args: [{
|
|
2209
|
+
transform: booleanAttribute
|
|
2210
|
+
}]
|
|
2211
|
+
}],
|
|
2212
|
+
selectedIndex: [{
|
|
2213
|
+
type: Input,
|
|
2214
|
+
args: [{
|
|
2215
|
+
transform: numberAttribute
|
|
2216
|
+
}]
|
|
2217
|
+
}],
|
|
2218
|
+
headerPosition: [{
|
|
2219
|
+
type: Input
|
|
2220
|
+
}],
|
|
2221
|
+
animationDuration: [{
|
|
2222
|
+
type: Input
|
|
2223
|
+
}],
|
|
2224
|
+
contentTabIndex: [{
|
|
2225
|
+
type: Input,
|
|
2226
|
+
args: [{
|
|
2227
|
+
transform: numberAttribute
|
|
2228
|
+
}]
|
|
2229
|
+
}],
|
|
2230
|
+
disablePagination: [{
|
|
2231
|
+
type: Input,
|
|
2232
|
+
args: [{
|
|
2233
|
+
transform: booleanAttribute
|
|
2234
|
+
}]
|
|
2235
|
+
}],
|
|
2236
|
+
disableRipple: [{
|
|
2237
|
+
type: Input,
|
|
2238
|
+
args: [{
|
|
2239
|
+
transform: booleanAttribute
|
|
2240
|
+
}]
|
|
2241
|
+
}],
|
|
2242
|
+
preserveContent: [{
|
|
2243
|
+
type: Input,
|
|
2244
|
+
args: [{
|
|
2245
|
+
transform: booleanAttribute
|
|
2246
|
+
}]
|
|
2247
|
+
}],
|
|
2248
|
+
backgroundColor: [{
|
|
2249
|
+
type: Input
|
|
2250
|
+
}],
|
|
2251
|
+
ariaLabel: [{
|
|
2252
|
+
type: Input,
|
|
2253
|
+
args: ["aria-label"]
|
|
2254
|
+
}],
|
|
2255
|
+
ariaLabelledby: [{
|
|
2256
|
+
type: Input,
|
|
2257
|
+
args: ["aria-labelledby"]
|
|
2258
|
+
}],
|
|
2259
|
+
selectedIndexChange: [{
|
|
2260
|
+
type: Output
|
|
2261
|
+
}],
|
|
2262
|
+
focusChange: [{
|
|
2263
|
+
type: Output
|
|
2264
|
+
}],
|
|
2265
|
+
animationDone: [{
|
|
2266
|
+
type: Output
|
|
2267
|
+
}],
|
|
2268
|
+
selectedTabChange: [{
|
|
2269
|
+
type: Output
|
|
2270
|
+
}]
|
|
2271
|
+
});
|
|
2272
|
+
})();
|
|
2273
|
+
var MatTabChangeEvent = class {
|
|
2274
|
+
/** Index of the currently-selected tab. */
|
|
2275
|
+
index;
|
|
2276
|
+
/** Reference to the currently-selected tab. */
|
|
2277
|
+
tab;
|
|
2278
|
+
};
|
|
2279
|
+
var MatTabNav = class _MatTabNav extends MatPaginatedTabHeader {
|
|
2280
|
+
_focusedItem = signal(null);
|
|
2281
|
+
/** Whether the ink bar should fit its width to the size of the tab label content. */
|
|
2282
|
+
get fitInkBarToContent() {
|
|
2283
|
+
return this._fitInkBarToContent.value;
|
|
2284
|
+
}
|
|
2285
|
+
set fitInkBarToContent(value) {
|
|
2286
|
+
this._fitInkBarToContent.next(value);
|
|
2287
|
+
this._changeDetectorRef.markForCheck();
|
|
2288
|
+
}
|
|
2289
|
+
_fitInkBarToContent = new BehaviorSubject(false);
|
|
2290
|
+
/** Whether tabs should be stretched to fill the header. */
|
|
2291
|
+
stretchTabs = true;
|
|
2292
|
+
get animationDuration() {
|
|
2293
|
+
return this._animationDuration;
|
|
2294
|
+
}
|
|
2295
|
+
set animationDuration(value) {
|
|
2296
|
+
const stringValue = value + "";
|
|
2297
|
+
this._animationDuration = /^\d+$/.test(stringValue) ? value + "ms" : stringValue;
|
|
2298
|
+
}
|
|
2299
|
+
_animationDuration;
|
|
2300
|
+
/** Query list of all tab links of the tab navigation. */
|
|
2301
|
+
_items;
|
|
2302
|
+
/**
|
|
2303
|
+
* Theme color of the background of the tab nav. This API is supported in M2 themes only, it
|
|
2304
|
+
* has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
|
|
2305
|
+
*
|
|
2306
|
+
* For information on applying color variants in M3, see
|
|
2307
|
+
* https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
|
|
2308
|
+
*/
|
|
2309
|
+
get backgroundColor() {
|
|
2310
|
+
return this._backgroundColor;
|
|
2311
|
+
}
|
|
2312
|
+
set backgroundColor(value) {
|
|
2313
|
+
const classList = this._elementRef.nativeElement.classList;
|
|
2314
|
+
classList.remove("mat-tabs-with-background", `mat-background-${this.backgroundColor}`);
|
|
2315
|
+
if (value) {
|
|
2316
|
+
classList.add("mat-tabs-with-background", `mat-background-${value}`);
|
|
2317
|
+
}
|
|
2318
|
+
this._backgroundColor = value;
|
|
2319
|
+
}
|
|
2320
|
+
_backgroundColor;
|
|
2321
|
+
/** Whether the ripple effect is disabled or not. */
|
|
2322
|
+
get disableRipple() {
|
|
2323
|
+
return this._disableRipple();
|
|
2324
|
+
}
|
|
2325
|
+
set disableRipple(value) {
|
|
2326
|
+
this._disableRipple.set(value);
|
|
2327
|
+
}
|
|
2328
|
+
_disableRipple = signal(false);
|
|
2329
|
+
/**
|
|
2330
|
+
* Theme color of the nav bar. This API is supported in M2 themes only, it has
|
|
2331
|
+
* no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
|
|
2332
|
+
*
|
|
2333
|
+
* For information on applying color variants in M3, see
|
|
2334
|
+
* https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
|
|
2335
|
+
*/
|
|
2336
|
+
color = "primary";
|
|
2337
|
+
/**
|
|
2338
|
+
* Associated tab panel controlled by the nav bar. If not provided, then the nav bar
|
|
2339
|
+
* follows the ARIA link / navigation landmark pattern. If provided, it follows the
|
|
2340
|
+
* ARIA tabs design pattern.
|
|
2341
|
+
*/
|
|
2342
|
+
tabPanel;
|
|
2343
|
+
_tabListContainer;
|
|
2344
|
+
_tabList;
|
|
2345
|
+
_tabListInner;
|
|
2346
|
+
_nextPaginator;
|
|
2347
|
+
_previousPaginator;
|
|
2348
|
+
_inkBar;
|
|
2349
|
+
constructor() {
|
|
2350
|
+
const defaultConfig = inject(MAT_TABS_CONFIG, {
|
|
2351
|
+
optional: true
|
|
2352
|
+
});
|
|
2353
|
+
super();
|
|
2354
|
+
this.disablePagination = defaultConfig && defaultConfig.disablePagination != null ? defaultConfig.disablePagination : false;
|
|
2355
|
+
this.fitInkBarToContent = defaultConfig && defaultConfig.fitInkBarToContent != null ? defaultConfig.fitInkBarToContent : false;
|
|
2356
|
+
this.stretchTabs = defaultConfig && defaultConfig.stretchTabs != null ? defaultConfig.stretchTabs : true;
|
|
2357
|
+
}
|
|
2358
|
+
_itemSelected() {
|
|
2359
|
+
}
|
|
2360
|
+
ngAfterContentInit() {
|
|
2361
|
+
this._inkBar = new MatInkBar(this._items);
|
|
2362
|
+
this._items.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => this.updateActiveLink());
|
|
2363
|
+
super.ngAfterContentInit();
|
|
2364
|
+
this._keyManager.change.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => this._focusedItem.set(this._keyManager?.activeItem || null));
|
|
2365
|
+
}
|
|
2366
|
+
ngAfterViewInit() {
|
|
2367
|
+
if (!this.tabPanel && (typeof ngDevMode === "undefined" || ngDevMode)) {
|
|
2368
|
+
throw new Error("A mat-tab-nav-panel must be specified via [tabPanel].");
|
|
2369
|
+
}
|
|
2370
|
+
super.ngAfterViewInit();
|
|
2371
|
+
}
|
|
2372
|
+
/** Notifies the component that the active link has been changed. */
|
|
2373
|
+
updateActiveLink() {
|
|
2374
|
+
if (!this._items) {
|
|
2375
|
+
return;
|
|
2376
|
+
}
|
|
2377
|
+
const items = this._items.toArray();
|
|
2378
|
+
for (let i = 0; i < items.length; i++) {
|
|
2379
|
+
if (items[i].active) {
|
|
2380
|
+
this.selectedIndex = i;
|
|
2381
|
+
if (this.tabPanel) {
|
|
2382
|
+
this.tabPanel._activeTabId = items[i].id;
|
|
2383
|
+
}
|
|
2384
|
+
this._focusedItem.set(items[i]);
|
|
2385
|
+
this._changeDetectorRef.markForCheck();
|
|
2386
|
+
return;
|
|
2387
|
+
}
|
|
2388
|
+
}
|
|
2389
|
+
this.selectedIndex = -1;
|
|
2390
|
+
}
|
|
2391
|
+
_getRole() {
|
|
2392
|
+
return this.tabPanel ? "tablist" : this._elementRef.nativeElement.getAttribute("role");
|
|
2393
|
+
}
|
|
2394
|
+
_hasFocus(link) {
|
|
2395
|
+
return this._keyManager?.activeItem === link;
|
|
2396
|
+
}
|
|
2397
|
+
static \u0275fac = function MatTabNav_Factory(__ngFactoryType__) {
|
|
2398
|
+
return new (__ngFactoryType__ || _MatTabNav)();
|
|
2399
|
+
};
|
|
2400
|
+
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
|
|
2401
|
+
type: _MatTabNav,
|
|
2402
|
+
selectors: [["", "mat-tab-nav-bar", ""]],
|
|
2403
|
+
contentQueries: function MatTabNav_ContentQueries(rf, ctx, dirIndex) {
|
|
2404
|
+
if (rf & 1) {
|
|
2405
|
+
\u0275\u0275contentQuery(dirIndex, MatTabLink, 5);
|
|
2406
|
+
}
|
|
2407
|
+
if (rf & 2) {
|
|
2408
|
+
let _t;
|
|
2409
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._items = _t);
|
|
2410
|
+
}
|
|
2411
|
+
},
|
|
2412
|
+
viewQuery: function MatTabNav_Query(rf, ctx) {
|
|
2413
|
+
if (rf & 1) {
|
|
2414
|
+
\u0275\u0275viewQuery(_c1, 7);
|
|
2415
|
+
\u0275\u0275viewQuery(_c2, 7);
|
|
2416
|
+
\u0275\u0275viewQuery(_c3, 7);
|
|
2417
|
+
\u0275\u0275viewQuery(_c4, 5);
|
|
2418
|
+
\u0275\u0275viewQuery(_c5, 5);
|
|
2419
|
+
}
|
|
2420
|
+
if (rf & 2) {
|
|
2421
|
+
let _t;
|
|
2422
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabListContainer = _t.first);
|
|
2423
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabList = _t.first);
|
|
2424
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._tabListInner = _t.first);
|
|
2425
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._nextPaginator = _t.first);
|
|
2426
|
+
\u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._previousPaginator = _t.first);
|
|
2427
|
+
}
|
|
2428
|
+
},
|
|
2429
|
+
hostAttrs: [1, "mat-mdc-tab-nav-bar", "mat-mdc-tab-header"],
|
|
2430
|
+
hostVars: 17,
|
|
2431
|
+
hostBindings: function MatTabNav_HostBindings(rf, ctx) {
|
|
2432
|
+
if (rf & 2) {
|
|
2433
|
+
\u0275\u0275attribute("role", ctx._getRole());
|
|
2434
|
+
\u0275\u0275styleProp("--mat-tab-animation-duration", ctx.animationDuration);
|
|
2435
|
+
\u0275\u0275classProp("mat-mdc-tab-header-pagination-controls-enabled", ctx._showPaginationControls)("mat-mdc-tab-header-rtl", ctx._getLayoutDirection() == "rtl")("mat-mdc-tab-nav-bar-stretch-tabs", ctx.stretchTabs)("mat-primary", ctx.color !== "warn" && ctx.color !== "accent")("mat-accent", ctx.color === "accent")("mat-warn", ctx.color === "warn")("_mat-animation-noopable", ctx._animationsDisabled);
|
|
2436
|
+
}
|
|
2437
|
+
},
|
|
2438
|
+
inputs: {
|
|
2439
|
+
fitInkBarToContent: [2, "fitInkBarToContent", "fitInkBarToContent", booleanAttribute],
|
|
2440
|
+
stretchTabs: [2, "mat-stretch-tabs", "stretchTabs", booleanAttribute],
|
|
2441
|
+
animationDuration: "animationDuration",
|
|
2442
|
+
backgroundColor: "backgroundColor",
|
|
2443
|
+
disableRipple: [2, "disableRipple", "disableRipple", booleanAttribute],
|
|
2444
|
+
color: "color",
|
|
2445
|
+
tabPanel: "tabPanel"
|
|
2446
|
+
},
|
|
2447
|
+
exportAs: ["matTabNavBar", "matTabNav"],
|
|
2448
|
+
features: [\u0275\u0275InheritDefinitionFeature],
|
|
2449
|
+
attrs: _c9,
|
|
2450
|
+
ngContentSelectors: _c0,
|
|
2451
|
+
decls: 13,
|
|
2452
|
+
vars: 6,
|
|
2453
|
+
consts: [["previousPaginator", ""], ["tabListContainer", ""], ["tabList", ""], ["tabListInner", ""], ["nextPaginator", ""], ["mat-ripple", "", 1, "mat-mdc-tab-header-pagination", "mat-mdc-tab-header-pagination-before", 3, "click", "mousedown", "touchend", "matRippleDisabled"], [1, "mat-mdc-tab-header-pagination-chevron"], [1, "mat-mdc-tab-link-container", 3, "keydown"], [1, "mat-mdc-tab-list", 3, "cdkObserveContent"], [1, "mat-mdc-tab-links"], ["mat-ripple", "", 1, "mat-mdc-tab-header-pagination", "mat-mdc-tab-header-pagination-after", 3, "mousedown", "click", "touchend", "matRippleDisabled"]],
|
|
2454
|
+
template: function MatTabNav_Template(rf, ctx) {
|
|
2455
|
+
if (rf & 1) {
|
|
2456
|
+
const _r1 = \u0275\u0275getCurrentView();
|
|
2457
|
+
\u0275\u0275projectionDef();
|
|
2458
|
+
\u0275\u0275elementStart(0, "div", 5, 0);
|
|
2459
|
+
\u0275\u0275listener("click", function MatTabNav_Template_div_click_0_listener() {
|
|
2460
|
+
\u0275\u0275restoreView(_r1);
|
|
2461
|
+
return \u0275\u0275resetView(ctx._handlePaginatorClick("before"));
|
|
2462
|
+
})("mousedown", function MatTabNav_Template_div_mousedown_0_listener($event) {
|
|
2463
|
+
\u0275\u0275restoreView(_r1);
|
|
2464
|
+
return \u0275\u0275resetView(ctx._handlePaginatorPress("before", $event));
|
|
2465
|
+
})("touchend", function MatTabNav_Template_div_touchend_0_listener() {
|
|
2466
|
+
\u0275\u0275restoreView(_r1);
|
|
2467
|
+
return \u0275\u0275resetView(ctx._stopInterval());
|
|
2468
|
+
});
|
|
2469
|
+
\u0275\u0275element(2, "div", 6);
|
|
2470
|
+
\u0275\u0275elementEnd();
|
|
2471
|
+
\u0275\u0275elementStart(3, "div", 7, 1);
|
|
2472
|
+
\u0275\u0275listener("keydown", function MatTabNav_Template_div_keydown_3_listener($event) {
|
|
2473
|
+
\u0275\u0275restoreView(_r1);
|
|
2474
|
+
return \u0275\u0275resetView(ctx._handleKeydown($event));
|
|
2475
|
+
});
|
|
2476
|
+
\u0275\u0275elementStart(5, "div", 8, 2);
|
|
2477
|
+
\u0275\u0275listener("cdkObserveContent", function MatTabNav_Template_div_cdkObserveContent_5_listener() {
|
|
2478
|
+
\u0275\u0275restoreView(_r1);
|
|
2479
|
+
return \u0275\u0275resetView(ctx._onContentChanges());
|
|
2480
|
+
});
|
|
2481
|
+
\u0275\u0275elementStart(7, "div", 9, 3);
|
|
2482
|
+
\u0275\u0275projection(9);
|
|
2483
|
+
\u0275\u0275elementEnd()()();
|
|
2484
|
+
\u0275\u0275elementStart(10, "div", 10, 4);
|
|
2485
|
+
\u0275\u0275listener("mousedown", function MatTabNav_Template_div_mousedown_10_listener($event) {
|
|
2486
|
+
\u0275\u0275restoreView(_r1);
|
|
2487
|
+
return \u0275\u0275resetView(ctx._handlePaginatorPress("after", $event));
|
|
2488
|
+
})("click", function MatTabNav_Template_div_click_10_listener() {
|
|
2489
|
+
\u0275\u0275restoreView(_r1);
|
|
2490
|
+
return \u0275\u0275resetView(ctx._handlePaginatorClick("after"));
|
|
2491
|
+
})("touchend", function MatTabNav_Template_div_touchend_10_listener() {
|
|
2492
|
+
\u0275\u0275restoreView(_r1);
|
|
2493
|
+
return \u0275\u0275resetView(ctx._stopInterval());
|
|
2494
|
+
});
|
|
2495
|
+
\u0275\u0275element(12, "div", 6);
|
|
2496
|
+
\u0275\u0275elementEnd();
|
|
2497
|
+
}
|
|
2498
|
+
if (rf & 2) {
|
|
2499
|
+
\u0275\u0275classProp("mat-mdc-tab-header-pagination-disabled", ctx._disableScrollBefore);
|
|
2500
|
+
\u0275\u0275property("matRippleDisabled", ctx._disableScrollBefore || ctx.disableRipple);
|
|
2501
|
+
\u0275\u0275advance(10);
|
|
2502
|
+
\u0275\u0275classProp("mat-mdc-tab-header-pagination-disabled", ctx._disableScrollAfter);
|
|
2503
|
+
\u0275\u0275property("matRippleDisabled", ctx._disableScrollAfter || ctx.disableRipple);
|
|
2504
|
+
}
|
|
2505
|
+
},
|
|
2506
|
+
dependencies: [MatRipple, CdkObserveContent],
|
|
2507
|
+
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;touch-action:manipulation}.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-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-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(--mat-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-divider-height, 1px);border-bottom-color:var(--mat-tab-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-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-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-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-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-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-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-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-foreground-color)}\n"],
|
|
2508
|
+
encapsulation: 2
|
|
2509
|
+
});
|
|
2510
|
+
};
|
|
2511
|
+
(() => {
|
|
2512
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabNav, [{
|
|
2513
|
+
type: Component,
|
|
2514
|
+
args: [{
|
|
2515
|
+
selector: "[mat-tab-nav-bar]",
|
|
2516
|
+
exportAs: "matTabNavBar, matTabNav",
|
|
2517
|
+
host: {
|
|
2518
|
+
"[attr.role]": "_getRole()",
|
|
2519
|
+
"class": "mat-mdc-tab-nav-bar mat-mdc-tab-header",
|
|
2520
|
+
"[class.mat-mdc-tab-header-pagination-controls-enabled]": "_showPaginationControls",
|
|
2521
|
+
"[class.mat-mdc-tab-header-rtl]": "_getLayoutDirection() == 'rtl'",
|
|
2522
|
+
"[class.mat-mdc-tab-nav-bar-stretch-tabs]": "stretchTabs",
|
|
2523
|
+
"[class.mat-primary]": 'color !== "warn" && color !== "accent"',
|
|
2524
|
+
"[class.mat-accent]": 'color === "accent"',
|
|
2525
|
+
"[class.mat-warn]": 'color === "warn"',
|
|
2526
|
+
"[class._mat-animation-noopable]": "_animationsDisabled",
|
|
2527
|
+
"[style.--mat-tab-animation-duration]": "animationDuration"
|
|
2528
|
+
},
|
|
2529
|
+
encapsulation: ViewEncapsulation.None,
|
|
2530
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
2531
|
+
imports: [MatRipple, CdkObserveContent],
|
|
2532
|
+
template: `<!--
|
|
2533
|
+
Note that this intentionally uses a \`div\` instead of a \`button\`, because it's not part of
|
|
2534
|
+
the regular tabs flow and is only here to support mouse users. It should also not be focusable.
|
|
2535
|
+
-->
|
|
2536
|
+
<div class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
|
|
2537
|
+
#previousPaginator
|
|
2538
|
+
mat-ripple
|
|
2539
|
+
[matRippleDisabled]="_disableScrollBefore || disableRipple"
|
|
2540
|
+
[class.mat-mdc-tab-header-pagination-disabled]="_disableScrollBefore"
|
|
2541
|
+
(click)="_handlePaginatorClick('before')"
|
|
2542
|
+
(mousedown)="_handlePaginatorPress('before', $event)"
|
|
2543
|
+
(touchend)="_stopInterval()">
|
|
2544
|
+
<div class="mat-mdc-tab-header-pagination-chevron"></div>
|
|
2545
|
+
</div>
|
|
2546
|
+
|
|
2547
|
+
<div class="mat-mdc-tab-link-container" #tabListContainer (keydown)="_handleKeydown($event)">
|
|
2548
|
+
<div class="mat-mdc-tab-list" #tabList (cdkObserveContent)="_onContentChanges()">
|
|
2549
|
+
<div class="mat-mdc-tab-links" #tabListInner>
|
|
2550
|
+
<ng-content></ng-content>
|
|
2551
|
+
</div>
|
|
2552
|
+
</div>
|
|
2553
|
+
</div>
|
|
2554
|
+
|
|
2555
|
+
<div class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
|
|
2556
|
+
#nextPaginator
|
|
2557
|
+
mat-ripple
|
|
2558
|
+
[matRippleDisabled]="_disableScrollAfter || disableRipple"
|
|
2559
|
+
[class.mat-mdc-tab-header-pagination-disabled]="_disableScrollAfter"
|
|
2560
|
+
(mousedown)="_handlePaginatorPress('after', $event)"
|
|
2561
|
+
(click)="_handlePaginatorClick('after')"
|
|
2562
|
+
(touchend)="_stopInterval()">
|
|
2563
|
+
<div class="mat-mdc-tab-header-pagination-chevron"></div>
|
|
2564
|
+
</div>
|
|
2565
|
+
`,
|
|
2566
|
+
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;touch-action:manipulation}.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-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-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(--mat-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-divider-height, 1px);border-bottom-color:var(--mat-tab-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-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-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-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-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-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-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-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-foreground-color)}\n"]
|
|
2567
|
+
}]
|
|
2568
|
+
}], () => [], {
|
|
2569
|
+
fitInkBarToContent: [{
|
|
2570
|
+
type: Input,
|
|
2571
|
+
args: [{
|
|
2572
|
+
transform: booleanAttribute
|
|
2573
|
+
}]
|
|
2574
|
+
}],
|
|
2575
|
+
stretchTabs: [{
|
|
2576
|
+
type: Input,
|
|
2577
|
+
args: [{
|
|
2578
|
+
alias: "mat-stretch-tabs",
|
|
2579
|
+
transform: booleanAttribute
|
|
2580
|
+
}]
|
|
2581
|
+
}],
|
|
2582
|
+
animationDuration: [{
|
|
2583
|
+
type: Input
|
|
2584
|
+
}],
|
|
2585
|
+
_items: [{
|
|
2586
|
+
type: ContentChildren,
|
|
2587
|
+
args: [forwardRef(() => MatTabLink), {
|
|
2588
|
+
descendants: true
|
|
2589
|
+
}]
|
|
2590
|
+
}],
|
|
2591
|
+
backgroundColor: [{
|
|
2592
|
+
type: Input
|
|
2593
|
+
}],
|
|
2594
|
+
disableRipple: [{
|
|
2595
|
+
type: Input,
|
|
2596
|
+
args: [{
|
|
2597
|
+
transform: booleanAttribute
|
|
2598
|
+
}]
|
|
2599
|
+
}],
|
|
2600
|
+
color: [{
|
|
2601
|
+
type: Input
|
|
2602
|
+
}],
|
|
2603
|
+
tabPanel: [{
|
|
2604
|
+
type: Input
|
|
2605
|
+
}],
|
|
2606
|
+
_tabListContainer: [{
|
|
2607
|
+
type: ViewChild,
|
|
2608
|
+
args: ["tabListContainer", {
|
|
2609
|
+
static: true
|
|
2610
|
+
}]
|
|
2611
|
+
}],
|
|
2612
|
+
_tabList: [{
|
|
2613
|
+
type: ViewChild,
|
|
2614
|
+
args: ["tabList", {
|
|
2615
|
+
static: true
|
|
2616
|
+
}]
|
|
2617
|
+
}],
|
|
2618
|
+
_tabListInner: [{
|
|
2619
|
+
type: ViewChild,
|
|
2620
|
+
args: ["tabListInner", {
|
|
2621
|
+
static: true
|
|
2622
|
+
}]
|
|
2623
|
+
}],
|
|
2624
|
+
_nextPaginator: [{
|
|
2625
|
+
type: ViewChild,
|
|
2626
|
+
args: ["nextPaginator"]
|
|
2627
|
+
}],
|
|
2628
|
+
_previousPaginator: [{
|
|
2629
|
+
type: ViewChild,
|
|
2630
|
+
args: ["previousPaginator"]
|
|
2631
|
+
}]
|
|
2632
|
+
});
|
|
2633
|
+
})();
|
|
2634
|
+
var MatTabLink = class _MatTabLink extends InkBarItem {
|
|
2635
|
+
_tabNavBar = inject(MatTabNav);
|
|
2636
|
+
elementRef = inject(ElementRef);
|
|
2637
|
+
_focusMonitor = inject(FocusMonitor);
|
|
2638
|
+
_destroyed = new Subject();
|
|
2639
|
+
/** Whether the tab link is active or not. */
|
|
2640
|
+
_isActive = false;
|
|
2641
|
+
_tabIndex = computed(() => this._tabNavBar._focusedItem() === this ? this.tabIndex : -1);
|
|
2642
|
+
/** Whether the link is active. */
|
|
2643
|
+
get active() {
|
|
2644
|
+
return this._isActive;
|
|
2645
|
+
}
|
|
2646
|
+
set active(value) {
|
|
2647
|
+
if (value !== this._isActive) {
|
|
2648
|
+
this._isActive = value;
|
|
2649
|
+
this._tabNavBar.updateActiveLink();
|
|
2650
|
+
}
|
|
2651
|
+
}
|
|
2652
|
+
/** Whether the tab link is disabled. */
|
|
2653
|
+
disabled = false;
|
|
2654
|
+
/** Whether ripples are disabled on the tab link. */
|
|
2655
|
+
get disableRipple() {
|
|
2656
|
+
return this._disableRipple();
|
|
2657
|
+
}
|
|
2658
|
+
set disableRipple(value) {
|
|
2659
|
+
this._disableRipple.set(value);
|
|
2660
|
+
}
|
|
2661
|
+
_disableRipple = signal(false);
|
|
2662
|
+
tabIndex = 0;
|
|
2663
|
+
/**
|
|
2664
|
+
* Ripple configuration for ripples that are launched on pointer down. The ripple config
|
|
2665
|
+
* is set to the global ripple options since we don't have any configurable options for
|
|
2666
|
+
* the tab link ripples.
|
|
2667
|
+
* @docs-private
|
|
2668
|
+
*/
|
|
2669
|
+
rippleConfig;
|
|
2670
|
+
/**
|
|
2671
|
+
* Whether ripples are disabled on interaction.
|
|
2672
|
+
* @docs-private
|
|
2673
|
+
*/
|
|
2674
|
+
get rippleDisabled() {
|
|
2675
|
+
return this.disabled || this.disableRipple || this._tabNavBar.disableRipple || !!this.rippleConfig.disabled;
|
|
2676
|
+
}
|
|
2677
|
+
/** Unique id for the tab. */
|
|
2678
|
+
id = inject(_IdGenerator).getId("mat-tab-link-");
|
|
2679
|
+
constructor() {
|
|
2680
|
+
super();
|
|
2681
|
+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
2682
|
+
const globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {
|
|
2683
|
+
optional: true
|
|
2684
|
+
});
|
|
2685
|
+
const tabIndex = inject(new HostAttributeToken("tabindex"), {
|
|
2686
|
+
optional: true
|
|
2687
|
+
});
|
|
2688
|
+
this.rippleConfig = globalRippleOptions || {};
|
|
2689
|
+
this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;
|
|
2690
|
+
if (_animationsDisabled()) {
|
|
2691
|
+
this.rippleConfig.animation = {
|
|
2692
|
+
enterDuration: 0,
|
|
2693
|
+
exitDuration: 0
|
|
2694
|
+
};
|
|
2695
|
+
}
|
|
2696
|
+
this._tabNavBar._fitInkBarToContent.pipe(takeUntil(this._destroyed)).subscribe((fitInkBarToContent) => {
|
|
2697
|
+
this.fitInkBarToContent = fitInkBarToContent;
|
|
2698
|
+
});
|
|
2699
|
+
}
|
|
2700
|
+
/** Focuses the tab link. */
|
|
2701
|
+
focus() {
|
|
2702
|
+
this.elementRef.nativeElement.focus();
|
|
2703
|
+
}
|
|
2704
|
+
ngAfterViewInit() {
|
|
2705
|
+
this._focusMonitor.monitor(this.elementRef);
|
|
2706
|
+
}
|
|
2707
|
+
ngOnDestroy() {
|
|
2708
|
+
this._destroyed.next();
|
|
2709
|
+
this._destroyed.complete();
|
|
2710
|
+
super.ngOnDestroy();
|
|
2711
|
+
this._focusMonitor.stopMonitoring(this.elementRef);
|
|
2712
|
+
}
|
|
2713
|
+
_handleFocus() {
|
|
2714
|
+
this._tabNavBar.focusIndex = this._tabNavBar._items.toArray().indexOf(this);
|
|
2715
|
+
}
|
|
2716
|
+
_handleKeydown(event) {
|
|
2717
|
+
if (event.keyCode === SPACE || event.keyCode === ENTER) {
|
|
2718
|
+
if (this.disabled) {
|
|
2719
|
+
event.preventDefault();
|
|
2720
|
+
} else if (this._tabNavBar.tabPanel) {
|
|
2721
|
+
if (event.keyCode === SPACE) {
|
|
2722
|
+
event.preventDefault();
|
|
2723
|
+
}
|
|
2724
|
+
this.elementRef.nativeElement.click();
|
|
2725
|
+
}
|
|
2726
|
+
}
|
|
2727
|
+
}
|
|
2728
|
+
_getAriaControls() {
|
|
2729
|
+
return this._tabNavBar.tabPanel ? this._tabNavBar.tabPanel?.id : this.elementRef.nativeElement.getAttribute("aria-controls");
|
|
2730
|
+
}
|
|
2731
|
+
_getAriaSelected() {
|
|
2732
|
+
if (this._tabNavBar.tabPanel) {
|
|
2733
|
+
return this.active ? "true" : "false";
|
|
2734
|
+
} else {
|
|
2735
|
+
return this.elementRef.nativeElement.getAttribute("aria-selected");
|
|
2736
|
+
}
|
|
2737
|
+
}
|
|
2738
|
+
_getAriaCurrent() {
|
|
2739
|
+
return this.active && !this._tabNavBar.tabPanel ? "page" : null;
|
|
2740
|
+
}
|
|
2741
|
+
_getRole() {
|
|
2742
|
+
return this._tabNavBar.tabPanel ? "tab" : this.elementRef.nativeElement.getAttribute("role");
|
|
2743
|
+
}
|
|
2744
|
+
static \u0275fac = function MatTabLink_Factory(__ngFactoryType__) {
|
|
2745
|
+
return new (__ngFactoryType__ || _MatTabLink)();
|
|
2746
|
+
};
|
|
2747
|
+
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
|
|
2748
|
+
type: _MatTabLink,
|
|
2749
|
+
selectors: [["", "mat-tab-link", ""], ["", "matTabLink", ""]],
|
|
2750
|
+
hostAttrs: [1, "mdc-tab", "mat-mdc-tab-link", "mat-focus-indicator"],
|
|
2751
|
+
hostVars: 11,
|
|
2752
|
+
hostBindings: function MatTabLink_HostBindings(rf, ctx) {
|
|
2753
|
+
if (rf & 1) {
|
|
2754
|
+
\u0275\u0275listener("focus", function MatTabLink_focus_HostBindingHandler() {
|
|
2755
|
+
return ctx._handleFocus();
|
|
2756
|
+
})("keydown", function MatTabLink_keydown_HostBindingHandler($event) {
|
|
2757
|
+
return ctx._handleKeydown($event);
|
|
2758
|
+
});
|
|
2759
|
+
}
|
|
2760
|
+
if (rf & 2) {
|
|
2761
|
+
\u0275\u0275attribute("aria-controls", ctx._getAriaControls())("aria-current", ctx._getAriaCurrent())("aria-disabled", ctx.disabled)("aria-selected", ctx._getAriaSelected())("id", ctx.id)("tabIndex", ctx._tabIndex())("role", ctx._getRole());
|
|
2762
|
+
\u0275\u0275classProp("mat-mdc-tab-disabled", ctx.disabled)("mdc-tab--active", ctx.active);
|
|
2763
|
+
}
|
|
2764
|
+
},
|
|
2765
|
+
inputs: {
|
|
2766
|
+
active: [2, "active", "active", booleanAttribute],
|
|
2767
|
+
disabled: [2, "disabled", "disabled", booleanAttribute],
|
|
2768
|
+
disableRipple: [2, "disableRipple", "disableRipple", booleanAttribute],
|
|
2769
|
+
tabIndex: [2, "tabIndex", "tabIndex", (value) => value == null ? 0 : numberAttribute(value)],
|
|
2770
|
+
id: "id"
|
|
2771
|
+
},
|
|
2772
|
+
exportAs: ["matTabLink"],
|
|
2773
|
+
features: [\u0275\u0275InheritDefinitionFeature],
|
|
2774
|
+
attrs: _c10,
|
|
2775
|
+
ngContentSelectors: _c0,
|
|
2776
|
+
decls: 5,
|
|
2777
|
+
vars: 2,
|
|
2778
|
+
consts: [[1, "mdc-tab__ripple"], ["mat-ripple", "", 1, "mat-mdc-tab-ripple", 3, "matRippleTrigger", "matRippleDisabled"], [1, "mdc-tab__content"], [1, "mdc-tab__text-label"]],
|
|
2779
|
+
template: function MatTabLink_Template(rf, ctx) {
|
|
2780
|
+
if (rf & 1) {
|
|
2781
|
+
\u0275\u0275projectionDef();
|
|
2782
|
+
\u0275\u0275element(0, "span", 0)(1, "div", 1);
|
|
2783
|
+
\u0275\u0275elementStart(2, "span", 2)(3, "span", 3);
|
|
2784
|
+
\u0275\u0275projection(4);
|
|
2785
|
+
\u0275\u0275elementEnd()();
|
|
2786
|
+
}
|
|
2787
|
+
if (rf & 2) {
|
|
2788
|
+
\u0275\u0275advance();
|
|
2789
|
+
\u0275\u0275property("matRippleTrigger", ctx.elementRef.nativeElement)("matRippleDisabled", ctx.rippleDisabled);
|
|
2790
|
+
}
|
|
2791
|
+
},
|
|
2792
|
+
dependencies: [MatRipple],
|
|
2793
|
+
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(--mat-tab-container-height, 48px);font-family:var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-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(--mat-tab-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mat-tab-active-indicator-height, 2px);border-radius:var(--mat-tab-active-indicator-shape, 0)}.mat-mdc-tab-link:hover .mdc-tab__text-label{color:var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-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-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-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-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-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-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-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-disabled-ripple-color, var(--mat-sys-on-surface-variant))}.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-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-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-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}}\n'],
|
|
2794
|
+
encapsulation: 2,
|
|
2795
|
+
changeDetection: 0
|
|
2796
|
+
});
|
|
2797
|
+
};
|
|
2798
|
+
(() => {
|
|
2799
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabLink, [{
|
|
2800
|
+
type: Component,
|
|
2801
|
+
args: [{
|
|
2802
|
+
selector: "[mat-tab-link], [matTabLink]",
|
|
2803
|
+
exportAs: "matTabLink",
|
|
2804
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2805
|
+
encapsulation: ViewEncapsulation.None,
|
|
2806
|
+
host: {
|
|
2807
|
+
"class": "mdc-tab mat-mdc-tab-link mat-focus-indicator",
|
|
2808
|
+
"[attr.aria-controls]": "_getAriaControls()",
|
|
2809
|
+
"[attr.aria-current]": "_getAriaCurrent()",
|
|
2810
|
+
"[attr.aria-disabled]": "disabled",
|
|
2811
|
+
"[attr.aria-selected]": "_getAriaSelected()",
|
|
2812
|
+
"[attr.id]": "id",
|
|
2813
|
+
"[attr.tabIndex]": "_tabIndex()",
|
|
2814
|
+
"[attr.role]": "_getRole()",
|
|
2815
|
+
"[class.mat-mdc-tab-disabled]": "disabled",
|
|
2816
|
+
"[class.mdc-tab--active]": "active",
|
|
2817
|
+
"(focus)": "_handleFocus()",
|
|
2818
|
+
"(keydown)": "_handleKeydown($event)"
|
|
2819
|
+
},
|
|
2820
|
+
imports: [MatRipple],
|
|
2821
|
+
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',
|
|
2822
|
+
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(--mat-tab-container-height, 48px);font-family:var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-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(--mat-tab-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mat-tab-active-indicator-height, 2px);border-radius:var(--mat-tab-active-indicator-shape, 0)}.mat-mdc-tab-link:hover .mdc-tab__text-label{color:var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-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-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-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-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-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-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-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-disabled-ripple-color, var(--mat-sys-on-surface-variant))}.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-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-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-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}}\n']
|
|
2823
|
+
}]
|
|
2824
|
+
}], () => [], {
|
|
2825
|
+
active: [{
|
|
2826
|
+
type: Input,
|
|
2827
|
+
args: [{
|
|
2828
|
+
transform: booleanAttribute
|
|
2829
|
+
}]
|
|
2830
|
+
}],
|
|
2831
|
+
disabled: [{
|
|
2832
|
+
type: Input,
|
|
2833
|
+
args: [{
|
|
2834
|
+
transform: booleanAttribute
|
|
2835
|
+
}]
|
|
2836
|
+
}],
|
|
2837
|
+
disableRipple: [{
|
|
2838
|
+
type: Input,
|
|
2839
|
+
args: [{
|
|
2840
|
+
transform: booleanAttribute
|
|
2841
|
+
}]
|
|
2842
|
+
}],
|
|
2843
|
+
tabIndex: [{
|
|
2844
|
+
type: Input,
|
|
2845
|
+
args: [{
|
|
2846
|
+
transform: (value) => value == null ? 0 : numberAttribute(value)
|
|
2847
|
+
}]
|
|
2848
|
+
}],
|
|
2849
|
+
id: [{
|
|
2850
|
+
type: Input
|
|
2851
|
+
}]
|
|
2852
|
+
});
|
|
2853
|
+
})();
|
|
2854
|
+
var MatTabNavPanel = class _MatTabNavPanel {
|
|
2855
|
+
/** Unique id for the tab panel. */
|
|
2856
|
+
id = inject(_IdGenerator).getId("mat-tab-nav-panel-");
|
|
2857
|
+
/** Id of the active tab in the nav bar. */
|
|
2858
|
+
_activeTabId;
|
|
2859
|
+
static \u0275fac = function MatTabNavPanel_Factory(__ngFactoryType__) {
|
|
2860
|
+
return new (__ngFactoryType__ || _MatTabNavPanel)();
|
|
2861
|
+
};
|
|
2862
|
+
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
|
|
2863
|
+
type: _MatTabNavPanel,
|
|
2864
|
+
selectors: [["mat-tab-nav-panel"]],
|
|
2865
|
+
hostAttrs: ["role", "tabpanel", 1, "mat-mdc-tab-nav-panel"],
|
|
2866
|
+
hostVars: 2,
|
|
2867
|
+
hostBindings: function MatTabNavPanel_HostBindings(rf, ctx) {
|
|
2868
|
+
if (rf & 2) {
|
|
2869
|
+
\u0275\u0275attribute("aria-labelledby", ctx._activeTabId)("id", ctx.id);
|
|
2870
|
+
}
|
|
2871
|
+
},
|
|
2872
|
+
inputs: {
|
|
2873
|
+
id: "id"
|
|
2874
|
+
},
|
|
2875
|
+
exportAs: ["matTabNavPanel"],
|
|
2876
|
+
ngContentSelectors: _c0,
|
|
2877
|
+
decls: 1,
|
|
2878
|
+
vars: 0,
|
|
2879
|
+
template: function MatTabNavPanel_Template(rf, ctx) {
|
|
2880
|
+
if (rf & 1) {
|
|
2881
|
+
\u0275\u0275projectionDef();
|
|
2882
|
+
\u0275\u0275projection(0);
|
|
2883
|
+
}
|
|
2884
|
+
},
|
|
2885
|
+
encapsulation: 2,
|
|
2886
|
+
changeDetection: 0
|
|
2887
|
+
});
|
|
2888
|
+
};
|
|
2889
|
+
(() => {
|
|
2890
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabNavPanel, [{
|
|
2891
|
+
type: Component,
|
|
2892
|
+
args: [{
|
|
2893
|
+
selector: "mat-tab-nav-panel",
|
|
2894
|
+
exportAs: "matTabNavPanel",
|
|
2895
|
+
template: "<ng-content></ng-content>",
|
|
2896
|
+
host: {
|
|
2897
|
+
"[attr.aria-labelledby]": "_activeTabId",
|
|
2898
|
+
"[attr.id]": "id",
|
|
2899
|
+
"class": "mat-mdc-tab-nav-panel",
|
|
2900
|
+
"role": "tabpanel"
|
|
2901
|
+
},
|
|
2902
|
+
encapsulation: ViewEncapsulation.None,
|
|
2903
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
2904
|
+
}]
|
|
2905
|
+
}], null, {
|
|
2906
|
+
id: [{
|
|
2907
|
+
type: Input
|
|
2908
|
+
}]
|
|
2909
|
+
});
|
|
2910
|
+
})();
|
|
2911
|
+
var MatTabsModule = class _MatTabsModule {
|
|
2912
|
+
static \u0275fac = function MatTabsModule_Factory(__ngFactoryType__) {
|
|
2913
|
+
return new (__ngFactoryType__ || _MatTabsModule)();
|
|
2914
|
+
};
|
|
2915
|
+
static \u0275mod = /* @__PURE__ */ \u0275\u0275defineNgModule({
|
|
2916
|
+
type: _MatTabsModule,
|
|
2917
|
+
imports: [MatCommonModule, MatTabContent, MatTabLabel, MatTab, MatTabGroup, MatTabNav, MatTabNavPanel, MatTabLink],
|
|
2918
|
+
exports: [MatCommonModule, MatTabContent, MatTabLabel, MatTab, MatTabGroup, MatTabNav, MatTabNavPanel, MatTabLink]
|
|
2919
|
+
});
|
|
2920
|
+
static \u0275inj = /* @__PURE__ */ \u0275\u0275defineInjector({
|
|
2921
|
+
imports: [MatCommonModule, MatCommonModule]
|
|
2922
|
+
});
|
|
2923
|
+
};
|
|
2924
|
+
(() => {
|
|
2925
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatTabsModule, [{
|
|
2926
|
+
type: NgModule,
|
|
2927
|
+
args: [{
|
|
2928
|
+
imports: [MatCommonModule, MatTabContent, MatTabLabel, MatTab, MatTabGroup, MatTabNav, MatTabNavPanel, MatTabLink],
|
|
2929
|
+
exports: [MatCommonModule, MatTabContent, MatTabLabel, MatTab, MatTabGroup, MatTabNav, MatTabNavPanel, MatTabLink]
|
|
2930
|
+
}]
|
|
2931
|
+
}], null, null);
|
|
2932
|
+
})();
|
|
2933
|
+
|
|
2934
|
+
// src/app/core/services/signalk-plugins.service.ts
|
|
2935
|
+
var SignalkPluginsService = class _SignalkPluginsService {
|
|
2936
|
+
_TRACKED_PLUGINS = [
|
|
2937
|
+
{ id: "derived-data", versionRequirement: null },
|
|
2938
|
+
{ id: "signalk-autostate", versionRequirement: null },
|
|
2939
|
+
{ id: "signalk-polar-performance-plugin", versionRequirement: null },
|
|
2940
|
+
{ id: "autopilot", versionRequirement: null }
|
|
2941
|
+
];
|
|
2942
|
+
_connectionSvc = inject(SignalKConnectionService);
|
|
2943
|
+
_API_URL = signal(null, ...ngDevMode ? [{ debugName: "_API_URL" }] : []);
|
|
2944
|
+
_connection = toSignal(this._connectionSvc.getServiceEndpointStatusAsO());
|
|
2945
|
+
_pluginInformation = resource({
|
|
2946
|
+
loader: (_0) => __async(this, [_0], function* ({ abortSignal }) {
|
|
2947
|
+
const url = this._API_URL();
|
|
2948
|
+
if (!url) {
|
|
2949
|
+
console.error("API URL not set yet.");
|
|
2950
|
+
return [];
|
|
2951
|
+
}
|
|
2952
|
+
try {
|
|
2953
|
+
const response = yield fetch(url, { signal: abortSignal });
|
|
2954
|
+
if (!response.ok) {
|
|
2955
|
+
console.error("[SkPlugin Service] Error fetching plugin information:", response.statusText);
|
|
2956
|
+
return [];
|
|
2957
|
+
}
|
|
2958
|
+
return yield response.json();
|
|
2959
|
+
} catch (error) {
|
|
2960
|
+
console.error("[SkPlugin Service] Error fetching plugin information:", error);
|
|
2961
|
+
return [];
|
|
2962
|
+
}
|
|
2963
|
+
})
|
|
2964
|
+
});
|
|
2965
|
+
constructor() {
|
|
2966
|
+
this._API_URL.set(`${this._connectionSvc.signalKURL.url}/signalk/v2/features?enabled=enabled`);
|
|
2967
|
+
}
|
|
2968
|
+
/**
|
|
2969
|
+
* Loads and returns the current list of plugins from the Signal K server.
|
|
2970
|
+
* This method triggers a reload of the plugin information resource and waits until the data is available.
|
|
2971
|
+
*
|
|
2972
|
+
* @returns Promise resolving to an array of PluginInformation objects. Returns an empty array if loading fails or no plugins are found.
|
|
2973
|
+
*/
|
|
2974
|
+
getPluginInformation() {
|
|
2975
|
+
return __async(this, null, function* () {
|
|
2976
|
+
this._pluginInformation.reload();
|
|
2977
|
+
while (this._pluginInformation.isLoading()) {
|
|
2978
|
+
yield new Promise((resolve) => setTimeout(resolve, 100));
|
|
2979
|
+
}
|
|
2980
|
+
return this._pluginInformation.value()?.plugins || [];
|
|
2981
|
+
});
|
|
2982
|
+
}
|
|
2983
|
+
/**
|
|
2984
|
+
* Checks if a plugin with the given ID is installed on the Signal K server.
|
|
2985
|
+
* @param pluginId The ID of the plugin to check.
|
|
2986
|
+
* @returns Promise resolving to true if the plugin is installed, false otherwise.
|
|
2987
|
+
*
|
|
2988
|
+
* @example
|
|
2989
|
+
* // Usage in a synchronous function:
|
|
2990
|
+
* signalkPluginsService.isInstalled('autopilot').then((installed) => {
|
|
2991
|
+
* if (installed) {
|
|
2992
|
+
* console.log('Autopilot plugin is installed.');
|
|
2993
|
+
* }
|
|
2994
|
+
* });
|
|
2995
|
+
*
|
|
2996
|
+
* // Usage in an async function:
|
|
2997
|
+
* const installed = await signalkPluginsService.isInstalled('autopilot');
|
|
2998
|
+
* if (installed) {
|
|
2999
|
+
* console.log('Autopilot plugin is installed.');
|
|
3000
|
+
* }
|
|
3001
|
+
*
|
|
3002
|
+
*/
|
|
3003
|
+
isInstalled(pluginId) {
|
|
3004
|
+
return __async(this, null, function* () {
|
|
3005
|
+
const plugins = yield this.getPluginInformation();
|
|
3006
|
+
if (!plugins || plugins.length === 0) {
|
|
3007
|
+
return false;
|
|
3008
|
+
}
|
|
3009
|
+
return plugins.some((plugin) => plugin.id === pluginId);
|
|
3010
|
+
});
|
|
3011
|
+
}
|
|
3012
|
+
/**
|
|
3013
|
+
* Checks if a plugin with the given ID is both installed and enabled on the Signal K server.
|
|
3014
|
+
* @param pluginId The ID of the plugin to check.
|
|
3015
|
+
* @returns Promise resolving to true if the plugin is installed and enabled, false otherwise.
|
|
3016
|
+
*
|
|
3017
|
+
* @example
|
|
3018
|
+
* // Usage in a synchronous function:
|
|
3019
|
+
* signalkPluginsService.isEnabled('autopilot').then((enabled) => {
|
|
3020
|
+
* if (enabled) {
|
|
3021
|
+
* console.log('Autopilot plugin is enabled.');
|
|
3022
|
+
* }
|
|
3023
|
+
* });
|
|
3024
|
+
* // Usage in an async function:
|
|
3025
|
+
* const enabled = await signalkPluginsService.isEnabled('autopilot');
|
|
3026
|
+
* if (enabled) {
|
|
3027
|
+
* console.log('Autopilot plugin is enabled.');
|
|
3028
|
+
* }
|
|
3029
|
+
*
|
|
3030
|
+
*/
|
|
3031
|
+
isEnabled(pluginId) {
|
|
3032
|
+
return __async(this, null, function* () {
|
|
3033
|
+
const plugins = yield this.getPluginInformation();
|
|
3034
|
+
if (!plugins || plugins.length === 0) {
|
|
3035
|
+
return false;
|
|
3036
|
+
}
|
|
3037
|
+
return plugins.some((plugin) => plugin.id === pluginId && plugin.enabled);
|
|
3038
|
+
});
|
|
3039
|
+
}
|
|
3040
|
+
static \u0275fac = function SignalkPluginsService_Factory(__ngFactoryType__) {
|
|
3041
|
+
return new (__ngFactoryType__ || _SignalkPluginsService)();
|
|
3042
|
+
};
|
|
3043
|
+
static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _SignalkPluginsService, factory: _SignalkPluginsService.\u0275fac, providedIn: "root" });
|
|
3044
|
+
};
|
|
3045
|
+
(() => {
|
|
3046
|
+
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(SignalkPluginsService, [{
|
|
3047
|
+
type: Injectable,
|
|
3048
|
+
args: [{ providedIn: "root" }]
|
|
3049
|
+
}], () => [], null);
|
|
3050
|
+
})();
|
|
3051
|
+
|
|
3052
|
+
export {
|
|
3053
|
+
SignalkPluginsService,
|
|
3054
|
+
MatTabLabel,
|
|
3055
|
+
MatTab,
|
|
3056
|
+
MatTabGroup,
|
|
3057
|
+
MatTabsModule
|
|
3058
|
+
};
|
|
3059
|
+
//# sourceMappingURL=chunk-D7ILNFDM.js.map
|