@angular-mdc/web
Version:
691 lines (677 loc) • 23.7 kB
JavaScript
/**
* @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
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular-mdc/web/tab-indicator'), require('@angular-mdc/web/tab'), require('@angular-mdc/web/tab-scroller'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@material/tab-bar')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/tab-bar', ['exports', '@angular/core', '@angular-mdc/web/tab-indicator', '@angular-mdc/web/tab', '@angular-mdc/web/tab-scroller', '@angular/cdk/coercion', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@material/tab-bar'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.tabBar = {}), global.ng.core, global.ng.web.tabIndicator, global.ng.web.tab, global.ng.web.tabScroller, global.ng.cdk.coercion, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.ng.web.base, global.mdc.tabBar));
}(this, (function (exports, core, tabIndicator, tab, tabScroller, coercion, platform, rxjs, operators, base, tabBar) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var _extendStatics = function extendStatics(d, b) {
_extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) {
if (b.hasOwnProperty(p)) d[p] = b[p];
}
};
return _extendStatics(d, b);
};
function __extends(d, b) {
_extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
/**
* @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 rxjs.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 core.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 = coercion.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 = coercion.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 = coercion.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 = coercion.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 = coercion.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 rxjs.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 tabBar.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(operators.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 = coercion.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: core.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: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
providers: [{ provide: tab.MDC_TAB_BAR_PARENT_COMPONENT, useExisting: MdcTabBar }]
},] },
];
/** @nocollapse */
MdcTabBar.ctorParameters = function () { return [
{ type: platform.Platform },
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef }
]; };
MdcTabBar.propDecorators = {
fade: [{ type: core.Input }],
stacked: [{ type: core.Input }],
fixed: [{ type: core.Input }],
align: [{ type: core.Input }],
iconIndicator: [{ type: core.Input }],
useAutomaticActivation: [{ type: core.Input }],
activeTabIndex: [{ type: core.Input }],
focusOnActivate: [{ type: core.Input }],
activated: [{ type: core.Output }],
tabScroller: [{ type: core.ContentChild, args: [tabScroller.MdcTabScroller, { static: true },] }],
tabs: [{ type: core.ContentChildren, args: [tab.MdcTab, { descendants: true },] }]
};
return MdcTabBar;
}(base.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: core.NgModule, args: [{
imports: [
tabIndicator.MdcTabIndicatorModule,
tab.MdcTabModule,
tabScroller.MdcTabScrollerModule
],
exports: [
MdcTabBar,
tabIndicator.MdcTabIndicatorModule,
tab.MdcTabModule,
tabScroller.MdcTabScrollerModule
],
declarations: [MdcTabBar]
},] },
];
return MdcTabBarModule;
}());
exports.MdcTabActivatedEvent = MdcTabActivatedEvent;
exports.MdcTabBar = MdcTabBar;
exports.MdcTabBarModule = MdcTabBarModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-tab-bar.umd.js.map