license import { MDCFloatingLabelAdapter } from '@material/floating-label/adapter' ; import { MDCFloatingLabelFoundation } from '@material/floating-label/foundation' ; import { AttributePart , directive , Directive , DirectiveParameters , PartInfo , PartType } from 'lit/directive.js' ; export interface FloatingLabel extends HTMLLabelElement { floatingLabelFoundation : MDCFloatingLabelFoundation ; } const createAdapter = ( labelElement ) : MDCFloatingLabelAdapter => { return { addClass : ( className ) => labelElement . classList . add ( className ) , removeClass : ( className ) => labelElement . classList . remove ( className ) , getWidth : ( ) => labelElement . scrollWidth , registerInteractionHandler : ( evtType , handler ) => { labelElement . addEventListener ( evtType , handler ) ; } , deregisterInteractionHandler : ( evtType , handler ) => { labelElement . removeEventListener ( evtType , handler ) ; } , } ; } ; class FloatingLabelDirective extends Directive { private foundation : MDCFloatingLabelFoundation | null = null ; private previousPart : AttributePart | null = null ; constructor ( partInfo ) { super ( partInfo ) ; switch ( partInfo . type ) { case PartType . ATTRIBUTE : case PartType . PROPERTY : break ; default : throw new Error ( 'FloatingLabel directive only support attribute and property parts' ) ; } } /**
     * There is no PropertyPart in Lit 2 so far. For more info see:
     * https://github.com/lit/lit/issues/1863
     */ override update ( part , [ label ] ) { if ( part !== this . previousPart ) { if ( this . foundation ) { this . foundation . destroy ( ) ; } this . previousPart = part ; const labelElement = part . element as FloatingLabel ; labelElement . classList . add ( 'mdc-floating-label' ) ; const adapter = createAdapter ( labelElement ) ; this . foundation = new MDCFloatingLabelFoundation ( adapter ) ; this . foundation . init ( ) ; } return this . render ( label ) ; } render ( _label ) { return this . foundation ; } } export const floatingLabel = directive ( FloatingLabelDirective ) ;