@angular-mdc/web
Version:
469 lines (449 loc) • 15.7 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
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular-mdc/web/icon'), require('@angular/forms'), require('@angular/cdk/coercion'), require('rxjs/operators'), require('@material/ripple'), require('@angular-mdc/web/base'), require('@angular-mdc/web/ripple'), require('@material/icon-button')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/icon-button', ['exports', '@angular/core', '@angular/common', '@angular-mdc/web/icon', '@angular/forms', '@angular/cdk/coercion', 'rxjs/operators', '@material/ripple', '@angular-mdc/web/base', '@angular-mdc/web/ripple', '@material/icon-button'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.iconButton = {}), global.ng.core, global.ng.common, global.ng.web.icon, global.ng.forms, global.ng.cdk.coercion, global.rxjs.operators, global.mdc.ripple, global.ng.web.base, global.ng.web.ripple, global.mdc.iconButton));
}(this, (function (exports, core, common, icon, forms, coercion, operators, ripple, base, ripple$1, iconButton) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var _extendStatics = function extendStatics(d, b) {
_extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) {
if (b.hasOwnProperty(p)) d[p] = b[p];
}
};
return _extendStatics(d, b);
};
function __extends(d, b) {
_extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var _assign = function __assign() {
_assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
return _assign.apply(this, arguments);
};
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
s += arguments[i].length;
}
for (var r = Array(s), k = 0, i = 0; i < il; i++) {
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
r[k] = a[j];
}
}
return r;
}
/**
* @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: forms.NG_VALUE_ACCESSOR,
useExisting: core.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: core.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 core.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 iconButton.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(operators.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 ? coercion.coerceBooleanProperty(isOn) : !this.on;
this._foundation.toggle(this.on);
};
/**
* @param {?} on
* @return {?}
*/
MdcIconButton.prototype.setOn = /**
* @param {?} on
* @return {?}
*/
function (on) {
this._on = coercion.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 = coercion.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({}, ripple$1.MdcRipple.createAdapter(this)), { isUnbounded: (/**
* @return {?}
*/
function () { return true; }) });
return new ripple$1.MdcRipple(this.elementRef, new ripple.MDCRippleFoundation(adapter));
};
/**
* @private
* @return {?}
*/
MdcIconButton.prototype._getHostElement = /**
* @private
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
MdcIconButton.decorators = [
{ type: core.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,
ripple$1.MdcRipple
],
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcIconButton.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef },
{ type: ripple$1.MdcRipple }
]; };
MdcIconButton.propDecorators = {
id: [{ type: core.Input }],
name: [{ type: core.Input }],
icon: [{ type: core.Input }],
on: [{ type: core.Input }],
disabled: [{ type: core.Input }],
change: [{ type: core.Output }],
icons: [{ type: core.ContentChildren, args: [icon.MdcIcon, { descendants: true },] }]
};
return MdcIconButton;
}(base.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: core.NgModule, args: [{
imports: [
common.CommonModule,
icon.MdcIconModule
],
exports: __spreadArrays(ICON_BUTTON_DECLARATIONS, [
icon.MdcIconModule
]),
declarations: ICON_BUTTON_DECLARATIONS
},] },
];
return MdcIconButtonModule;
}());
exports.MDC_ICON_BUTTON_CONTROL_VALUE_ACCESSOR = MDC_ICON_BUTTON_CONTROL_VALUE_ACCESSOR;
exports.MdcIconButton = MdcIconButton;
exports.MdcIconButtonChange = MdcIconButtonChange;
exports.MdcIconButtonModule = MdcIconButtonModule;
exports.MdcIconOn = MdcIconOn;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-icon-button.umd.js.map