fix(tabs) Change image colors on selected tab in IOS and android

demo-ng/package.json

@@ -1,16 +1,18 @@
 {
     "description": "NativeScript Application",
+    "main": "src/main.ts",
     "dependencies": {
-        "@angular/animations": "~11.2.0",
-        "@angular/common": "~11.2.0",
-        "@angular/compiler": "~11.2.0",
-        "@angular/core": "~11.2.0",
-        "@angular/forms": "~11.2.0",
-        "@angular/platform-browser": "~11.2.0",
-        "@angular/platform-browser-dynamic": "~11.2.0",
-        "@angular/router": "~11.2.0",
-        "@nativescript/core": "8.0.0-alpha.8",
-        "@nativescript/angular": "ns8",
+        "@mdi/font": "4.9.95",
+        "@angular/animations": "~11.2.7",
+        "@angular/common": "~11.2.7",
+        "@angular/compiler": "~11.2.7",
+        "@angular/core": "~11.2.7",
+        "@angular/forms": "~11.2.7",
+        "@angular/platform-browser": "~11.2.7",
+        "@angular/platform-browser-dynamic": "~11.2.7",
+        "@angular/router": "~11.2.7",
+        "@nativescript/core": "8.0.0",
+        "@nativescript/angular": "~11.8.0",
         "@nativescript-community/ui-material-activityindicator": "file:../packages/activityindicator",
         "@nativescript-community/ui-material-bottomsheet": "file:../packages/bottomsheet",
         "@nativescript-community/ui-material-bottomnavigationbar": "file:../packages/bottomnavigationbar",
@@ -25,19 +27,20 @@
         "@nativescript-community/ui-material-snackbar": "file:../packages/snackbar",
         "@nativescript-community/ui-material-textfield": "file:../packages/textfield",
         "@nativescript-community/ui-material-tabs": "file:../packages/tabs",
-        "@nativescript/theme": "~3.0.0",
+        "@nativescript/theme": "~3.0.1",
         "reflect-metadata": "~0.1.13",
-        "rxjs": "~6.6.3",
-        "zone.js": "~0.11.0"
+        "rxjs": "~6.6.7",
+        "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular/cli": "~11.2.0",
-        "@angular/compiler-cli": "~11.2.0",
-        "@nativescript/android": "7.0.1",
-        "@nativescript/ios": "7.2.0",
-        "@nativescript/types": "~7.3.0",
-        "@nativescript/webpack": "~4.1.0",
-        "@ngtools/webpack": "~11.2.0"
+        "@angular/cli": "~11.2.7",
+        "@angular/compiler-cli": "~11.2.7",
+        "@nativescript/android": "8.0.0",
+        "@nativescript/ios": "8.0.0",
+        "@nativescript/types": "~8.0.0",
+        "@nativescript/webpack": "beta",
+        "@ngtools/webpack": "~11.2.6",
+        "typescript": "~4.0.0"
     },
     "gitHead": "8ab7726d1ee9991706069c1359c552e67ee0d1a4",
     "readme": "NativeScript Application"

demo-ng/src/app.css

@@ -1,2 +1,10 @@
-@import '~@nativescript/theme/css/core.css';
-@import '~@nativescript/theme/css/default.css';
+@import '@nativescript/theme/css/core.css';
+@import '@nativescript/theme/css/default.css';
+.mdi {
+    font-family: 'materialdesignicons-webfont', 'Material Design Icons';
+}
+MDTabStrip {
+    selected-item-color: #bff937;
+    un-selected-item-color: #404040;
+    highlight-color: #4CFFFF;
+}

demo-ng/src/app/examples/tabs/tabs.component.html

@@ -1,34 +1,34 @@
 <MDTabs selectedIndex="1">
-  <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
-  <TabStrip>
-    <TabStripItem>
+  <!-- The bottom tab UI is created via MDTabStrip (the containier) and MDTabStripItem (for each tab)-->
+  <MDTabStrip >
+    <MDTabStripItem>
       <Label text="Home"></Label>
       <Image src="res://ic_home"></Image>
-    </TabStripItem>
-    <TabStripItem>
+    </MDTabStripItem>
+    <MDTabStripItem>
       <Label text="Account"></Label>
       <Image src="res://ic_view_list"></Image>
-    </TabStripItem>
-    <TabStripItem>
+    </MDTabStripItem>
+    <MDTabStripItem>
       <Label text="Search"></Label>
-      <Image src="res://ic_menu"></Image>
-    </TabStripItem>
-  </TabStrip>
+      <Image src="font://&#xF349;" class="mdi"></Image>
+    </MDTabStripItem>
+  </MDTabStrip>
 
-  <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
-  <TabContentItem>
+  <!-- The number of MDTabContentItem components should corespond to the number of MDTabStripItem components -->
+  <MDTabContentItem>
     <GridLayout>
       <Label text="Home Page" class="h2 text-center"></Label>
     </GridLayout>
-  </TabContentItem>
-  <TabContentItem>
+  </MDTabContentItem>
+  <MDTabContentItem>
     <GridLayout>
       <Label text="Account Page" class="h2 text-center"></Label>
     </GridLayout>
-  </TabContentItem>
-  <TabContentItem>
+  </MDTabContentItem>
+  <MDTabContentItem>
     <GridLayout>
       <Label text="Search Page" class="h2 text-center"></Label>
     </GridLayout>
-  </TabContentItem>
+  </MDTabContentItem>
 </MDTabs>

demo-ng/src/main.ts

@@ -1,8 +1,13 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
 import { platformNativeScriptDynamic } from "@nativescript/angular";
-
+import { themer } from '@nativescript-community/ui-material-core';
 import { AppModule } from './app/app.module';
 
+if (global.isIOS) {
+    themer.setPrimaryColor('#bff937');
+
+}
+
 // A traditional NativeScript application starts by initializing global objects,
 // setting up global CSS rules, creating, and navigating to the main page.
 // Angular applications need to take care of their own initialization:

demo-ng/tsconfig.json

@@ -1,29 +1,22 @@
 {
     "compilerOptions": {
-        "module": "esnext",
-        "target": "es2017",
-        "moduleResolution": "node",
-        "removeComments": true,
-        "declaration": false,
-        "noLib": false,
-        "skipLibCheck": true,
-        "experimentalDecorators": true,
-        "emitDecoratorMetadata": true,
-        "noEmitHelpers": true,
-        "noEmitOnError": true,
-        "lib": [
-            "es2017",
-            "dom"
-        ],
-        "baseUrl": ".",
-        "paths": {
-            "~/*": [
-                "src/*"
-            ]
-        }
+      "module": "esnext",
+      "target": "es2017",
+      "moduleResolution": "node",
+      "experimentalDecorators": true,
+      "emitDecoratorMetadata": true,
+      "noEmitHelpers": true,
+      "noEmitOnError": true,
+      "skipLibCheck": true,
+      "lib": ["es2017", "dom"],
+      "baseUrl": ".",
+      "paths": {
+        "~/*": ["src/*"],
+        "@/*": ["src/*"]
+      }
     },
-    "exclude": [
-        "node_modules",
-        "platforms"
-    ]
-}
+    "include": ["src/tests/**/*.ts", "src/**/*.ios.ts", "src/**/*.android.ts"],
+    "files": ["./src/main.ts", "./references.d.ts"],
+    "exclude": ["node_modules", "platforms", "e2e"]
+  }
+