Merging master into release for new plugin version (3.3.0)

sdkAngular/app/app.module.ngfactory.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A dynamically generated module when compiled with AoT.
+ */
+export const AppModuleNgFactory: any;

sdkAngular/app/app.routing.ts

@@ -54,13 +54,6 @@ let APP_ROUTES: Routes = [
             "title": "Selection states"
         }
     },
-    {
-        path: "ListViewLoadOnDemandComponent",
-        loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
-        data: {
-            "title": "Load on Demand"
-        }
-    },
     {
         path: "ListViewPullToRefreshComponent",
         loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
@@ -131,6 +124,34 @@ let APP_ROUTES: Routes = [
             "title": "Item separators"
         }
     },
+    {
+        path: "ListViewDynamicSizeAutoComponent",
+        loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
+        data: {
+            "title": "Auto with Variable Item Size"
+        }
+    },
+    {
+        path: "ListViewDynamicSizeManualComponent",
+        loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
+        data: {
+            "title": "Manual with Variable Item Size"
+        }
+    },
+    {
+        path: "ListViewFixedSizeAutoComponent",
+        loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
+        data: {
+            "title": "Auto with Fixed Item Size"
+        }
+    },
+    {
+        path: "ListViewFixedSizeManualComponent",
+        loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
+        data: {
+            "title": "Manual with Fixed Item Size"
+        }
+    },
     {
         path: "SideDrawerGettingStartedComponent",
         loadChildren: './sidedrawer/sidedrawer-examples.module#SideDrawerExamplesModule',
@@ -481,6 +502,13 @@ let APP_ROUTES: Routes = [
             "title": "In horizontal direction"
         }
     },
+    {
+        path: "ListViewScrollToIndexInitialComponent",
+        loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
+        data: {
+            "title": "Initially scrolled"
+        }
+    },
     {
         path: "ListViewScrollEventsComponent",
         loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
@@ -903,4 +931,4 @@ let APP_ROUTES: Routes = [
     }
 ];
 
-export const routing = NativeScriptRouterModule.forRoot(APP_ROUTES);
+export const routing = NativeScriptRouterModule.forRoot(APP_ROUTES);

sdkAngular/app/listview/listview-examples.module.ts

@@ -19,13 +19,17 @@ import { ListViewItemSelectionMultipleComponent } from './item-selection/listvie
 import { ListViewItemSelectionProgrammaticComponent } from './item-selection/listview-item-selection-programmatic.component';
 import { ListViewItemSelectionComponent } from './item-selection/listview-item-selection.component';
 import { ListViewItemSeparatorComponent } from './item-separator/listview-item-separator.component';
-import { ListViewLoadOnDemandComponent } from './load-on-demand/listview-load-on-demand.component';
+import { ListViewDynamicSizeAutoComponent } from './load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component';
+import { ListViewDynamicSizeManualComponent } from './load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component';
+import { ListViewFixedSizeAutoComponent } from './load-on-demand/fixed-size-auto/listview-fixed-size-auto.component';
+import { ListViewFixedSizeManualComponent } from './load-on-demand/fixed-size-manual/listview-fixed-size-manual.component';
 import { ListViewMultipleTemplatesComponent } from './multiple-templates/listview-multiple-templates.component';
 import { ListViewObservableArrayComponent } from './observable-array/listview-observable-array.component';
 import { ListViewPullToRefreshComponent } from './pull-to-refresh/listview-pull-to-refresh.component';
 import { ListViewScrollEventsComponent } from './scroll-events/listview-scroll-events.component';
 import { ListViewScrollToIndexHorizontalComponent } from './scroll-to-index/listview-scroll-to-index-horizontal.component';
 import { ListViewScrollToIndexVerticalComponent } from './scroll-to-index/listview-scroll-to-index-vertical.component';
+import { ListViewScrollToIndexInitialComponent } from './scroll-to-index/listview-scroll-to-index-initial.component';
 import { ListViewSelectionStatesComponent } from './selection-states/listview-selection-states.component';
 import { ListViewSwipeActionsMultipleComponent } from './swipe-actions/listview-swipe-actions-multiple.component';
 import { ListViewSwipeActionsThresholdsComponent } from './swipe-actions/listview-swipe-actions-thresholds.component';
