@angular-mdc/web
Version:
429 lines (425 loc) • 12.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
*/
import { InjectionToken, Directive, ElementRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, NgZone, ChangeDetectorRef, Optional, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdcIconModule } from '@angular-mdc/web/icon';
import { MdcTabIndicator, MdcTabIndicatorModule } from '@angular-mdc/web/tab-indicator';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MDCComponent } from '@angular-mdc/web/base';
import { MdcRipple } from '@angular-mdc/web/ripple';
import { MDCTabFoundation } from '@material/tab';
import { MDCRippleFoundation } from '@material/ripple';
/**
* @fileoverview added by tsickle
* Generated from: tab/tab.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token used to provide the parent MdcTabBar component to MdcTab.
* @type {?}
*/
const MDC_TAB_BAR_PARENT_COMPONENT = new InjectionToken('MDC_TAB_BAR_PARENT_COMPONENT');
/** @type {?} */
let nextUniqueId = 0;
class MdcTabLabel {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
}
}
MdcTabLabel.decorators = [
{ type: Directive, args: [{
selector: 'mdc-tab-label, [mdcTabLabel]',
host: { 'class': 'mdc-tab__text-label' }
},] },
];
/** @nocollapse */
MdcTabLabel.ctorParameters = () => [
{ type: ElementRef }
];
class MdcTabIcon {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
}
}
MdcTabIcon.decorators = [
{ type: Directive, args: [{
selector: 'mdc-tab-icon, [mdcTabIcon]',
host: { 'class': 'mdc-tab__icon' }
},] },
];
/** @nocollapse */
MdcTabIcon.ctorParameters = () => [
{ type: ElementRef }
];
class MdcTab extends MDCComponent {
/**
* @param {?} _ngZone
* @param {?} _changeDetectorRef
* @param {?} _ripple
* @param {?} elementRef
* @param {?} _parent
*/
constructor(_ngZone, _changeDetectorRef, _ripple, elementRef, _parent) {
super(elementRef);
this._ngZone = _ngZone;
this._changeDetectorRef = _changeDetectorRef;
this._ripple = _ripple;
this.elementRef = elementRef;
this._parent = _parent;
/**
* Emits whenever the component is destroyed.
*/
this._destroy = new Subject();
this._uniqueId = `mdc-tab-${++nextUniqueId}`;
this.id = this._uniqueId;
this._stacked = false;
this._fixed = false;
this._disabled = false;
this._focusOnActivate = true;
this.interacted = new EventEmitter();
this._root = this.elementRef.nativeElement;
}
/**
* @return {?}
*/
get stacked() {
return this._stacked;
}
/**
* @param {?} value
* @return {?}
*/
set stacked(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._stacked) {
this._stacked = newValue;
}
}
/**
* @return {?}
*/
get fixed() {
return this._fixed;
}
/**
* @param {?} value
* @return {?}
*/
set fixed(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._fixed) {
this._fixed = newValue;
this._changeDetectorRef.detectChanges();
}
}
/**
* @return {?}
*/
get disabled() {
return this._disabled;
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get focusOnActivate() {
return this._focusOnActivate;
}
/**
* @param {?} value
* @return {?}
*/
set focusOnActivate(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._focusOnActivate) {
this._focusOnActivate = newValue;
this._foundation.setFocusOnActivate(this._focusOnActivate);
}
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = {
setAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
(attr, value) => this._getHostElement().setAttribute(attr, value)),
addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.add(className)),
removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.remove(className)),
hasClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.contains(className)),
activateIndicator: (/**
* @param {?} previousIndicatorClientRect
* @return {?}
*/
(previousIndicatorClientRect) => this.tabIndicator.activate(previousIndicatorClientRect)),
deactivateIndicator: (/**
* @return {?}
*/
() => this.tabIndicator.deactivate()),
notifyInteracted: (/**
* @return {?}
*/
() => this.interacted.emit({ detail: { tabId: this.id, tab: this } })),
getOffsetLeft: (/**
* @return {?}
*/
() => this._getHostElement().offsetLeft),
getOffsetWidth: (/**
* @return {?}
*/
() => this._getHostElement().offsetWidth),
getContentOffsetLeft: (/**
* @return {?}
*/
() => this.content.nativeElement.offsetLeft),
getContentOffsetWidth: (/**
* @return {?}
*/
() => this.content.nativeElement.offsetWidth),
focus: (/**
* @return {?}
*/
() => this._getHostElement().focus())
};
return new MDCTabFoundation(adapter);
}
/**
* @return {?}
*/
ngOnInit() {
this._foundation.init();
this._loadListeners();
}
/**
* @return {?}
*/
ngAfterViewInit() {
this._ripple = this._createRipple();
this._ripple.init();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroy.next();
this._destroy.complete();
this._ripple.destroy();
}
/**
* Getter for the active state of the tab
* @return {?}
*/
get active() {
return this._foundation.isActive();
}
/**
* Activates the tab
* @param {?=} computeIndicatorClientRect
* @return {?}
*/
activate(computeIndicatorClientRect) {
this._foundation.activate(computeIndicatorClientRect);
}
/**
* Deactivates the tab
* @return {?}
*/
deactivate() {
this._foundation.deactivate();
}
/**
* Returns the indicator's client rect
* @return {?}
*/
computeIndicatorClientRect() {
return this.tabIndicator.computeContentClientRect();
}
/**
* @return {?}
*/
computeDimensions() {
return this._foundation.computeDimensions();
}
/**
* @return {?}
*/
getTabBarParent() {
return this._parent;
}
/**
* @return {?}
*/
focus() {
this._getHostElement().focus();
}
/**
* @private
* @return {?}
*/
_createRipple() {
/** @type {?} */
const rippleSurface = (/** @type {?} */ (this.rippleSurface.nativeElement));
/** @type {?} */
const adapter = Object.assign(Object.assign({}, MdcRipple.createAdapter(this)), { addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => rippleSurface.classList.add(className)), removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => rippleSurface.classList.remove(className)), updateCssVariable: (/**
* @param {?} varName
* @param {?} value
* @return {?}
*/
(varName, value) => rippleSurface.style.setProperty(varName, value)) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
}
/**
* @private
* @return {?}
*/
_loadListeners() {
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => fromEvent(this._getHostElement(), 'click').pipe(takeUntil(this._destroy))
.subscribe((/**
* @return {?}
*/
() => this._ngZone.run((/**
* @return {?}
*/
() => {
if (!this.active && !this._disabled) {
this._foundation.handleClick();
}
}))))));
}
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
_getHostElement() {
return this.elementRef.nativeElement;
}
}
MdcTab.decorators = [
{ type: Component, args: [{selector: '[mdcTab], mdc-tab',
exportAs: 'mdcTab',
host: {
'[id]': 'id',
'role': 'tab',
'class': 'mdc-tab',
'[class.mdc-tab--stacked]': 'stacked',
'[class.mdc-tab--min-width]': 'fixed',
'[class.ngx-mdc-tab--disabled]': 'disabled'
},
template: `
<div #content class="mdc-tab__content">
<mdc-icon class="mdc-tab__icon" *ngIf="icon">{{icon}}</mdc-icon>
<ng-content select="mdc-icon"></ng-content>
<span class="mdc-tab__text-label" *ngIf="label">{{label}}</span>
<ng-content></ng-content>
<ng-container *ngIf="fixed">
<ng-container *ngTemplateOutlet="indicator"></ng-container>
</ng-container>
</div>
<ng-container *ngIf="!fixed">
<ng-container *ngTemplateOutlet="indicator"></ng-container>
</ng-container>
<ng-template #indicator><mdc-tab-indicator></mdc-tab-indicator></ng-template>
<div #ripplesurface class="mdc-tab__ripple"></div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [MdcRipple]
},] },
];
/** @nocollapse */
MdcTab.ctorParameters = () => [
{ type: NgZone },
{ type: ChangeDetectorRef },
{ type: MdcRipple },
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MDC_TAB_BAR_PARENT_COMPONENT,] }] }
];
MdcTab.propDecorators = {
id: [{ type: Input }],
label: [{ type: Input }],
icon: [{ type: Input }],
stacked: [{ type: Input }],
fixed: [{ type: Input }],
disabled: [{ type: Input }],
focusOnActivate: [{ type: Input }],
interacted: [{ type: Output }],
content: [{ type: ViewChild, args: ['content', { static: false },] }],
rippleSurface: [{ type: ViewChild, args: ['ripplesurface', { static: false },] }],
tabIndicator: [{ type: ViewChild, args: [MdcTabIndicator, { static: false },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: tab/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const TAB_DECLARATIONS = [
MdcTab,
MdcTabIcon,
MdcTabLabel
];
class MdcTabModule {
}
MdcTabModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MdcTabIndicatorModule,
MdcIconModule
],
exports: TAB_DECLARATIONS,
declarations: TAB_DECLARATIONS
},] },
];
export { MDC_TAB_BAR_PARENT_COMPONENT, MdcTab, MdcTabIcon, MdcTabLabel, MdcTabModule };
//# sourceMappingURL=tab.js.map