import { MDCSegmentedButtonSegmentAdapter , MDCSegmentedButtonSegmentFoundation , SegmentDetail } from '@material/segmented-button' ; import { events } from '@material/segmented-button/segment/constants' ; import { inject , useView , PLATFORM , customElement } from 'aurelia-framework' ; import { bindable } from 'aurelia-typed-observable-plugin' ; import { MdcComponent } from '@aurelia-mdc-web/base' ; selector @ inject ( Element ) @ useView ( PLATFORM . moduleName ( './mdc-segmented-button-segment.html' ) ) @ customElement ( 'mdc-segmented-button-segment' ) export class MdcSegmentedButtonSegment extends MdcComponent < MDCSegmentedButtonSegmentFoundation > { constructor ( root ) { super ( root ) ; defineMdcSegmentedButtonSegmentElementApis ( root ) ; } private isSingleSelect : boolean ; private index : number ; /** Indicates the segment has touch target support */ @ bindable . booleanAttr touch : boolean ; /** Sets an icon in the segment */ @ bindable icon : string ; private _checked ? : boolean ; /** Use to verify the checked value */ get checked ( ) : boolean { if ( this . foundation ) { return this . foundation ?. isSelected ( ) ; } else { return this . _checked ?? false ; } } /**
     * Whether the segment is checked.
     */ set checked ( value ) { this . _checked = value ; if ( value ) { this . foundation ?. setSelected ( ) ; } else { this . foundation ?. setUnselected ( ) ; } } handleClick ( ) { this . foundation ?. handleClick ( ) ; } async initialise ( ) { if ( this . root . hasAttribute ( 'checked' ) ) { const attributeValue = this . root . getAttribute ( 'checked' ) ; if ( attributeValue || attributeValue === '' ) { ( this . root as IMdcSegmentedButtonSegmentElement ) . checked = true ; } } } initialSyncWithDOM ( ) { if ( this . _checked !== undefined ) { this . checked = this . _checked ; } } getDefaultFoundation ( ) { const adapter = { isSingleSelect : ( ) => { return this . isSingleSelect ; } , getAttr : ( attrName ) => { return this . root . getAttribute ( attrName ) ; } , setAttr : ( attrName , value ) => { this . root . setAttribute ( attrName , value ) ; } , addClass : ( className ) => { this . root . classList . add ( className ) ; } , removeClass : ( className ) => { this . root . classList . remove ( className ) ; } , hasClass : ( className ) => { return this . root . classList . contains ( className ) ; } , notifySelectedChange : selected => this . notifySelectedChange ( events . SELECTED , selected ) , getRootBoundingClientRect : ( ) => { return this . root . getBoundingClientRect ( ) ; } } ; return new MDCSegmentedButtonSegmentFoundation ( adapter ) ; } notifySelectedChange ( event , selected ) { this . emit < SegmentDetail > ( event , { index : this . index , selected , segmentId : this . getSegmentId ( ) } , true ) ; } setIsSingleSelect ( isSingleSelect ) { this . isSingleSelect = isSingleSelect ; this . root . setAttribute ( 'role' , isSingleSelect ? 'radio' : '' ) ; } hidden param index setIndex ( index ) { this . index = index ; } hidden return getSegmentId ( ) { return this . foundation ?. getSegmentId ( ) ; } } hidden export interface IMdcSegmentedButtonSegmentElement extends HTMLElement { checked : boolean ; au : { controller : { viewModel : MdcSegmentedButtonSegment ; } ; } ; } function defineMdcSegmentedButtonSegmentElementApis ( element ) { Object . defineProperties ( element , { type : { value : 'checkbox' } , checked : { get ( this ) { return this . au . controller . viewModel . checked ; } , set ( this , value ) { this . au . controller . viewModel . checked = value ; } , configurable : true } } ) ; }