@angular-mdc/web
Version:
227 lines (223 loc) • 7.01 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 { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, Input, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { MDCComponent } from '@angular-mdc/web/base';
import { MDCFadingTabIndicatorFoundation, MDCSlidingTabIndicatorFoundation } from '@material/tab-indicator';
/**
* @fileoverview added by tsickle
* Generated from: tab-indicator/tab-indicator.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcTabIndicator extends MDCComponent {
/**
* @param {?} _platform
* @param {?} _changeDetectorRef
* @param {?} elementRef
*/
constructor(_platform, _changeDetectorRef, elementRef) {
super(elementRef);
this._platform = _platform;
this._changeDetectorRef = _changeDetectorRef;
this.elementRef = elementRef;
this._isFoundationInit = false;
this._active = false;
this._fade = false;
this._icon = null;
}
/**
* @return {?}
*/
get active() { return this._active; }
/**
* @param {?} value
* @return {?}
*/
set active(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (this._active !== newValue) {
this._active = coerceBooleanProperty(newValue);
this._active ? this.activate(this.computeContentClientRect()) : this.deactivate();
}
}
/**
* @return {?}
*/
get fade() { return this._fade; }
/**
* @param {?} value
* @return {?}
*/
set fade(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._fade) {
this._fade = newValue;
this._initFoundation();
}
}
/**
* @return {?}
*/
get icon() { return this._icon; }
/**
* @param {?} value
* @return {?}
*/
set icon(value) {
this._icon = value;
this._updateContentClasses();
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = {
addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.add(className)),
removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.remove(className)),
computeContentClientRect: (/**
* @return {?}
*/
() => {
if (!this._platform.isBrowser) {
return { height: 0, width: 0, bottom: 0, top: 0, left: 0, right: 0 };
}
return this.content.nativeElement.getBoundingClientRect();
}),
setContentStyleProperty: (/**
* @param {?} propName
* @param {?} value
* @return {?}
*/
(propName, value) => this.content.nativeElement.style.setProperty(propName, value))
};
return this._fade ? new MDCFadingTabIndicatorFoundation(adapter) : new MDCSlidingTabIndicatorFoundation(adapter);
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (!this._isFoundationInit) {
this._initFoundation();
this._updateContentClasses();
}
}
/**
* @param {?} previousIndicatorClientRect
* @return {?}
*/
activate(previousIndicatorClientRect) {
if (this._foundation) {
this._foundation.activate(previousIndicatorClientRect);
}
}
/**
* @return {?}
*/
deactivate() {
if (this._foundation) {
this._foundation.deactivate();
}
}
/**
* @return {?}
*/
computeContentClientRect() {
return this._foundation.computeContentClientRect();
}
/**
* @private
* @return {?}
*/
_initFoundation() {
this._foundation.init();
this._isFoundationInit = true;
this._changeDetectorRef.markForCheck();
}
/**
* @private
* @return {?}
*/
_updateContentClasses() {
this.content.nativeElement.classList.remove('mdc-tab-indicator__content--underline');
this.content.nativeElement.classList.remove('mdc-tab-indicator__content--icon');
if (this.icon) {
this.content.nativeElement.classList.add('mdc-tab-indicator__content--icon');
this.content.nativeElement.classList.add('material-icons');
}
else {
this.content.nativeElement.classList.add('mdc-tab-indicator__content--underline');
}
this._changeDetectorRef.markForCheck();
}
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
_getHostElement() {
return this.elementRef.nativeElement;
}
}
MdcTabIndicator.decorators = [
{ type: Component, args: [{selector: '[mdcTabIndicator], mdc-tab-indicator',
exportAs: 'mdcTabIndicator',
host: {
'class': 'mdc-tab-indicator',
'[class.mdc-tab-indicator--active]': 'active',
'[class.mdc-tab-indicator--fade]': 'fade'
},
template: `
<span #content class="mdc-tab-indicator__content">
<ng-container *ngIf="icon">{{icon}}</ng-container>
</span>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcTabIndicator.ctorParameters = () => [
{ type: Platform },
{ type: ChangeDetectorRef },
{ type: ElementRef }
];
MdcTabIndicator.propDecorators = {
active: [{ type: Input }],
fade: [{ type: Input }],
icon: [{ type: Input }],
content: [{ type: ViewChild, args: ['content', { static: true },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: tab-indicator/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcTabIndicatorModule {
}
MdcTabIndicatorModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [MdcTabIndicator],
declarations: [MdcTabIndicator]
},] },
];
export { MdcTabIndicator, MdcTabIndicatorModule };
//# sourceMappingURL=tab-indicator.js.map