<commit_before>import {Component} from 'angular2/core';
import {SvgIconComponent} from './svg-icon.component';

@Component({
	selector: 'demo-app',
	directives: [ SvgIconComponent ],
	template: `
		<div style="width:100px;">
			<svg-icon src="images/eye.svg" style="fill:red;"></svg-icon>
			<svg-icon src="images/eye.svg" style="fill:green;"></svg-icon>
			<svg-icon src="images/eye.svg" style="fill:blue;"></svg-icon>
		</div>
	`
})

export class DemoAppComponent { <commit_msg>Made demo interactive<commit_after>import {Component} from 'angular2/core';
import {SvgIconComponent} from './svg-icon.component';

@Component({
	selector: 'demo-app',
	directives: [ SvgIconComponent ],
	template: `
		<div style="margin:15px;">
			<div style="width:500px;">
				<div style="width:100px;float:left;">
					<svg-icon src="images/eye.svg" style="fill:red;"></svg-icon>
				</div>
				<div style="width:100px;float:left;margin-left:20px;">
					<svg-icon src="images/eye.svg" style="fill:green;"></svg-icon>
				</div>
				<div style="width:100px;float:left;margin-left:20px;">
					<svg-icon src="images/eye.svg" style="fill:blue;"></svg-icon>
				</div>
			</div>

			<form style="clear:both;">
				<h2>Set the style</h2>
				<fieldset style="border:none;">
					<label>red:</label> <input type="number" min="0" max="255" [(ngModel)]="r">
					<label>green:</label> <input type="number" min="0" max="255" [(ngModel)]="g">
					<label>blue:</label> <input type="number" min="0" max="255" [(ngModel)]="b">
				</fieldset>
				<label>width:</label> <input type="number" min="0" max="1000" [(ngModel)]="w"><label> px</label>
			</form>
			<div [style]="getStyle()">
				<svg-icon src="images/eye.svg"></svg-icon>
			</div>
			<tt>&lt;div style="{{getStyle()}}"&gt;<br/>
				&nbsp;&nbsp;&nbsp;&lt;svg-icon src="images/eye.svg"&gt;&lt;/svg-icon&gt;<br/>
				&lt;/div&gt;
			</tt>
		</div>
		
	`
})

export class DemoAppComponent { 
	private r:number = 120;
	private g:number = 120;
	private b:number = 120;
	private w:number = 75;

	getStyle(): string {
		return 'width:' + this.w + 'px;fill:rgb(' + this.r + ',' + this.g + ',' + this.b + ');';
	}
{'fraction_non_alphanumeric': 0.23174157303370788, 'fraction_numerical': 0.024812734082397005, 'mean_word_length': 4.43765903307888, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, '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': '6782101', 'n_tokens_mistral': 946, 'n_tokens_neox': 794, 'n_words': 138}