license import { MDCComponent } from '@material/base/component' ; import { EventType , SpecificEventListener } from '@material/base/types' ; import { applyPassive } from '@material/dom/events' ; import { matches } from '@material/dom/ponyfill' ; import { MDCRippleAdapter } from '@material/ripple/adapter' ; import { MDCRipple } from '@material/ripple/component' ; import { MDCRippleFoundation } from '@material/ripple/foundation' ; import { MDCRippleCapableSurface } from '@material/ripple/types' ; import { MDCSwitchAdapter } from './adapter' ; import { MDCSwitchFoundation } from './foundation' ; export class MDCSwitch extends MDCComponent < MDCSwitchFoundation > implements MDCRippleCapableSurface { static override attachTo ( root ) { return new MDCSwitch ( root ) ; } private readonly rippleSurface = this . createRipple ( ) ; private changeHandler ! : EventListener ; override destroy ( ) { super . destroy ( ) ; this . rippleSurface . destroy ( ) ; this . nativeControl . removeEventListener ( 'change' , this . changeHandler ) ; } override initialSyncWithDOM ( ) { this . changeHandler = ( ... args ) => { this . foundation . handleChange ( ... args ) ; } ; this . nativeControl . addEventListener ( 'change' , this . changeHandler ) ; this . checked = this . checked ; } override getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => this . root . classList . add ( className ) , removeClass : ( className ) => this . root . classList . remove ( className ) , setNativeControlChecked : ( checked ) => this . nativeControl . checked = checked , setNativeControlDisabled : ( disabled ) => this . nativeControl . disabled = disabled , setNativeControlAttr : ( attr , value ) => { this . nativeControl . setAttribute ( attr , value ) ; } , } ; return new MDCSwitchFoundation ( adapter ) ; } get ripple ( ) { return this . rippleSurface ; } get checked ( ) { return this . nativeControl . checked ; } set checked ( checked ) { this . foundation . setChecked ( checked ) ; } get disabled ( ) { return this . nativeControl . disabled ; } set disabled ( disabled ) { this . foundation . setDisabled ( disabled ) ; } private createRipple ( ) { const { RIPPLE_SURFACE_SELECTOR } = MDCSwitchFoundation . strings ; const rippleSurface = this . root . querySelector ( RIPPLE_SURFACE_SELECTOR ) as HTMLElement ; const adapter = { ... MDCRipple . createAdapter ( this ) , addClass : ( className ) => rippleSurface . classList . add ( className ) , computeBoundingRect : ( ) => rippleSurface . getBoundingClientRect ( ) , deregisterInteractionHandler : < K extends EventType > ( evtType , handler ) => { this . nativeControl . removeEventListener ( evtType , handler , applyPassive ( ) ) ; } , isSurfaceActive : ( ) => matches ( this . nativeControl , ':active' ) , isUnbounded : ( ) => true , registerInteractionHandler : < K extends EventType > ( evtType , handler ) => { this . nativeControl . addEventListener ( evtType , handler , applyPassive ( ) ) ; } , removeClass : ( className ) => { rippleSurface . classList . remove ( className ) ; } , updateCssVariable : ( varName , value ) => { rippleSurface . style . setProperty ( varName , value ) ; } , } ; return new MDCRipple ( this . root , new MDCRippleFoundation ( adapter ) ) ; } private get nativeControl ( ) { const { NATIVE_CONTROL_SELECTOR } = MDCSwitchFoundation . strings ; return this . root . querySelector ( NATIVE_CONTROL_SELECTOR ) as HTMLInputElement ; } }