@ptsecurity/mosaic 11.5.0 → 12.2.0

package/fesm2015/ptsecurity-mosaic-tabs.js

@@ -1,17 +1,24 @@
-import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/cdk/a11y';
+import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
+import * as i7 from '@angular/cdk/portal';
 import { CdkPortalOutlet, CdkPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Optional, ChangeDetectorRef, Input, Output, ViewChild, Directive, ComponentFactoryResolver, ViewContainerRef, Inject, forwardRef, TemplateRef, NgZone, Renderer2, ContentChildren, InjectionToken, ContentChild, Attribute, NgModule } from '@angular/core';
-import { mixinDisabled, mixinTabIndex, McCommonModule } from '@ptsecurity/mosaic/core';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, forwardRef, Directive, Inject, InjectionToken, TemplateRef, ContentChild, ContentChildren, Attribute, NgModule } from '@angular/core';
+import { mixinDisabled, PopUpPlacements, mixinTabIndex, McCommonModule } from '@ptsecurity/mosaic/core';
+import * as i4 from '@ptsecurity/mosaic/icon';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
+import * as i6 from '@ptsecurity/mosaic/tooltip';
 import { McToolTipModule } from '@ptsecurity/mosaic/tooltip';
-import { Directionality } from '@angular/cdk/bidi';
+import * as i3 from '@angular/cdk/bidi';
 import { Subscription, Subject, fromEvent, of, merge, timer } from 'rxjs';
-import { startWith, takeUntil, delay } from 'rxjs/operators';
+import { startWith, takeUntil, debounceTime, delay } from 'rxjs/operators';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
-import { ViewportRuler } from '@angular/cdk/scrolling';
+import * as i2 from '@angular/cdk/platform';
+import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
+import * as i1 from '@angular/cdk/scrolling';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import { hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@ptsecurity/cdk/keycodes';
@@ -134,36 +141,44 @@ class McTabBody {
         return 'right-origin-center';
     }
 }
-McTabBody.decorators = [
-    { type: Component, args: [{
-                selector: 'mc-tab-body',
-                template: "<div class=\"mc-tab-body__content\"\n     #content\n     [@translateTab]=\"{\n        value: bodyPosition,\n        params: {animationDuration: animationDuration}\n     }\"\n     (@translateTab.start)=\"onTranslateTabStarted($event)\"\n     (@translateTab.done)=\"onTranslateTabComplete($event)\">\n    <ng-template mcTabBodyHost></ng-template>\n</div>\n",
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                animations: [mcTabsAnimations.translateTab],
-                host: {
-                    class: 'mc-tab-body'
-                },
-                styles: [".mc-tab-body__content{height:100%;overflow:auto}.mc-tab-body__content .mc-tab-group_dynamic-height{overflow:hidden}"]
-            },] }
-];
-/** @nocollapse */
-McTabBody.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Directionality, decorators: [{ type: Optional }] },
-    { type: ChangeDetectorRef }
-];
-McTabBody.propDecorators = {
-    position: [{ type: Input }],
-    onCentering: [{ type: Output }],
-    beforeCentering: [{ type: Output }],
-    afterLeavingCenter: [{ type: Output }],
-    onCentered: [{ type: Output }],
-    portalHost: [{ type: ViewChild, args: [CdkPortalOutlet, { static: false },] }],
-    content: [{ type: Input, args: ['content',] }],
-    origin: [{ type: Input }],
-    animationDuration: [{ type: Input }]
-};
+/** @nocollapse */ McTabBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabBody, deps: [{ token: i0.ElementRef }, { token: i3.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McTabBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTabBody, selector: "mc-tab-body", inputs: { position: "position", content: "content", origin: "origin", animationDuration: "animationDuration" }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "mc-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div class=\"mc-tab-body__content\"\n     #content\n     [@translateTab]=\"{\n        value: bodyPosition,\n        params: {animationDuration: animationDuration}\n     }\"\n     (@translateTab.start)=\"onTranslateTabStarted($event)\"\n     (@translateTab.done)=\"onTranslateTabComplete($event)\">\n    <ng-template mcTabBodyHost></ng-template>\n</div>\n", styles: [".mc-tab-body__content{height:100%;overflow:auto}.mc-tab-body__content .mc-tab-group_dynamic-height{overflow:hidden}\n"], directives: [{ type: i0.forwardRef(function () { return McTabBodyPortal; }), selector: "[mcTabBodyHost]" }], animations: [mcTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabBody, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mc-tab-body',
+                    templateUrl: 'tab-body.html',
+                    styleUrls: ['tab-body.scss'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [mcTabsAnimations.translateTab],
+                    host: {
+                        class: 'mc-tab-body'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { position: [{
+                type: Input
+            }], onCentering: [{
+                type: Output
+            }], beforeCentering: [{
+                type: Output
+            }], afterLeavingCenter: [{
+                type: Output
+            }], onCentered: [{
+                type: Output
+            }], portalHost: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: false }]
+            }], content: [{
+                type: Input,
+                args: ['content']
+            }], origin: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }] } });
 /**
  * The portal host directive for the contents of the tab.
  * @docs-private
@@ -197,17 +212,17 @@ class McTabBodyPortal extends CdkPortalOutlet {
         this.leavingSub.unsubscribe();
     }
 }
-McTabBodyPortal.decorators = [
-    { type: Directive, args: [{
-                selector: '[mcTabBodyHost]'
-            },] }
-];
-/** @nocollapse */
-McTabBodyPortal.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: ViewContainerRef },
-    { type: McTabBody, decorators: [{ type: Inject, args: [forwardRef(() => McTabBody),] }] }
-];
+/** @nocollapse */ McTabBodyPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabBodyPortal, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: forwardRef(() => McTabBody) }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McTabBodyPortal.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTabBodyPortal, selector: "[mcTabBodyHost]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabBodyPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcTabBodyHost]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: McTabBody, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => McTabBody)]
+                }] }]; } });
 
 /** Decorates the `ng-template` tags and reads out the template from it. */
 class McTabContent {
@@ -215,13 +230,12 @@ class McTabContent {
         this.template = template;
     }
 }
-McTabContent.decorators = [
-    { type: Directive, args: [{ selector: '[mcTabContent]' },] }
-];
-/** @nocollapse */
-McTabContent.ctorParameters = () => [
-    { type: TemplateRef }
-];
+/** @nocollapse */ McTabContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McTabContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTabContent, selector: "[mcTabContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabContent, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mcTabContent]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /* tslint:disable:naming-convention */
 /** Config used to bind passive event listeners */
