Merge branch 'master'

e2e/animation/.gitignore

@@ -1,2 +0,0 @@
-.vscode/settings.json
-mochawesome-report

e2e/animation/README.md

@@ -1,14 +0,0 @@
-Execute Tests
-=============
-
-Android:
-
-```
-npm run e2e -- --runType android23 # --devMode
-```
-
-iOS:
-
-```
-npm run e2e -- --runType sim.iPhoneX.iOS112 # --devMode
-```

e2e/animation/app/3d-rotate/page.ts

@@ -0,0 +1,40 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Point3D } from "tns-core-modules/ui/animation/animation";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimateX(args: EventData) {
+    rotate({ x: 360, y: 0, z: 0 });
+}
+
+export function onAnimateY(args: EventData) {
+    rotate({ x: 0, y: 360, z: 0 });
+}
+
+export function onAnimateZ(args: EventData) {
+    rotate({ x: 0, y: 0, z: 360 });
+}
+
+export function onAnimateXYZ(args: EventData) {
+    rotate({ x: 360, y: 360, z: 360 });
+}
+
+async function rotate(rotate: Point3D) {
+    await view.animate({
+        rotate,
+        duration: 1000
+    });
+    reset();
+}
+
+function reset() {
+    view.rotate = 0;
+    view.rotateX = 0;
+    view.rotateY = 0;
+}

e2e/animation/app/3d-rotate/page.xml

@@ -0,0 +1,24 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <ActionBar title="Rotate" />
+
+  <GridLayout rows="auto auto auto auto *" columns="* * *">
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="0" row="0" rotateX="60"/>
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="1" row="0" rotateY="60"/>
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="2" row="0" rotate="60"/>
+
+    <Button text="X" tap="onAnimateX" col="0" row="1"/>
+    <Button text="Y" tap="onAnimateY" col="1" row="1"/>
+    <Button text="Z" tap="onAnimateZ" col="2" row="1"/>
+
+    <Image src="~/res/icon_100x100.png" width="60" height="60" horizontalAlignment="center"
+           colSpan="3" row="2" rotate="60" rotateX="60" rotateY="60"/>
+
+    <Button text="XYZ" tap="onAnimateXYZ" row="3" colSpan="3"/>
+
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray" row="4" colSpan="3">
+      <Image id="view" src="~/res/icon_100x100.png" 
+          width="100" height="100" 
+          left="100" top="100"/>
+    </AbsoluteLayout>
+  </GridLayout>
+</Page>

e2e/animation/app/css-animations/3d-rotate/page.css

