Merge branch 'master' of github.com:Akylas/nativescript-material-components

Author: farfromrefug

README.md

@@ -23,7 +23,7 @@ Build beautiful, usable products using Material Components for NativeScript.
 ## Android migration to AndroidX
 
 For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.
-inside ```App_ressources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```
+inside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```
 
 ## Contribution
 

demo-ng/src/app/examples/bottom-navigation-bar/third-tab/third-tab.component.html

@@ -1,3 +1,3 @@
 <GridLayout class="p-20">
-  <Label class="h1 text-center" text="Thrid tab" textWrap="true"></Label>
+  <Label class="h1 text-center" text="Third tab" textWrap="true"></Label>
 </GridLayout>

demo-vue/app/examples/BottomNavigationBar.vue

@@ -5,10 +5,21 @@
         </ActionBar>
         <GridLayout rows="*, auto" backgroundColor="blue">
             <StackLayout class="page" backgroundColor="white" row="0">
-                <!-- <ns-first-tab *ngSwitchDefault></ns-first-tab> -->
-                <!-- <ns-third-tab *ngSwitchCase="2"></ns-third-tab> -->
+                <GridLayout class="p-20" v-if="currentTab === 0"> -->
+                    <Label class="h1 text-center" text="First tab" textWrap="true"></Label>
+                </GridLayout> -->
+                <GridLayout class="p-20" v-if="currentTab === 2">
+                    <Label class="h1 text-center" text="Third tab" textWrap="true"></Label>
+                </GridLayout>
             </StackLayout>
-            <MDBottomNavigationBar row="1" activeColor="red" @loaded="onbottomNavigationBarLoaded">
+            <MDBottomNavigationBar
+                row="1"
+                activeColor="red" 
+                @loaded="onbottomNavigationBarLoaded"
+                @tabPressed="onBottomNavigationTabPressed"
+                @tabSelected="onBottomNavigationTabSelected"
+                @tabReselected="onBottomNavigationTabReselected"                
+            >
                 <MDBottomNavigationTab title="First" icon="res://ic_home" activeColor="green"/>
                 <MDBottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
                 <MDBottomNavigationTab title="Third" icon="res://ic_menu" inactiveColor="brown"/>
@@ -30,7 +41,8 @@ export default Vue.extend({
     name: 'BottomNavigationBar',
     data() {
         return {
-            title: title
+            title: title,
+            currentTab: 0
         };
     },
     methods: {
@@ -51,6 +63,7 @@ export default Vue.extend({
         onBottomNavigationTabSelected(args: TabSelectedEventData): void {
             console.log(`old tab index:  ${args.oldIndex}`);
             console.log(`selected tab index:  ${args.newIndex}`);
+            this.currentTab = args.newIndex;
         },
 
         onBottomNavigationTabReselected(args: TabReselectedEventData): void {
@@ -59,4 +72,4 @@ export default Vue.extend({
         }
     }
 });
-</script>
+</script>

package.json

@@ -56,6 +56,7 @@
         "@commitlint/config-conventional": "^8.3.4",
         "@nativescript/angular":"8.21.0",
         "@nativescript/core":"6.5.1",
+        "@types/node": "14.0.4",
         "husky": "^4.2.3",
         "lerna": "^3.20.2",
         "nativescript-vue": "2.5.1",

packages/nativescript-material-bottomnavigationbar/README.md

@@ -32,7 +32,7 @@ tns plugin add nativescript-material-bottomnavigationbar
 
 ### Usage
 
-Before start using the plugin you need to add the icons for android & iOS in your `App_Resources` directory.
+Before start using the plugin you need to add the icons for Android & iOS in your `App_Resources` directory.
 
 #### XML
 

src/bottomsheet/angular/bottomsheet.service.ts

@@ -121,7 +121,7 @@ export class BottomSheetService {
         const detachedLoaderFactory = factoryResolver.resolveComponentFactory(DetachedLoader);
         const childInjector = this.createChildInjector(bottomSheetParams, viewContainerRef);
 
-        return viewContainerRef.createComponent(detachedLoaderFactory, -1, childInjector, null);
+        return viewContainerRef.createComponent(detachedLoaderFactory, 0, childInjector, null);
     }
 
     private async loadComponent(type: Type<any>): Promise<ViewWithBottomSheetBase> {