import { directive , EventPart } from 'lit-html' ; type HTMLConrolElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement ; export const bind = directive ( ( handleEvent ) => ( part ) => { if ( ! ( part instanceof EventPart ) ) { throw new Error ( '"bind" directive can only be used in event listeners' ) ; } const el = part . element as HTMLConrolElement ; const isInput = el instanceof HTMLInputElement ; const isSelect = el instanceof HTMLSelectElement ; const isTextarea = el instanceof HTMLTextAreaElement ; const isButton = el instanceof HTMLButtonElement ; if ( ! isInput && ! isSelect && ! isTextarea && ! isButton ) { throw new Error ( '"bind" directive can only be applied to input/select/textarea/button elements.' ) ; } part . setValue ( function ( ... args ) { let value = el . defaultValue ; if ( isSelect && el . options . length > 0 ) { const i = el . selectedIndex >= 0 ? el . selectedIndex : 0 ; value = el . options [ i ] . value ; } else if ( isInput ) { switch ( el . type ) { case 'number' : case 'range' : value = el . valueAsNumber ; break ; case 'checkbox' : case 'radio' : value = ! ! el . checked ; break ; case 'time' : case 'date' : case 'datetime' : case 'datetime-local' : value = el . valueAsDate ; break ; default : value = el . value ; } } else { value = el . value ; } handleEvent . call ( this , value , ... args ) ; } ) ; } ) ;