license import { MDCComponent } from '@material/base/component' ; import { CustomEventListener } from '@material/base/types' ; import { announce } from '@material/dom/announce' ; import { MDCChipActionType } from '../action/constants' ; import { MDCChip , MDCChipFactory } from '../chip/component' ; import { MDCChipEvents } from '../chip/constants' ; import { MDCChipSetAdapter } from './adapter' ; import { MDCChipSetCssClasses } from './constants' ; import { MDCChipSetFoundation } from './foundation' ; import { ChipAnimationEvent , ChipInteractionEvent , ChipNavigationEvent } from './types' ; /**
 * MDCChip provides component encapsulation of the foundation implementation.
 */ export class MDCChipSet extends MDCComponent < MDCChipSetFoundation > { static override attachTo ( root ) { return new MDCChipSet ( root ) ; } private handleChipAnimation ! : CustomEventListener < ChipAnimationEvent > ; private handleChipInteraction ! : CustomEventListener < ChipInteractionEvent > ; private handleChipNavigation ! : CustomEventListener < ChipNavigationEvent > ; private chips ! : MDCChip [ ] ; override initialize ( chipFactory = ( el ) => new MDCChip ( el ) ) { this . chips = [ ] ; const chipEls = this . root . querySelectorAll ( `.${ MDCChipSetCssClasses . CHIP }` ) ; for ( let i = 0 ; i < chipEls . length ; i ++ ) { const chip = chipFactory ( chipEls [ i ] ) ; this . chips . push ( chip ) ; } } override initialSyncWithDOM ( ) { this . handleChipAnimation = ( event ) => { this . foundation . handleChipAnimation ( event ) ; } ; this . handleChipInteraction = ( event ) => { this . foundation . handleChipInteraction ( event ) ; } ; this . handleChipNavigation = ( event ) => { this . foundation . handleChipNavigation ( event ) ; } ; this . listen ( MDCChipEvents . ANIMATION , this . handleChipAnimation ) ; this . listen ( MDCChipEvents . INTERACTION , this . handleChipInteraction ) ; this . listen ( MDCChipEvents . NAVIGATION , this . handleChipNavigation ) ; } override destroy ( ) { this . unlisten ( MDCChipEvents . ANIMATION , this . handleChipAnimation ) ; this . unlisten ( MDCChipEvents . INTERACTION , this . handleChipInteraction ) ; this . unlisten ( MDCChipEvents . NAVIGATION , this . handleChipNavigation ) ; super . destroy ( ) ; } override getDefaultFoundation ( ) { const adapter = { announceMessage : ( message ) => { announce ( message ) ; } , emitEvent : ( eventName , eventDetail ) => { this . emit ( eventName , eventDetail , true ) ; } , getAttribute : ( attrName ) => this . root . getAttribute ( attrName ) , getChipActionsAtIndex : ( index ) => { if ( ! this . isIndexValid ( index ) ) return [ ] ; return this . chips [ index ] . getActions ( ) ; } , getChipCount : ( ) => this . chips . length , getChipIdAtIndex : ( index ) => { if ( ! this . isIndexValid ( index ) ) return '' ; return this . chips [ index ] . getElementID ( ) ; } , getChipIndexById : ( id ) => this . chips . findIndex ( ( chip ) => chip . getElementID ( ) === id ) , isChipFocusableAtIndex : ( index , action ) => { if ( ! this . isIndexValid ( index ) ) return false ; return this . chips [ index ] . isActionFocusable ( action ) ; } , isChipSelectableAtIndex : ( index , action ) => { if ( ! this . isIndexValid ( index ) ) return false ; return this . chips [ index ] . isActionSelectable ( action ) ; } , isChipSelectedAtIndex : ( index , action ) => { if ( ! this . isIndexValid ( index ) ) return false ; return this . chips [ index ] . isActionSelected ( action ) ; } , removeChipAtIndex : ( index ) => { if ( ! this . isIndexValid ( index ) ) return ; this . chips [ index ] . destroy ( ) ; this . chips [ index ] . remove ( ) ; this . chips . splice ( index , 1 ) ; } , setChipFocusAtIndex : ( index , action , focus ) => { if ( ! this . isIndexValid ( index ) ) return ; this . chips [ index ] . setActionFocus ( action , focus ) ; } , setChipSelectedAtIndex : ( index , action , selected ) => { if ( ! this . isIndexValid ( index ) ) return ; this . chips [ index ] . setActionSelected ( action , selected ) ; } , startChipAnimationAtIndex : ( index , animation ) => { if ( ! this . isIndexValid ( index ) ) return ; this . chips [ index ] . startAnimation ( animation ) ; } , } ; return new MDCChipSetFoundation ( adapter ) ; } /** Returns the index of the chip with the given ID or -1 if none exists. */ getChipIndexByID ( chipID ) { return this . chips . findIndex ( ( chip ) => chip . getElementID ( ) === chipID ) ; } /**
     * Returns the ID of the chip at the given index or an empty string if the
     * index is out of bounds.
     */ getChipIdAtIndex ( index ) { if ( ! this . isIndexValid ( index ) ) return '' ; return this . chips [ index ] . getElementID ( ) ; } /** Returns the unique indexes of the selected chips. */ getSelectedChipIndexes ( ) { return this . foundation . getSelectedChipIndexes ( ) ; } /** Sets the selection state of the chip. */ setChipSelected ( index , action , isSelected ) { this . foundation . setChipSelected ( index , action , isSelected ) ; } /** Returns the selection state of the chip. */ isChipSelected ( index , action ) { return this . foundation . isChipSelected ( index , action ) ; } /** Animates the chip addition at the given index. */ addChip ( index ) { this . foundation . addChip ( index ) ; } /** Removes the chip at the given index. */ removeChip ( index ) { this . foundation . removeChip ( index ) ; } private isIndexValid ( index ) { return index > - 1 && index < this . chips . length ; } }