import { Component , Input , ViewEncapsulation , OnInit , Output , EventEmitter , ChangeDetectionStrategy } from '@angular/core' ; import { moveItemInArray , CdkDragDrop } from '@angular/cdk/drag-drop' ; import { debounceable } from '../../../../decorators/debounceable/debounceable.decorator' ; interface DataValue { value : string ; } @ Component ( { selector : 'ngx-orderable-inputs-list' , templateUrl : './orderable-inputs-list.component.html' , styleUrls : [ './orderable-inputs-list.component.scss' ] , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class OrderableInputsListComponent implements OnInit { @ Input ( ) data : string [ ] ; @ Output ( ) onUpdate = new EventEmitter < string [ ] > ( ) ; dataValues : DataValue [ ] = [ ] ; ngOnInit ( ) { ( this . data || [ ] ) . forEach ( item => { this . dataValues . push ( { value : item } ) ; } ) ; } addExample ( ) { this . dataValues . push ( { value : '' } ) ; } removeItem ( index ) { this . dataValues . splice ( index , 1 ) ; this . update ( ) ; } drop ( event ) { moveItemInArray ( this . dataValues , event . previousIndex , event . currentIndex ) ; this . update ( ) ; } @ debounceable ( 500 ) update ( ) { const data = this . dataValues . map ( item => item . value ) ; this . onUpdate . emit ( data ) ; } }