@@ -582,7 +596,7 @@ class McPaginatedTabHeader {
      * should be called sparingly.
      */
     checkPaginationEnabled() {
-        if (this.disablePagination) {
+        if (this.disablePagination || this.vertical) {
             this.showPaginationControls = false;
         }
         else {
@@ -675,22 +689,160 @@ class McPaginatedTabHeader {
         return { maxScrollDistance, distance: this.scrollDistance };
     }
 }
-McPaginatedTabHeader.decorators = [
-    { type: Directive }
-];
-/** @nocollapse */
-McPaginatedTabHeader.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: ViewportRuler },
-    { type: NgZone },
-    { type: Platform },
-    { type: Directionality, decorators: [{ type: Optional }] },
-    { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
-];
-McPaginatedTabHeader.propDecorators = {
-    disablePagination: [{ type: Input }]
-};
+/** @nocollapse */ McPaginatedTabHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPaginatedTabHeader, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ViewportRuler }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McPaginatedTabHeader.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McPaginatedTabHeader, inputs: { disablePagination: "disablePagination" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPaginatedTabHeader, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANIMATION_MODULE_TYPE]
+                }] }]; }, propDecorators: { disablePagination: [{
+                type: Input
+            }] } });
+
+const MC_TAB_LABEL = new InjectionToken('McTabLabel');
+/** Used to flag tab labels for use with the portal directive */
+class McTabLabel extends CdkPortal {
+}
+/** @nocollapse */ McTabLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McTabLabel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTabLabel, selector: "[mc-tab-label], [mcTabLabel]", providers: [{ provide: MC_TAB_LABEL, useExisting: McTabLabel }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mc-tab-label], [mcTabLabel]',
+                    providers: [{ provide: MC_TAB_LABEL, useExisting: McTabLabel }]
+                }]
+        }] });
+
+class McTabBase {
+}
+// tslint:disable-next-line:naming-convention
+const McTabMixinBase = mixinDisabled(McTabBase);
+class McTab extends McTabMixinBase {
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+        this._tooltipTitle = '';
+        this.tooltipPlacement = PopUpPlacements.Right;
+        /** Plain text label for the tab, used when there is no template label. */
+        this.textLabel = '';
+        this.empty = false;
+        /** Emits whenever the internal state of the tab changes. */
+        this.stateChanges = new Subject();
+        /**
+         * The relatively indexed position where 0 represents the center, negative is left, and positive
+         * represents the right.
+         */
+        this.position = null;
+        /**
+         * The initial relatively index origin of the tab if it was created and selected after there
+         * was already a selected tab. Provides context of what position the tab should originate from.
+         */
+        this.origin = null;
+        /**
+         * Whether the tab is currently active.
+         */
+        this.isActive = false;
+        this._overflowTooltipTitle = '';
+        /** Portal that will be the hosted content of the tab */
+        this.contentPortal = null;
+    }
+    /** @docs-private */
+    get content() {
+        return this.contentPortal;
+    }
+    get templateLabel() {
+        return this._templateLabel;
+    }
+    set templateLabel(value) {
+        this.setTemplateLabelInput(value);
+    }
+    get tooltipTitle() {
+        return this.overflowTooltipTitle + this._tooltipTitle;
+    }
+    set tooltipTitle(value) {
+        this._tooltipTitle = value;
+    }
+    get isOverflown() {
+        return !!this._overflowTooltipTitle;
+    }
+    get overflowTooltipTitle() {
+        if (this.isOverflown) {
+            return `${this._overflowTooltipTitle}\n`;
+        }
+        return '';
+    }
+    set overflowTooltipTitle(value) {
+        this._overflowTooltipTitle = value;
+    }
+    ngOnChanges(changes) {
+        if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {
+            this.stateChanges.next();
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    ngOnInit() {
+        this.contentPortal = new TemplatePortal(this.explicitContent || this.implicitContent, this.viewContainerRef);
+    }
+    /**
+     * This has been extracted to a util because of TS 4 and VE.
+     * View Engine doesn't support property rename inheritance.
+     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
+     * @docs-private
+     */
+    setTemplateLabelInput(value) {
+        // Only update the templateLabel via query if there is actually
+        // a McTabLabel found. This works around an issue where a user may have
+        // manually set `templateLabel` during creation mode, which would then get clobbered
+        // by `undefined` when this query resolves.
+        if (value) {
+            this._templateLabel = value;
+        }
+    }
+}
+/** @nocollapse */ McTab.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTab, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McTab.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTab, selector: "mc-tab", inputs: { disabled: "disabled", tooltipTitle: "tooltipTitle", tooltipPlacement: "tooltipPlacement", textLabel: ["label", "textLabel"], empty: "empty", tabId: "tabId" }, queries: [{ propertyName: "templateLabel", first: true, predicate: MC_TAB_LABEL, descendants: true }, { propertyName: "explicitContent", first: true, predicate: McTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["mcTab"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mc-tab',
+                    exportAs: 'mcTab',
+                    // Create a template for the content of the <mc-tab> so that we can grab a reference to this
+                    // TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
+                    // tab-group.
+                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                    inputs: ['disabled'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { templateLabel: [{
+                type: ContentChild,
+                args: [MC_TAB_LABEL]
+            }], explicitContent: [{
+                type: ContentChild,
+                args: [McTabContent, { read: TemplateRef, static: true }]
+            }], implicitContent: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }], tooltipTitle: [{
+                type: Input
+            }], tooltipPlacement: [{
+                type: Input
+            }], textLabel: [{
+                type: Input,
+                args: ['label']
+            }], empty: [{
+                type: Input
+            }], tabId: [{
+                type: Input,
+                args: ['tabId']
+            }] } });
 
 // Boilerplate for applying mixins to McTabLabelWrapper.
 /** @docs-private */
@@ -721,6 +873,15 @@ class McTabLabelWrapper extends McTabLabelWrapperMixinBase {
     getOffsetWidth() {
         return this.elementRef.nativeElement.offsetWidth;
     }
+    checkOverflow() {
+        this.tab.overflowTooltipTitle = this.isOverflown() ? this.getInnerText() : '';
+    }
+    isOverflown() {
+        return this.labelContent.nativeElement.scrollWidth > this.labelContent.nativeElement.clientWidth;
+    }
+    getInnerText() {
+        return this.labelContent.nativeElement.innerText;
+    }
     addClassModifierForIcons(icons) {
         const twoIcons = 2;
         const [firstIconElement, secondIconElement] = icons;
@@ -739,20 +900,23 @@ class McTabLabelWrapper extends McTabLabelWrapperMixinBase {
         }
     }
 }
-McTabLabelWrapper.decorators = [
-    { type: Directive, args: [{
-                selector: '[mcTabLabelWrapper]',
-                inputs: ['disabled'],
-                host: {
-                    '[attr.disabled]': 'disabled || null'
-                }
-            },] }
-];
-/** @nocollapse */
-McTabLabelWrapper.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
+/** @nocollapse */ McTabLabelWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabLabelWrapper, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McTabLabelWrapper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTabLabelWrapper, selector: "[mcTabLabelWrapper]", inputs: { disabled: "disabled", tab: "tab" }, host: { properties: { "attr.disabled": "disabled || null" } }, queries: [{ propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabLabelWrapper, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcTabLabelWrapper]',
+                    inputs: ['disabled'],
+                    host: {
+                        '[attr.disabled]': 'disabled || null'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { labelContent: [{
+                type: ContentChild,
+                args: ['labelContent']
+            }], tab: [{
+                type: Input
+            }] } });
 
 /**
  * The header of the tab group which displays a list of all the tabs in the tab group.
@@ -773,186 +937,106 @@ class McTabHeader extends McPaginatedTabHeader {
         event.preventDefault();
     }
 }
-McTabHeader.decorators = [
-    { type: Component, args: [{
-                selector: 'mc-tab-header',
-                template: "<div class=\"mc-tab-header__pagination mc-tab-header__pagination_before mc-elevation-z4\"\n     #previousPaginator\n     [class.mc-disabled]=\"disableScrollBefore\"\n     (click)=\"handlePaginatorClick('before')\"\n     (mousedown)=\"handlePaginatorPress('before', $event)\"\n     (touchend)=\"stopInterval()\">\n\n    <i mc-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div class=\"mc-tab-header__content\"\n     #tabListContainer\n     (keydown)=\"handleKeydown($event)\">\n\n    <div class=\"mc-tab-list\"\n         #tabList\n         (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"mc-tab-list__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<div class=\"mc-tab-header__pagination mc-tab-header__pagination_after mc-elevation-z4\"\n     #nextPaginator\n     [class.mc-disabled]=\"disableScrollAfter\"\n     (mousedown)=\"handlePaginatorPress('after', $event)\"\n     (click)=\"handlePaginatorClick('after')\"\n     (touchend)=\"stopInterval()\">\n\n    <i mc-icon=\"mc-angle-right-M_16\"></i>\n</div>\n",
-                inputs: ['selectedIndex'],
-                outputs: ['selectFocusedIndex', 'indexFocused'],
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.Default,
-                host: {
-                    class: 'mc-tab-header',
-                    '[class.mc-tab-header_vertical]': 'vertical',
-                    '[class.mc-tab-header__pagination-controls_enabled]': 'showPaginationControls',
-                    '[class.mc-tab-header_rtl]': 'getLayoutDirection() == \'rtl\''
-                },
-                styles: [".mc-tab-label.cdk-keyboard-focused:after{display:block;content:\"\";position:absolute;top:0;right:calc(-1 * var(--mc-tabs-size-border-width, 1px));bottom:calc(-1 * var(--mc-tabs-size-border-width, 1px));left:calc(-1 * var(--mc-tabs-size-border-width, 1px))}.mc-tab-label_horizontal.cdk-keyboard-focused:after,.mc-tab-label_old.cdk-keyboard-focused:after{border-style:solid;border-top-left-radius:var(--mc-tabs-size-border-radius,3px);border-top-right-radius:var(--mc-tabs-size-border-radius,3px);border-bottom:solid transparent;border-width:calc(var(--mc-tabs-size-border-width, 1px) * 2)}.mc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mc-tab-list__content{display:flex}.mc-tab-group_align-labels-center .mc-tab-list__content{justify-content:center}.mc-tab-group_align-labels-end .mc-tab-list__content{justify-content:flex-end}.mc-tab-header_vertical .mc-tab-list__content{flex-direction:column}.mc-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px;border-bottom-style:solid;border-bottom-width:var(--mc-tabs-size-border-width,1px)}.mc-tab-header__pagination.mc-tab-header__pagination_before{border-right-style:solid;border-right-width:var(--mc-tabs-size-border-width,1px)}.mc-tab-header__pagination.mc-tab-header__pagination_after{border-left-style:solid;border-left-width:var(--mc-tabs-size-border-width,1px)}.mc-tab-header__pagination-controls_enabled .mc-tab-header__pagination{display:flex}.mc-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.mc-tab-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mc-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;height:var(--mc-tabs-size-height,40px);text-align:center;white-space:nowrap;cursor:pointer;padding-right:var(--mc-tabs-size-padding-horizontal,16px);padding-left:var(--mc-tabs-size-padding-horizontal,16px);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-tab-label .mc-tab-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.mc-tab-label.mc-active{cursor:default}.mc-tab-label.mc-active:before{display:block;content:\"\";position:absolute}.mc-tab-label.mc-active[disabled] .mc-tab-overlay{bottom:-1px}.mc-tab-label.cdk-keyboard-focused{z-index:1}.mc-tab-label:first-child.cdk-keyboard-focused:after{left:0}.mc-tab-label:last-child.cdk-keyboard-focused:after{right:0}.mc-tab-label[disabled]{pointer-events:none}.mc-tab-label .mc-tab-label__template{display:flex;flex-direction:row;align-items:baseline}.mc-tab-label .mc-tab-label__template>.mc-icon.mc-icon_left{margin-right:var(--mc-tabs-size-label-icon-margin,8px)}.mc-tab-label .mc-tab-label__template>.mc-icon.mc-icon_right{margin-left:var(--mc-tabs-size-label-icon-margin,8px)}.mc-tab-label_old{border-bottom-width:var(--mc-tabs-size-border-width,1px);border-top-width:var(--mc-tabs-size-border-width,1px);border-bottom-style:solid;border-top-style:solid;border-top-left-radius:var(--mc-tabs-size-border-radius,3px);border-top-right-radius:var(--mc-tabs-size-border-radius,3px);border-left:transparent;border-right:transparent}.mc-tab-label_old.mc-active{border-width:var(--mc-tabs-size-border-width,1px);border-style:solid;padding-right:calc(var(--mc-tabs-size-padding-horizontal, 16px) - var(--mc-tabs-size-border-width, 1px));padding-left:calc(var(--mc-tabs-size-padding-horizontal, 16px) - var(--mc-tabs-size-border-width, 1px))}.mc-tab-label_old.mc-active.cdk-keyboard-focused:after{right:calc(-2 * var(--mc-tabs-size-border-width, 1px));left:calc(-2 * var(--mc-tabs-size-border-width, 1px))}.mc-tab-label_old.cdk-keyboard-focused:after{top:-1px}.mc-tab-label_old .mc-tab-overlay{top:-1px;border-top-left-radius:var(--mc-tabs-size-border-radius,3px);border-top-right-radius:var(--mc-tabs-size-border-radius,3px)}.mc-tab-label_horizontal{border-bottom-width:var(--mc-tabs-size-border-width,1px);border-bottom-style:solid}.mc-tab-label_horizontal.mc-active:before{bottom:calc(-1 * var(--mc-tabs-size-border-width, 1px));left:0;right:0;height:var(--mc-tabs-size-highlight-height,4px)}.mc-tab-label_vertical{justify-content:flex-start}.mc-tab-label_vertical.mc-active:before{top:0;bottom:0;left:calc(-1 * var(--mc-tabs-size-border-width, 1px));width:var(--mc-tabs-size-highlight-height,5px)}.mc-tab-label_vertical.cdk-keyboard-focused:after{right:0;left:0;border-width:calc(var(--mc-tabs-size-border-width, 1px) * 2);border-style:solid}.mc-tab-group_stretch-labels .mc-tab-label,.mc-tab-group_stretch-labels .mc-tab-label_old{flex-basis:0;flex-grow:1}"]
-            },] }
-];
-/** @nocollapse */
-McTabHeader.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: ViewportRuler },
-    { type: NgZone },
-    { type: Platform },
-    { type: Directionality, decorators: [{ type: Optional }] },
-    { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
-];
-McTabHeader.propDecorators = {
-    vertical: [{ type: Input }],
-    items: [{ type: ContentChildren, args: [McTabLabelWrapper, { descendants: false },] }],
-    tabListContainer: [{ type: ViewChild, args: ['tabListContainer', { static: true },] }],
-    tabList: [{ type: ViewChild, args: ['tabList', { static: true },] }],
-    nextPaginator: [{ type: ViewChild, args: ['nextPaginator',] }],
-    previousPaginator: [{ type: ViewChild, args: ['previousPaginator',] }]
-};
-
-const MC_TAB_LABEL = new InjectionToken('McTabLabel');
-/** Used to flag tab labels for use with the portal directive */
-class McTabLabel extends CdkPortal {
-}
-McTabLabel.decorators = [
-    { type: Directive, args: [{
-                selector: '[mc-tab-label], [mcTabLabel]',
-                providers: [{ provide: MC_TAB_LABEL, useExisting: McTabLabel }]
-            },] }
-];
-
-class McTabBase {
-}
-// tslint:disable-next-line:naming-convention
-const McTabMixinBase = mixinDisabled(McTabBase);
-class McTab extends McTabMixinBase {
-    constructor(viewContainerRef) {
-        super();
-        this.viewContainerRef = viewContainerRef;
-        /** Plain text label for the tab, used when there is no template label. */
-        this.textLabel = '';
-        this.empty = false;
-        this.tooltipTitle = '';
-        this.tooltipPlacement = '';
-        /** Emits whenever the internal state of the tab changes. */
-        this.stateChanges = new Subject();
-        /**
-         * The relatively indexed position where 0 represents the center, negative is left, and positive
-         * represents the right.
-         */
-        this.position = null;
-        /**
-         * The initial relatively index origin of the tab if it was created and selected after there
-         * was already a selected tab. Provides context of what position the tab should originate from.
-         */
-        this.origin = null;
-        /**
-         * Whether the tab is currently active.
-         */
-        this.isActive = false;
-        /** Portal that will be the hosted content of the tab */
-        this.contentPortal = null;
-    }
-    /** @docs-private */
-    get content() {
-        return this.contentPortal;
-    }
-    get templateLabel() { return this._templateLabel; }
-    set templateLabel(value) { this.setTemplateLabelInput(value); }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {
-            this.stateChanges.next();
-        }
-    }
-    ngOnDestroy() {
-        this.stateChanges.complete();
-    }
-    ngOnInit() {
-        this.contentPortal = new TemplatePortal(this.explicitContent || this.implicitContent, this.viewContainerRef);
-    }
-    /**
-     * This has been extracted to a util because of TS 4 and VE.
-     * View Engine doesn't support property rename inheritance.
-     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
-     * @docs-private
-     */
-    setTemplateLabelInput(value) {
-        // Only update the templateLabel via query if there is actually
-        // a McTabLabel found. This works around an issue where a user may have
-        // manually set `templateLabel` during creation mode, which would then get clobbered
-        // by `undefined` when this query resolves.
-        if (value) {
-            this._templateLabel = value;
-        }
-    }
-}
-McTab.decorators = [
-    { type: Component, args: [{
-                selector: 'mc-tab',
-                exportAs: 'mcTab',
-                // Create a template for the content of the <mc-tab> so that we can grab a reference to this
-                // TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
-                // tab-group.
-                template: '<ng-template><ng-content></ng-content></ng-template>',
-                inputs: ['disabled'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-/** @nocollapse */
-McTab.ctorParameters = () => [
-    { type: ViewContainerRef }
-];
-McTab.propDecorators = {
-    templateLabel: [{ type: ContentChild, args: [MC_TAB_LABEL,] }],
-    explicitContent: [{ type: ContentChild, args: [McTabContent, { read: TemplateRef, static: true },] }],
-    implicitContent: [{ type: ViewChild, args: [TemplateRef, { static: true },] }],
-    textLabel: [{ type: Input, args: ['label',] }],
-    empty: [{ type: Input }],
-    tooltipTitle: [{ type: Input }],
-    tooltipPlacement: [{ type: Input }],
-    tabId: [{ type: Input, args: ['tabId',] }]
-};
+/** @nocollapse */ McTabHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabHeader, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ViewportRuler }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McTabHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTabHeader, selector: "mc-tab-header", inputs: { selectedIndex: "selectedIndex", vertical: "vertical" }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.mc-tab-header_vertical": "vertical", "class.mc-tab-header__pagination-controls_enabled": "showPaginationControls", "class.mc-tab-header_rtl": "getLayoutDirection() == 'rtl'" }, classAttribute: "mc-tab-header" }, queries: [{ propertyName: "items", predicate: McTabLabelWrapper }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tab-header__pagination mc-tab-header__pagination_before\"\n     #previousPaginator\n     [class.mc-disabled]=\"disableScrollBefore\"\n     (click)=\"handlePaginatorClick('before')\"\n     (mousedown)=\"handlePaginatorPress('before', $event)\"\n     (touchend)=\"stopInterval()\">\n\n    <i mc-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div class=\"mc-tab-header__content\"\n     #tabListContainer\n     (keydown)=\"handleKeydown($event)\">\n\n    <div class=\"mc-tab-list\"\n         #tabList\n         (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"mc-tab-list__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<div class=\"mc-tab-header__pagination mc-tab-header__pagination_after\"\n     #nextPaginator\n     [class.mc-disabled]=\"disableScrollAfter\"\n     (mousedown)=\"handlePaginatorPress('after', $event)\"\n     (click)=\"handlePaginatorClick('after')\"\n     (touchend)=\"stopInterval()\">\n\n    <i mc-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".mc-tab-label.cdk-keyboard-focused:after{display:block;content:\"\";position:absolute;top:0;right:calc(-1 * 1px);right:calc(-1 * var(--mc-tabs-size-border-width, 1px));bottom:calc(-1 * 1px);bottom:calc(-1 * var(--mc-tabs-size-border-width, 1px));left:calc(-1 * 1px);left:calc(-1 * var(--mc-tabs-size-border-width, 1px))}.mc-tab-label_horizontal.cdk-keyboard-focused:after,.mc-tab-label_old.cdk-keyboard-focused:after{border-width:calc(1px * 2);border-width:calc(var(--mc-tabs-size-border-width, 1px) * 2);border-style:solid;border-top-left-radius:3px;border-top-left-radius:var(--mc-tabs-size-border-radius, 3px);border-top-right-radius:3px;border-top-right-radius:var(--mc-tabs-size-border-radius, 3px);border-bottom-color:transparent}.mc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mc-tab-list__content{display:flex}.mc-tab-group_align-labels-center .mc-tab-list__content{justify-content:center}.mc-tab-group_align-labels-end .mc-tab-list__content{justify-content:flex-end}.mc-tab-header_vertical .mc-tab-list__content{flex-direction:column}.mc-tab-header__pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px;border-bottom-style:solid;border-bottom-width:1px;border-bottom-width:var(--mc-tabs-size-border-width, 1px)}.mc-tab-header__pagination.mc-tab-header__pagination_before{border-right-style:solid;border-right-width:1px;border-right-width:var(--mc-tabs-size-border-width, 1px)}.mc-tab-header__pagination.mc-tab-header__pagination_after{border-left-style:solid;border-left-width:1px;border-left-width:var(--mc-tabs-size-border-width, 1px)}.mc-tab-header__pagination-controls_enabled .mc-tab-header__pagination{display:flex}.mc-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.mc-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mc-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;height:40px;height:var(--mc-tabs-size-height, 40px);text-align:center;white-space:nowrap;cursor:pointer;padding-right:16px;padding-right:var(--mc-tabs-size-padding-horizontal, 16px);padding-left:16px;padding-left:var(--mc-tabs-size-padding-horizontal, 16px);outline:none;-webkit-user-select:none;user-select:none}.mc-tab-label .mc-tab-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.mc-tab-label.mc-active{cursor:default}.mc-tab-label.mc-active:before{display:block;content:\"\";position:absolute}.mc-tab-label.mc-active[disabled] .mc-tab-overlay{bottom:-1px}.mc-tab-label.cdk-keyboard-focused{z-index:1}.mc-tab-label:first-child.cdk-keyboard-focused:after{left:0}.mc-tab-label:last-child.cdk-keyboard-focused:after{right:0}.mc-tab-label[disabled]{pointer-events:none}.mc-tab-label .mc-tab-label__content>.mc-icon.mc-icon_left{margin-right:8px;margin-right:var(--mc-tabs-size-label-icon-margin, 8px)}.mc-tab-label .mc-tab-label__content>.mc-icon.mc-icon_right{margin-left:8px;margin-left:var(--mc-tabs-size-label-icon-margin, 8px)}.mc-tab-label.mc-tab-label_vertical .mc-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-tab-label_old{border-bottom-width:1px;border-bottom-width:var(--mc-tabs-size-border-width, 1px);border-bottom-style:solid;border-width:1px;border-width:var(--mc-tabs-size-border-width, 1px);border-style:solid;border-top-left-radius:3px;border-top-left-radius:var(--mc-tabs-size-border-radius, 3px);border-top-right-radius:3px;border-top-right-radius:var(--mc-tabs-size-border-radius, 3px);border-left:none;border-left-color:transparent;border-right:none;border-right-color:transparent}.mc-tab-label_old.mc-active{border-width:1px;border-width:var(--mc-tabs-size-border-width, 1px);border-style:solid;padding-right:calc(16px - 1px);padding-right:calc(var(--mc-tabs-size-padding-horizontal, 16px) - var(--mc-tabs-size-border-width, 1px));padding-left:calc(16px - 1px);padding-left:calc(var(--mc-tabs-size-padding-horizontal, 16px) - var(--mc-tabs-size-border-width, 1px))}.mc-tab-label_old.mc-active.cdk-keyboard-focused:after{right:calc(-2 * 1px);right:calc(-2 * var(--mc-tabs-size-border-width, 1px));left:calc(-2 * 1px);left:calc(-2 * var(--mc-tabs-size-border-width, 1px))}.mc-tab-label_old.cdk-keyboard-focused:after{top:-1px}.mc-tab-label_old .mc-tab-overlay{top:-1px;border-top-left-radius:3px;border-top-left-radius:var(--mc-tabs-size-border-radius, 3px);border-top-right-radius:3px;border-top-right-radius:var(--mc-tabs-size-border-radius, 3px)}.mc-tab-label_horizontal{border-bottom-width:1px;border-bottom-width:var(--mc-tabs-size-border-width, 1px);border-bottom-style:solid}.mc-tab-label_horizontal.mc-active:before{bottom:calc(-1 * 1px);bottom:calc(-1 * var(--mc-tabs-size-border-width, 1px));left:0;right:0;height:4px;height:var(--mc-tabs-size-highlight-height, 4px)}.mc-tab-label_vertical{justify-content:flex-start}.mc-tab-label_vertical.mc-active:before{top:0;bottom:0;left:calc(-1 * 1px);left:calc(-1 * var(--mc-tabs-size-border-width, 1px));width:5px;width:var(--mc-tabs-size-highlight-height, 5px)}.mc-tab-label_vertical.cdk-keyboard-focused:after{right:0;left:0;border-width:calc(1px * 2);border-width:calc(var(--mc-tabs-size-border-width, 1px) * 2);border-style:solid}.mc-tab-group_stretch-labels .mc-tab-label,.mc-tab-group_stretch-labels .mc-tab-label_old{flex-basis:0;flex-grow:1}\n"], components: [{ type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }], directives: [{ type: i4.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mc-tab-header',
+                    templateUrl: 'tab-header.html',
+                    styleUrls: ['tab-header.scss'],
+                    inputs: ['selectedIndex'],
+                    outputs: ['selectFocusedIndex', 'indexFocused'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    host: {
+                        class: 'mc-tab-header',
+                        '[class.mc-tab-header_vertical]': 'vertical',
+                        '[class.mc-tab-header__pagination-controls_enabled]': 'showPaginationControls',
+                        '[class.mc-tab-header_rtl]': 'getLayoutDirection() == \'rtl\''
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANIMATION_MODULE_TYPE]
+                }] }]; }, propDecorators: { vertical: [{
+                type: Input
+            }], items: [{
+                type: ContentChildren,
+                args: [McTabLabelWrapper, { descendants: false }]
+            }], tabListContainer: [{
+                type: ViewChild,
+                args: ['tabListContainer', { static: true }]
+            }], tabList: [{
+                type: ViewChild,
+                args: ['tabList', { static: true }]
+            }], nextPaginator: [{
+                type: ViewChild,
+                args: ['nextPaginator']
+            }], previousPaginator: [{
+                type: ViewChild,
+                args: ['previousPaginator']
+            }] } });
 
 class McOldTabsCssStyler {
 }
