@angular-mdc/web
Version:
270 lines (266 loc) • 8.88 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 { __extends } from 'tslib';
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
*/
var MdcTabIndicator = /** @class */ (function (_super) {
__extends(MdcTabIndicator, _super);
function MdcTabIndicator(_platform, _changeDetectorRef, elementRef) {
var _this = _super.call(this, elementRef) || this;
_this._platform = _platform;
_this._changeDetectorRef = _changeDetectorRef;
_this.elementRef = elementRef;
_this._isFoundationInit = false;
_this._active = false;
_this._fade = false;
_this._icon = null;
return _this;
}
Object.defineProperty(MdcTabIndicator.prototype, "active", {
get: /**
* @return {?}
*/
function () { return this._active; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coerceBooleanProperty(value);
if (this._active !== newValue) {
this._active = coerceBooleanProperty(newValue);
this._active ? this.activate(this.computeContentClientRect()) : this.deactivate();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTabIndicator.prototype, "fade", {
get: /**
* @return {?}
*/
function () { return this._fade; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coerceBooleanProperty(value);
if (newValue !== this._fade) {
this._fade = newValue;
this._initFoundation();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTabIndicator.prototype, "icon", {
get: /**
* @return {?}
*/
function () { return this._icon; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._icon = value;
this._updateContentClasses();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcTabIndicator.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.remove(className); }),
computeContentClientRect: (/**
* @return {?}
*/
function () {
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 {?}
*/
function (propName, value) {
return _this.content.nativeElement.style.setProperty(propName, value);
})
};
return this._fade ? new MDCFadingTabIndicatorFoundation(adapter) : new MDCSlidingTabIndicatorFoundation(adapter);
};
/**
* @return {?}
*/
MdcTabIndicator.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
if (!this._isFoundationInit) {
this._initFoundation();
this._updateContentClasses();
}
};
/**
* @param {?} previousIndicatorClientRect
* @return {?}
*/
MdcTabIndicator.prototype.activate = /**
* @param {?} previousIndicatorClientRect
* @return {?}
*/
function (previousIndicatorClientRect) {
if (this._foundation) {
this._foundation.activate(previousIndicatorClientRect);
}
};
/**
* @return {?}
*/
MdcTabIndicator.prototype.deactivate = /**
* @return {?}
*/
function () {
if (this._foundation) {
this._foundation.deactivate();
}
};
/**
* @return {?}
*/
MdcTabIndicator.prototype.computeContentClientRect = /**
* @return {?}
*/
function () {
return this._foundation.computeContentClientRect();
};
/**
* @private
* @return {?}
*/
MdcTabIndicator.prototype._initFoundation = /**
* @private
* @return {?}
*/
function () {
this._foundation.init();
this._isFoundationInit = true;
this._changeDetectorRef.markForCheck();
};
/**
* @private
* @return {?}
*/
MdcTabIndicator.prototype._updateContentClasses = /**
* @private
* @return {?}
*/
function () {
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. */
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
MdcTabIndicator.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
function () {
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: "\n <span #content class=\"mdc-tab-indicator__content\">\n <ng-container *ngIf=\"icon\">{{icon}}</ng-container>\n </span>\n ",
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcTabIndicator.ctorParameters = function () { return [
{ type: Platform },
{ type: ChangeDetectorRef },
{ type: ElementRef }
]; };
MdcTabIndicator.propDecorators = {
active: [{ type: Input }],
fade: [{ type: Input }],
icon: [{ type: Input }],
content: [{ type: ViewChild, args: ['content', { static: true },] }]
};
return MdcTabIndicator;
}(MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: tab-indicator/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcTabIndicatorModule = /** @class */ (function () {
function MdcTabIndicatorModule() {
}
MdcTabIndicatorModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [MdcTabIndicator],
declarations: [MdcTabIndicator]
},] },
];
return MdcTabIndicatorModule;
}());
export { MdcTabIndicator, MdcTabIndicatorModule };
//# sourceMappingURL=tab-indicator.es5.js.map