license import { MDCComponent } from '@material/base/component' ; import { CustomEventListener } from '@material/base/types' ; import { MDCChipAction , MDCChipActionFactory } from '../action/component' ; import { MDCChipActionEvents , MDCChipActionFocusBehavior , MDCChipActionType } from '../action/constants' ; import { MDCChipAdapter } from './adapter' ; import { MDCChipAnimation } from './constants' ; import { MDCChipFoundation } from './foundation' ; import { ActionInteractionEvent , ActionNavigationEvent } from './types' ; /**
 * MDCChipFactory is used by the parent MDCChipSet component to initialize
 * chips.
 */ export type MDCChipFactory = ( el : Element , foundation ? : MDCChipFoundation ) => MDCChip ; /**
 * MDCChip provides component encapsulation of the foundation implementation.
 */ export class MDCChip extends MDCComponent < MDCChipFoundation > { static override attachTo ( root ) { return new MDCChip ( root ) ; } private readonly rootHTML = this . root as HTMLElement ; private handleActionInteraction ! : CustomEventListener < ActionInteractionEvent > ; private handleActionNavigation ! : CustomEventListener < ActionNavigationEvent > ; private actions ! : Map < MDCChipActionType , MDCChipAction > ; override initialize ( actionFactory = ( el ) => new MDCChipAction ( el ) ) { this . actions = new Map ( ) ; const actionEls = this . root . querySelectorAll ( '.mdc-evolution-chip__action' ) ; for ( let i = 0 ; i < actionEls . length ; i ++ ) { const action = actionFactory ( actionEls [ i ] ) ; this . actions . set ( action . actionType ( ) , action ) ; } } override initialSyncWithDOM ( ) { this . handleActionInteraction = ( event ) => { this . foundation . handleActionInteraction ( event ) ; } ; this . handleActionNavigation = ( event ) => { this . foundation . handleActionNavigation ( event ) ; } ; this . listen ( MDCChipActionEvents . INTERACTION , this . handleActionInteraction ) ; this . listen ( MDCChipActionEvents . NAVIGATION , this . handleActionNavigation ) ; } override destroy ( ) { this . unlisten ( MDCChipActionEvents . INTERACTION , this . handleActionInteraction ) ; this . unlisten ( MDCChipActionEvents . NAVIGATION , this . handleActionNavigation ) ; super . destroy ( ) ; } override getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => { this . root . classList . add ( className ) ; } , emitEvent : ( eventName , eventDetail ) => { this . emit ( eventName , eventDetail , true ) ; } , getActions : ( ) => { const actions = [ ] ; for ( const [ key ] of this . actions ) { actions . push ( key ) ; } return actions ; } , getAttribute : ( attrName ) => this . root . getAttribute ( attrName ) , getElementID : ( ) => this . rootHTML . id , getOffsetWidth : ( ) => { return this . rootHTML . offsetWidth ; } , hasClass : ( className ) => this . root . classList . contains ( className ) , isActionSelectable : ( actionType ) => { const action = this . actions . get ( actionType ) ; if ( action ) { return action . isSelectable ( ) ; } return false ; } , isActionSelected : ( actionType ) => { const action = this . actions . get ( actionType ) ; if ( action ) { return action . isSelected ( ) ; } return false ; } , isActionFocusable : ( actionType ) => { const action = this . actions . get ( actionType ) ; if ( action ) { return action . isFocusable ( ) ; } return false ; } , isActionDisabled : ( actionType ) => { const action = this . actions . get ( actionType ) ; if ( action ) { return action . isDisabled ( ) ; } return false ; } , isRTL : ( ) => window . getComputedStyle ( this . root ) . getPropertyValue ( 'direction' ) === 'rtl' , removeClass : ( className ) => { this . root . classList . remove ( className ) ; } , setActionDisabled : ( actionType , isDisabled ) => { const action = this . actions . get ( actionType ) ; if ( action ) { action . setDisabled ( isDisabled ) ; } } , setActionFocus : ( actionType , behavior ) => { const action = this . actions . get ( actionType ) ; if ( action ) { action . setFocus ( behavior ) ; } } , setActionSelected : ( actionType , isSelected ) => { const action = this . actions . get ( actionType ) ; if ( action ) { action . setSelected ( isSelected ) ; } } , setStyleProperty : ( prop , value ) => { this . rootHTML . style . setProperty ( prop , value ) ; } , } ; return new MDCChipFoundation ( adapter ) ; } /** Exposed to be called by the parent chip set. */ remove ( ) { const parent = this . root . parentNode ; if ( parent !== null ) { parent . removeChild ( this . root ) ; } } /** Returns the MDCChipActionTypes for the encapsulated actions. */ getActions ( ) { return this . foundation . getActions ( ) ; } /** Returns the ID of the root element. */ getElementID ( ) { return this . foundation . getElementID ( ) ; } isDisabled ( ) { return this . foundation . isDisabled ( ) ; } setDisabled ( isDisabled ) { this . foundation . setDisabled ( isDisabled ) ; } /** Returns the focusability of the action. */ isActionFocusable ( action ) { return this . foundation . isActionFocusable ( action ) ; } /** Returns the selectability of the action. */ isActionSelectable ( action ) { return this . foundation . isActionSelectable ( action ) ; } /** Returns the selected state of the action. */ isActionSelected ( action ) { return this . foundation . isActionSelected ( action ) ; } /** Sets the focus behavior of the action. */ setActionFocus ( action , focus ) { this . foundation . setActionFocus ( action , focus ) ; } /** Sets the selected state of the action. */ setActionSelected ( action , isSelected ) { this . foundation . setActionSelected ( action , isSelected ) ; } /** Starts the animation on the chip. */ startAnimation ( animation ) { this . foundation . startAnimation ( animation ) ; } }