1 |
57298
|
argiro.kok
|
import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
|
2 |
|
|
|
3 |
|
|
|
4 |
|
|
@Component({
|
5 |
|
|
selector: 'font-size',
|
6 |
|
|
template: `
|
7 |
|
|
<div class="uk-grid uk-margin-remove">
|
8 |
|
|
<div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Font:</div>
|
9 |
|
|
<div class="uk-width-2-3 uk-padding-remove-left">
|
10 |
|
|
<!-- <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="font" (ngModelChange)="fontChanged()"/>-->
|
11 |
|
|
<select [(ngModel)]="font" name="{{'select_type_'}}"
|
12 |
|
|
class="uk-select uk-width-small" (ngModelChange)="fontChanged()">
|
13 |
|
|
<option [value]="'Open Sans'" >Open Sans</option>
|
14 |
|
|
<option [value]="'Heebo'" >Heebo</option>
|
15 |
|
|
<option [value]="'Heebo'" >Sura</option>
|
16 |
|
|
<option [value]="'sans-serif'" >sans-serif</option>
|
17 |
|
|
<option [value]="'serif'" >serif</option>
|
18 |
|
|
<option [value]="'Times New Roman'" >Times New Roman</option>
|
19 |
|
|
</select>
|
20 |
|
|
</div>
|
21 |
|
|
</div>
|
22 |
|
|
<div class="uk-grid uk-margin-remove">
|
23 |
|
|
<div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Size:</div>
|
24 |
|
|
<div class="uk-width-2-3 uk-padding-remove-left">
|
25 |
|
|
<input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="size" (ngModelChange)="fontChanged()" type="number" min="6" max="100"/>
|
26 |
|
|
</div>
|
27 |
|
|
</div>
|
28 |
|
|
<div class="uk-grid uk-margin-remove">
|
29 |
|
|
<div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Weight:</div>
|
30 |
|
|
<div class="uk-width-2-3 uk-padding-remove-left">
|
31 |
|
|
<input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="weight" (ngModelChange)="fontChanged()" type="number" min="400" max="1000" step="100"/>
|
32 |
|
|
</div>
|
33 |
|
|
</div>
|
34 |
|
|
|
35 |
|
|
`
|
36 |
|
|
})
|
37 |
|
|
|
38 |
|
|
export class FontSizeComponent implements OnInit {
|
39 |
|
|
@Input() font="";
|
40 |
|
|
@Input() size:number;
|
41 |
|
|
@Input() weight:number;
|
42 |
|
|
@Output() fontChange = new EventEmitter();
|
43 |
|
|
|
44 |
|
|
|
45 |
|
|
constructor( ) {
|
46 |
|
|
}
|
47 |
|
|
|
48 |
|
|
|
49 |
|
|
ngOnInit() {
|
50 |
|
|
|
51 |
|
|
|
52 |
|
|
}
|
53 |
|
|
|
54 |
|
|
fontChanged() {
|
55 |
|
|
console.log({font:this.font, size:this.size, weight:this.weight});
|
56 |
|
|
this.fontChange.emit({font:this.font, size:this.size, weight:this.weight});
|
57 |
|
|
}
|
58 |
|
|
|
59 |
|
|
|
60 |
|
|
}
|