@@ -60,7 +64,10 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv
         ListViewItemSelectionProgrammaticComponent,
         ListViewItemSelectionComponent,
         ListViewItemSeparatorComponent,
-        ListViewLoadOnDemandComponent,
+        ListViewDynamicSizeAutoComponent,
+        ListViewDynamicSizeManualComponent,
+        ListViewFixedSizeAutoComponent,
+        ListViewFixedSizeManualComponent,
         ListViewMultipleTemplatesComponent,
         ListViewObservableArrayComponent,
         ListViewPullToRefreshComponent,
@@ -71,7 +78,8 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv
         ListViewSwipeActionsMultipleComponent,
         ListViewSwipeActionsThresholdsComponent,
         ListViewSwipeActionsComponent,
-        ListViewSwipeDisableComponent
+        ListViewSwipeDisableComponent,
+        ListViewScrollToIndexInitialComponent
     ]
 })
 export class ListViewExamplesModule { }

sdkAngular/app/listview/listview-examples.routing.ts

@@ -15,13 +15,17 @@ import { ListViewItemSelectionMultipleComponent } from './item-selection/listvie
 import { ListViewItemSelectionProgrammaticComponent } from './item-selection/listview-item-selection-programmatic.component';
 import { ListViewItemSelectionComponent } from './item-selection/listview-item-selection.component';
 import { ListViewItemSeparatorComponent } from './item-separator/listview-item-separator.component';
-import { ListViewLoadOnDemandComponent } from './load-on-demand/listview-load-on-demand.component';
+import { ListViewDynamicSizeAutoComponent } from './load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component';
+import { ListViewDynamicSizeManualComponent } from './load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component';
+import { ListViewFixedSizeAutoComponent } from './load-on-demand/fixed-size-auto/listview-fixed-size-auto.component';
+import { ListViewFixedSizeManualComponent } from './load-on-demand/fixed-size-manual/listview-fixed-size-manual.component';
 import { ListViewMultipleTemplatesComponent } from './multiple-templates/listview-multiple-templates.component';
 import { ListViewObservableArrayComponent } from './observable-array/listview-observable-array.component';
 import { ListViewPullToRefreshComponent } from './pull-to-refresh/listview-pull-to-refresh.component';
 import { ListViewScrollEventsComponent } from './scroll-events/listview-scroll-events.component';
 import { ListViewScrollToIndexHorizontalComponent } from './scroll-to-index/listview-scroll-to-index-horizontal.component';
 import { ListViewScrollToIndexVerticalComponent } from './scroll-to-index/listview-scroll-to-index-vertical.component';
+import { ListViewScrollToIndexInitialComponent } from './scroll-to-index/listview-scroll-to-index-initial.component';
 import { ListViewSelectionStatesComponent } from './selection-states/listview-selection-states.component';
 import { ListViewSwipeActionsMultipleComponent } from './swipe-actions/listview-swipe-actions-multiple.component';
 import { ListViewSwipeActionsThresholdsComponent } from './swipe-actions/listview-swipe-actions-thresholds.component';
