@angular-mdc/web/esm5/tab-bar.es5.js

Angular MDC

/**
 * @license
 * Copyright (c) Dominic Carretto
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE
 */
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { MdcTabIndicatorModule } from '@angular-mdc/web/tab-indicator';
import { MDC_TAB_BAR_PARENT_COMPONENT, MdcTab, MdcTabModule } from '@angular-mdc/web/tab';
import { MdcTabScroller, MdcTabScrollerModule } from '@angular-mdc/web/tab-scroller';
import { __extends } from 'tslib';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { Subject, merge } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { MDCComponent } from '@angular-mdc/web/base';
import { MDCTabBarFoundation } from '@material/tab-bar';

/**
 * @fileoverview added by tsickle
 * Generated from: tab-bar/tab-bar.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var MdcTabActivatedEvent = /** @class */ (function () {
    function MdcTabActivatedEvent(source, index, tab) {
        this.source = source;
        this.index = index;
        this.tab = tab;
    }
    return MdcTabActivatedEvent;
}());
var MdcTabBar = /** @class */ (function (_super) {
    __extends(MdcTabBar, _super);
    function MdcTabBar(_platform, _changeDetectorRef, elementRef) {
        var _this = _super.call(this, elementRef) || this;
        _this._platform = _platform;
        _this._changeDetectorRef = _changeDetectorRef;
        _this.elementRef = elementRef;
        /**
         * Emits whenever the component is destroyed.
         */
        _this._destroy = new Subject();
        _this._fade = false;
        _this._stacked = false;
        _this._fixed = false;
        _this._align = null;
        _this._iconIndicator = null;
        _this._useAutomaticActivation = true;
        _this._activeTabIndex = 0;
        _this._focusOnActivate = true;
        _this.activated = new EventEmitter();
        /**
         * Subscription to changes in tabs.
         */
        _this._changeSubscription = null;
        /**
         * Subscription to interaction events in tabs.
         */
        _this._tabInteractionSubscription = null;
        return _this;
    }
    Object.defineProperty(MdcTabBar.prototype, "fade", {
        get: /**
         * @return {?}
         */
        function () { return this._fade; },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._fade = coerceBooleanProperty(value);
            this._syncTabs();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MdcTabBar.prototype, "stacked", {
        get: /**
         * @return {?}
         */
        function () { return this._stacked; },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._stacked = coerceBooleanProperty(value);
            this._syncTabs();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MdcTabBar.prototype, "fixed", {
        get: /**
         * @return {?}
         */
        function () { return this._fixed; },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._fixed = coerceBooleanProperty(value);
            this._syncTabs();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MdcTabBar.prototype, "align", {
        get: /**
         * @return {?}
         */
        function () { return this._align; },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._align = value || 'start';
            this.tabScroller.align = this.align;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MdcTabBar.prototype, "iconIndicator", {
        get: /**
         * @return {?}
         */
        function () { return this._iconIndicator; },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._iconIndicator = value;
            this._syncTabs();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MdcTabBar.prototype, "useAutomaticActivation", {
        get: /**
         * @return {?}
         */
        function () { return this._useAutomaticActivation; },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._useAutomaticActivation = coerceBooleanProperty(value);
            this._foundation.setUseAutomaticActivation(this._useAutomaticActivation);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MdcTabBar.prototype, "activeTabIndex", {
        get: /**
         * @return {?}
         */
        function () { return this._activeTabIndex; },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            if (this.activeTabIndex !== value) {
                this._activeTabIndex = value;
                this.activateTab(this.activeTabIndex);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MdcTabBar.prototype, "focusOnActivate", {
        get: /**
         * @return {?}
         */
        function () { return this._focusOnActivate; },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._focusOnActivate = coerceBooleanProperty(value);
            this._syncTabs();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MdcTabBar.prototype, "tabInteractions", {
        /** Combined stream of all of the tab interaction events. */
        get: /**
         * Combined stream of all of the tab interaction events.
         * @return {?}
         */
        function () {
            return merge.apply(void 0, this.tabs.map((/**
             * @param {?} tab
             * @return {?}
             */
            function (tab) { return tab.interacted; })));
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @return {?}
     */
    MdcTabBar.prototype.getDefaultFoundation = /**
     * @return {?}
     */
    function () {
        var _this = this;
        /** @type {?} */
        var adapter = {
            scrollTo: (/**
             * @param {?} scrollX
             * @return {?}
             */
            function (scrollX) { return _this.tabScroller.scrollTo(scrollX); }),
            incrementScroll: (/**
             * @param {?} scrollXIncrement
             * @return {?}
             */
            function (scrollXIncrement) { return _this.tabScroller.incrementScroll(scrollXIncrement); }),
            getScrollPosition: (/**
             * @return {?}
             */
            function () { return _this.tabScroller.getScrollPosition(); }),
            getScrollContentWidth: (/**
             * @return {?}
             */
            function () { return _this.tabScroller.getScrollContentWidth(); }),
            getOffsetWidth: (/**
             * @return {?}
             */
            function () { return _this._getHostElement().offsetWidth; }),
            isRTL: (/**
             * @return {?}
             */
            function () { return _this._platform.isBrowser ?
                window.getComputedStyle(_this._getHostElement()).getPropertyValue('direction') === 'rtl' : false; }),
            setActiveTab: (/**
             * @param {?} index
             * @return {?}
             */
            function (index) { return _this.activateTab(index); }),
            activateTabAtIndex: (/**
             * @param {?} index
             * @param {?=} clientRect
             * @return {?}
             */
            function (index, clientRect) {
                if (_this._indexIsInRange(index)) {
                    _this.tabs.toArray()[index].activate(clientRect);
                }
            }),
            deactivateTabAtIndex: (/**
             * @param {?} index
             * @return {?}
             */
            function (index) {
                if (_this._indexIsInRange(index)) {
                    _this.tabs.toArray()[index].deactivate();
                }
            }),
            focusTabAtIndex: (/**
             * @param {?} index
             * @return {?}
             */
            function (index) { return _this.tabs.toArray()[index].focus(); }),
            getTabIndicatorClientRectAtIndex: (/**
             * @param {?} previousActiveIndex
             * @return {?}
             */
            function (previousActiveIndex) {
                if (!_this._platform.isBrowser) {
                    return { height: 0, width: 0, bottom: 0, top: 0, left: 0, right: 0 };
                }
                if (!_this._indexIsInRange(previousActiveIndex)) {
                    previousActiveIndex = _this.activeTabIndex;
                }
                return _this.tabs.toArray()[previousActiveIndex].computeIndicatorClientRect();
            }),
            getTabDimensionsAtIndex: (/**
             * @param {?} index
             * @return {?}
             */
            function (index) { return _this.tabs.toArray()[index].computeDimensions(); }),
            getPreviousActiveTabIndex: (/**
             * @return {?}
             */
            function () { return _this.tabs.toArray().findIndex((/**
             * @param {?} _
             * @return {?}
             */
            function (_) { return _.active; })); }),
            getFocusedTabIndex: (/**
             * @return {?}
             */
            function () {
                return _this._platform.isBrowser ? _this.tabs.toArray().findIndex((/**
                 * @param {?} tab
                 * @return {?}
                 */
                function (tab) {
                    return tab.elementRef.nativeElement === (/** @type {?} */ (document.activeElement));
                })) : -1;
            }),
            getIndexOfTabById: (/**
             * @param {?} id
             * @return {?}
             */
            function (id) { return _this.tabs.toArray().findIndex((/**
             * @param {?} tab
             * @return {?}
             */
            function (tab) { return id === tab.id; })); }),
            getTabListLength: (/**
             * @return {?}
             */
            function () { return _this.tabs.length; }),
            notifyTabActivated: (/**
             * @param {?} index
             * @return {?}
             */
            function (index) {
                return _this.activated.emit({ source: _this, index: index, tab: _this.tabs.toArray()[index] });
            })
        };
        return new MDCTabBarFoundation(adapter);
    };
    /**
     * @return {?}
     */
    MdcTabBar.prototype.ngAfterContentInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this._foundation.init();
        // When the list changes, re-subscribe
        this._changeSubscription = this.tabs.changes.pipe(startWith(null)).subscribe((/**
         * @return {?}
         */
        function () {
            Promise.resolve().then((/**
             * @return {?}
             */
            function () {
                if (_this.tabs.length) {
                    _this._syncTabs();
                    _this.activateTab(_this.activeTabIndex);
                    _this._resetTabSubscriptions();
                }
            }));
        }));
    };
    /**
     * @return {?}
     */
    MdcTabBar.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this._destroy.next();
        this._destroy.complete();
        if (this._changeSubscription) {
            this._changeSubscription.unsubscribe();
        }
        this._dropSubscriptions();
    };
    /**
     * @private
     * @return {?}
     */
    MdcTabBar.prototype._syncTabs = /**
     * @private
     * @return {?}
     */
    function () {
        var _this = this;
        if (!this.tabs) {
            return;
        }
        this.tabs.forEach((/**
         * @param {?} tab
         * @return {?}
         */
        function (tab) {
            tab.stacked = _this._stacked;
            tab.fixed = _this._fixed;
            tab.tabIndicator.fade = _this._fade;
            tab.tabIndicator.icon = _this._iconIndicator;
            tab.focusOnActivate = _this._focusOnActivate;
        }));
    };
    /**
     * @private
     * @return {?}
     */
    MdcTabBar.prototype._resetTabSubscriptions = /**
     * @private
     * @return {?}
     */
    function () {
        this._dropSubscriptions();
        this._listenToTabInteraction();
    };
    /**
     * @private
     * @return {?}
     */
    MdcTabBar.prototype._dropSubscriptions = /**
     * @private
     * @return {?}
     */
    function () {
        if (this._tabInteractionSubscription) {
            this._tabInteractionSubscription.unsubscribe();
            this._tabInteractionSubscription = null;
        }
    };
    /** Listens to interaction events on each tab. */
    /**
     * Listens to interaction events on each tab.
     * @private
     * @return {?}
     */
    MdcTabBar.prototype._listenToTabInteraction = /**
     * Listens to interaction events on each tab.
     * @private
     * @return {?}
     */
    function () {
        var _this = this;
        this._tabInteractionSubscription = this.tabInteractions.subscribe((/**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            /** @type {?} */
            var previousTab = _this.getActiveTab();
            if (previousTab) {
                previousTab.tabIndicator.active = false;
            }
            event.detail.tab.tabIndicator.active = true;
            _this._foundation.handleTabInteraction((/** @type {?} */ (event)));
        }));
    };
    /** Activates the tab at the given index */
    /**
     * Activates the tab at the given index
     * @param {?} index
     * @return {?}
     */
    MdcTabBar.prototype.activateTab = /**
     * Activates the tab at the given index
     * @param {?} index
     * @return {?}
     */
    function (index) {
        if (!this.tabs) {
            return;
        }
        this.activeTabIndex = index;
        if (this._platform.isBrowser) {
            this._foundation.activateTab(index);
        }
        this._changeDetectorRef.markForCheck();
    };
    /** Scrolls the tab at the given index into view */
    /**
     * Scrolls the tab at the given index into view
     * @param {?} index
     * @return {?}
     */
    MdcTabBar.prototype.scrollIntoView = /**
     * Scrolls the tab at the given index into view
     * @param {?} index
     * @return {?}
     */
    function (index) {
        this._foundation.scrollIntoView(index);
    };
    /**
     * @return {?}
     */
    MdcTabBar.prototype.getActiveTabIndex = /**
     * @return {?}
     */
    function () {
        return this.tabs.toArray().findIndex((/**
         * @param {?} _
         * @return {?}
         */
        function (_) { return _.active; }));
    };
    /**
     * @return {?}
     */
    MdcTabBar.prototype.getActiveTab = /**
     * @return {?}
     */
    function () {
        return this.tabs.toArray().find((/**
         * @param {?} _
         * @return {?}
         */
        function (_) { return _.active; }));
    };
    /** Returns an index for given tab */
    /**
     * Returns an index for given tab
     * @param {?} tab
     * @return {?}
     */
    MdcTabBar.prototype.getTabIndex = /**
     * Returns an index for given tab
     * @param {?} tab
     * @return {?}
     */
    function (tab) {
        return this.tabs.toArray().indexOf(tab);
    };
    /** Disable or enable the tab at the given index */
    /**
     * Disable or enable the tab at the given index
     * @param {?} index
     * @param {?} disabled
     * @return {?}
     */
    MdcTabBar.prototype.disableTab = /**
     * Disable or enable the tab at the given index
     * @param {?} index
     * @param {?} disabled
     * @return {?}
     */
    function (index, disabled) {
        if (!this.tabs) {
            return;
        }
        this.tabs.toArray()[index].disabled = coerceBooleanProperty(disabled);
    };
    /**
     * @param {?} evt
     * @return {?}
     */
    MdcTabBar.prototype._onKeydown = /**
     * @param {?} evt
     * @return {?}
     */
    function (evt) {
        this._foundation.handleKeyDown(evt);
    };
    /**
     * @private
     * @param {?} index
     * @return {?}
     */
    MdcTabBar.prototype._indexIsInRange = /**
     * @private
     * @param {?} index
     * @return {?}
     */
    function (index) {
        return index >= 0 && index < this.tabs.length;
    };
    /** Retrieves the DOM element of the component host. */
    /**
     * Retrieves the DOM element of the component host.
     * @private
     * @return {?}
     */
    MdcTabBar.prototype._getHostElement = /**
     * Retrieves the DOM element of the component host.
     * @private
     * @return {?}
     */
    function () {
        return this.elementRef.nativeElement;
    };
    MdcTabBar.decorators = [
        { type: Component, args: [{selector: '[mdcTabBar], mdc-tab-bar',
                    exportAs: 'mdcTabBar',
                    host: {
                        'role': 'tablist',
                        'class': 'mdc-tab-bar',
                        '(keydown)': '_onKeydown($event)'
                    },
                    template: '<ng-content></ng-content>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [{ provide: MDC_TAB_BAR_PARENT_COMPONENT, useExisting: MdcTabBar }]
                },] },
    ];
    /** @nocollapse */
    MdcTabBar.ctorParameters = function () { return [
        { type: Platform },
        { type: ChangeDetectorRef },
        { type: ElementRef }
    ]; };
    MdcTabBar.propDecorators = {
        fade: [{ type: Input }],
        stacked: [{ type: Input }],
        fixed: [{ type: Input }],
        align: [{ type: Input }],
        iconIndicator: [{ type: Input }],
        useAutomaticActivation: [{ type: Input }],
        activeTabIndex: [{ type: Input }],
        focusOnActivate: [{ type: Input }],
        activated: [{ type: Output }],
        tabScroller: [{ type: ContentChild, args: [MdcTabScroller, { static: true },] }],
        tabs: [{ type: ContentChildren, args: [MdcTab, { descendants: true },] }]
    };
    return MdcTabBar;
}(MDCComponent));

/**
 * @fileoverview added by tsickle
 * Generated from: tab-bar/module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var MdcTabBarModule = /** @class */ (function () {
    function MdcTabBarModule() {
    }
    MdcTabBarModule.decorators = [
        { type: NgModule, args: [{
                    imports: [
                        MdcTabIndicatorModule,
                        MdcTabModule,
                        MdcTabScrollerModule
                    ],
                    exports: [
                        MdcTabBar,
                        MdcTabIndicatorModule,
                        MdcTabModule,
                        MdcTabScrollerModule
                    ],
                    declarations: [MdcTabBar]
                },] },
    ];
    return MdcTabBarModule;
}());

export { MdcTabActivatedEvent, MdcTabBar, MdcTabBarModule };
//# sourceMappingURL=tab-bar.es5.js.map