@angular-mdc/web
Version:
397 lines (392 loc) • 12.8 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 { Injectable, ElementRef, Optional, Directive, Input, NgModule } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { supportsPassiveEventListeners } from '@angular/cdk/platform';
import { matches } from '@angular-mdc/web/dom';
import { supportsCssVariables } from '@material/ripple/util';
import { MDCRippleFoundation } from '@material/ripple';
/**
* @fileoverview added by tsickle
* Generated from: ripple/ripple.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcRipple {
/**
* @param {?} element
* @param {?=} foundation
*/
constructor(element, foundation) {
this.element = element;
this.initialized = false;
this._foundation = foundation || new MDCRippleFoundation(MdcRipple.createAdapter((/** @type {?} */ ({
_root: element.nativeElement
}))));
}
/**
* @param {?} instance
* @return {?}
*/
static createAdapter(instance) {
/** @type {?} */
const adapter = {
addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => instance._root.classList.add(className)),
removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => instance._root.classList.remove(className)),
browserSupportsCssVars: (/**
* @return {?}
*/
() => typeof window !== 'undefined' ? supportsCssVariables(window) : false),
isUnbounded: (/**
* @return {?}
*/
() => coerceBooleanProperty(instance.unbounded)),
isSurfaceActive: (/**
* @return {?}
*/
() => matches(instance._root, ':active')),
isSurfaceDisabled: (/**
* @return {?}
*/
() => coerceBooleanProperty(instance.disabled)),
containsEventTarget: (/**
* @param {?} target
* @return {?}
*/
(target) => instance._root.contains((/** @type {?} */ (target)))),
registerDocumentInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
(evtType, handler) => typeof document === 'object' && !!document ?
(/** @type {?} */ (document.documentElement)).addEventListener(evtType, handler, supportsPassiveEventListeners()) : {}),
deregisterDocumentInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
(evtType, handler) => typeof document === 'object' && !!document ?
(/** @type {?} */ (document.documentElement)).removeEventListener(evtType, handler, supportsPassiveEventListeners()) : {}),
registerResizeHandler: (/**
* @param {?} handler
* @return {?}
*/
(handler) => typeof window !== 'undefined' ?
window.addEventListener('resize', handler) : {}),
deregisterResizeHandler: (/**
* @param {?} handler
* @return {?}
*/
(handler) => typeof window !== 'undefined' ?
window.removeEventListener('resize', handler) : {}),
updateCssVariable: (/**
* @param {?} varName
* @param {?} value
* @return {?}
*/
(varName, value) => ((/** @type {?} */ (instance._root))).style.setProperty(varName, value)),
computeBoundingRect: (/**
* @return {?}
*/
() => typeof document === 'object' && !!document ?
instance._root.getBoundingClientRect() : ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 })),
getWindowPageOffset: (/**
* @return {?}
*/
() => typeof window !== 'undefined' ?
({ x: window.pageXOffset, y: window.pageYOffset }) : ({ x: 0, y: 0 })),
registerInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
(evtType, handler) => ((/** @type {?} */ (instance._root))).addEventListener(evtType, handler, supportsPassiveEventListeners())),
deregisterInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
(evtType, handler) => ((/** @type {?} */ (instance._root))).removeEventListener(evtType, handler, supportsPassiveEventListeners()))
};
return adapter;
}
/**
* @return {?}
*/
init() {
if (!this.initialized) {
this._foundation.init();
this.initialized = true;
}
}
/**
* @return {?}
*/
destroy() {
if (this.initialized) {
this.initialized = false;
this._foundation.destroy();
}
}
/**
* @return {?}
*/
layout() {
this._foundation.layout();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy();
}
/**
* @param {?=} event
* @return {?}
*/
activateRipple(event) {
setTimeout((/**
* @return {?}
*/
() => (/** @type {?} */ (this._foundation)).activate(event)));
}
/**
* @return {?}
*/
deactivateRipple() {
setTimeout((/**
* @return {?}
*/
() => (/** @type {?} */ (this._foundation)).deactivate()));
}
/**
* @return {?}
*/
handleBlur() {
this._foundation.handleBlur();
}
}
MdcRipple.decorators = [
{ type: Injectable },
];
/** @nocollapse */
MdcRipple.ctorParameters = () => [
{ type: ElementRef },
{ type: MDCRippleFoundation, decorators: [{ type: Optional }] }
];
/**
* @fileoverview added by tsickle
* Generated from: ripple/ripple.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcRippleDirective {
/**
* @param {?} _ripple
* @param {?} elementRef
*/
constructor(_ripple, elementRef) {
this._ripple = _ripple;
this.elementRef = elementRef;
this._primary = false;
this._secondary = false;
this._disabled = false;
this._unbounded = false;
this._root = this.elementRef.nativeElement;
this._ripple = this._createRipple();
}
/**
* @return {?}
*/
get attachTo() {
return this._attachTo;
}
/**
* @param {?} element
* @return {?}
*/
set attachTo(element) {
var _a, _b;
this._attachTo = element;
(_b = (_a = this._attachTo) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('mdc-ripple-surface');
}
/**
* @return {?}
*/
get primary() {
return this._primary;
}
/**
* @param {?} value
* @return {?}
*/
set primary(value) {
this._primary = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get secondary() {
return this._secondary;
}
/**
* @param {?} value
* @return {?}
*/
set secondary(value) {
this._secondary = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get disabled() {
return this._disabled;
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get unbounded() {
return this._unbounded;
}
/**
* @param {?} value
* @return {?}
*/
set unbounded(value) {
this._unbounded = coerceBooleanProperty(value);
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes['primary'] && this.attachTo) {
if (this._primary) {
this.attachTo.classList.add('mdc-ripple-surface--primary');
}
else {
this.attachTo.classList.remove('mdc-ripple-surface--primary');
}
}
if (changes['secondary'] && this.attachTo) {
if (this._secondary) {
this.attachTo.classList.add('mdc-ripple-surface--accent');
}
else {
this.attachTo.classList.remove('mdc-ripple-surface--accent');
}
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
this._ripple.init();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._ripple.destroy();
}
/**
* @private
* @return {?}
*/
_createRipple() {
/** @type {?} */
const adapter = Object.assign(Object.assign({}, MdcRipple.createAdapter(this)), { addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => { var _a, _b; return (_b = (_a = this.attachTo) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(className); }), computeBoundingRect: (/**
* @return {?}
*/
() => { var _a, _b; return _b = (_a = this.attachTo) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), (_b !== null && _b !== void 0 ? _b : ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 })); }), isSurfaceActive: (/**
* @return {?}
*/
() => matches(this.attachTo, ':active')), isSurfaceDisabled: (/**
* @return {?}
*/
() => this._disabled), isUnbounded: (/**
* @return {?}
*/
() => this._unbounded), removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => { var _a, _b; return (_b = (_a = this.attachTo) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(className); }), updateCssVariable: (/**
* @param {?} varName
* @param {?} value
* @return {?}
*/
(varName, value) => { var _a, _b; return (_b = (_a = this.attachTo) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.setProperty(varName, value); }), registerInteractionHandler: (/**
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
(evtType, handler) => { var _a; return (_a = this.attachTo) === null || _a === void 0 ? void 0 : _a.addEventListener(evtType, handler, supportsPassiveEventListeners()); }), deregisterInteractionHandler: (/**
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
(evtType, handler) => { var _a; return (_a = this.attachTo) === null || _a === void 0 ? void 0 : _a.removeEventListener(evtType, handler, supportsPassiveEventListeners()); }) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
}
}
MdcRippleDirective.decorators = [
{ type: Directive, args: [{
selector: '[mdcRipple], mdc-ripple',
providers: [MdcRipple],
},] },
];
/** @nocollapse */
MdcRippleDirective.ctorParameters = () => [
{ type: MdcRipple },
{ type: ElementRef }
];
MdcRippleDirective.propDecorators = {
attachTo: [{ type: Input }],
primary: [{ type: Input }],
secondary: [{ type: Input }],
disabled: [{ type: Input }],
unbounded: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* Generated from: ripple/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcRippleModule {
}
MdcRippleModule.decorators = [
{ type: NgModule, args: [{
exports: [MdcRippleDirective],
declarations: [MdcRippleDirective]
},] },
];
export { MdcRipple, MdcRippleDirective, MdcRippleModule };
//# sourceMappingURL=ripple.js.map