@@ -43,7 +47,10 @@ export const routes: Routes = [
   { path: 'ListViewItemSelectionProgrammaticComponent', component: ListViewItemSelectionProgrammaticComponent },
   { path: 'ListViewItemSelectionComponent', component: ListViewItemSelectionComponent },
   { path: 'ListViewItemSeparatorComponent', component: ListViewItemSeparatorComponent },
-  { path: 'ListViewLoadOnDemandComponent', component: ListViewLoadOnDemandComponent },
+  { path: 'ListViewDynamicSizeAutoComponent', component: ListViewDynamicSizeAutoComponent },
+  { path: 'ListViewDynamicSizeManualComponent', component: ListViewDynamicSizeManualComponent },
+  { path: 'ListViewFixedSizeAutoComponent', component: ListViewFixedSizeAutoComponent },
+  { path: 'ListViewFixedSizeManualComponent', component: ListViewFixedSizeManualComponent },
   { path: 'ListViewMultipleTemplatesComponent', component: ListViewMultipleTemplatesComponent },
   { path: 'ListViewObservableArrayComponent', component: ListViewObservableArrayComponent },
   { path: 'ListViewPullToRefreshComponent', component: ListViewPullToRefreshComponent },
@@ -54,5 +61,6 @@ export const routes: Routes = [
   { path: 'ListViewSwipeActionsMultipleComponent', component: ListViewSwipeActionsMultipleComponent },
   { path: 'ListViewSwipeActionsThresholdsComponent', component: ListViewSwipeActionsThresholdsComponent },
   { path: 'ListViewSwipeActionsComponent', component: ListViewSwipeActionsComponent },
-  { path: 'ListViewSwipeDisableComponent', component: ListViewSwipeDisableComponent }
+  { path: 'ListViewSwipeDisableComponent', component: ListViewSwipeDisableComponent },
+  { path: 'ListViewScrollToIndexInitialComponent', component: ListViewScrollToIndexInitialComponent }
 ];

sdkAngular/app/listview/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.html

@@ -0,0 +1,18 @@
+<GridLayout tkExampleTitle tkToggleNavButton>
+    <RadListView [items]="dataItems" loadOnDemandMode="Auto" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
+        <ng-template tkListItemTemplate let-item="item">
+            <StackLayout class="itemTemplateStackLayout" orientation="vertical">
+                <StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
+                    <Image *tkIfIOS [src]="item.image" stretch="aspectFit" width="100"></Image>
+                    <FrescoDrawee *tkIfAndroid height="100" width="100" [imageUri]="item.image"></FrescoDrawee>
+
+                    <StackLayout class="labelsStackLayout" orientation="vertical">
+                        <Label class="labelName" [text]="item.name"></Label>
+                        <Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
+                        <Label class="labelText" text="{{item.text}} + {{item.text}} + {{item.text}}" textWrap="true"></Label>
+                    </StackLayout>
+                </StackLayout>
+            </StackLayout>
+        </ng-template>
+    </RadListView>
+</GridLayout>

sdkAngular/app/listview/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
+import { ObservableArray } from "tns-core-modules/data/observable-array";
+import { DataItem } from "../../dataItem";
+import { ListViewLinearLayout, ListViewEventData, RadListView, ListViewLoadOnDemandMode } from "nativescript-pro-ui/listview";
+import * as applicationModule from "tns-core-modules/application";
+import * as Timer from "tns-core-modules/timer";
+var posts = require("../../../listview/posts.json")
+
+@Component({
+    moduleId: module.id,
+    selector: "tk-listview-dynamic-size-auto",
+    templateUrl: "listview-dynamic-size-auto.component.html",
+    styleUrls: ["listview-dynamic-size-auto.component.css"]
+})
+
+export class ListViewDynamicSizeAutoComponent implements OnInit {
+    private _dataItems: ObservableArray<DataItem>;
+    private _numberOfAddedItems;
+    private layout: ListViewLinearLayout;
+
+    constructor(private _changeDetectionRef: ChangeDetectorRef) {
+    }
+
+    ngOnInit() {
+        this.layout = new ListViewLinearLayout();
+        this.layout.scrollDirection = "Vertical";
+        this.initDataItems();
+        this._changeDetectionRef.detectChanges();
+    }
+
+    public get dataItems(): ObservableArray<DataItem> {
+        return this._dataItems;
+    }
+
+    public onLoadMoreItemsRequested(args: ListViewEventData) {
+        var that = new WeakRef(this);
+        Timer.setTimeout(function () {
+            var listView: RadListView = args.object;
+            var initialNumberOfItems = that.get()._numberOfAddedItems;
+            for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
+                if (i > posts.names.length - 1) {
+                    listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
+                    break;
+                }
+
+                var imageUri = applicationModule.android ? posts.images[i].toLowerCase() : posts.images[i];
+                that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
+                that.get()._numberOfAddedItems++;
+            }
+
+            listView.notifyLoadOnDemandFinished();
+        }, 1000);
+        args.returnValue = true;
+    }
+
+    private initDataItems() {
+        this._dataItems = new ObservableArray<DataItem>();
+        this._numberOfAddedItems = 0;
+        for (var i = 0; i < posts.names.length - 15; i++) {
+            this._numberOfAddedItems++;
+            if (applicationModule.android) {
+                this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
+            }
+            else {
+                this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
+            }
+        }
+    }
+}

sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.css

