Add PickerField element selector

Add PickerPage element that inherits from Page in the modal and a selector for it
Move the class set on ActionBar and ListView to the aforementioned PickerPage
Document it

Author: bundyo

README.md

@@ -95,7 +95,7 @@ The `PickerField` is a NativeScript `TextField` which means that any functionali
 ## Styling
 
 ### PickerField
-The `PickerField` inherits from the `TextField` class of the `tns-core-modules/ui/text-field/text-field` module which means all of the available styling of `TextField` are available directly. Additionally the `PickerField` opens a modal window contains a `ListView` instance which inherits the css class of the `PickerField` meaning you can style that ListView elements with the use of `ListView.<your-class-name>` and simply set the `class` of the `PickerField` to `your-class-name`. The modal window also contains its own ActionBar which again inherits the css class of the `PickerField` and can be styling the same way as described above for the ListView. For full list of the available properties of which many can be styling/set via css you can refer the official API documentation of ListView [here](https://docs.nativescript.org/api-reference/modules/_ui_list_view_).
+The `PickerField` can be targeted in CSS through its element selector and additionally by setting a class. The `PickerField` also opens a modal window containing a Page element that contains an ActionBar and a ListView. This Page element can be targeted with the `PickerPage` selector and through it style all picker modals with selectors like `PickerPage ActionBar` and `PickerPage ListView`. In addition to that, if you set a class on the PickerField, it will be transferred on the `PickerPage` and with it you can style individual modals.
     
 ## Contribute
 We love PRs! Check out the [contributing guidelines](https://github.com/NativeScript/nativescript-picker/blob/master/CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-picker/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).

src/picker.common.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'tns-core-modules/data/observable';
-import { Property, Template, booleanConverter } from "tns-core-modules/ui/core/view/view";
+import { Property, Template, booleanConverter, CSSType } from "tns-core-modules/ui/core/view/view";
 import { View, EventData } from "tns-core-modules/ui/core/view/view";
 import { TextField } from 'tns-core-modules/ui/text-field/text-field';
 import { Button } from 'tns-core-modules/ui/button/button';
@@ -28,6 +28,11 @@ export interface PickerField {
     on(event: "itemLoading", callback: (args: ItemEventData) => void, thisArg?: any);
 }
 
+// Allow targeting PickerPage through CSS element selector
+@CSSType("PickerPage")
+export class PickerPage extends Page {}
+
+@CSSType("PickerField")
 export class PickerField extends TextField implements TemplatedItemsView {
 
     public static itemLoadingEvent = "itemLoading";
@@ -62,7 +67,7 @@ export class PickerField extends TextField implements TemplatedItemsView {
 
     private createModalView() {
         this._modalRoot = new Frame();
-        this._page = new Page();
+        this._page = new PickerPage();
         this._modalListView = new ListView();
         this._modalGridLayout = new GridLayout();
         this.initModalView();
@@ -80,15 +85,15 @@ export class PickerField extends TextField implements TemplatedItemsView {
     }
 
     private initModalView() {
+        this.applyCssScope(this._page);
+
         if (this.pickerTitle && this.pickerTitle !== "") {
             this._page.actionBar.title = this.pickerTitle;
         } else {
             this._modalRoot.actionBarVisibility = "always";
             this._page.actionBar.title = "";
         }
 
-        this.applyCssScope(this._page.actionBar);
-
         let actionItem = new ActionItem();
         actionItem.text = "Close";
         actionItem.on(Button.tapEvent, (args: ItemEventData) => {
@@ -111,7 +116,6 @@ export class PickerField extends TextField implements TemplatedItemsView {
 
         this._modalListView.on(ListView.itemLoadingEvent, this.listViewItemLoadingHandler.bind(this));
         this._modalListView.on(ListView.itemTapEvent, this.listViewItemTapHandler.bind(this));
-        this.applyCssScope(this._modalListView);
         this._modalListView.items = this.items;
 
         (<any>this._modalGridLayout).addChild(this._modalListView);