feat: programmatically select active items (#223)

* feat: programmatically select active items

Add `active` property which describes currently selected items.
Remove `initData` property since everything works on top of `active`.

* docs(README): change info about properties: `initData` -> `active`

README.md

@@ -32,7 +32,7 @@ Follow me [![twitter](https://img.shields.io/twitter/follow/valorkin.svg?style=s
   Items may be nested by adding a `children` property to any item, whose value should be another array of items. Items that have children may omit having an ID.
   If `items` are specified, all items are expected to be available locally and all selection operations operate on this local array only.
   If omitted, items are not available locally, and the `query` option should be provided to fetch data.
-  - `initData` (`?Array<any>`) - Initial selection data to set. This should be an object with `id` and `text` properties in the case of input type 'Single',
+  - `active` (`?Array<any>`) - selection data to set. This should be an object with `id` and `text` properties in the case of input type 'Single',
   or an array of such objects otherwise. This option is mutually exclusive with value.
   - `allowClear` (`?boolean=false`) (*not yet supported*) - Set to `true` to allow the selection to be cleared. This option only applies to single-value inputs.
   - `placeholder` (`?string=''`) - Placeholder text to display when the element has no focus and selected items.

components/select/select.ts

@@ -192,7 +192,6 @@ export class SelectComponent implements OnInit {
   @Input() public placeholder:string = '';
   @Input() public idField:string = 'id';
   @Input() public textField:string = 'text';
-  @Input() public initData:Array<any> = [];
   @Input() public multiple:boolean = false;
 
   @Input()
@@ -217,23 +216,44 @@ export class SelectComponent implements OnInit {
     }
   }
 
+  @Input()
+  public set active(selectedItems:Array<any>) {
+    if (!selectedItems || selectedItems.length === 0) {
+      this._active = [];
+    } else {
+      let areItemsStrings = typeof selectedItems[0] === 'string';
+
+      this._active = selectedItems.map((item:any) => {
+        let data = areItemsStrings
+          ? item
+          : { id: item[this.idField], text: item[this.textField] };
+
+        return new SelectItem(data);
+      });
+    }
+  }
+
   @Output() public data:EventEmitter<any> = new EventEmitter();
   @Output() public selected:EventEmitter<any> = new EventEmitter();
   @Output() public removed:EventEmitter<any> = new EventEmitter();
   @Output() public typed:EventEmitter<any> = new EventEmitter();
 
   public options:Array<SelectItem> = [];
   public itemObjects:Array<SelectItem> = [];
-  public active:Array<SelectItem> = [];
   public activeOption:SelectItem;
   public element:ElementRef;
 
+  public get active():Array<any> {
+    return this._active;
+  }
+
   private inputMode:boolean = false;
   private optionsOpened:boolean = false;
   private behavior:OptionsBehavior;
   private inputValue:string = '';
   private _items:Array<any> = [];
   private _disabled:boolean = false;
+  private _active:Array<SelectItem> = [];
 
   public constructor(element:ElementRef) {
     this.element = element;
@@ -319,10 +339,6 @@ export class SelectComponent implements OnInit {
   public ngOnInit():any {
     this.behavior = (this.firstItemHasChildren) ?
       new ChildrenBehavior(this) : new GenericBehavior(this);
-    if (this.initData) {
-      this.active = this.initData.map((data:any) => (typeof data === 'string' ? new SelectItem(data) : new SelectItem({id: data[this.idField], text: data[this.textField]})));
-      this.data.emit(this.active);
-    }
   }
 
   public remove(item:SelectItem):void {