<commit_before>import {
	AfterViewInit,
	AfterContentInit,
	Component,
	ElementRef,
	Input,
	OnDestroy,
	HostBinding,
	Renderer2,
	ViewEncapsulation
} from '@angular/core';

import { Ripple } from '../ripple';

const MDC_FAB_STYLES = require('@material/fab/mdc-fab.scss');

@Component({
	selector: 'mdc-fab',
	styles: [String(MDC_FAB_STYLES)],
	template: '<ng-content></ng-content>',
	encapsulation: ViewEncapsulation.None
})
export class FabComponent implements AfterViewInit, OnDestroy {
	@Input() mini: boolean;
	@Input() plain: boolean;
	@HostBinding('class') className: string = 'mdc-fab';
	@HostBinding('class.material-icons') classMaterialIcons: string = 'material-icons';
	@HostBinding('class.mdc-fab--mini') get classMini(): string {
		return this.mini ? 'mdc-fab--mini' : '';
	}
	@HostBinding('class.mdc-fab--plain') get classPlain(): string {
		return this.plain ? 'mdc-fab--plain' : '';
	}
	@HostBinding('tabindex') tabindex: number = 0;

	private _ripple: Ripple;

	constructor(private _renderer: Renderer2, private _root: ElementRef) { }

	ngAfterViewInit() {
		this._ripple = new Ripple(this._renderer, this._root);
		this._ripple.rippleFoundation.init();
	}
	ngOnDestroy() {
		this._ripple.rippleFoundation.destroy();
	}
}<commit_msg>feat(button): Change ripple on button to a provider. Show ripple on keyboard up and down events.<commit_after>import {
	AfterViewInit,
	AfterContentInit,
	Component,
	ElementRef,
	Input,
	OnDestroy,
	HostBinding,
	Renderer2,
	ViewEncapsulation
} from '@angular/core';

import { Ripple } from '.././ripple/ripple';

const MDC_FAB_STYLES = require('@material/fab/mdc-fab.scss');

@Component({
	selector: 'mdc-fab',
	styles: [String(MDC_FAB_STYLES)],
	template: '<ng-content></ng-content>',
	encapsulation: ViewEncapsulation.None,
	providers: [Ripple]
})
export class FabComponent implements AfterViewInit, OnDestroy {
	@Input() mini: boolean;
	@Input() plain: boolean;
	@HostBinding('class') className: string = 'mdc-fab';
	@HostBinding('class.material-icons') classMaterialIcons: string = 'material-icons';
	@HostBinding('class.mdc-fab--mini') get classMini(): string {
		return this.mini ? 'mdc-fab--mini' : '';
	}
	@HostBinding('class.mdc-fab--plain') get classPlain(): string {
		return this.plain ? 'mdc-fab--plain' : '';
	}
	@HostBinding('tabindex') tabindex: number = 0;

	constructor(private _renderer: Renderer2, private _root: ElementRef, private _ripple: Ripple) { }

	ngAfterViewInit() {
		this._root.nativeElement.addEventListener('keydown', evt => this.handleKeyboardDown_(evt));
		this._root.nativeElement.addEventListener('keyup', evt => this.handleKeyboardUp_(evt));
	}
	ngOnDestroy() {
		this._root.nativeElement.removeEventListener('keydown', evt => this.handleKeyboardDown_(evt));
		this._root.nativeElement.removeEventListener('keyup', evt => this.handleKeyboardUp_(evt));
	}

	handleKeyboardDown_(evt: KeyboardEvent) {
		const { keyCode, key } = evt;
		const isSpace = key === 'Space' || keyCode === 32;

		if (isSpace) {
			this._ripple.active = true;
			evt.preventDefault();
		}
	}

	handleKeyboardUp_(evt) {
		const { keyCode, key } = evt;
		const isSpace = key === 'Space' || keyCode === 32;

		if (isSpace) {
			this._ripple.active = false;
			evt.preventDefault();
		}
	}
}
{'fraction_non_alphanumeric': 0.15723076923076923, 'fraction_numerical': 0.003076923076923077, 'mean_word_length': 5.12241054613936, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '891690', 'n_tokens_mistral': 1169, 'n_tokens_neox': 1124, 'n_words': 222}