@angular-mdc/web
Version:
398 lines (394 loc) • 12 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 { __extends, __assign, __spreadArrays } from 'tslib';
import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, Input, Output, ContentChildren, Directive, 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 {?} */
var MDC_ICON_BUTTON_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return MdcIconButton; })),
multi: true
};
/**
* Change event object emitted by MdcIconButton.
*/
var /**
* Change event object emitted by MdcIconButton.
*/
MdcIconButtonChange = /** @class */ (function () {
function MdcIconButtonChange(source, value) {
this.source = source;
this.value = value;
}
return MdcIconButtonChange;
}());
/** @type {?} */
var nextUniqueId = 0;
var MdcIconOn = /** @class */ (function () {
function MdcIconOn() {
}
MdcIconOn.decorators = [
{ type: Directive, args: [{
selector: '[mdcIconOn]',
host: { 'class': 'mdc-icon-button__icon--on' }
},] },
];
return MdcIconOn;
}());
var MdcIconButton = /** @class */ (function (_super) {
__extends(MdcIconButton, _super);
function MdcIconButton(_changeDetectorRef, elementRef, ripple) {
var _this = _super.call(this, elementRef) || this;
_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 {?}
*/
function () { });
_this._onTouched = (/**
* @return {?}
*/
function () { });
_this._root = _this.elementRef.nativeElement;
_this.ripple = _this._createRipple();
_this.ripple.init();
return _this;
}
Object.defineProperty(MdcIconButton.prototype, "inputId", {
get: /**
* @return {?}
*/
function () {
return "" + (this.id || this._uniqueId);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcIconButton.prototype, "on", {
get: /**
* @return {?}
*/
function () {
return this._on;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setOn(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcIconButton.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setDisabled(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcIconButton.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); }),
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.contains(className); }),
setAttr: (/**
* @param {?} name
* @param {?} value
* @return {?}
*/
function (name, value) { return _this._getHostElement().setAttribute(name, value); }),
notifyChange: (/**
* @param {?} evtData
* @return {?}
*/
function (evtData) {
_this.change.emit(new MdcIconButtonChange(_this, evtData.isOn));
_this._onChange(_this._foundation.isOn());
})
};
return new MDCIconButtonToggleFoundation(adapter);
};
/**
* @return {?}
*/
MdcIconButton.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
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 {?}
*/
function () {
_this.icons.forEach((/**
* @param {?} icon
* @return {?}
*/
function (icon) {
icon.elementRef.nativeElement.classList.add('mdc-icon-button__icon');
icon.role = null;
}));
}));
};
/**
* @return {?}
*/
MdcIconButton.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._changeSubscription) {
this._changeSubscription.unsubscribe();
}
this.ripple.destroy();
this._foundation.destroy();
};
/**
* @param {?} value
* @return {?}
*/
MdcIconButton.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this._onChange(value);
};
/**
* @param {?} fn
* @return {?}
*/
MdcIconButton.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
MdcIconButton.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/**
* @param {?=} isOn
* @return {?}
*/
MdcIconButton.prototype.toggle = /**
* @param {?=} isOn
* @return {?}
*/
function (isOn) {
this.on = isOn ? coerceBooleanProperty(isOn) : !this.on;
this._foundation.toggle(this.on);
};
/**
* @param {?} on
* @return {?}
*/
MdcIconButton.prototype.setOn = /**
* @param {?} on
* @return {?}
*/
function (on) {
this._on = coerceBooleanProperty(on);
this._foundation.toggle(this.on);
this._changeDetectorRef.markForCheck();
};
/** Sets the button disabled state */
/**
* Sets the button disabled state
* @param {?} disabled
* @return {?}
*/
MdcIconButton.prototype.setDisabled = /**
* Sets the button disabled state
* @param {?} disabled
* @return {?}
*/
function (disabled) {
this._disabled = coerceBooleanProperty(disabled);
this.disabled ? this._getHostElement().setAttribute('disabled', '') :
this._getHostElement().removeAttribute('disabled');
this._changeDetectorRef.markForCheck();
};
/**
* @return {?}
*/
MdcIconButton.prototype.handleClick = /**
* @return {?}
*/
function () {
if (this.icons.length === 1) {
return;
}
this.on = !this.on;
this._foundation.handleClick();
};
/**
* @private
* @return {?}
*/
MdcIconButton.prototype._createRipple = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var adapter = __assign(__assign({}, MdcRipple.createAdapter(this)), { isUnbounded: (/**
* @return {?}
*/
function () { return true; }) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
};
/**
* @private
* @return {?}
*/
MdcIconButton.prototype._getHostElement = /**
* @private
* @return {?}
*/
function () {
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: "\n <mdc-icon *ngIf=\"icon\">{{icon}}</mdc-icon>\n <ng-content></ng-content>",
providers: [
MDC_ICON_BUTTON_CONTROL_VALUE_ACCESSOR,
MdcRipple
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcIconButton.ctorParameters = function () { return [
{ 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 },] }]
};
return MdcIconButton;
}(MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: icon-button/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var ICON_BUTTON_DECLARATIONS = [
MdcIconButton,
MdcIconOn
];
var MdcIconButtonModule = /** @class */ (function () {
function MdcIconButtonModule() {
}
MdcIconButtonModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MdcIconModule
],
exports: __spreadArrays(ICON_BUTTON_DECLARATIONS, [
MdcIconModule
]),
declarations: ICON_BUTTON_DECLARATIONS
},] },
];
return MdcIconButtonModule;
}());
export { MDC_ICON_BUTTON_CONTROL_VALUE_ACCESSOR, MdcIconButton, MdcIconButtonChange, MdcIconButtonModule, MdcIconOn };
//# sourceMappingURL=icon-button.es5.js.map