@angular-mdc/web
Version:
488 lines (484 loc) • 15.9 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, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, NgZone, ChangeDetectorRef, ElementRef, Optional, Inject, Input, Output, ViewChild, Directive, 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 { __extends, __assign } from 'tslib';
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 {?}
*/
var MDC_TAB_BAR_PARENT_COMPONENT = new InjectionToken('MDC_TAB_BAR_PARENT_COMPONENT');
/** @type {?} */
var nextUniqueId = 0;
var MdcTabLabel = /** @class */ (function () {
function MdcTabLabel(elementRef) {
this.elementRef = elementRef;
}
MdcTabLabel.decorators = [
{ type: Directive, args: [{
selector: 'mdc-tab-label, [mdcTabLabel]',
host: { 'class': 'mdc-tab__text-label' }
},] },
];
/** @nocollapse */
MdcTabLabel.ctorParameters = function () { return [
{ type: ElementRef }
]; };
return MdcTabLabel;
}());
var MdcTabIcon = /** @class */ (function () {
function MdcTabIcon(elementRef) {
this.elementRef = elementRef;
}
MdcTabIcon.decorators = [
{ type: Directive, args: [{
selector: 'mdc-tab-icon, [mdcTabIcon]',
host: { 'class': 'mdc-tab__icon' }
},] },
];
/** @nocollapse */
MdcTabIcon.ctorParameters = function () { return [
{ type: ElementRef }
]; };
return MdcTabIcon;
}());
var MdcTab = /** @class */ (function (_super) {
__extends(MdcTab, _super);
function MdcTab(_ngZone, _changeDetectorRef, _ripple, elementRef, _parent) {
var _this = _super.call(this, elementRef) || this;
_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 _this;
}
Object.defineProperty(MdcTab.prototype, "stacked", {
get: /**
* @return {?}
*/
function () {
return this._stacked;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coerceBooleanProperty(value);
if (newValue !== this._stacked) {
this._stacked = newValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTab.prototype, "fixed", {
get: /**
* @return {?}
*/
function () {
return this._fixed;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coerceBooleanProperty(value);
if (newValue !== this._fixed) {
this._fixed = newValue;
this._changeDetectorRef.detectChanges();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTab.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._disabled = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTab.prototype, "focusOnActivate", {
get: /**
* @return {?}
*/
function () {
return this._focusOnActivate;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coerceBooleanProperty(value);
if (newValue !== this._focusOnActivate) {
this._focusOnActivate = newValue;
this._foundation.setFocusOnActivate(this._focusOnActivate);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcTab.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
setAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (attr, value) { return _this._getHostElement().setAttribute(attr, value); }),
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.remove(className); }),
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.contains(className); }),
activateIndicator: (/**
* @param {?} previousIndicatorClientRect
* @return {?}
*/
function (previousIndicatorClientRect) {
return _this.tabIndicator.activate(previousIndicatorClientRect);
}),
deactivateIndicator: (/**
* @return {?}
*/
function () { return _this.tabIndicator.deactivate(); }),
notifyInteracted: (/**
* @return {?}
*/
function () { return _this.interacted.emit({ detail: { tabId: _this.id, tab: _this } }); }),
getOffsetLeft: (/**
* @return {?}
*/
function () { return _this._getHostElement().offsetLeft; }),
getOffsetWidth: (/**
* @return {?}
*/
function () { return _this._getHostElement().offsetWidth; }),
getContentOffsetLeft: (/**
* @return {?}
*/
function () { return _this.content.nativeElement.offsetLeft; }),
getContentOffsetWidth: (/**
* @return {?}
*/
function () { return _this.content.nativeElement.offsetWidth; }),
focus: (/**
* @return {?}
*/
function () { return _this._getHostElement().focus(); })
};
return new MDCTabFoundation(adapter);
};
/**
* @return {?}
*/
MdcTab.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._foundation.init();
this._loadListeners();
};
/**
* @return {?}
*/
MdcTab.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this._ripple = this._createRipple();
this._ripple.init();
};
/**
* @return {?}
*/
MdcTab.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroy.next();
this._destroy.complete();
this._ripple.destroy();
};
Object.defineProperty(MdcTab.prototype, "active", {
/** Getter for the active state of the tab */
get: /**
* Getter for the active state of the tab
* @return {?}
*/
function () {
return this._foundation.isActive();
},
enumerable: true,
configurable: true
});
/** Activates the tab */
/**
* Activates the tab
* @param {?=} computeIndicatorClientRect
* @return {?}
*/
MdcTab.prototype.activate = /**
* Activates the tab
* @param {?=} computeIndicatorClientRect
* @return {?}
*/
function (computeIndicatorClientRect) {
this._foundation.activate(computeIndicatorClientRect);
};
/** Deactivates the tab */
/**
* Deactivates the tab
* @return {?}
*/
MdcTab.prototype.deactivate = /**
* Deactivates the tab
* @return {?}
*/
function () {
this._foundation.deactivate();
};
/** Returns the indicator's client rect */
/**
* Returns the indicator's client rect
* @return {?}
*/
MdcTab.prototype.computeIndicatorClientRect = /**
* Returns the indicator's client rect
* @return {?}
*/
function () {
return this.tabIndicator.computeContentClientRect();
};
/**
* @return {?}
*/
MdcTab.prototype.computeDimensions = /**
* @return {?}
*/
function () {
return this._foundation.computeDimensions();
};
/**
* @return {?}
*/
MdcTab.prototype.getTabBarParent = /**
* @return {?}
*/
function () {
return this._parent;
};
/**
* @return {?}
*/
MdcTab.prototype.focus = /**
* @return {?}
*/
function () {
this._getHostElement().focus();
};
/**
* @private
* @return {?}
*/
MdcTab.prototype._createRipple = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var rippleSurface = (/** @type {?} */ (this.rippleSurface.nativeElement));
/** @type {?} */
var adapter = __assign(__assign({}, MdcRipple.createAdapter(this)), { addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return rippleSurface.classList.add(className); }), removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return rippleSurface.classList.remove(className); }), updateCssVariable: (/**
* @param {?} varName
* @param {?} value
* @return {?}
*/
function (varName, value) { return rippleSurface.style.setProperty(varName, value); }) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
};
/**
* @private
* @return {?}
*/
MdcTab.prototype._loadListeners = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return fromEvent(_this._getHostElement(), 'click').pipe(takeUntil(_this._destroy))
.subscribe((/**
* @return {?}
*/
function () { return _this._ngZone.run((/**
* @return {?}
*/
function () {
if (!_this.active && !_this._disabled) {
_this._foundation.handleClick();
}
})); }));
}));
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
MdcTab.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
function () {
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: "\n <div #content class=\"mdc-tab__content\">\n <mdc-icon class=\"mdc-tab__icon\" *ngIf=\"icon\">{{icon}}</mdc-icon>\n <ng-content select=\"mdc-icon\"></ng-content>\n <span class=\"mdc-tab__text-label\" *ngIf=\"label\">{{label}}</span>\n <ng-content></ng-content>\n <ng-container *ngIf=\"fixed\">\n <ng-container *ngTemplateOutlet=\"indicator\"></ng-container>\n </ng-container>\n </div>\n <ng-container *ngIf=\"!fixed\">\n <ng-container *ngTemplateOutlet=\"indicator\"></ng-container>\n </ng-container>\n <ng-template #indicator><mdc-tab-indicator></mdc-tab-indicator></ng-template>\n <div #ripplesurface class=\"mdc-tab__ripple\"></div>\n ",
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [MdcRipple]
},] },
];
/** @nocollapse */
MdcTab.ctorParameters = function () { return [
{ 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 },] }]
};
return MdcTab;
}(MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: tab/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var TAB_DECLARATIONS = [
MdcTab,
MdcTabIcon,
MdcTabLabel
];
var MdcTabModule = /** @class */ (function () {
function MdcTabModule() {
}
MdcTabModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MdcTabIndicatorModule,
MdcIconModule
],
exports: TAB_DECLARATIONS,
declarations: TAB_DECLARATIONS
},] },
];
return MdcTabModule;
}());
export { MDC_TAB_BAR_PARENT_COMPONENT, MdcTab, MdcTabIcon, MdcTabLabel, MdcTabModule };
//# sourceMappingURL=tab.es5.js.map