-McOldTabsCssStyler.decorators = [
-    { type: Directive, args: [{
-                selector: 'mc-tab-group[mc-old-tabs]',
-                host: { class: 'mc-tab-group_old' }
-            },] }
-];
+/** @nocollapse */ McOldTabsCssStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOldTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McOldTabsCssStyler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McOldTabsCssStyler, selector: "mc-tab-group[mc-old-tabs]", host: { classAttribute: "mc-tab-group_old" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOldTabsCssStyler, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mc-tab-group[mc-old-tabs]',
+                    host: { class: 'mc-tab-group_old' }
+                }]
+        }] });
 class McAlignTabsCenterCssStyler {
 }
-McAlignTabsCenterCssStyler.decorators = [
-    { type: Directive, args: [{
-                selector: 'mc-tab-group[mc-align-tabs-center], [mc-tab-nav-bar][mc-align-tabs-center]',
-                host: { class: 'mc-tab-group_align-labels-center' }
-            },] }
-];
+/** @nocollapse */ McAlignTabsCenterCssStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McAlignTabsCenterCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McAlignTabsCenterCssStyler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McAlignTabsCenterCssStyler, selector: "mc-tab-group[mc-align-tabs-center], [mc-tab-nav-bar][mc-align-tabs-center]", host: { classAttribute: "mc-tab-group_align-labels-center" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McAlignTabsCenterCssStyler, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mc-tab-group[mc-align-tabs-center], [mc-tab-nav-bar][mc-align-tabs-center]',
+                    host: { class: 'mc-tab-group_align-labels-center' }
+                }]
+        }] });
 class McAlignTabsEndCssStyler {
 }
