import { createElement , remove } from '@syncfusion/ej2-base' ; import { Pager } from './pager' ; import { DropDownList , ChangeEventArgs } from '@syncfusion/ej2-dropdowns' ; hidden export interface IPager { newProp : { value : number | string | boolean ; } ; } /**
 * `PagerDropDown` module handles selected pageSize from DropDownList.
 */ export class PagerDropDown { private pagerCons : HTMLElement ; private dropDownListObject : DropDownList ; private pagerDropDownDiv : HTMLElement ; private pagerModule : Pager ; hidden constructor ( pagerModule ? ) { this . pagerModule = pagerModule ; } private hidden protected getModuleName ( ) { return 'pagerdropdown' ; } hidden public render ( ) { let pagerObj = this . pagerModule ; this . pagerDropDownDiv = createElement ( 'div' , { className : 'e-pagesizes' } ) ; let dropDownDiv = createElement ( 'div' , { className : 'e-pagerdropdown' } ) ; let defaultTextDiv = createElement ( 'div' , { className : 'e-pagerconstant' } ) ; let input = createElement ( 'input' , { attrs : { type : 'text' , tabindex : '1' } } ) ; this . pagerCons = createElement ( 'span' , { className : 'e-constant' , innerHTML : this . pagerModule . getLocalizedLabel ( 'pagerDropDown' ) } ) ; dropDownDiv . appendChild ( input ) ; defaultTextDiv . appendChild ( this . pagerCons ) ; this . pagerDropDownDiv . appendChild ( dropDownDiv ) ; this . pagerDropDownDiv . appendChild ( defaultTextDiv ) ; this . pagerModule . element . appendChild ( this . pagerDropDownDiv ) ; let pageSizesModule = this . pagerModule . pageSizes ; let pageSizesArray = ( ( < string [ ] > pageSizesModule ) . length ? this . convertValue ( pageSizesModule as string [ ] ) : [ this . pagerModule . getLocalizedLabel ( 'All' ) , '5' , '10' , '12' , '20' ] ) as string [ ] ; let defaultValue = this . pagerModule . pageSize ; this . dropDownListObject = new DropDownList ( { dataSource : pageSizesArray , value : defaultValue . toString ( ) as string , change : this . onChange . bind ( this ) , cssClass : 'e-alldrop' } ) ; this . dropDownListObject . appendTo ( input ) ; if ( ( < string [ ] > pageSizesModule ) . length ) { ( < HTMLInputElement > this . dropDownListObject . element ) . value = this . pagerModule . pageSize . toString ( ) ; } pagerObj . pageSize = defaultValue as number ; pagerObj . dataBind ( ) ; pagerObj . trigger ( 'dropDownChanged' , { pageSize : defaultValue } ) ; this . addEventListener ( ) ; } private hidden private onChange ( e ) { if ( this . dropDownListObject . value === this . pagerModule . getLocalizedLabel ( 'All' ) ) { this . pagerModule . pageSize = this . pagerModule . totalRecordsCount ; this . pagerCons . innerHTML = this . pagerModule . getLocalizedLabel ( 'pagerAllDropDown' ) ; e . value = this . pagerModule . pageSize ; if ( document . getElementsByClassName ( 'e-popup-open e-alldrop' ) . length ) { ( < HTMLElement > document . getElementsByClassName ( 'e-popup-open e-alldrop' ) [ 0 ] ) . style . display = 'none' ; } } else { this . pagerModule . pageSize = parseInt ( this . dropDownListObject . value as string , 10 ) ; if ( this . pagerCons . innerHTML !== this . pagerModule . getLocalizedLabel ( 'pagerDropDown' ) ) { this . pagerCons . innerHTML = this . pagerModule . getLocalizedLabel ( 'pagerDropDown' ) ; } } this . pagerModule . dataBind ( ) ; this . pagerModule . trigger ( 'dropDownChanged' , { pageSize : this . dropDownListObject . value } ) ; } private beforeValueChange ( prop ) { if ( typeof prop . newProp . value === 'number' ) { let val = prop . newProp . value . toString ( ) ; prop . newProp . value = val ; } } private convertValue ( pageSizeValue ) { let item = pageSizeValue ; for ( let i = 0 ; i < item . length ; i ++ ) { item [ i ] = typeof item [ i ] === 'number' ? item [ i ] . toString ( ) : item [ i ] ; } return item as string [ ] ; } public setDropDownValue ( prop , value ) { if ( this . dropDownListObject ) { this . dropDownListObject [ prop ] = value ; } } public addEventListener ( ) { this . dropDownListObject . on ( 'beforeValueChange' , this . beforeValueChange , this ) ; } public removeEventListener ( ) { this . dropDownListObject . off ( 'beforeValueChange' , this . beforeValueChange ) ; } method return { void } hidden public destroy ( args ? ) { if ( this . dropDownListObject && ! this . dropDownListObject . isDestroyed ) { this . removeEventListener ( ) ; this . dropDownListObject . destroy ( ) ; remove ( this . pagerDropDownDiv ) ; } } }