@@ -0,0 +1,33 @@
+.itemTemplateStackLayout {
+    padding: 5 10 5 10;
+    background-color: #7fff7f;
+}
+
+.innerOtemTemplateStackLayout {
+    padding: 10;
+    background-color: #65a565;
+}
+
+.labelsStackLayout {
+    margin-left: 15;
+}
+
+.labelName {
+    font-size: 20;
+    margin-bottom: 8;
+}
+
+.labelTitle {
+    font-size: 14;
+    font-weight: bold;
+}
+
+.labelText {
+    font-size: 12;
+    color: white;
+}
+
+.loadOnDemandItemGridLayout {
+    background-color: #7fff7f;
+    color: black;
+}

sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.html

@@ -0,0 +1,24 @@
+<GridLayout tkExampleTitle tkToggleNavButton>
+    <RadListView [items]="dataItems" loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
+        <ng-template tkListItemTemplate let-item="item">
+            <StackLayout class="itemTemplateStackLayout" orientation="vertical">
+                <StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
+                    <Image *tkIfIOS [src]="item.image" stretch="aspectFit" width="100"></Image>
+                    <FrescoDrawee *tkIfAndroid height="100" width="100" [imageUri]="item.image"></FrescoDrawee>
+
+                    <StackLayout class="labelsStackLayout" orientation="vertical">
+                        <Label class="labelName" [text]="item.name"></Label>
+                        <Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
+                        <Label class="labelText" text="{{item.text}} + {{item.text}} + {{item.text}}" textWrap="true"></Label>
+                    </StackLayout>
+                </StackLayout>
+            </StackLayout>
+        </ng-template>
+
+        <div *tkIfIOS>
+            <GridLayout *tkListLoadOnDemandTemplate class="loadOnDemandItemGridLayout">
+                <Label text="Load More" horizontalAlignment="center" verticalAlignment="center"></Label>
+            </GridLayout>
+        </div>
+    </RadListView>
+</GridLayout>

sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
+import { ObservableArray } from "tns-core-modules/data/observable-array";
+import { DataItem } from "../../dataItem";
+import { ListViewLinearLayout, ListViewEventData, RadListView, ListViewLoadOnDemandMode } from "nativescript-pro-ui/listview";
+import * as applicationModule from "tns-core-modules/application";
+import * as Timer from "tns-core-modules/timer";
+var posts = require("../../../listview/posts.json")
+
+@Component({
+    moduleId: module.id,
+    selector: "tk-listview-dynamic-size-manual",
+    templateUrl: "listview-dynamic-size-manual.component.html",
+    styleUrls: ["listview-dynamic-size-manual.component.css"]
+})
+
+export class ListViewDynamicSizeManualComponent implements OnInit {
+    private _dataItems: ObservableArray<DataItem>;
+    private _numberOfAddedItems;
+    private layout: ListViewLinearLayout;
+
+    constructor(private _changeDetectionRef: ChangeDetectorRef) {
+    }
+
+    ngOnInit() {
+        this.layout = new ListViewLinearLayout();
+        this.layout.scrollDirection = "Vertical";
+        this.initDataItems();
+        this._changeDetectionRef.detectChanges();
+    }
+
+    public get dataItems(): ObservableArray<DataItem> {
+        return this._dataItems;
+    }
+
+    public onLoadMoreItemsRequested(args: ListViewEventData) {
+        var that = new WeakRef(this);
+        Timer.setTimeout(function () {
+            var listView: RadListView = args.object;
+            var initialNumberOfItems = that.get()._numberOfAddedItems;
+            for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
+                if (i > posts.names.length - 1) {
+                    listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
+                    break;
+                }
+
+                var imageUri = applicationModule.android ? posts.images[i].toLowerCase() : posts.images[i];
+                that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
+                that.get()._numberOfAddedItems++;
+            }
+
+            listView.notifyLoadOnDemandFinished();
+        }, 1000);
+        args.returnValue = true;
+    }
+
+    private initDataItems() {
+        this._dataItems = new ObservableArray<DataItem>();
+        this._numberOfAddedItems = 0;
+        for (var i = 0; i < posts.names.length - 15; i++) {
+            this._numberOfAddedItems++;
+            if (applicationModule.android) {
+                this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
+            }
+            else {
+                this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
+            }
+        }
+    }
+}