/
checkbox.html
45 lines (45 loc) · 1.64 KB
/
checkbox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="mdc-form-field"
[class.mdc-form-field--align-end]="labelPosition == 'before'">
<div #checkbox class="mdc-checkbox">
<!-- Render this element first so the input is on top. -->
<div class="mat-mdc-checkbox-touch-target" (click)="_onClick()"></div>
<input #nativeCheckbox
type="checkbox"
[ngClass]="_classes"
[attr.aria-checked]="_getAriaChecked()"
[attr.aria-label]="ariaLabel || null"
[attr.aria-labelledby]="ariaLabelledby"
[attr.aria-describedby]="ariaDescribedby"
[attr.name]="name"
[attr.value]="value"
[checked]="checked"
[disabled]="disabled"
[id]="inputId"
[required]="required"
[tabIndex]="tabIndex"
(blur)="_onBlur()"
(click)="_onClick()"
(change)="$event.stopPropagation()"/>
<div class="mdc-checkbox__ripple"></div>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
focusable="false"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mat-mdc-checkbox-ripple mat-mdc-focus-indicator" mat-ripple
[matRippleTrigger]="checkbox"
[matRippleDisabled]="disableRipple || disabled"
[matRippleCentered]="true"
[matRippleAnimation]="_rippleAnimation"></div>
</div>
<label #label
[for]="inputId"
(click)="$event.stopPropagation()">
<ng-content></ng-content>
</label>
</div>