-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
checkbox.html
44 lines (44 loc) · 1.74 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
<label [attr.for]="inputId" class="mat-checkbox-layout" #label>
<div class="mat-checkbox-inner-container"
[class.mat-checkbox-inner-container-no-side-margin]="!checkboxLabel.textContent || !checkboxLabel.textContent.trim()">
<input #input
class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
[id]="inputId"
[required]="required"
[checked]="checked"
[value]="value"
[disabled]="disabled"
[name]="name"
[tabIndex]="tabIndex"
[indeterminate]="indeterminate"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledby]="ariaLabelledby"
(change)="_onInteractionEvent($event)"
(click)="_onInputClick($event)">
<div md-ripple class="mat-checkbox-ripple"
[mdRippleTrigger]="label"
[mdRippleDisabled]="_isRippleDisabled()"
[mdRippleCentered]="true"></div>
<div class="mat-checkbox-frame"></div>
<div class="mat-checkbox-background">
<svg version="1.1"
focusable="false"
class="mat-checkbox-checkmark"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
xml:space="preserve">
<path class="mat-checkbox-checkmark-path"
fill="none"
stroke="white"
d="M4.1,12.7 9,17.6 20.3,6.3"/>
</svg>
<!-- Element for rendering the indeterminate state checkbox. -->
<div class="mat-checkbox-mixedmark"></div>
</div>
</div>
<span class="mat-checkbox-label" #checkboxLabel (cdkObserveContent)="_onLabelTextChange()">
<!-- Add an invisible span so JAWS can read the label -->
<span style="display:none"> </span>
<ng-content></ng-content>
</span>
</label>