-McAlignTabsEndCssStyler.decorators = [
-    { type: Directive, args: [{
-                selector: 'mc-tab-group[mc-align-tabs-end], [mc-tab-nav-bar][mc-align-tabs-end]',
-                host: { class: 'mc-tab-group_align-labels-end' }
-            },] }
-];
+/** @nocollapse */ McAlignTabsEndCssStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McAlignTabsEndCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McAlignTabsEndCssStyler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McAlignTabsEndCssStyler, selector: "mc-tab-group[mc-align-tabs-end], [mc-tab-nav-bar][mc-align-tabs-end]", host: { classAttribute: "mc-tab-group_align-labels-end" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McAlignTabsEndCssStyler, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mc-tab-group[mc-align-tabs-end], [mc-tab-nav-bar][mc-align-tabs-end]',
+                    host: { class: 'mc-tab-group_align-labels-end' }
+                }]
+        }] });
 class McStretchTabsCssStyler {
 }
-McStretchTabsCssStyler.decorators = [
-    { type: Directive, args: [{
-                selector: 'mc-tab-group[mc-stretch-tabs], [mc-tab-nav-bar][mc-stretch-tabs]',
-                host: { class: 'mc-tab-group_stretch-labels' }
-            },] }
-];
+/** @nocollapse */ McStretchTabsCssStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McStretchTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McStretchTabsCssStyler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McStretchTabsCssStyler, selector: "mc-tab-group[mc-stretch-tabs], [mc-tab-nav-bar][mc-stretch-tabs]", host: { classAttribute: "mc-tab-group_stretch-labels" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McStretchTabsCssStyler, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mc-tab-group[mc-stretch-tabs], [mc-tab-nav-bar][mc-stretch-tabs]',
+                    host: { class: 'mc-tab-group_stretch-labels' }
+                }]
+        }] });
 class McVerticalTabsCssStyler {
 }
