import { useView , inject , PLATFORM , customElement , children , View } from 'aurelia-framework' ; import { bindable } from 'aurelia-typed-observable-plugin' ; import { MDCChipSetFoundation , MDCChipSetAdapter , MDCChipSetEvents } from '@material/chips' ; import { announce } from '@material/dom/announce' ; import { MdcComponent } from '@aurelia-mdc-web/base' ; import { MdcChip } from '../mdc-chip/mdc-chip' ; import { ChipAnimationEvent , ChipInteractionEvent , ChipNavigationEvent } from '@material/chips/chip-set/types' ; ( MDCChipSetEvents as Record < string , string > ) . INTERACTION = MDCChipSetEvents . INTERACTION . toLowerCase ( ) ; ( MDCChipSetEvents as Record < string , string > ) . REMOVAL = MDCChipSetEvents . REMOVAL . toLowerCase ( ) ; ( MDCChipSetEvents as Record < string , string > ) . SELECTION = MDCChipSetEvents . SELECTION . toLowerCase ( ) ; let chipSetId = 0 ; @ inject ( Element ) @ useView ( PLATFORM . moduleName ( './mdc-chip-set.html' ) ) @ customElement ( 'mdc-chip-set' ) export class MdcChipSet extends MdcComponent < MDCChipSetFoundation > { id : string = `mdc-chip-set-${ ++ chipSetId }` ; /**
     * Causes the chips to overflow instead of wrap (their default behavior).
     */ @ bindable . booleanAttr overflow : boolean ; @ children ( 'mdc-chip' ) chips : MdcChip [ ] ; handleChipInteraction ( event ) { this . foundation ?. handleChipInteraction ( event ) ; } handleChipAnimation ( event ) { this . foundation ?. handleChipAnimation ( event ) ; } handleChipNavigation ( event ) { this . foundation ?. handleChipNavigation ( event ) ; } 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 ) ; } private isIndexValid ( index ) { return index > - 1 && index < this . chips . length ; } } hidden export interface IMdcChipSetElement extends HTMLElement { au : { controller : { view : View ; viewModel : MdcChipSet ; } ; } ; }