@angular-mdc/web
Version:
248 lines (244 loc) • 6.54 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 { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, Input, ContentChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdcIcon, MdcIconModule } from '@angular-mdc/web/icon';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { MdcRipple } from '@angular-mdc/web/ripple';
/**
* @fileoverview added by tsickle
* Generated from: fab/fab.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcFabLabel {
}
MdcFabLabel.decorators = [
{ type: Directive, args: [{
selector: 'mdc-fab-label, [mdcFabLabel]',
host: { 'class': 'mdc-fab__label' }
},] },
];
class MdcFab {
/**
* @param {?} _changeDetectionRef
* @param {?} elementRef
* @param {?} _ripple
*/
constructor(_changeDetectionRef, elementRef, _ripple) {
this._changeDetectionRef = _changeDetectionRef;
this.elementRef = elementRef;
this._ripple = _ripple;
this._mini = false;
this._touch = false;
this._exited = false;
this._extended = false;
this._fluid = false;
this._position = null;
}
/**
* @return {?}
*/
get mini() {
return this._mini;
}
/**
* @param {?} value
* @return {?}
*/
set mini(value) {
this._mini = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get touch() {
return this._touch;
}
/**
* @param {?} value
* @return {?}
*/
set touch(value) {
this._touch = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get exited() {
return this._exited;
}
/**
* @param {?} value
* @return {?}
*/
set exited(value) {
this._exited = coerceBooleanProperty(value);
this._changeDetectionRef.markForCheck();
}
/**
* @return {?}
*/
get extended() {
return this._extended;
}
/**
* @param {?} value
* @return {?}
*/
set extended(value) {
this._extended = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get fluid() {
return this._fluid;
}
/**
* @param {?} value
* @return {?}
*/
set fluid(value) {
this._fluid = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get position() {
return this._position;
}
/**
* @param {?} value
* @return {?}
*/
set position(value) {
if (this._position) {
this._getHostElement().classList.remove(`ngx-mdc-fab--${this._convertPosition(this._position)}`);
}
if (value) {
this._getHostElement().classList.add(`ngx-mdc-fab--${this._convertPosition(value)}`);
}
this._position = value;
}
/**
* @return {?}
*/
ngAfterContentInit() {
if (this.fabIcon) {
this.fabIcon.elementRef.nativeElement.classList.add('mdc-fab__icon');
}
this._ripple = new MdcRipple(this.elementRef);
this._ripple.init();
}
/**
* @private
* @param {?} position
* @return {?}
*/
_convertPosition(position) {
switch (position) {
case 'bottomLeft': {
return 'bottom-left';
}
case 'bottomRight': {
return 'bottom-right';
}
default: {
return null;
}
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this._ripple.destroy();
}
/**
* @param {?=} exited
* @return {?}
*/
toggleExited(exited) {
this._exited = exited ? exited : !this._exited;
}
/**
* Focuses the button.
* @return {?}
*/
focus() {
this._getHostElement().focus();
}
/**
* @private
* @return {?}
*/
_getHostElement() {
return this.elementRef.nativeElement;
}
}
MdcFab.decorators = [
{ type: Component, args: [{selector: 'button[mdc-fab], a[mdc-fab]',
host: {
'[attr.tabindex]': 'exited ? -1 : 0',
'class': 'mdc-fab',
'[class.mdc-fab--mini]': 'mini',
'[class.mdc-fab--exited]': 'exited',
'[class.mdc-fab--extended]': 'extended',
'[class.ngx-mdc-fab-extended--fluid]': 'fluid',
'[class.mdc-fab--touch]': 'touch && mini',
},
template: `
<div class="mdc-fab__ripple"></div>
<ng-content></ng-content>
<mdc-icon class="mdc-fab__icon" *ngIf="icon">{{icon}}</mdc-icon>
<span class="mdc-fab__label" *ngIf="label">{{label}}</span>
<div class="mdc-fab__touch" *ngIf="touch && mini"></div>`,
providers: [MdcRipple],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcFab.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: MdcRipple }
];
MdcFab.propDecorators = {
mini: [{ type: Input }],
touch: [{ type: Input }],
exited: [{ type: Input }],
extended: [{ type: Input }],
fluid: [{ type: Input }],
position: [{ type: Input }],
label: [{ type: Input }],
icon: [{ type: Input }],
fabIcon: [{ type: ContentChild, args: [MdcIcon, { static: false },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: fab/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcFabModule {
}
MdcFabModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MdcIconModule
],
exports: [
MdcFab,
MdcFabLabel
],
declarations: [MdcFab, MdcFabLabel]
},] },
];
export { MdcFab, MdcFabLabel, MdcFabModule };
//# sourceMappingURL=fab.js.map