@angular-mdc/web
Version:
336 lines (332 loc) • 9.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 { forwardRef, Directive, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, Input, Output, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdcIcon, MdcIconModule } from '@angular-mdc/web/icon';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { startWith } from 'rxjs/operators';
import { MDCRippleFoundation } from '@material/ripple';
import { MDCComponent } from '@angular-mdc/web/base';
import { MdcRipple } from '@angular-mdc/web/ripple';
import { MDCIconButtonToggleFoundation } from '@material/icon-button';
/**
* @fileoverview added by tsickle
* Generated from: icon-button/icon-button.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const MDC_ICON_BUTTON_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => MdcIconButton)),
multi: true
};
/**
* Change event object emitted by MdcIconButton.
*/
class MdcIconButtonChange {
/**
* @param {?} source
* @param {?} value
*/
constructor(source, value) {
this.source = source;
this.value = value;
}
}
/** @type {?} */
let nextUniqueId = 0;
class MdcIconOn {
}
MdcIconOn.decorators = [
{ type: Directive, args: [{
selector: '[mdcIconOn]',
host: { 'class': 'mdc-icon-button__icon--on' }
},] },
];
class MdcIconButton extends MDCComponent {
/**
* @param {?} _changeDetectorRef
* @param {?} elementRef
* @param {?} ripple
*/
constructor(_changeDetectorRef, elementRef, ripple) {
super(elementRef);
this._changeDetectorRef = _changeDetectorRef;
this.elementRef = elementRef;
this.ripple = ripple;
this._uniqueId = `mdc-icon-button-${++nextUniqueId}`;
this.id = this._uniqueId;
this.name = null;
this.icon = null;
this._on = false;
this._disabled = false;
this.change = new EventEmitter();
/**
* Subscription to changes in icons.
*/
this._changeSubscription = null;
this._onChange = (/**
* @return {?}
*/
() => { });
this._onTouched = (/**
* @return {?}
*/
() => { });
this._root = this.elementRef.nativeElement;
this.ripple = this._createRipple();
this.ripple.init();
}
/**
* @return {?}
*/
get inputId() {
return `${this.id || this._uniqueId}`;
}
/**
* @return {?}
*/
get on() {
return this._on;
}
/**
* @param {?} value
* @return {?}
*/
set on(value) {
this.setOn(value);
}
/**
* @return {?}
*/
get disabled() {
return this._disabled;
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this.setDisabled(value);
}
/**
* @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)),
hasClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.contains(className)),
setAttr: (/**
* @param {?} name
* @param {?} value
* @return {?}
*/
(name, value) => this._getHostElement().setAttribute(name, value)),
notifyChange: (/**
* @param {?} evtData
* @return {?}
*/
(evtData) => {
this.change.emit(new MdcIconButtonChange(this, evtData.isOn));
this._onChange(this._foundation.isOn());
})
};
return new MDCIconButtonToggleFoundation(adapter);
}
/**
* @return {?}
*/
ngAfterContentInit() {
this._foundation.init();
this._foundation.toggle(this._on || this._foundation.isOn());
this._changeDetectorRef.detectChanges();
// When the icons change, re-subscribe
this._changeSubscription = this.icons.changes.pipe(startWith(null)).subscribe((/**
* @return {?}
*/
() => {
this.icons.forEach((/**
* @param {?} icon
* @return {?}
*/
(icon) => {
icon.elementRef.nativeElement.classList.add('mdc-icon-button__icon');
icon.role = null;
}));
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._changeSubscription) {
this._changeSubscription.unsubscribe();
}
this.ripple.destroy();
this._foundation.destroy();
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this._onChange(value);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* @param {?=} isOn
* @return {?}
*/
toggle(isOn) {
this.on = isOn ? coerceBooleanProperty(isOn) : !this.on;
this._foundation.toggle(this.on);
}
/**
* @param {?} on
* @return {?}
*/
setOn(on) {
this._on = coerceBooleanProperty(on);
this._foundation.toggle(this.on);
this._changeDetectorRef.markForCheck();
}
/**
* Sets the button disabled state
* @param {?} disabled
* @return {?}
*/
setDisabled(disabled) {
this._disabled = coerceBooleanProperty(disabled);
this.disabled ? this._getHostElement().setAttribute('disabled', '') :
this._getHostElement().removeAttribute('disabled');
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
handleClick() {
if (this.icons.length === 1) {
return;
}
this.on = !this.on;
this._foundation.handleClick();
}
/**
* @private
* @return {?}
*/
_createRipple() {
/** @type {?} */
const adapter = Object.assign(Object.assign({}, MdcRipple.createAdapter(this)), { isUnbounded: (/**
* @return {?}
*/
() => true) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
}
/**
* @private
* @return {?}
*/
_getHostElement() {
return this.elementRef.nativeElement;
}
}
MdcIconButton.decorators = [
{ type: Component, args: [{selector: '[mdc-icon-button], button[mdcIconButton], a[mdcIconButton]',
exportAs: 'mdcIconButton',
host: {
'[id]': 'id',
'class': 'mdc-icon-button',
'[class.mdc-icon-button--on]': 'on',
'attr.aria-pressed': 'false',
'(click)': 'handleClick()'
},
template: `
<mdc-icon *ngIf="icon">{{icon}}</mdc-icon>
<ng-content></ng-content>`,
providers: [
MDC_ICON_BUTTON_CONTROL_VALUE_ACCESSOR,
MdcRipple
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcIconButton.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: MdcRipple }
];
MdcIconButton.propDecorators = {
id: [{ type: Input }],
name: [{ type: Input }],
icon: [{ type: Input }],
on: [{ type: Input }],
disabled: [{ type: Input }],
change: [{ type: Output }],
icons: [{ type: ContentChildren, args: [MdcIcon, { descendants: true },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: icon-button/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const ICON_BUTTON_DECLARATIONS = [
MdcIconButton,
MdcIconOn
];
class MdcIconButtonModule {
}
MdcIconButtonModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MdcIconModule
],
exports: [
...ICON_BUTTON_DECLARATIONS,
MdcIconModule
],
declarations: ICON_BUTTON_DECLARATIONS
},] },
];
export { MDC_ICON_BUTTON_CONTROL_VALUE_ACCESSOR, MdcIconButton, MdcIconButtonChange, MdcIconButtonModule, MdcIconOn };
//# sourceMappingURL=icon-button.js.map