license import { MDCComponent } from '@material/base/component' ; import { MDCFloatingLabelFoundation } from '@material/floating-label/foundation' ; import { MDCNotchedOutlineAdapter } from './adapter' ; import { cssClasses , strings } from './constants' ; import { MDCNotchedOutlineFoundation } from './foundation' ; export type MDCNotchedOutlineFactory = ( el : Element , foundation ? : MDCNotchedOutlineFoundation ) => MDCNotchedOutline ; export class MDCNotchedOutline extends MDCComponent < MDCNotchedOutlineFoundation > { static override attachTo ( root ) { return new MDCNotchedOutline ( root ) ; } private notchElement ! : HTMLElement ; override initialSyncWithDOM ( ) { this . notchElement = this . root . querySelector < HTMLElement > ( strings . NOTCH_ELEMENT_SELECTOR ) ! ; const label = this . root . querySelector < HTMLElement > ( '.' + MDCFloatingLabelFoundation . cssClasses . ROOT ) ; if ( label ) { label . style . transitionDuration = '0s' ; this . root . classList . add ( cssClasses . OUTLINE_UPGRADED ) ; requestAnimationFrame ( ( ) => { label . style . transitionDuration = '' ; } ) ; } else { this . root . classList . add ( cssClasses . NO_LABEL ) ; } } param notchWidth notch ( notchWidth ) { this . foundation . notch ( notchWidth ) ; } /**
     * Updates classes and styles to close the notch.
     */ closeNotch ( ) { this . foundation . closeNotch ( ) ; } override getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => this . root . classList . add ( className ) , removeClass : ( className ) => this . root . classList . remove ( className ) , setNotchWidthProperty : ( width ) => { this . notchElement . style . setProperty ( 'width' , width + 'px' ) ; } , removeNotchWidthProperty : ( ) => { this . notchElement . style . removeProperty ( 'width' ) ; } , } ; return new MDCNotchedOutlineFoundation ( adapter ) ; } }