import { MdcComponent } from '@aurelia-mdc-web/base' ; import { MDCCheckboxFoundation , MDCCheckboxAdapter } from '@material/checkbox' ; import { bindable } from 'aurelia-typed-observable-plugin' ; import { getCorrectEventName } from '@material/animation/util' ; import { inject , useView , PLATFORM , customElement , bindingMode } from 'aurelia-framework' ; let checkboxId = 0 ; selector emits @ inject ( Element ) @ useView ( PLATFORM . moduleName ( './mdc-checkbox.html' ) ) @ customElement ( 'mdc-checkbox' ) export class MdcCheckbox extends MdcComponent < MDCCheckboxFoundation > { constructor ( root ) { super ( root ) ; defineMdcCheckboxElementApis ( this . root ) ; } nativeControl_ : HTMLInputElement ; id = `mdc-checkbox-${ ++ checkboxId }-input` ; /**
     * Disables the component.
     */ @ bindable . booleanAttr disabled : boolean ; async disabledChanged ( ) { await this . initialised ; if ( this . nativeControl_ ) { this . nativeControl_ . disabled = this . disabled ; } } /**
     * Set the component touch target to 48 x 48 px.
     */ @ bindable . booleanAttr touch : boolean ; /**
     * Whether ripple ink is disabled.
     */ @ bindable . booleanAttr disableRipple : boolean ; /**
     * Whether the checkbox should go to checked state or unchecked when toggled from indeterminate state.
     */ @ bindable . booleanAttr indeterminateToChecked : boolean = true ; _checked ? : boolean ; get checked ( ) : boolean { if ( this . nativeControl_ ) { return this . nativeControl_ . checked ; } else { return this . _checked ?? false ; } } /**
     * Whether the checkbox is checked.
     */ set checked ( checked ) { this . _checked = checked ; if ( this . nativeControl_ ) { this . nativeControl_ . checked = checked ; } } /**
     * Represent a checkbox with three states (e.g. a nested list of checkable items).
     */ @ bindable . booleanAttr ( { defaultBindingMode : bindingMode . twoWay } ) indeterminate : boolean ; async indeterminateChanged ( ) { await this . initialised ; if ( this . nativeControl_ ) { this . nativeControl_ . indeterminate = this . indeterminate ; } this . foundation ?. handleChange ( ) ; } get value ( ) : string { return this . nativeControl_ . value ; } set value ( value ) { this . nativeControl_ . value = value ; } async initialise ( ) { this . listen ( getCorrectEventName ( window , 'animationend' ) , this . handleAnimationEnd_ ) ; if ( this . root . hasAttribute ( 'checked' ) ) { const attributeValue = this . root . getAttribute ( 'checked' ) ; if ( attributeValue || attributeValue === '' ) { ( this . root as IMdcCheckboxElement ) . checked = true ; } } if ( this . root . hasAttribute ( 'indeterminate' ) ) { const attributeValue = this . root . getAttribute ( 'indeterminate' ) ; if ( attributeValue || attributeValue === '' ) { ( this . root as IMdcCheckboxElement ) . indeterminate = true ; } } } initialSyncWithDOM ( ) { if ( this . _checked !== undefined ) { this . checked = this . _checked ; } } destroy ( ) { this . unlisten ( getCorrectEventName ( window , 'animationend' ) , this . handleAnimationEnd_ ) ; this . _checked = undefined ; } handleChange_ ( ) { if ( this . indeterminate ) { this . indeterminate = false ; this . checked = this . indeterminateToChecked ; } this . foundation ?. handleChange ( ) ; } handleAnimationEnd_ ( ) { this . foundation ?. handleAnimationEnd ( ) ; } getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => this . root . classList . add ( className ) , forceLayout : ( ) => ( this . root ) . offsetWidth , hasNativeControl : ( ) => ! ! this . nativeControl_ , isAttachedToDOM : ( ) => Boolean ( this . root . parentNode ) , isChecked : ( ) => this . checked , isIndeterminate : ( ) => this . indeterminate , removeClass : ( className ) => { this . root . classList . remove ( className ) ; } , removeNativeControlAttr : ( attr ) => { this . nativeControl_ . removeAttribute ( attr ) ; } , setNativeControlAttr : ( attr , value ) => { this . nativeControl_ . setAttribute ( attr , value ) ; } , setNativeControlDisabled : ( disabled ) => { this . nativeControl_ . disabled = disabled ; } , } ; return new MDCCheckboxFoundation ( adapter ) ; } /**
     * Set focus to the checkbox.
     */ focus ( ) { this . nativeControl_ . focus ( ) ; } /**
     * Moves focus from the checkbox.
     */ blur ( ) { this . nativeControl_ . blur ( ) ; } } hidden export interface IMdcCheckboxElement extends HTMLElement { checked : boolean ; indeterminate : boolean ; au : { controller : { viewModel : MdcCheckbox ; } ; } ; } function defineMdcCheckboxElementApis ( element ) { Object . defineProperties ( element , { type : { value : 'checkbox' , } , checked : { get ( this ) { return this . au . controller . viewModel . checked ; } , set ( this , value ) { this . au . controller . viewModel . checked = value ; } , configurable : true } , focus : { value ( this ) { this . au . controller . viewModel . focus ( ) ; } , configurable : true } , blur : { value ( this ) { this . au . controller . viewModel . blur ( ) ; } , configurable : true } } ) ; }