license import { MDCComponent } from '@material/base/component' ; import { CustomEventListener , SpecificEventListener } from '@material/base/types' ; import { MDCRippleAdapter } from '@material/ripple/adapter' ; import { MDCRipple , MDCRippleFactory } from '@material/ripple/component' ; import { MDCRippleFoundation } from '@material/ripple/foundation' ; import { MDCRippleCapableSurface } from '@material/ripple/types' ; import { MDCChipTrailingAction , MDCChipTrailingActionFactory } from '../trailingaction/component' ; import { strings as trailingActionStrings } from '../trailingaction/constants' ; import { MDCChipTrailingActionInteractionEvent , MDCChipTrailingActionNavigationEvent } from '../trailingaction/types' ; import { MDCChipAdapter } from './adapter' ; import { strings } from './constants' ; import { MDCChipFoundation } from './foundation' ; import { MDCChipInteractionEventDetail , MDCChipNavigationEventDetail , MDCChipRemovalEventDetail , MDCChipSelectionEventDetail } from './types' ; export type MDCChipFactory = ( el : Element , foundation ? : MDCChipFoundation ) => MDCChip ; export class MDCChip extends MDCComponent < MDCChipFoundation > implements MDCRippleCapableSurface { return get selected ( ) : boolean { return this . foundation . isSelected ( ) ; } /**
     * Sets selected state on the chip.
     */ set selected ( selected ) { this . foundation . setSelected ( selected ) ; } return get shouldRemoveOnTrailingIconClick ( ) : boolean { return this . foundation . getShouldRemoveOnTrailingIconClick ( ) ; } /**
     * Sets whether a trailing icon click should trigger exit/removal of the chip.
     */ set shouldRemoveOnTrailingIconClick ( shouldRemove ) { this . foundation . setShouldRemoveOnTrailingIconClick ( shouldRemove ) ; } /**
     * Sets whether a clicking on the chip should focus the primary action.
     */ set setShouldFocusPrimaryActionOnClick ( shouldFocus ) { this . foundation . setShouldFocusPrimaryActionOnClick ( shouldFocus ) ; } get ripple ( ) : MDCRipple { return this . rippleSurface ; } get id ( ) : string { return this . root . id ; } static override attachTo ( root ) { return new MDCChip ( root ) ; } private leadingIcon ! : Element | null ; private checkmark ! : Element | null ; private primaryAction ! : Element | null ; private trailingAction ! : MDCChipTrailingAction | null ; private rippleSurface ! : MDCRipple ; private handleTrailingActionInteraction ! : CustomEventListener < MDCChipTrailingActionInteractionEvent > ; private handleTrailingActionNavigation ! : CustomEventListener < MDCChipTrailingActionNavigationEvent > ; private handleTransitionEnd ! : SpecificEventListener < 'transitionend' > ; private handleClick ! : SpecificEventListener < 'click' > ; private handleKeydown ! : SpecificEventListener < 'keydown' > ; private handleFocusIn ! : SpecificEventListener < 'focusin' > ; private handleFocusOut ! : SpecificEventListener < 'focusout' > ; override initialize ( rippleFactory = ( el , foundation ) => new MDCRipple ( el , foundation ) , trailingActionFactory = ( el ) => new MDCChipTrailingAction ( el ) ) { this . leadingIcon = this . root . querySelector ( strings . LEADING_ICON_SELECTOR ) ; this . checkmark = this . root . querySelector ( strings . CHECKMARK_SELECTOR ) ; this . primaryAction = this . root . querySelector ( strings . PRIMARY_ACTION_SELECTOR ) ; const trailingActionEl = this . root . querySelector ( strings . TRAILING_ACTION_SELECTOR ) ; if ( trailingActionEl ) { this . trailingAction = trailingActionFactory ( trailingActionEl ) ; } const rippleAdapter = { ... MDCRipple . createAdapter ( this ) , computeBoundingRect : ( ) => this . foundation . getDimensions ( ) , } ; this . rippleSurface = rippleFactory ( this . root , new MDCRippleFoundation ( rippleAdapter ) ) ; } override initialSyncWithDOM ( ) { this . handleTrailingActionInteraction = ( ) => { this . foundation . handleTrailingActionInteraction ( ) ; } ; this . handleTrailingActionNavigation = ( evt ) => { this . foundation . handleTrailingActionNavigation ( evt ) ; } ; this . handleClick = ( ) => { this . foundation . handleClick ( ) ; } ; this . handleKeydown = ( evt ) => { this . foundation . handleKeydown ( evt ) ; } ; this . handleTransitionEnd = ( evt ) => { this . foundation . handleTransitionEnd ( evt ) ; } ; this . handleFocusIn = ( evt ) => { this . foundation . handleFocusIn ( evt ) ; } ; this . handleFocusOut = ( evt ) => { this . foundation . handleFocusOut ( evt ) ; } ; this . listen ( 'transitionend' , this . handleTransitionEnd ) ; this . listen ( 'click' , this . handleClick ) ; this . listen ( 'keydown' , this . handleKeydown ) ; this . listen ( 'focusin' , this . handleFocusIn ) ; this . listen ( 'focusout' , this . handleFocusOut ) ; if ( this . trailingAction ) { this . listen ( trailingActionStrings . INTERACTION_EVENT , this . handleTrailingActionInteraction ) ; this . listen ( trailingActionStrings . NAVIGATION_EVENT , this . handleTrailingActionNavigation ) ; } } override destroy ( ) { this . rippleSurface . destroy ( ) ; this . unlisten ( 'transitionend' , this . handleTransitionEnd ) ; this . unlisten ( 'keydown' , this . handleKeydown ) ; this . unlisten ( 'click' , this . handleClick ) ; this . unlisten ( 'focusin' , this . handleFocusIn ) ; this . unlisten ( 'focusout' , this . handleFocusOut ) ; if ( this . trailingAction ) { this . unlisten ( trailingActionStrings . INTERACTION_EVENT , this . handleTrailingActionInteraction ) ; this . unlisten ( trailingActionStrings . NAVIGATION_EVENT , this . handleTrailingActionNavigation ) ; } super . destroy ( ) ; } /**
     * Begins the exit animation which leads to removal of the chip.
     */ beginExit ( ) { this . foundation . beginExit ( ) ; } override getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => this . root . classList . add ( className ) , addClassToLeadingIcon : ( className ) => { if ( this . leadingIcon ) { this . leadingIcon . classList . add ( className ) ; } } , eventTargetHasClass : ( target , className ) => target ? ( target as Element ) . classList . contains ( className ) : false , focusPrimaryAction : ( ) => { if ( this . primaryAction ) { ( this . primaryAction as HTMLElement ) . focus ( ) ; } } , focusTrailingAction : ( ) => { if ( this . trailingAction ) { this . trailingAction . focus ( ) ; } } , getAttribute : ( attr ) => this . root . getAttribute ( attr ) , getCheckmarkBoundingClientRect : ( ) => this . checkmark ? this . checkmark . getBoundingClientRect ( ) : null , getComputedStyleValue : ( propertyName ) => window . getComputedStyle ( this . root ) . getPropertyValue ( propertyName ) , getRootBoundingClientRect : ( ) => this . root . getBoundingClientRect ( ) , hasClass : ( className ) => this . root . classList . contains ( className ) , hasLeadingIcon : ( ) => ! ! this . leadingIcon , isRTL : ( ) => window . getComputedStyle ( this . root ) . getPropertyValue ( 'direction' ) === 'rtl' , isTrailingActionNavigable : ( ) => { if ( this . trailingAction ) { return this . trailingAction . isNavigable ( ) ; } return false ; } , notifyInteraction : ( ) => this . emit < MDCChipInteractionEventDetail > ( strings . INTERACTION_EVENT , { chipId : this . id } , true ) , notifyNavigation : ( key , source ) => this . emit < MDCChipNavigationEventDetail > ( strings . NAVIGATION_EVENT , { chipId : this . id , key , source } , true ) , notifyRemoval : ( removedAnnouncement ) => { this . emit < MDCChipRemovalEventDetail > ( strings . REMOVAL_EVENT , { chipId : this . id , removedAnnouncement } , true ) ; } , notifySelection : ( selected , shouldIgnore ) => this . emit < MDCChipSelectionEventDetail > ( strings . SELECTION_EVENT , { chipId : this . id , selected , shouldIgnore } , true ) , notifyTrailingIconInteraction : ( ) => this . emit < MDCChipInteractionEventDetail > ( strings . TRAILING_ICON_INTERACTION_EVENT , { chipId : this . id } , true ) , notifyEditStart : ( ) => { } , notifyEditFinish : ( ) => { } , removeClass : ( className ) => this . root . classList . remove ( className ) , removeClassFromLeadingIcon : ( className ) => { if ( this . leadingIcon ) { this . leadingIcon . classList . remove ( className ) ; } } , removeTrailingActionFocus : ( ) => { if ( this . trailingAction ) { this . trailingAction . removeFocus ( ) ; } } , setPrimaryActionAttr : ( attr , value ) => { if ( this . primaryAction ) { this . primaryAction . setAttribute ( attr , value ) ; } } , setStyleProperty : ( propertyName , value ) => ( this . root as HTMLElement ) . style . setProperty ( propertyName , value ) , } ; return new MDCChipFoundation ( adapter ) ; } setSelectedFromChipSet ( selected , shouldNotifyClients ) { this . foundation . setSelectedFromChipSet ( selected , shouldNotifyClients ) ; } focusPrimaryAction ( ) { this . foundation . focusPrimaryAction ( ) ; } focusTrailingAction ( ) { this . foundation . focusTrailingAction ( ) ; } removeFocus ( ) { this . foundation . removeFocus ( ) ; } remove ( ) { const parent = this . root . parentNode ; if ( parent !== null ) { parent . removeChild ( this . root ) ; } } }