import { MdcComponent } from '@aurelia-mdc-web/base' ; import { MDCNotchedOutlineFoundation , MDCNotchedOutlineAdapter , cssClasses } from '@material/notched-outline' ; import { MDCFloatingLabelFoundation } from '@material/floating-label' ; import { inject , customElement , useView , PLATFORM , child } from 'aurelia-framework' ; import { MdcFloatingLabel } from '@aurelia-mdc-web/floating-label' ; @ inject ( Element ) @ useView ( PLATFORM . moduleName ( './mdc-notched-outline.html' ) ) @ customElement ( 'mdc-notched-outline' ) export class MdcNotchedOutline extends MdcComponent < MDCNotchedOutlineFoundation > { private notchElement_ ! : HTMLElement ; @ child ( `.${ MDCFloatingLabelFoundation . cssClasses . ROOT }` ) label : MdcFloatingLabel ; labelChanged ( ) { if ( this . label ) { this . label . root . style . transitionDuration = '0s' ; this . root . classList . add ( cssClasses . OUTLINE_UPGRADED ) ; requestAnimationFrame ( ( ) => { this . label . root . style . transitionDuration = '' ; } ) ; } } param notchWidth notch ( notchWidth ) { this . foundation ?. notch ( notchWidth ) ; } /**
     * Updates classes and styles to close the notch.
     */ closeNotch ( ) { this . foundation ?. closeNotch ( ) ; } 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 ) ; } }