-McVerticalTabsCssStyler.decorators = [
-    { type: Directive, args: [{
-                selector: 'mc-tab-group[vertical], [mc-tab-nav-bar][vertical]',
-                host: { class: 'mc-tab-group_vertical' }
-            },] }
-];
+/** @nocollapse */ McVerticalTabsCssStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McVerticalTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McVerticalTabsCssStyler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McVerticalTabsCssStyler, selector: "mc-tab-group[vertical], [mc-tab-nav-bar][vertical]", host: { classAttribute: "mc-tab-group_vertical" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McVerticalTabsCssStyler, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mc-tab-group[vertical], [mc-tab-nav-bar][vertical]',
+                    host: { class: 'mc-tab-group_vertical' }
+                }]
+        }] });
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
 /** A simple change event emitted on focus or selection changes. */
@@ -978,6 +1062,9 @@ class McTabGroup extends McTabGroupMixinBase {
     constructor(elementRef, changeDetectorRef, lightTabs, vertical, defaultConfig) {
         super(elementRef);
         this.changeDetectorRef = changeDetectorRef;
+        this.resizeStream = new Subject();
+        this._dynamicHeight = false;
+        this._selectedIndex = null;
         /** Position of the tab header. */
         this.headerPosition = 'above';
         /** Output to enable support for two-way binding on `[(selectedIndex)]` */
@@ -996,20 +1083,29 @@ class McTabGroup extends McTabGroupMixinBase {
         this.tabsSubscription = Subscription.EMPTY;
         /** Subscription to changes in the tab labels. */
         this.tabLabelSubscription = Subscription.EMPTY;
-        this._dynamicHeight = false;
-        this._selectedIndex = null;
+        this.resizeSubscription = Subscription.EMPTY;
+        this.resizeDebounceInterval = 100;
+        this.checkOverflow = () => {
+            this.tabHeader.items
+                .forEach((headerTab) => headerTab.checkOverflow());
+        };
         this.oldTab = coerceBooleanProperty(lightTabs);
         this.vertical = coerceBooleanProperty(vertical);
         this.groupId = nextId++;
         this.animationDuration = (defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.animationDuration) || '0ms';
+        this.subscribeToResize();
     }
     /** Whether the tab group should grow to the size of the active tab. */
-    get dynamicHeight() { return this._dynamicHeight; }
+    get dynamicHeight() {
+        return this._dynamicHeight;
+    }
     set dynamicHeight(value) {
         this._dynamicHeight = coerceBooleanProperty(value);
     }
     /** The index of the active tab. */
-    get selectedIndex() { return this._selectedIndex; }
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
     set selectedIndex(value) {
         this.indexToSelect = coerceNumberProperty(value, null);
     }
@@ -1057,7 +1153,8 @@ class McTabGroup extends McTabGroupMixinBase {
         this.subscribeToTabLabels();
         // Subscribe to changes in the amount of tabs, in order to be
         // able to re-render the content as new tabs are added or removed.
-        this.tabsSubscription = this.tabs.changes.subscribe(() => {
+        this.tabsSubscription = this.tabs.changes
+            .subscribe(() => {
             const indexToSelect = this.clampTabIndex(this.indexToSelect);
             // Maintain the previously-selected tab if a new tab is added or removed and there is no
             // explicit change that selects a different tab.
@@ -1077,9 +1174,13 @@ class McTabGroup extends McTabGroupMixinBase {
             this.changeDetectorRef.markForCheck();
         });
     }
+    ngAfterViewInit() {
+        this.checkOverflow();
+    }
     ngOnDestroy() {
         this.tabsSubscription.unsubscribe();
         this.tabLabelSubscription.unsubscribe();
+        this.resizeSubscription.unsubscribe();
     }
     focusChanged(index) {
         this.focusChange.emit(this.createChangeEvent(index));
@@ -1149,6 +1250,17 @@ class McTabGroup extends McTabGroupMixinBase {
         this.tabLabelSubscription = merge(...this.tabs.map((tab) => tab.stateChanges))
             .subscribe(() => this.changeDetectorRef.markForCheck());
     }
+    subscribeToResize() {
+        if (!this.vertical) {
+            return;
+        }
+        if (this.resizeSubscription) {
+            this.resizeSubscription.unsubscribe();
+        }
+        this.resizeSubscription = this.resizeStream
+            .pipe(debounceTime(this.resizeDebounceInterval))
+            .subscribe(this.checkOverflow);
+    }
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     clampTabIndex(index) {
         // Note the `|| 0`, which ensures that values like NaN can't get through
@@ -1157,43 +1269,62 @@ class McTabGroup extends McTabGroupMixinBase {
         return Math.min(this.tabs.length - 1, Math.max(index || 0, 0));
     }
 }
-McTabGroup.decorators = [
-    { type: Component, args: [{
-                selector: 'mc-tab-group',
-                exportAs: 'mcTabGroup',
-                template: "<mc-tab-header\n    #tabHeader\n    [vertical]=\"vertical\"\n    [selectedIndex]=\"selectedIndex\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"selectedIndex = $event\">\n\n    <div class=\"mc-tab-label\"\n         mcTabLabelWrapper\n         cdkMonitorElementFocus\n         [attr.tabindex]=\"getTabIndex(tab, i)\"\n         [class.mc-tab-label_old]=\"oldTab\"\n         [class.mc-tab-label_horizontal]=\"!vertical && !oldTab\"\n         [class.mc-tab-label_vertical]=\"vertical && !oldTab\"\n         [class.mc-tab-label_empty]=\"tab.empty\"\n         [class.mc-active]=\"selectedIndex == i\"\n         *ngFor=\"let tab of tabs; let i = index\"\n         [id]=\"getTabLabelId(i)\"\n         [disabled]=\"tab.disabled\"\n         (click)=\"handleClick(tab, tabHeader, i)\"\n\n         [mcTooltip]=\"tab.tooltipTitle\"\n         [mcTooltipDisabled]=\"!tab.empty\"\n         [mcTrigger]=\"'hover, focus'\"\n         [mcPlacement]=\"tab.tooltipPlacement\">\n\n        <div class=\"mc-tab-label__content\"\n            [class.mc-tab-label__template]=\"tab.templateLabel\">\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\n        <div class=\"mc-tab-overlay\"></div>\n    </div>\n</mc-tab-header>\n\n<div class=\"mc-tab-body__wrapper\" #tabBodyWrapper>\n    <mc-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [id]=\"getTabContentId(i)\"\n        [class.mc-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    </mc-tab-body>\n</div>\n",
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                inputs: ['disabled'],
-                host: {
-                    class: 'mc-tab-group',
-                    '[class.mc-tab-group_dynamic-height]': 'dynamicHeight',
-                    '[class.mc-tab-group_inverted-header]': 'headerPosition === "below"'
-                },
-                styles: [".mc-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:center;white-space:nowrap}.mc-tab-group.mc-tab-group_inverted-header{flex-direction:column-reverse}.mc-tab-group_vertical{flex-direction:row}.mc-tab-group_vertical .mc-tab-header__content{overflow-y:auto;padding-top:8px;padding-bottom:1px;border-right-width:var(--mc-tabs-size-border-width,1px);border-right-style:solid}.mc-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.mc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.mc-tab-body.mc-tab-body__active{overflow-x:hidden;overflow-y:auto;position:relative;z-index:1;flex-grow:1}.mc-tab-group.mc-tab-group_dynamic-height .mc-tab-body.mc-tab-body__active{overflow-y:hidden}"]
-            },] }
-];
-/** @nocollapse */
-McTabGroup.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: String, decorators: [{ type: Attribute, args: ['mc-old-tabs',] }] },
-    { type: String, decorators: [{ type: Attribute, args: ['vertical',] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [MC_TABS_CONFIG,] }, { type: Optional }] }
-];
-McTabGroup.propDecorators = {
-    tabs: [{ type: ContentChildren, args: [McTab,] }],
-    tabBodyWrapper: [{ type: ViewChild, args: ['tabBodyWrapper', { static: false },] }],
-    tabHeader: [{ type: ViewChild, args: ['tabHeader', { static: false },] }],
-    dynamicHeight: [{ type: Input }],
-    selectedIndex: [{ type: Input }],
-    headerPosition: [{ type: Input }],
-    animationDuration: [{ type: Input }],
-    selectedIndexChange: [{ type: Output }],
-    focusChange: [{ type: Output }],
-    animationDone: [{ type: Output }],
-    selectedTabChange: [{ type: Output }]
-};
+/** @nocollapse */ McTabGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabGroup, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'mc-old-tabs', attribute: true }, { token: 'vertical', attribute: true }, { token: MC_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McTabGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTabGroup, selector: "mc-tab-group", inputs: { disabled: "disabled", dynamicHeight: "dynamicHeight", selectedIndex: "selectedIndex", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { listeners: { "window:resize": "resizeStream.next()" }, properties: { "class.mc-tab-group_dynamic-height": "dynamicHeight", "class.mc-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "mc-tab-group" }, queries: [{ propertyName: "tabs", predicate: McTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["mcTabGroup"], usesInheritance: true, ngImport: i0, template: "<mc-tab-header\n    #tabHeader\n    [vertical]=\"vertical\"\n    [selectedIndex]=\"selectedIndex\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"selectedIndex = $event\">\n\n    <div class=\"mc-tab-label\"\n         mcTabLabelWrapper\n         cdkMonitorElementFocus\n         [attr.tabindex]=\"getTabIndex(tab, i)\"\n         [class.mc-tab-label_old]=\"oldTab\"\n         [class.mc-tab-label_horizontal]=\"!vertical && !oldTab\"\n         [class.mc-tab-label_vertical]=\"vertical && !oldTab\"\n         [class.mc-tab-label_empty]=\"tab.empty\"\n         [class.mc-active]=\"selectedIndex == i\"\n         *ngFor=\"let tab of tabs; let i = index\"\n         [tab]=\"tab\"\n         [id]=\"getTabLabelId(i)\"\n         [disabled]=\"tab.disabled\"\n         (click)=\"handleClick(tab, tabHeader, i)\"\n\n         [mcTooltip]=\"tab.tooltipTitle\"\n         [mcTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n         [mcTrigger]=\"'hover, focus'\"\n         [mcPlacement]=\"tab.tooltipPlacement\">\n\n        <div #labelContent class=\"mc-tab-label__content\"\n            [class.mc-tab-label__template]=\"tab.templateLabel\">\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\n        <div class=\"mc-tab-overlay\"></div>\n    </div>\n</mc-tab-header>\n\n<div class=\"mc-tab-body__wrapper\" #tabBodyWrapper>\n    <mc-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [id]=\"getTabContentId(i)\"\n        [class.mc-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    </mc-tab-body>\n</div>\n", styles: [".mc-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:center;white-space:nowrap}.mc-tab-group.mc-tab-group_inverted-header{flex-direction:column-reverse}.mc-tab-group_vertical{flex-direction:row}.mc-tab-group_vertical .mc-tab-header__content{overflow-y:auto;padding-top:8px;padding-bottom:1px;border-right-width:1px;border-right-width:var(--mc-tabs-size-border-width, 1px);border-right-style:solid}.mc-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.mc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.mc-tab-body.mc-tab-body__active{overflow-x:hidden;overflow-y:auto;position:relative;z-index:1;flex-grow:1}.mc-tab-group.mc-tab-group_dynamic-height .mc-tab-body.mc-tab-body__active{overflow-y:hidden}\n"], components: [{ type: McTabHeader, selector: "mc-tab-header", inputs: ["selectedIndex", "vertical"], outputs: ["selectFocusedIndex", "indexFocused"] }, { type: McTabBody, selector: "mc-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: McTabLabelWrapper, selector: "[mcTabLabelWrapper]", inputs: ["disabled", "tab"] }, { type: i1$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i6.McTooltipTrigger, selector: "[mcTooltip]", inputs: ["mcVisible", "mcPlacement", "mcPlacementPriority", "mcTooltip", "mcTooltipDisabled", "mcEnterDelay", "mcLeaveDelay", "mcTrigger", "mcTooltipClass"], outputs: ["mcPlacementChange", "mcVisibleChange"], exportAs: ["mcTooltip"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mc-tab-group',
+                    exportAs: 'mcTabGroup',
+                    templateUrl: 'tab-group.html',
+                    styleUrls: ['tab-group.scss'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    inputs: ['disabled'],
+                    host: {
+                        class: 'mc-tab-group',
+                        '[class.mc-tab-group_dynamic-height]': 'dynamicHeight',
+                        '[class.mc-tab-group_inverted-header]': 'headerPosition === "below"',
+                        '(window:resize)': 'resizeStream.next()'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['mc-old-tabs']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['vertical']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MC_TABS_CONFIG]
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { tabs: [{
+                type: ContentChildren,
+                args: [McTab]
+            }], tabBodyWrapper: [{
+                type: ViewChild,
+                args: ['tabBodyWrapper', { static: false }]
+            }], tabHeader: [{
+                type: ViewChild,
+                args: ['tabHeader', { static: false }]
+            }], dynamicHeight: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }], headerPosition: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], focusChange: [{
+                type: Output
+            }], animationDone: [{
+                type: Output
+            }], selectedTabChange: [{
+                type: Output
+            }] } });
 
 // Boilerplate for applying mixins to McTabLink.
 class McTabLinkBase {
@@ -1247,31 +1378,27 @@ class McTabLink extends McTabLinkMixinBase {
         }
     }
 }
-McTabLink.decorators = [
-    { type: Component, args: [{
-                selector: 'a[mc-tab-link], a[mcTabLink]',
-                exportAs: 'mcTabLink',
-                template: '<ng-content></ng-content><div class="mc-tab-overlay"></div>',
-                inputs: ['disabled', 'tabIndex'],
-                host: {
-                    class: 'mc-tab-link',
-                    '[class.mc-active]': 'active',
-                    '[class.mc-tab-label_vertical]': 'vertical',
-                    '[class.mc-tab-label_horizontal]': '!vertical',
-                    '[attr.tabindex]': 'tabIndex',
-                    '[attr.disabled]': 'disabled || null'
-                }
-            },] }
-];
-/** @nocollapse */
-McTabLink.ctorParameters = () => [
-    { type: ElementRef },
-    { type: FocusMonitor },
-    { type: Renderer2 }
-];
-McTabLink.propDecorators = {
-    active: [{ type: Input }]
-};
+/** @nocollapse */ McTabLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabLink, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McTabLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTabLink, selector: "a[mc-tab-link], a[mcTabLink]", inputs: { disabled: "disabled", tabIndex: "tabIndex", active: "active" }, host: { properties: { "class.mc-active": "active", "class.mc-tab-label_vertical": "vertical", "class.mc-tab-label_horizontal": "!vertical", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "mc-tab-link" }, exportAs: ["mcTabLink"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content><div class="mc-tab-overlay"></div>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabLink, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[mc-tab-link], a[mcTabLink]',
+                    exportAs: 'mcTabLink',
+                    template: '<ng-content></ng-content><div class="mc-tab-overlay"></div>',
+                    inputs: ['disabled', 'tabIndex'],
+                    host: {
+                        class: 'mc-tab-link',
+                        '[class.mc-active]': 'active',
+                        '[class.mc-tab-label_vertical]': 'vertical',
+                        '[class.mc-tab-label_horizontal]': '!vertical',
+                        '[attr.tabindex]': 'tabIndex',
+                        '[attr.disabled]': 'disabled || null'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.Renderer2 }]; }, propDecorators: { active: [{
+                type: Input
+            }] } });
 /**
  * Navigation component matching the styles of the tab group header.
  */
