src/lib/checkbox/checkbox.html

<label class="mat-checkbox-layout">
  <div class="mat-checkbox-inner-container">
    <input #input
           class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
           [id]="inputId"
           [required]="required"
           [checked]="checked"
           [disabled]="disabled"
           [name]="name"
           [tabIndex]="tabIndex"
           [indeterminate]="indeterminate"
           [attr.aria-label]="ariaLabel"
           [attr.aria-labelledby]="ariaLabelledby"
           (focus)="_onInputFocus()"
           (blur)="_onInputBlur()"
           (change)="_onInteractionEvent($event)"
           (click)="_onInputClick($event)">
    <div md-ripple *ngIf="!_isRippleDisabled()" class="mat-checkbox-ripple"
         [mdRippleTrigger]="_getHostElement()"
         [mdRippleCentered]="true"></div>
    <div class="mat-checkbox-frame"></div>
    <div class="mat-checkbox-background">
      <svg version="1.1"
           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">
    <ng-content></ng-content>
  </span>
</label>
feat(compatibility): remove conflicts with material1 css styling (#2790) * feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests 2017-02-08 11:24:31 -08:00			`<label class="mat-checkbox-layout">`
			`<div class="mat-checkbox-inner-container">`
Add focus to checkbox, radio, button-toggle and slide-toggle (#1775) 2016-11-30 17:07:34 -08:00			`<input #input`
feat(compatibility): remove conflicts with material1 css styling (#2790) * feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests 2017-02-08 11:24:31 -08:00			`class="mat-checkbox-input cdk-visually-hidden" type="checkbox"`
feat(checkbox): drive component with native checkbox (#415) Also fixes lack of visual focus state. closes #250 2016-05-13 12:04:39 -07:00			`[id]="inputId"`
fix(checkbox, slide-toggle): forward required attribute to input. (#1137) * fix(checkbox, slide-toggle): forward required attribute to input. * Now forwards the required attribute to the input. * This allows us to take advantage of the native browser behavior to prevent a form submission. Fixes #1133, * Fix linters * Fix Browserstack test for super old Safari browser. * Safari 8 does not report input validity in forms, so the tests fail for it.. * No longer use deep import of core 2016-09-24 00:43:20 +02:00			`[required]="required"`
feat(checkbox): drive component with native checkbox (#415) Also fixes lack of visual focus state. closes #250 2016-05-13 12:04:39 -07:00			`[checked]="checked"`
			`[disabled]="disabled"`
			`[name]="name"`
fix(checkbox): rename tabindex to tabIndex (#2953) * Renames the checkbox `tabindex` input to the `tabIndex` input. This is consistent with other API's like for the slide-toggle and also with native inputs. 2017-02-09 19:33:47 +01:00			`[tabIndex]="tabIndex"`
feat(checkbox): drive component with native checkbox (#415) Also fixes lack of visual focus state. closes #250 2016-05-13 12:04:39 -07:00			`[indeterminate]="indeterminate"`
			`[attr.aria-label]="ariaLabel"`
			`[attr.aria-labelledby]="ariaLabelledby"`
chore: remove all @internal to fix offline compile (#781) 2016-07-07 09:32:46 -07:00			`(focus)="_onInputFocus()"`
			`(blur)="_onInputBlur()"`
			`(change)="_onInteractionEvent($event)"`
			`(click)="_onInputClick($event)">`
feat(compatibility): remove conflicts with material1 css styling (#2790) * feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests 2017-02-08 11:24:31 -08:00			`<div md-ripple *ngIf="!_isRippleDisabled()" class="mat-checkbox-ripple"`
refactor: convert dash-case inputs to camelCase (#2244) * refactor: convert dash-case inputs to camelCase Converts any dash-cased `@Input` properties into camelCase and adds a deprecated proxy property with the old naming. The following properties have been renamed: * `md-ripple-trigger` * `md-ripple-centered` * `md-ripple-disabled` * `md-ripple-max-radius` * `md-ripple-speed-factor` * `md-ripple-color` * `md-ripple-background-color` * `md-ripple-focused` * `md-ripple-unbounded` * `thumb-label` * `tick-interval` * `md-dynamic-height` * `tooltip-position` The following properties were skipped: * `md-menu-trigger-for` - Is currently used also as a selector for the menu trigger. * Any properties that a native equivalent (e.g. `aria-label`, `aria-labeledby`). * Fix tabs CSS issue and switch mdDynamicHeight to dynamicHeight. * Rename [md-tooltip] to [mdTooltip]. * Rename md-menu-trigger-for to mdMenuTriggerFor. * Use public property for dynamic height binding. * Proper method name. * Fix isRoundButton naming. * make menu-trigger and md-tooltip backwards compatible 2016-12-17 02:53:38 +01:00			`[mdRippleTrigger]="_getHostElement()"`
fix(ripple): different durations for ripple elements (#3136) * No longer uses a `PX_PER_SECOND` variable to calculate the fade-in duration of a ripple element. * Now ripple elements always have the same `transitionDuration`, which ensures that ripples are faster on bigger elements and slower on smaller elements. Fixes #3109 2017-02-17 21:08:20 +01:00			`[mdRippleCentered]="true"></div>`
feat(compatibility): remove conflicts with material1 css styling (#2790) * feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests 2017-02-08 11:24:31 -08:00			`<div class="mat-checkbox-frame"></div>`
			`<div class="mat-checkbox-background">`
feat(md-checkbox): Implement md-checkbox. This commit adds the `md-checkbox` component to the material2 repo. It includes unit tests and demos for the component. Note that while there is a demo which exhibits all functionality of the component, the "Nested Checklist" demo is still a WIP. Fixes #35 Closes #131 2016-03-01 10:56:28 -05:00			`<svg version="1.1"`
feat(compatibility): remove conflicts with material1 css styling (#2790) * feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests 2017-02-08 11:24:31 -08:00			`class="mat-checkbox-checkmark"`
feat(md-checkbox): Implement md-checkbox. This commit adds the `md-checkbox` component to the material2 repo. It includes unit tests and demos for the component. Note that while there is a demo which exhibits all functionality of the component, the "Nested Checklist" demo is still a WIP. Fixes #35 Closes #131 2016-03-01 10:56:28 -05:00			`xmlns="http://www.w3.org/2000/svg"`
			`viewBox="0 0 24 24"`
			`xml:space="preserve">`
feat(compatibility): remove conflicts with material1 css styling (#2790) * feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests 2017-02-08 11:24:31 -08:00			`<path class="mat-checkbox-checkmark-path"`
feat(md-checkbox): Implement md-checkbox. This commit adds the `md-checkbox` component to the material2 repo. It includes unit tests and demos for the component. Note that while there is a demo which exhibits all functionality of the component, the "Nested Checklist" demo is still a WIP. Fixes #35 Closes #131 2016-03-01 10:56:28 -05:00			`fill="none"`
			`stroke="white"`
			`d="M4.1,12.7 9,17.6 20.3,6.3"/>`
			`</svg>`
			`<!-- Element for rendering the indeterminate state checkbox. -->`
feat(compatibility): remove conflicts with material1 css styling (#2790) * feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests 2017-02-08 11:24:31 -08:00			`<div class="mat-checkbox-mixedmark"></div>`
feat(md-checkbox): Implement md-checkbox. This commit adds the `md-checkbox` component to the material2 repo. It includes unit tests and demos for the component. Note that while there is a demo which exhibits all functionality of the component, the "Nested Checklist" demo is still a WIP. Fixes #35 Closes #131 2016-03-01 10:56:28 -05:00			`</div>`
			`</div>`
feat(compatibility): remove conflicts with material1 css styling (#2790) * feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests 2017-02-08 11:24:31 -08:00			`<span class="mat-checkbox-label">`
feat(md-checkbox): Implement md-checkbox. This commit adds the `md-checkbox` component to the material2 repo. It includes unit tests and demos for the component. Note that while there is a demo which exhibits all functionality of the component, the "Nested Checklist" demo is still a WIP. Fixes #35 Closes #131 2016-03-01 10:56:28 -05:00			`<ng-content></ng-content>`
feat(checkbox): drive component with native checkbox (#415) Also fixes lack of visual focus state. closes #250 2016-05-13 12:04:39 -07:00			`</span>`
			`</label>`