54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
<div mat-internal-form-field [labelPosition]="labelPosition" (click)="_preventBubblingFromLabel($event)">
|
|
<div #checkbox class="mdc-checkbox">
|
|
<!-- Render this element first so the input is on top. -->
|
|
<div class="mat-mdc-checkbox-touch-target" (click)="_onTouchTargetClick()"></div>
|
|
<input #input
|
|
type="checkbox"
|
|
class="mdc-checkbox__native-control"
|
|
[class.mdc-checkbox--selected]="checked"
|
|
[attr.aria-label]="ariaLabel || null"
|
|
[attr.aria-labelledby]="ariaLabelledby"
|
|
[attr.aria-describedby]="ariaDescribedby"
|
|
[attr.aria-checked]="indeterminate ? 'mixed' : null"
|
|
[attr.aria-controls]="ariaControls"
|
|
[attr.aria-disabled]="disabled && disabledInteractive ? true : null"
|
|
[attr.aria-expanded]="ariaExpanded"
|
|
[attr.aria-owns]="ariaOwns"
|
|
[attr.name]="name"
|
|
[attr.value]="value"
|
|
[checked]="checked"
|
|
[indeterminate]="indeterminate"
|
|
[disabled]="disabled && !disabledInteractive"
|
|
[id]="inputId"
|
|
[required]="required"
|
|
[tabIndex]="disabled && !disabledInteractive ? -1 : tabIndex"
|
|
(blur)="_onBlur()"
|
|
(click)="_onInputClick()"
|
|
(change)="_onInteractionEvent($event)"/>
|
|
<div class="mdc-checkbox__ripple"></div>
|
|
<div class="mdc-checkbox__background">
|
|
<svg class="mdc-checkbox__checkmark"
|
|
focusable="false"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true">
|
|
<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-focus-indicator" mat-ripple
|
|
[matRippleTrigger]="checkbox"
|
|
[matRippleDisabled]="disableRipple || disabled"
|
|
[matRippleCentered]="true"></div>
|
|
</div>
|
|
<!--
|
|
Avoid putting a click handler on the <label/> to fix duplicate navigation stop on Talk Back
|
|
(#14385). Putting a click handler on the <label/> caused this bug because the browser produced
|
|
an unnecessary accessibility tree node.
|
|
-->
|
|
<label class="mdc-label" #label [for]="inputId">
|
|
<ng-content></ng-content>
|
|
</label>
|
|
</div>
|