@@ -1287,77 +1414,120 @@ class McTabNav {
         this.links.notifyOnChanges();
     }
 }
-McTabNav.decorators = [
-    { type: Component, args: [{
-                selector: '[mc-tab-nav-bar]',
-                exportAs: 'mcTabNavBar, mcTabNav',
-                template: '<ng-content></ng-content>',
-                host: {
-                    class: 'mc-tab-nav-bar'
-                },
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mc-tab-link.cdk-keyboard-focused:after{display:block;content:\"\";position:absolute;top:0;right:calc(-1 * var(--mc-tabs-size-border-width, 1px));bottom:calc(-1 * var(--mc-tabs-size-border-width, 1px));left:calc(-1 * var(--mc-tabs-size-border-width, 1px))}.mc-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;height:var(--mc-tabs-size-height,40px);text-align:center;white-space:nowrap;cursor:pointer;padding-right:var(--mc-tabs-size-padding-horizontal,16px);padding-left:var(--mc-tabs-size-padding-horizontal,16px);outline:none}.mc-tab-link .mc-tab-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.mc-tab-link.mc-active{cursor:default}.mc-tab-link.mc-active:before{display:block;content:\"\";position:absolute}.mc-tab-link.mc-active[disabled] .mc-tab-overlay{bottom:-1px}.mc-tab-link.cdk-keyboard-focused{z-index:1}.mc-tab-link:first-child.cdk-keyboard-focused:after{left:0}.mc-tab-link:last-child.cdk-keyboard-focused:after{right:0}.mc-tab-link[disabled]{pointer-events:none}.mc-tab-link .mc-tab-label__template{display:flex;flex-direction:row;align-items:baseline}.mc-tab-link .mc-tab-label__template>.mc-icon.mc-icon_left{margin-right:var(--mc-tabs-size-label-icon-margin,8px)}.mc-tab-link .mc-tab-label__template>.mc-icon.mc-icon_right{margin-left:var(--mc-tabs-size-label-icon-margin,8px)}.mc-tab-link .mc-tab-group_stretch-labels .mc-tab-link{flex-basis:0;flex-grow:1}.mc-tab-link>.mc-icon.mc-icon_left{margin-right:var(--mc-tabs-size-label-icon-margin,8px)}.mc-tab-link>.mc-icon.mc-icon_right{margin-left:var(--mc-tabs-size-label-icon-margin,8px)}.mc-tab-nav-bar{display:flex;flex-grow:1;position:relative;padding:1px 1px 0}.mc-tab-nav-bar .mc-tab-group_align-labels-center{justify-content:center}.mc-tab-nav-bar .mc-tab-group_align-labels-end{justify-content:flex-end}.mc-tab-nav-bar.mc-tab-group_vertical{flex-direction:column;flex-grow:0}"]
-            },] }
-];
-/** @nocollapse */
-McTabNav.ctorParameters = () => [
-    { type: String, decorators: [{ type: Attribute, args: ['vertical',] }] }
-];
-McTabNav.propDecorators = {
-    links: [{ type: ContentChildren, args: [McTabLink,] }]
-};
+/** @nocollapse */ McTabNav.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabNav, deps: [{ token: 'vertical', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McTabNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTabNav, selector: "[mc-tab-nav-bar]", host: { classAttribute: "mc-tab-nav-bar" }, queries: [{ propertyName: "links", predicate: McTabLink }], exportAs: ["mcTabNavBar", "mcTabNav"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".mc-tab-link.cdk-keyboard-focused:after{display:block;content:\"\";position:absolute;top:0;right:calc(-1 * 1px);right:calc(-1 * var(--mc-tabs-size-border-width, 1px));bottom:calc(-1 * 1px);bottom:calc(-1 * var(--mc-tabs-size-border-width, 1px));left:calc(-1 * 1px);left:calc(-1 * var(--mc-tabs-size-border-width, 1px))}.mc-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;height:40px;height:var(--mc-tabs-size-height, 40px);text-align:center;white-space:nowrap;cursor:pointer;padding-right:16px;padding-right:var(--mc-tabs-size-padding-horizontal, 16px);padding-left:16px;padding-left:var(--mc-tabs-size-padding-horizontal, 16px);outline:none}.mc-tab-link .mc-tab-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.mc-tab-link.mc-active{cursor:default}.mc-tab-link.mc-active:before{display:block;content:\"\";position:absolute}.mc-tab-link.mc-active[disabled] .mc-tab-overlay{bottom:-1px}.mc-tab-link.cdk-keyboard-focused{z-index:1}.mc-tab-link:first-child.cdk-keyboard-focused:after{left:0}.mc-tab-link:last-child.cdk-keyboard-focused:after{right:0}.mc-tab-link[disabled]{pointer-events:none}.mc-tab-link .mc-tab-label__content>.mc-icon.mc-icon_left{margin-right:8px;margin-right:var(--mc-tabs-size-label-icon-margin, 8px)}.mc-tab-link .mc-tab-label__content>.mc-icon.mc-icon_right{margin-left:8px;margin-left:var(--mc-tabs-size-label-icon-margin, 8px)}.mc-tab-link.mc-tab-label_vertical .mc-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-tab-link .mc-tab-group_stretch-labels .mc-tab-link{flex-basis:0;flex-grow:1}.mc-tab-link>.mc-icon.mc-icon_left{margin-right:8px;margin-right:var(--mc-tabs-size-label-icon-margin, 8px)}.mc-tab-link>.mc-icon.mc-icon_right{margin-left:8px;margin-left:var(--mc-tabs-size-label-icon-margin, 8px)}.mc-tab-nav-bar{display:flex;flex-grow:1;position:relative;padding:1px 1px 0}.mc-tab-nav-bar .mc-tab-group_align-labels-center{justify-content:center}.mc-tab-nav-bar .mc-tab-group_align-labels-end{justify-content:flex-end}.mc-tab-nav-bar.mc-tab-group_vertical{flex-direction:column;flex-grow:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabNav, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[mc-tab-nav-bar]',
+                    exportAs: 'mcTabNavBar, mcTabNav',
+                    template: '<ng-content></ng-content>',
+                    styleUrls: ['tab-nav-bar.scss'],
+                    host: {
+                        class: 'mc-tab-nav-bar'
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['vertical']
+                }] }]; }, propDecorators: { links: [{
+                type: ContentChildren,
+                args: [McTabLink]
+            }] } });
 
 class McTabsModule {
 }
-McTabsModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    PortalModule,
-                    A11yModule,
-                    McCommonModule,
-                    McIconModule,
-                    McToolTipModule
-                ],
-                // Don't export all components because some are only to be used internally.
-                exports: [
-                    McCommonModule,
-                    McTabGroup,
-                    McTabLabel,
-                    McTab,
-                    McTabNav,
-                    McTabLink,
-                    McTabContent,
-                    McOldTabsCssStyler,
-                    McAlignTabsCenterCssStyler,
-                    McAlignTabsEndCssStyler,
-                    McStretchTabsCssStyler,
-                    McVerticalTabsCssStyler
-                ],
-                declarations: [
-                    McTabGroup,
-                    McTabLabel,
-                    McTab,
-                    McTabLabelWrapper,
-                    McTabNav,
-                    McTabLink,
-                    McTabBody,
-                    McTabBodyPortal,
-                    McTabHeader,
-                    McTabContent,
-                    McOldTabsCssStyler,
-                    McAlignTabsCenterCssStyler,
-                    McAlignTabsEndCssStyler,
-                    McStretchTabsCssStyler,
-                    McVerticalTabsCssStyler
-                ]
-            },] }
-];
+/** @nocollapse */ McTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabsModule, declarations: [McTabGroup,
+        McTabLabel,
+        McTab,
+        McTabLabelWrapper,
+        McTabNav,
+        McTabLink,
+        McTabBody,
+        McTabBodyPortal,
+        McTabHeader,
+        McTabContent,
+        McOldTabsCssStyler,
+        McAlignTabsCenterCssStyler,
+        McAlignTabsEndCssStyler,
+        McStretchTabsCssStyler,
+        McVerticalTabsCssStyler], imports: [CommonModule,
+        PortalModule,
+        A11yModule,
+        McCommonModule,
+        McIconModule,
+        McToolTipModule], exports: [McCommonModule,
+        McTabGroup,
+        McTabLabel,
+        McTab,
+        McTabNav,
+        McTabLink,
+        McTabContent,
+        McOldTabsCssStyler,
+        McAlignTabsCenterCssStyler,
+        McAlignTabsEndCssStyler,
+        McStretchTabsCssStyler,
+        McVerticalTabsCssStyler] });
+/** @nocollapse */ McTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabsModule, imports: [[
+            CommonModule,
+            PortalModule,
+            A11yModule,
+            McCommonModule,
+            McIconModule,
+            McToolTipModule
+        ], McCommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        PortalModule,
+                        A11yModule,
+                        McCommonModule,
+                        McIconModule,
+                        McToolTipModule
+                    ],
+                    // Don't export all components because some are only to be used internally.
+                    exports: [
+                        McCommonModule,
+                        McTabGroup,
+                        McTabLabel,
+                        McTab,
+                        McTabNav,
+                        McTabLink,
+                        McTabContent,
+                        McOldTabsCssStyler,
+                        McAlignTabsCenterCssStyler,
+                        McAlignTabsEndCssStyler,
+                        McStretchTabsCssStyler,
+                        McVerticalTabsCssStyler
+                    ],
+                    declarations: [
+                        McTabGroup,
+                        McTabLabel,
+                        McTab,
+                        McTabLabelWrapper,
+                        McTabNav,
+                        McTabLink,
+                        McTabBody,
+                        McTabBodyPortal,
+                        McTabHeader,
+                        McTabContent,
+                        McOldTabsCssStyler,
+                        McAlignTabsCenterCssStyler,
+                        McAlignTabsEndCssStyler,
+                        McStretchTabsCssStyler,
+                        McVerticalTabsCssStyler
+                    ]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MC_TABS_CONFIG, McAlignTabsCenterCssStyler, McAlignTabsEndCssStyler, McOldTabsCssStyler, McStretchTabsCssStyler, McTab, McTabBody, McTabBodyPortal, McTabChangeEvent, McTabContent, McTabGroup, McTabGroupBase, McTabGroupMixinBase, McTabHeader, McTabLabel, McTabLabelWrapper, McTabLink, McTabNav, McTabsModule, McVerticalTabsCssStyler, mcTabsAnimations, McTabLabelWrapperBase as ɵa, McTabLabelWrapperMixinBase as ɵb, McTabBase as ɵc, McTabMixinBase as ɵd, MC_TAB_LABEL as ɵe, McTabLinkBase as ɵf, McTabLinkMixinBase as ɵg, McPaginatedTabHeader as ɵh };
+export { MC_TABS_CONFIG, McAlignTabsCenterCssStyler, McAlignTabsEndCssStyler, McOldTabsCssStyler, McStretchTabsCssStyler, McTab, McTabBody, McTabBodyPortal, McTabChangeEvent, McTabContent, McTabGroup, McTabGroupBase, McTabGroupMixinBase, McTabHeader, McTabLabel, McTabLabelWrapper, McTabLink, McTabNav, McTabsModule, McVerticalTabsCssStyler, mcTabsAnimations };
 //# sourceMappingURL=ptsecurity-mosaic-tabs.js.map