@@ -0,0 +1,75 @@
+.rotate-x {
+    rotateX: 60;
+}
+
+.rotate-y {
+    rotateY: 60;
+}
+
+.rotate-z {
+    rotate: 60;
+}
+
+.original {
+    transform: none;
+}
+ 
+.animate-x {
+    animation-name: rotateX;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.animate-y {
+    animation-name: rotateY;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.animate-z {
+    animation-name: rotateZ;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.animate-xyz-3d {
+    animation-name: rotateXYZ3D;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.animate-xyz {
+    animation-name: rotateXYZ;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes rotateX {
+    from { transform: none; }
+    50%  { transform: rotateX(60) }
+    to  { transform: none; }
+}
+
+@keyframes rotateY {
+    from { transform: none; }
+    50%  { transform: rotateY(60) }
+    to  { transform: none; }
+}
+
+@keyframes rotateZ {
+    from { transform: none; }
+    50%  { transform: rotate(60) }
+    to  { transform: none; }
+}
+
+@keyframes rotateXYZ3D {
+    from { transform: none; }
+    50%  { transform: rotate3d(60, 60, 60) }
+    to  { transform: none; }
+}
+
+@keyframes rotateXYZ {
+    from { transform: none; }
+    50%  { transform: rotateX(60) rotateY(60) rotate(60) }
+    to  { transform: none; }
+}

e2e/animation/app/css-animations/3d-rotate/page.ts

@@ -0,0 +1,35 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Point3D } from "tns-core-modules/ui/animation/animation";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimateX(args: EventData) {
+    view.className = "original";
+    view.className = "animate-x";
+}
+
+export function onAnimateY(args: EventData) {
+    view.className = "original";
+    view.className = "animate-y";
+}
+
+export function onAnimateZ(args: EventData) {
+    view.className = "original";
+    view.className = "animate-z";
+}
+
+export function onAnimateXYZ3D(args: EventData) {
+    view.className = "original";
+    view.className = "animate-xyz-3d";
+}
+
+export function onAnimateXYZ(args: EventData) {
+    view.className = "original";
+    view.className = "animate-xyz";
+}

e2e/animation/app/css-animations/3d-rotate/page.xml

@@ -0,0 +1,22 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <ActionBar title="Rotate" />
+
+  <GridLayout rows="auto auto auto *" columns="* * *">
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="0" row="0" class="rotate-x"/>
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="1" row="0" class="rotate-y"/>
+    <Image src="~/res/icon_100x100.png" width="30" height="30" col="2" row="0" class="rotate-z"/>
+
+    <Button text="X" tap="onAnimateX" col="0" row="1"/>
+    <Button text="Y" tap="onAnimateY" col="1" row="1"/>
+    <Button text="Z" tap="onAnimateZ" col="2" row="1"/>
+
+    <Button text="XYZ" tap="onAnimateXYZ" row="2" col="0"/>
+    <Button text="XYZ-3D" tap="onAnimateXYZ3D" row="2" col="1"/>
+
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray" row="3" colSpan="3">
+      <Image id="view" src="~/res/icon_100x100.png" 
+          width="100" height="100" 
+          left="100" top="100" />
+    </AbsoluteLayout>
+  </GridLayout>
+</Page>

e2e/animation/app/css-animations/animate-css/page.css

@@ -1,4 +1,4 @@
-@import '~/css-animations/animate-css/animate.css';
+@import './animate.css';
 
 .myRubberBand {
     animation-name: rubberBand;

e2e/animation/app/css-animations/page.ts

@@ -10,6 +10,7 @@ export function pageLoaded(args: EventData) {
 
 export function onButtonTap(args: EventData) {
     const clickedButton = <Button>args.object;
-    const destination = "./css-animations/" + clickedButton.text + "/page";
+
+    const destination =  "css-animations/" + clickedButton.text + "/page";
     currentFrame.navigate(destination);
 }

e2e/animation/app/css-animations/page.xml

@@ -13,6 +13,7 @@
       <Button text="settings" tap="onButtonTap"/>
       <Button text="visual-states" tap="onButtonTap"/>
       <Button text="initial-animation" tap="onButtonTap"/>
+      <Button text="3d-rotate" tap="onButtonTap"/>
     </StackLayout>
   </ScrollView>
 </Page>

e2e/animation/app/home/home-page.ts

@@ -10,6 +10,6 @@ export function pageLoaded(args: EventData) {
 
 export function onButtonTap(args: EventData) {
     const clickedButton = <Button>args.object;
-    const destination = "./" + clickedButton.text + "/page";
+    const destination = clickedButton.text + "/page";
     currentFrame.navigate(destination);
 }

e2e/animation/app/home/home-page.xml

@@ -18,7 +18,8 @@
             <Button text="slide-in-effect" tap="onButtonTap" />
             <Button text="infinite" tap="onButtonTap" />
             <Button text="animation-curves" tap="onButtonTap" />
-            <Button text="css-animations" tap="onButtonTap" /> 
+            <Button text="css-animations" tap="onButtonTap" />
+            <Button text="3d-rotate" tap="onButtonTap" />
         </StackLayout>
     </ScrollView>
 

e2e/animation/app/package.json

@@ -1,6 +1,7 @@
 {
   "android": {
-    "v8Flags": "--expose_gc"
+    "v8Flags": "--expose_gc",
+    "markingMode": "none"
   },
   "main": "app.js",
   "name": "tns-template-hello-world-ts",

e2e/animation/e2e/screen.ts

@@ -1,13 +1,13 @@
 import { AppiumDriver } from "nativescript-dev-appium";
 import { assert } from "chai";
 
-const home = "Home"
+const home = "Home";
 const chainingWithAnimationSet = "chaining-with-animation-set";
 const animateSequentially = "Animate Sequentially";
 
 export class Screen {
 
-    private _driver: AppiumDriver
+    private _driver: AppiumDriver;
 
     constructor(driver: AppiumDriver) {
         this._driver = driver;

e2e/animation/package.json

@@ -13,12 +13,14 @@
     }
   },
   "dependencies": {
-    "nativescript-theme-core": "~1.0.4",
-    "tns-core-modules": "next"
+    "nativescript-theme-core": "~1.0.6",
+    "@nativescript/core": "file:../../nativescript-core",
+    "tns-core-modules": "file:../../dist/tns-core-modules"
   },
   "devDependencies": {
     "@types/chai": "~4.1.7",
     "@types/mocha": "~5.2.5",
+    "@types/node": "~10.12.18",
     "babel-traverse": "6.26.0",
     "babel-types": "6.26.0",
     "babylon": "6.18.0",
@@ -26,8 +28,8 @@
     "mocha": "~5.2.0",
     "mochawesome": "~3.1.2",
     "nativescript-dev-appium": "next",
-    "nativescript-dev-typescript": "next",
-    "nativescript-dev-webpack": "next"
+    "nativescript-dev-webpack": "next",
+    "typescript": "~3.4.1"
   },
   "scripts": {
     "e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json",

e2e/animation/tsconfig.json

@@ -6,24 +6,24 @@
         "emitDecoratorMetadata": true,
         "noEmitHelpers": true,
         "noEmitOnError": true,
+        "skipLibCheck": true,
         "lib": [
             "es6",
             "dom"
         ],
         "baseUrl": ".",
         "paths": {
-            "*": [
-                "./node_modules/tns-core-modules/*",
-                "./node_modules/*"
-            ],
             "~/*": [
                 "app/*"
+            ],
+            "*": [
+                "./node_modules/*"
             ]
         }
     },
     "exclude": [
+        "e2e",
         "node_modules",
-        "platforms",
-        "e2e"
+        "platforms"
     ]
-}
+}

e2e/config/mocha.opts

@@ -1,4 +1,4 @@
---timeout 300000
+--timeout 999999
 --recursive e2e
 --reporter mochawesome 
 --reporter-options quiet=true,html=true,inline=true,autoOpen=true

e2e/cuteness.io/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[*.ts]
+indent_style = space
+indent_size = 4

e2e/cuteness.io/app/App_Resources/Android/app.gradle

@@ -0,0 +1,20 @@
+// Add your native dependencies here:
+
+// Uncomment to add recyclerview-v7 dependency
+//dependencies {
+//	implementation 'com.android.support:recyclerview-v7:+'
+//}
+
+// If you want to add something to be applied before applying plugins' include.gradle files
+// e.g. project.ext.googlePlayServicesVersion = "15.0.1"
+// create a file named before-plugins.gradle in the current directory and place it there
+
+android {
+  defaultConfig {
+    minSdkVersion 17
+    generatedDensities = []
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}

e2e/cuteness.io/app/App_Resources/Android/src/main/AndroidManifest.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="__PACKAGE__"
+	android:versionCode="1"
+	android:versionName="1.0">
+
+	<supports-screens
+		android:smallScreens="true"
+		android:normalScreens="true"
+		android:largeScreens="true"
+		android:xlargeScreens="true"/>
+
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.INTERNET"/>
+
+	<application
+		android:name="com.tns.NativeScriptApplication"
+		android:allowBackup="true"
+		android:icon="@drawable/icon"
+		android:label="@string/app_name"
+		android:theme="@style/AppTheme"
+		android:usesCleartextTraffic="true">
+
+		<activity
+			android:name="com.tns.NativeScriptActivity"
+			android:label="@string/title_activity_kimera"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
+			android:theme="@style/LaunchScreenTheme">
+
+			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
+
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.tns.ErrorReportActivity"/>
+	</application>
+</manifest>

e2e/cuteness.io/app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml

@@ -0,0 +1,8 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background" />
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/logo" />
+    </item>
+</layer-list>

e2e/cuteness.io/app/App_Resources/Android/src/main/res/values-v21/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+	<color name="ns_accent">#3d5afe</color>
+</resources>

e2e/cuteness.io/app/App_Resources/Android/src/main/res/values-v21/styles.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Application theme -->
+    <style name="AppTheme" parent="AppThemeBase">
+        <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
+        <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
+    </style>
+
+    <!-- Default style for DatePicker - in spinner mode -->
+    <style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
+        <item name="android:datePickerMode">spinner</item>
+    </style>
+
+    <!-- Default style for TimePicker - in spinner mode -->
+    <style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
+        <item name="android:timePickerMode">spinner</item>
+    </style>
+
+    <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
+        <item name="android:elevation">4dp</item>
+    </style>    
+</resources>

e2e/cuteness.io/app/App_Resources/Android/src/main/res/values/colors.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ns_primary">#F5F5F5</color>
+	<color name="ns_primaryDark">#757575</color>
+	<color name="ns_accent">#33B5E5</color>
+    <color name="ns_blue">#272734</color>
+</resources>

e2e/cuteness.io/app/App_Resources/Android/src/main/res/values/styles.xml

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- theme to use FOR launch screen-->
+    <style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
+
+        <item name="colorPrimary">@color/ns_primary</item>
+        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+        <item name="colorAccent">@color/ns_accent</item>
+
+        <item name="android:windowBackground">@drawable/splash_screen</item>
+        
+        <item name="android:windowActionBarOverlay">true</item>  
+        <item name="android:windowTranslucentStatus">true</item>
+
+    </style>
+
+    <style name="LaunchScreenTheme" parent="LaunchScreenThemeBase">
+    </style>
+
+    <!-- theme to use AFTER launch screen is loaded-->
+    <style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
+
+        <item name="colorPrimary">@color/ns_primary</item>
+        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+        <item name="colorAccent">@color/ns_accent</item>
+
+    </style>
+
+    <style name="AppTheme" parent="AppThemeBase">
+    </style>
+
+    <!-- theme for action-bar -->
+    <style name="NativeScriptToolbarStyleBase" parent="Widget.AppCompat.Toolbar">
+        <item name="android:background">@color/ns_primary</item>
+        <item name="theme">@style/ThemeOverlay.AppCompat.ActionBar</item>
+        <item name="popupTheme">@style/ThemeOverlay.AppCompat</item>
+
+    </style>
+
+    <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
+    </style>
+</resources> 

e2e/cuteness.io/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,122 @@
+{
+  "images" : [
+    {
+      "size" : "20x20",
+      "idiom" : "iphone",
+      "filename" : "icon-20@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "iphone",
+      "filename" : "icon-20@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "iphone",
+      "filename" : "icon-40@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "iphone",
+      "filename" : "icon-40@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "icon-60@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "icon-60@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "ipad",
+      "filename" : "icon-20.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "ipad",
+      "filename" : "icon-20@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "ipad",
+      "filename" : "icon-29.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "ipad",
+      "filename" : "icon-29@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "ipad",
+      "filename" : "icon-40.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "ipad",
+      "filename" : "icon-40@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "76x76",
+      "idiom" : "ipad",
+      "filename" : "icon-76.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "76x76",
+      "idiom" : "ipad",
+      "filename" : "icon-76@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "83.5x83.5",
+      "idiom" : "ipad",
+      "filename" : "icon-83.5@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "1024x1024",
+      "idiom" : "ios-marketing",
+      "filename" : "icon-1024.png",
+      "scale" : "1x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

e2e/cuteness.io/app/App_Resources/iOS/Assets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

e2e/cuteness.io/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Contents.json

@@ -0,0 +1,212 @@
+{
+  "images" : [
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2688h",
+      "filename" : "Default-Portrait-XS-Max.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2688h",
+      "filename" : "Default-Landscape-XS-Max.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "1792h",
+      "filename" : "Default-Portrait-XR.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "1792h",
+      "filename" : "Default-Landscape-XR.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "landscape",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2436h",
+      "filename" : "Default-1125h.png",
+      "minimum-system-version" : "11.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2436h",
+      "filename" : "Default-Landscape-X.png",
+      "minimum-system-version" : "11.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "736h",
+      "filename" : "Default-736h@3x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "736h",
+      "filename" : "Default-Landscape@3x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "667h",
+      "filename" : "Default-667h@2x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "retina4",
+      "filename" : "Default-568h@2x.png",
+      "minimum-system-version" : "7.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default-568h@2x.png",
+      "extent" : "full-screen",
+      "subtype" : "retina4",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

e2e/cuteness.io/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

e2e/cuteness.io/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

e2e/cuteness.io/app/App_Resources/iOS/Info.plist

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundleExecutable</key>
+	<string>${EXECUTABLE_NAME}</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1.0</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiresFullScreen</key>
+	<true/>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+</dict>
+</plist>

e2e/cuteness.io/app/App_Resources/iOS/LaunchScreen.storyboard

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina5_9" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <layoutGuides>
+                        <viewControllerLayoutGuide type="top" id="Llm-lL-Icb"/>
+                        <viewControllerLayoutGuide type="bottom" id="xb3-aO-Qok"/>
+                    </layoutGuides>
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="LaunchScreen.AspectFill" translatesAutoresizingMaskIntoConstraints="NO" id="wtH-rr-YfP">
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                            </imageView>
+                            <imageView userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="LaunchScreen.Center" translatesAutoresizingMaskIntoConstraints="NO" id="s1z-aa-wYv">
+                                <rect key="frame" x="0.0" y="150" width="375" height="512"/>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="trailing" secondItem="s1z-aa-wYv" secondAttribute="trailing" id="4Rf-kf-vql"/>
+                            <constraint firstAttribute="bottom" secondItem="wtH-rr-YfP" secondAttribute="bottom" id="5CS-At-4ka"/>
+                            <constraint firstItem="wtH-rr-YfP" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="Awn-b8-xf1"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="BpJ-vb-eKA"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="trailing" secondItem="wtH-rr-YfP" secondAttribute="trailing" id="QIM-7J-OZz"/>
+                            <constraint firstAttribute="trailing" secondItem="wtH-rr-YfP" secondAttribute="trailing" id="RXg-rW-UK8"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="Rcp-LG-48z"/>
+                            <constraint firstItem="wtH-rr-YfP" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="cch-8E-tYu"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="509.60000000000002" y="237.93103448275863"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="LaunchScreen.AspectFill" width="768" height="1024"/>
+        <image name="LaunchScreen.Center" width="384" height="512"/>
+    </resources>
+</document>

e2e/cuteness.io/app/App_Resources/iOS/build.xcconfig

@@ -0,0 +1,7 @@
+// You can add custom settings here
+// for example you can uncomment the following line to force distribution code signing
+// CODE_SIGN_IDENTITY = iPhone Distribution 
+// To build for device with XCode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html
+// DEVELOPMENT_TEAM = YOUR_TEAM_ID;
+ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;

e2e/cuteness.io/app/app-page.ts

@@ -0,0 +1,6 @@
+import * as application from "tns-core-modules/application";
+
+// Start the application
+global.registerModule("app.css", () => require("~/app.css"));
+application.setCssFileName("app.css");
+application.run({ moduleName: "app-root-page" });

e2e/cuteness.io/app/app-root-page.xml

@@ -0,0 +1 @@
+<Frame defaultPage="main-page" />

e2e/cuteness.io/app/app.css

@@ -0,0 +1 @@
+/* Add app css here */

e2e/cuteness.io/app/details-page.css

@@ -0,0 +1,14 @@
+Page {
+    background-color: #363940;
+}
+
+.detailsTitle {
+    color: #FFFFFF;
+    font-size: 30;
+    margin: 10;
+}
+
+ActivityIndicator {
+    width: 50;
+    height: 50;
+}

e2e/cuteness.io/app/details-page.xml

@@ -0,0 +1,24 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+  <GridLayout rows="*, auto">
+    <ScrollView>
+      <StackLayout>
+        <Image imageSource="{{ imageSource }}" stretch="aspectFill"/>
+        <Label text="{{ title }}" class="detailsTitle" textWrap="true" />
+      </StackLayout>
+    </ScrollView>
+    <StackLayout orientation="horizontal" row="1">
+      <Label margin="2">
+        <Label.formattedText>
+          <FormattedString fontSize="20" color="#C6C6C6">
+            <FormattedString.spans>
+              <Span text="{{ author ? 'by ' + author : '' }}"/>
+              <Span text="{{ num_comments ? ' | ' : '' }}" />
+              <Span text="{{ num_comments ? num_comments + ' comments' : '' }}" color="#10C2B0"/>
+            </FormattedString.spans>
+          </FormattedString>
+        </Label.formattedText>
+      </Label>
+    </StackLayout>
+    <ActivityIndicator busy="{{ isLoading }}" />
+  </GridLayout>
+</Page>

e2e/cuteness.io/app/main-page.css

@@ -0,0 +1,29 @@
+.title {
+    font-size: 20;
+    margin: 3;
+}
+
+.author {
+    font-size: 14;
+    horizontal-align: left;
+    vertical-align: bottom;
+    margin: 3;
+}
+
+.comments {
+    color: #10C2B0;
+    font-size: 14;
+    vertical-align: bottom;
+    margin: 3;
+}
+
+.thumbnail {
+    width: 72;
+    height: 72;
+    margin: 3;
+    vertical-align: top;
+}
+
+TabView {
+    background-color: white;
+}

e2e/cuteness.io/app/main-page.ts

@@ -0,0 +1,28 @@
+import { EventData as ObservableEventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { ItemEventData as ListViewItemEventData } from "tns-core-modules/ui/list-view";
+import { topmost as topmostFrame } from "tns-core-modules/ui/frame";
+import { AppViewModel } from "./reddit-app-view-model-page";
+
+var appViewModel = new AppViewModel();
+
+// Event handler for Page "loaded" event attached in main-page.xml
+export function pageLoaded(args: ObservableEventData) {
+    // Get the event sender
+    var page = <Page>args.object;
+
+    page.bindingContext = appViewModel;
+}
+
+export function listViewItemTap(args: ListViewItemEventData) {
+    // Navigate to the details page with context set to the data item for specified index
+    topmostFrame().navigate({
+        moduleName: "details-page",
+        bindingContext: appViewModel.redditItems.getItem(args.index)
+    });
+}
+
+export function listViewLoadMoreItems(args: ObservableEventData) {
+    // Increase model items length with model items loadSize property value
+    //appViewModel.redditItems.length += appViewModel.redditItems.loadSize;
+}

e2e/cuteness.io/app/main-page.xml

@@ -0,0 +1,30 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <TabView>
+    <TabView.items>
+      <TabViewItem title="List">
+        <TabViewItem.view>
+          <ListView items="{{ redditItems }}" isScrolling="{{ isScrolling }}" itemTap="listViewItemTap" loadMoreItems="listViewLoadMoreItems">
+            <ListView.itemTemplate>
+              <!-- Binding in template property of an component will use the bindingContext provided by the component. -->
+              <GridLayout columns="auto, *, auto" rows="auto, 25">
+                <Image src="{{ thumbnailImage }}" class="thumbnail" rowSpan="2"/>
+                <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
+                <Label text="{{ author ? 'by ' + author : '' }}" class="author" col="1" row="1" />
+                <Label text="{{ num_comments ? num_comments + ' comments' : '' }}" class="comments" col="2" row="1" />
+              </GridLayout>
+              <!-- End of tempplate. -->
+            </ListView.itemTemplate>
+          </ListView>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="About">
+        <TabViewItem.view>
+          <StackLayout>
+            <Image margin="10" src="~/res/telerik-logo.png" />
+            <Label margin="10" textWrap="true" text="{{ aboutText }}" />
+          </StackLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

e2e/cuteness.io/app/main-view-model.ts

@@ -0,0 +1,39 @@
+import { Observable } from "tns-core-modules/data/observable";
+
+export class HelloWorldModel extends Observable {
+
+    private _counter: number;
+    private _message: string;
+
+    constructor() {
+        super();
+
+        // Initialize default values.
+        this._counter = 42;
+        this.updateMessage();
+    }
+
+    get message(): string {
+        return this._message;
+    }
+
+    set message(value: string) {
+        if (this._message !== value) {
+            this._message = value;
+            this.notifyPropertyChange("message", value);
+        }
+    }
+
+    onTap() {
+        this._counter--;
+        this.updateMessage();
+    }
+
+    private updateMessage() {
+        if (this._counter <= 0) {
+            this.message = "Hoorraaay! You unlocked the NativeScript clicker achievement!";
+        } else {
+            this.message = `${this._counter} taps left`;
+        }
+    }
+}

e2e/cuteness.io/app/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "app-page.js",
+  "android": {
+    "v8Flags": "--expose_gc",
+    "markingMode": "none"
+  }
+}

e2e/cuteness.io/app/reddit-app-view-model-page.ts

@@ -0,0 +1,80 @@
+import { ImageSource, fromFile as imageSourceFromFile } from "tns-core-modules/image-source";
+import { VirtualArray, ItemsLoading as virtualArrayItemsLoadingData } from "tns-core-modules/data/virtual-array";
+import { Observable } from "tns-core-modules/data/observable";
+import { Cache as ImageCache } from "tns-core-modules/ui/image-cache";
+
+import { Data as RedditData } from "./reddit-model";
+import { RedditViewModel } from "./reddit-item-view-model-page";
+
+var aboutText = "Cuteness is a proof of concept app demonstrating the Telerik's NativeScript for writing native mobile applications using JavaScript.";
+export var defaultThumbnailImageSource = imageSourceFromFile("~/res/reddit-logo.png");
+export var defaultNoThumbnailImageSource = imageSourceFromFile("~/res/no-image.png");
+
+var redditUrl = "https://www.reddit.com/r/aww.json?limit=";
+var after: string;
+var ISSCROLLING = "isLoading";
+
+// initialize the image cache for the main list
+export var cache = new ImageCache();
+cache.placeholder = defaultThumbnailImageSource;
+cache.maxRequests = 5;
+
+export class AppViewModel extends Observable {
+
+    private _redditItems: VirtualArray<RedditViewModel>;
+    get redditItems(): VirtualArray<RedditViewModel> {
+        if (!this._redditItems) {
+            this._redditItems = new VirtualArray<RedditViewModel>(1000);
+            this._redditItems.loadSize = 50;
+            this._redditItems.on(VirtualArray.itemsLoadingEvent, (args: virtualArrayItemsLoadingData) => {
+
+                fetch(redditUrl + args.count + (after ? "&after=" + after : "")).then<RedditData>(response => response.json()).then(result => {
+
+                    var itemsToLoad = result.data.children.map(i => {
+                        return new RedditViewModel(i.data);
+                    });
+
+                    this._redditItems.load(args.index, itemsToLoad);
+
+                    var lastItem = itemsToLoad[itemsToLoad.length - 1];
+                    if (lastItem) {
+                        after = itemsToLoad[itemsToLoad.length - 1].source.name;
+                    }
+                });
+            });
+        }
+
+        return this._redditItems;
+    }
+
+    private _isScrolling = false;
+    get isScrolling(): boolean {
+        return this._isScrolling;
+    }
+    set isScrolling(value: boolean) {
+        if (this._isScrolling !== value) {
+            this._isScrolling = value;
+
+            if (value) {
+                cache.disableDownload();
+            }
+            else {
+                cache.enableDownload();
+            }
+
+            this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: ISSCROLLING, value: value });
+        }
+    }
+
+    get aboutText(): string {
+        return aboutText;
+    }
+
+    get defaultThumbnailImageSource(): ImageSource {
+        return defaultThumbnailImageSource;
+    }
+
+    get defaultNoThumbnailImageSource(): ImageSource {
+        return defaultNoThumbnailImageSource;
+    }
+}

e2e/cuteness.io/app/reddit-item-view-model-page.ts

@@ -0,0 +1,107 @@
+import { Observable } from "tns-core-modules/data/observable";
+import { ImageSource, fromFile as imageSourceFromFile, fromUrl as imageSourceFromUrl } from "tns-core-modules/image-source";
+
+import { ItemData } from "./reddit-model";
+import { defaultThumbnailImageSource, defaultNoThumbnailImageSource, cache } from "./reddit-app-view-model-page";
+
+var firstThumbnailImageSource = imageSourceFromFile("~/res/first-image.png");
+var defaultImageSource = imageSourceFromFile("~/res/reddit-logo-transparent.png");
+
+var ISLOADING = "isLoading";
+var THUMBNAIL_IMAGE = "thumbnailImage";
+var IMAGE_SOURCE = "imageSource";
+
+export class RedditViewModel extends Observable {
+
+    private _source: ItemData;
+    constructor(source: ItemData) {
+        super();
+
+        this._source = source;
+
+        if (this._source) {
+            var property: string;
+            for (property in this._source) {
+                this.set(property, this._source[property]);
+            }
+        }
+    }
+
+    get source(): ItemData {
+        return this._source;
+    }
+
+    private _isLoading = false;
+    get isLoading(): boolean {
+        return this._isLoading;
+    }
+    set isLoading(value: boolean) {
+        if (this._isLoading !== value) {
+            this._isLoading = value;
+            this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: ISLOADING, value: value });
+        }
+    }
+
+    get thumbnailImage(): ImageSource {
+        if (!this._source) {
+            return defaultThumbnailImageSource;
+        }
+
+        if (this._source.title === "reddit 101") {
+            return firstThumbnailImageSource;
+        }
+
+        var url = this._source.thumbnail;
+
+        if (!_isValidImageUrl(url)) {
+            return defaultNoThumbnailImageSource;
+        }
+
+        var image = cache.get(url);
+        if (image) {
+            return image;
+        }
+
+        this.isLoading = true;
+        cache.push({
+            key: url,
+            url: url,
+            completed: (image: any, key: string) => {
+                if (url === key) {
+                    this.isLoading = false;
+                    this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: THUMBNAIL_IMAGE, value: image });
+                }
+            }
+        });
+
+        return defaultThumbnailImageSource;
+    }
+
+    get imageSource(): ImageSource {
+        if (this._source) {
+            var url;
+            try {
+                url = (<any>this._source).preview.images[0].source.url;
+            }
+            catch (e) {
+                url = this._source.url;
+            }
+
+            if (_isValidImageUrl(url)) {
+
+                this.isLoading = true;
+
+                imageSourceFromUrl(url).then(result => {
+                    this.isLoading = false;
+                    this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: IMAGE_SOURCE, value: result });
+                });
+            }
+        }
+
+        return defaultImageSource;
+    }
+}
+
+function _isValidImageUrl(url: string): boolean {
+    return url && (url.indexOf(".png") !== -1 || url.indexOf(".jpg") !== -1);
+}