@angular/material 12.0.6 → 12.1.0

package/bundles/material-tabs.umd.js

@@ -386,18 +386,21 @@
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     /**
@@ -454,12 +457,11 @@
 
     // Boilerplate for applying mixins to MatTab.
     /** @docs-private */
-    var MatTabBase = /** @class */ (function () {
-        function MatTabBase() {
+    var _MatTabBase = core$1.mixinDisabled(/** @class */ (function () {
+        function class_1() {
         }
-        return MatTabBase;
-    }());
-    var _MatTabMixinBase = core$1.mixinDisabled(MatTabBase);
+        return class_1;
+    }()));
     /**
      * Used to provide a tab group to a tab without causing a circular dependency.
      * @docs-private
@@ -535,7 +537,7 @@
             }
         };
         return MatTab;
-    }(_MatTabMixinBase));
+    }(_MatTabBase));
     MatTab.decorators = [
         { type: core.Component, args: [{
                     selector: 'mat-tab',
@@ -825,13 +827,12 @@
     }());
     // Boilerplate for applying mixins to MatTabGroup.
     /** @docs-private */
-    var MatTabGroupMixinBase = /** @class */ (function () {
-        function MatTabGroupMixinBase(_elementRef) {
+    var _MatTabGroupMixinBase = core$1.mixinColor(core$1.mixinDisableRipple(/** @class */ (function () {
+        function class_1(_elementRef) {
             this._elementRef = _elementRef;
         }
-        return MatTabGroupMixinBase;
-    }());
-    var _MatTabGroupMixinBase = core$1.mixinColor(core$1.mixinDisableRipple(MatTabGroupMixinBase), 'primary');
+        return class_1;
+    }())), 'primary');
     /**
      * Base class with all of the `MatTabGroupBase` functionality.
      * @docs-private
@@ -839,7 +840,9 @@
     var _MatTabGroupBase = /** @class */ (function (_super) {
         __extends(_MatTabGroupBase, _super);
         function _MatTabGroupBase(elementRef, _changeDetectorRef, defaultConfig, _animationMode) {
-            var _this = _super.call(this, elementRef) || this;
+            var _this = this;
+            var _a;
+            _this = _super.call(this, elementRef) || this;
             _this._changeDetectorRef = _changeDetectorRef;
             _this._animationMode = _animationMode;
             /** All of the tabs that belong to the group. */
@@ -870,6 +873,7 @@
                 defaultConfig.disablePagination : false;
             _this.dynamicHeight = defaultConfig && defaultConfig.dynamicHeight != null ?
                 defaultConfig.dynamicHeight : false;
+            _this.contentTabIndex = (_a = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.contentTabIndex) !== null && _a !== void 0 ? _a : null;
             return _this;
         }
         Object.defineProperty(_MatTabGroupBase.prototype, "dynamicHeight", {
@@ -897,6 +901,20 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(_MatTabGroupBase.prototype, "contentTabIndex", {
+            /**
+             * `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
+             * accessibility when the tab does not have focusable elements or if it has scrollable content.
+             * The `tabindex` will be removed automatically for inactive tabs.
+             * Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html
+             */
+            get: function () { return this._contentTabIndex; },
+            set: function (value) {
+                this._contentTabIndex = coercion.coerceNumberProperty(value, null);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(_MatTabGroupBase.prototype, "backgroundColor", {
             /** Background color of the tab group. */
             get: function () { return this._backgroundColor; },
@@ -1117,6 +1135,7 @@
         selectedIndex: [{ type: core.Input }],
         headerPosition: [{ type: core.Input }],
         animationDuration: [{ type: core.Input }],
+        contentTabIndex: [{ type: core.Input }],
         disablePagination: [{ type: core.Input }],
         backgroundColor: [{ type: core.Input }],
         selectedIndexChange: [{ type: core.Output }],
@@ -1140,7 +1159,7 @@
         { type: core.Component, args: [{
                     selector: 'mat-tab-group',
                     exportAs: 'matTabGroup',
-                    template: "<mat-tab-header #tabHeader\n               [selectedIndex]=\"selectedIndex || 0\"\n               [disableRipple]=\"disableRipple\"\n               [disablePagination]=\"disablePagination\"\n               (indexFocused)=\"_focusChanged($event)\"\n               (selectFocusedIndex)=\"selectedIndex = $event\">\n  <div class=\"mat-tab-label mat-focus-indicator\" role=\"tab\" matTabLabelWrapper mat-ripple cdkMonitorElementFocus\n       *ngFor=\"let tab of _tabs; let i = index\"\n       [id]=\"_getTabLabelId(i)\"\n       [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n       [attr.aria-posinset]=\"i + 1\"\n       [attr.aria-setsize]=\"_tabs.length\"\n       [attr.aria-controls]=\"_getTabContentId(i)\"\n       [attr.aria-selected]=\"selectedIndex == i\"\n       [attr.aria-label]=\"tab.ariaLabel || null\"\n       [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n       [class.mat-tab-label-active]=\"selectedIndex == i\"\n       [disabled]=\"tab.disabled\"\n       [matRippleDisabled]=\"tab.disabled || disableRipple\"\n       (click)=\"_handleClick(tab, tabHeader, i)\"\n       (cdkFocusChange)=\"_tabFocusChanged($event, i)\">\n\n\n    <div class=\"mat-tab-label-content\">\n      <!-- If there is a label template, use it. -->\n      <ng-template [ngIf]=\"tab.templateLabel\">\n        <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n      </ng-template>\n\n      <!-- If there is not a label template, fall back to the text label. -->\n      <ng-template [ngIf]=\"!tab.templateLabel\">{{tab.textLabel}}</ng-template>\n    </div>\n  </div>\n</mat-tab-header>\n\n<div\n  class=\"mat-tab-body-wrapper\"\n  [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n  #tabBodyWrapper>\n  <mat-tab-body role=\"tabpanel\"\n               *ngFor=\"let tab of _tabs; let i = index\"\n               [id]=\"_getTabContentId(i)\"\n               [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n               [class.mat-tab-body-active]=\"selectedIndex == i\"\n               [content]=\"tab.content!\"\n               [position]=\"tab.position!\"\n               [origin]=\"tab.origin\"\n               [animationDuration]=\"animationDuration\"\n               (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n               (_onCentering)=\"_setTabBodyWrapperHeight($event)\">\n  </mat-tab-body>\n</div>\n",
+                    template: "<mat-tab-header #tabHeader\n               [selectedIndex]=\"selectedIndex || 0\"\n               [disableRipple]=\"disableRipple\"\n               [disablePagination]=\"disablePagination\"\n               (indexFocused)=\"_focusChanged($event)\"\n               (selectFocusedIndex)=\"selectedIndex = $event\">\n  <div class=\"mat-tab-label mat-focus-indicator\" role=\"tab\" matTabLabelWrapper mat-ripple cdkMonitorElementFocus\n       *ngFor=\"let tab of _tabs; let i = index\"\n       [id]=\"_getTabLabelId(i)\"\n       [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n       [attr.aria-posinset]=\"i + 1\"\n       [attr.aria-setsize]=\"_tabs.length\"\n       [attr.aria-controls]=\"_getTabContentId(i)\"\n       [attr.aria-selected]=\"selectedIndex == i\"\n       [attr.aria-label]=\"tab.ariaLabel || null\"\n       [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n       [class.mat-tab-label-active]=\"selectedIndex == i\"\n       [disabled]=\"tab.disabled\"\n       [matRippleDisabled]=\"tab.disabled || disableRipple\"\n       (click)=\"_handleClick(tab, tabHeader, i)\"\n       (cdkFocusChange)=\"_tabFocusChanged($event, i)\">\n\n\n    <div class=\"mat-tab-label-content\">\n      <!-- If there is a label template, use it. -->\n      <ng-template [ngIf]=\"tab.templateLabel\">\n        <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n      </ng-template>\n\n      <!-- If there is not a label template, fall back to the text label. -->\n      <ng-template [ngIf]=\"!tab.templateLabel\">{{tab.textLabel}}</ng-template>\n    </div>\n  </div>\n</mat-tab-header>\n\n<div\n  class=\"mat-tab-body-wrapper\"\n  [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n  #tabBodyWrapper>\n  <mat-tab-body role=\"tabpanel\"\n               *ngFor=\"let tab of _tabs; let i = index\"\n               [id]=\"_getTabContentId(i)\"\n               [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null\"\n               [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n               [class.mat-tab-body-active]=\"selectedIndex === i\"\n               [content]=\"tab.content!\"\n               [position]=\"tab.position!\"\n               [origin]=\"tab.origin\"\n               [animationDuration]=\"animationDuration\"\n               (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n               (_onCentering)=\"_setTabBodyWrapperHeight($event)\">\n  </mat-tab-body>\n</div>\n",
                     encapsulation: core.ViewEncapsulation.None,
                     // tslint:disable-next-line:validate-decorators
                     changeDetection: core.ChangeDetectionStrategy.Default,
@@ -1154,7 +1173,7 @@
                         '[class.mat-tab-group-dynamic-height]': 'dynamicHeight',
                         '[class.mat-tab-group-inverted-header]': 'headerPosition === "below"',
                     },
-                    styles: [".mat-tab-group{display:flex;flex-direction:column}.mat-tab-group.mat-tab-group-inverted-header{flex-direction:column-reverse}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:none}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}.cdk-high-contrast-active .mat-tab-label:focus{outline:dotted 2px;outline-offset:-2px}.mat-tab-label.mat-tab-disabled{cursor:default}.cdk-high-contrast-active .mat-tab-label.mat-tab-disabled{opacity:.5}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}.cdk-high-contrast-active .mat-tab-label{opacity:1}@media(max-width: 599px){.mat-tab-label{padding:0 12px}}@media(max-width: 959px){.mat-tab-label{padding:0 12px}}.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable.mat-tab-body-wrapper{transition:none;animation:none}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.mat-tab-body.mat-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-tab-group.mat-tab-group-dynamic-height .mat-tab-body.mat-tab-body-active{overflow-y:hidden}\n"]
+                    styles: [".mat-tab-group{display:flex;flex-direction:column}.mat-tab-group.mat-tab-group-inverted-header{flex-direction:column-reverse}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:none}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}.cdk-high-contrast-active .mat-tab-label:focus{outline:dotted 2px;outline-offset:-2px}.mat-tab-label.mat-tab-disabled{cursor:default}.cdk-high-contrast-active .mat-tab-label.mat-tab-disabled{opacity:.5}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}.cdk-high-contrast-active .mat-tab-label{opacity:1}@media(max-width: 599px){.mat-tab-label{padding:0 12px}}@media(max-width: 959px){.mat-tab-label{padding:0 12px}}.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable.mat-tab-body-wrapper{transition:none;animation:none}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-tab-body.mat-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-tab-group.mat-tab-group-dynamic-height .mat-tab-body.mat-tab-body-active{overflow-y:hidden}\n"]
                 },] }
     ];
     MatTabGroup.ctorParameters = function () { return [
@@ -1171,12 +1190,11 @@
 
     // Boilerplate for applying mixins to MatTabLabelWrapper.
     /** @docs-private */
-    var MatTabLabelWrapperBase = /** @class */ (function () {
-        function MatTabLabelWrapperBase() {
+    var _MatTabLabelWrapperBase = core$1.mixinDisabled(/** @class */ (function () {
+        function class_1() {
         }
-        return MatTabLabelWrapperBase;
-    }());
-    var _MatTabLabelWrapperMixinBase = core$1.mixinDisabled(MatTabLabelWrapperBase);
+        return class_1;
+    }()));
     /**
      * Used in the `mat-tab-group` view to display tab labels.
      * @docs-private
@@ -1199,7 +1217,7 @@
             return this.elementRef.nativeElement.offsetWidth;
         };
         return MatTabLabelWrapper;
-    }(_MatTabLabelWrapperMixinBase));
+    }(_MatTabLabelWrapperBase));
     MatTabLabelWrapper.decorators = [
         { type: core.Directive, args: [{
                     selector: '[matTabLabelWrapper]',
@@ -1917,12 +1935,11 @@
         _previousPaginator: [{ type: core.ViewChild, args: ['previousPaginator',] }]
     };
     // Boilerplate for applying mixins to MatTabLink.
-    var MatTabLinkMixinBase = /** @class */ (function () {
-        function MatTabLinkMixinBase() {
+    var _MatTabLinkMixinBase = core$1.mixinTabIndex(core$1.mixinDisableRipple(core$1.mixinDisabled(/** @class */ (function () {
+        function class_1() {
         }
-        return MatTabLinkMixinBase;
-    }());
-    var _MatTabLinkMixinBase = core$1.mixinTabIndex(core$1.mixinDisableRipple(core$1.mixinDisabled(MatTabLinkMixinBase)));
+        return class_1;
+    }()))));
     /** Base class with all of the `MatTabLink` functionality. */
     var _MatTabLinkBase = /** @class */ (function (_super) {
         __extends(_MatTabLinkBase, _super);