import { inject , customElement , useView , PLATFORM , ViewCompiler , ViewResources , processContent , View } from 'aurelia-framework' ; import { bindable } from 'aurelia-typed-observable-plugin' ; import { MdcComponent } from '@aurelia-mdc-web/base' ; import { MdcChipAction , IMdcChipActionElement } from '../mdc-chip-action/mdc-chip-action' ; import { MDCChipFoundation } from '@material/chips/chip/foundation' ; import { MDCChipEvents , MDCChipAdapter , MDCChipActionType , MDCChipActionFocusBehavior , MDCChipAnimation } from '@material/chips' ; import { ActionInteractionEvent , ActionNavigationEvent } from '@material/chips/chip/types' ; ( MDCChipEvents as Record < string , string > ) . INTERACTION = MDCChipEvents . INTERACTION . toLowerCase ( ) ; ( MDCChipEvents as Record < string , string > ) . ANIMATION = MDCChipEvents . ANIMATION . toLowerCase ( ) ; ( MDCChipEvents as Record < string , string > ) . NAVIGATION = MDCChipEvents . NAVIGATION . toLowerCase ( ) ; let chipId = 0 ; selector emits emits emits @ inject ( Element ) @ useView ( PLATFORM . moduleName ( './mdc-chip.html' ) ) @ customElement ( 'mdc-chip' ) @ processContent ( MdcChip . processContent ) export class MdcChip extends MdcComponent < MDCChipFoundation > { constructor ( root ) { super ( root ) ; defineMdcChipElementApis ( this . root ) ; this . root . id = `mdc-chip-${ ++ chipId }` ; } static processContent ( _viewCompiler , _resources , element ) { const primaryAction = element . querySelector ( '[mdc-chip-action]:not([trailing])' ) ; primaryAction ?. setAttribute ( 'slot' , 'primary-action' ) ; const trailingAction = element . querySelector ( '[mdc-chip-action][trailing]' ) ; trailingAction ?. setAttribute ( 'slot' , trailingAction . hasAttribute ( 'non-navigable' ) ? 'non-navigable-trailing-action' : 'trailing-action' ) ; return true ; } _selected : boolean ; return get selected ( ) : boolean { return this . foundation ?. isActionSelected ( MDCChipActionType . PRIMARY ) ?? this . _selected ; } /** Sets selected state on the chip. */ set selected ( selected ) { this . _selected = selected ; this . foundation ?. setActionSelected ( MDCChipActionType . PRIMARY , selected ) ; } /** Marks the chip as disabled. */ @ bindable . booleanAttr disabled : boolean ; /** Marks the chip as a filter chip. */ @ bindable . booleanAttr filter : boolean ; filterChanged ( ) { if ( this . filter ) { this . root . setAttribute ( 'role' , 'presentation' ) ; } else { this . root . setAttribute ( 'role' , 'row' ) ; } } @ bindable icon : string ; actions : Map < MDCChipActionType , MdcChipAction > ; async initialise ( ) { this . actions = new Map ( ) ; const primaryAction = this . root . querySelector < IMdcChipActionElement > ( '[mdc-chip-action]:not([trailing])' ) ?. au . controller . viewModel ; this . actions . set ( MDCChipActionType . PRIMARY , primaryAction ! ) ; const trailingAction = this . root . querySelector < IMdcChipActionElement > ( '[mdc-chip-action][trailing]' ) ?. au . controller . viewModel ; if ( trailingAction ) { this . actions . set ( MDCChipActionType . TRAILING , trailingAction ) ; } } initialSyncWithDOM ( ) { if ( this . _selected !== undefined ) { this . selected = this . _selected ; } } /** Set focus to the chip. */ focus ( ) { this . root . focus ( ) ; } 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 . root . id , getOffsetWidth : ( ) => { return this . root . offsetWidth ; } , hasClass : ( className ) => this . root . classList . contains ( className ) , isActionSelectable : ( actionType ) => { const action = this . actions . get ( actionType ) ; if ( action ) { return action . selectable ; } return false ; } , isActionSelected : ( actionType ) => { const action = this . actions . get ( actionType ) ; if ( action ) { return action . selected ; } 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 . disabled ; } 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 . disabled = 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 ) { if ( action . selected !== isSelected ) { action . selected = isSelected ; } } } , setStyleProperty : ( prop , value ) => { this . root . style . setProperty ( prop , value ) ; } , } ; return new MDCChipFoundation ( adapter ) ; } handleActionInteraction ( event ) { this . foundation ?. handleActionInteraction ( event ) ; this . emit ( 'change' , { } , true ) ; } handleActionNavigation ( event ) { this . foundation ?. handleActionNavigation ( event ) ; } handleAnimationEnd ( event ) { this . foundation ?. handleAnimationEnd ( event ) ; } handleTransitionEnd ( ) { this . foundation ?. handleTransitionEnd ( ) ; } getActions ( ) { return this . foundation ?. getActions ( ) ?? [ ] ; } getElementID ( ) { return this . foundation ?. getElementID ( ) ?? '' ; } isActionFocusable ( action ) { return this . foundation ! . isActionFocusable ( action ) ; } isActionSelectable ( action ) { return this . foundation ! . isActionSelectable ( action ) ; } isActionSelected ( action ) { return this . foundation ! . isActionSelected ( action ) ; } setActionFocus ( action , focus ) { this . foundation ! . setActionFocus ( action , focus ) ; } setActionSelected ( action , isSelected ) { this . foundation ! . setActionSelected ( action , isSelected ) ; } startAnimation ( animation ) { this . foundation ! . startAnimation ( animation ) ; } remove ( ) { const parent = this . root . parentNode ; if ( parent !== null ) { parent . removeChild ( this . root ) ; } } } hidden export interface IMdcChipElement extends HTMLElement { au : { controller : { view : View ; viewModel : MdcChip ; } ; } ; } function defineMdcChipElementApis ( element ) { Object . defineProperties ( element , { type : { value : 'checkbox' , } , checked : { get ( this ) { return this . au . controller . viewModel . selected ; } , set ( this , value ) { this . au . controller . viewModel . selected = value ; } , configurable : true } , focus : { value ( this ) { this . au . controller . viewModel . focus ( ) ; } , configurable : true } } ) ; }