@nativescript-community/ui-material-bottom-navigation 6.0.0

package/README.md

@@ -0,0 +1,320 @@
+# NativeScript Material Bottom navigation
+
+Material Design's [Bottom navigation](https://material.io/components/bottom-navigation) component for NativeScript.
+
+[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-bottom-navigation.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-bottom-navigation)
+[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-bottom-navigation.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-bottom-navigation)
+
+## Contents
+
+1. [Installation](#installation)
+2. [Changelog](#changelog)
+3. [FAQ](#faq)
+4.  [Usage](#usage)
+    - [Plain NativeScript](#plain-nativescript)
+    - [Angular](#nativescript--angular)
+    - [Vue](#nativescript--vue)
+    - [React](#nativescript--react)
+5.  [API](#api)
+
+## Installation
+
+### :warning: Warning :warning:
+From NativeScript 5.x using this component will break the [NativeScript tab component](https://docs.nativescript.org/ui/components/tabs) on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either [bottomnavigationbar](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomnavigationbar) (this one is the best choice, closest to material design) or [material-tabs](https://www.npmjs.com/package/@nativescript-community/ui-material-tabs) (clone of the NativeScript one, but with a little less features).
+
+##
+
+```bash
+ns plugin add @nativescript-community/ui-material-bottom-navigation
+```
+
+Be sure to run a new build after adding plugins to avoid any issues.
+
+## [Changelog](./CHANGELOG.md)
+
+## [FAQ](../../README.md#faq)
+
+## Usage
+
+### Plain NativeScript
+
+IMPORTANT: _Make sure you include `xmlns:mds="@nativescript-community/ui-material-bottom-navigation"` on the Page element._
+
+#### XML
+
+```XML
+<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
+    <mdt:BottomNavigation selectedIndex="1">
+        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+        <mdt:MDTabStrip>
+            <mdt:MDTabStripItem>
+                <Label text="Home"></Label>
+                <Image src="font://&#xf015;" class="fas"></Image>
+            </mdt:MDTabStripItem>
+            <mdt:MDTabStripItem class="special">
+                <Label text="Account"></Label>
+                <Image src="font://&#xf007;" class="fas"></Image>
+            </mdt:MDTabStripItem>
+            <mdt:MDTabStripItem class="special">
+                <Label text="Search"></Label>
+                <Image src="font://&#xf00e;" class="fas"></Image>
+            </mdt:MDTabStripItem>
+        </mdt:MDTabStrip>
+
+        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+        <mdt:MDTabContentItem>
+            <GridLayout>
+                <Label text="Home Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </mdt:MDTabContentItem>
+        <mdt:MDTabContentItem>
+            <GridLayout>
+                <Label text="Account Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </mdt:MDTabContentItem>
+        <mdt:MDTabContentItem>
+            <GridLayout>
+                <Label text="Search Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </mdt:MDTabContentItem>
+    </mdt:BottomNavigation>
+</Page>
+```
+
+#### CSS
+
+```CSS
+MDBottomNavigation.bottom-nav {
+    background-color: orangered;
+    color: gold;
+    font-size: 18;
+}
+
+MDTabStripItem.tabstripitem-active {
+    background-color: teal;
+}
+
+MDTabStripItem.tabstripitem-active:active {
+    background-color: yellowgreen;
+}
+
+MDTabContentItem.first-tabcontent {
+    background-color: seashell;
+    color: olive;
+}
+MDTabContentItem.second-tabcontent {
+    background-color: slategray;
+    color: aquamarine;
+}
+MDTabContentItem.third-tabcontent {
+    background-color: blueviolet;
+    color: antiquewhite;
+}
+MDBottomNavigation TabStrip {
+    highlight-color: red;
+}
+```
+
+##
+
+### NativeScript + Angular
+
+```typescript
+import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-bottom-navigation/angular";
+
+@NgModule({
+    imports: [
+        NativeScriptMaterialBottomNavigationModule,
+        ...
+    ],
+    ...
+})
+```
+
+```html
+    <MDBottomNavigation selectedIndex="1">
+        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+        <MDTabStrip>
+            <MDTabStripItem>
+                <Label text="Home"></Label>
+                <Image src="font://&#xf015;" class="fas"></Image>
+            </MDTabStripItem>
+            <MDTabStripItem class="special">
+                <Label text="Account"></Label>
+                <Image src="font://&#xf007;" class="fas"></Image>
+            </MDTabStripItem>
+            <MDTabStripItem class="special">
+                <Label text="Search"></Label>
+                <Image src="font://&#xf00e;" class="fas"></Image>
+            </MDTabStripItem>
+        </MDTabStrip>
+
+        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+        <MDTabContentItem>
+            <GridLayout>
+                <Label text="Home Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </MDTabContentItem>
+        <MDTabContentItem>
+            <GridLayout>
+                <Label text="Account Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </MDTabContentItem>
+        <MDTabContentItem>
+            <GridLayout>
+                <Label text="Search Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </MDTabContentItem>
+    </MDBottomNavigation>
+```
+
+##
+
+### NativeScript + Vue
+
+```javascript
+import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
+
+Vue.use(BottomNavigation);
+```
+
+```html
+<MDBottomNavigation selectedIndex="1">
+        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+        <MDTabStrip>
+            <MDTabStripItem>
+                <Label text="Home"></Label>
+                <Image src="font://&#xf015;" class="fas"></Image>
+            </MDTabStripItem>
+            <MDTabStripItem class="special">
+                <Label text="Account"></Label>
+                <Image src="font://&#xf007;" class="fas"></Image>
+            </MDTabStripItem>
+            <MDTabStripItem class="special">
+                <Label text="Search"></Label>
+                <Image src="font://&#xf00e;" class="fas"></Image>
+            </MDTabStripItem>
+        </MDTabStrip>
+
+        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+        <MDTabContentItem>
+            <GridLayout>
+                <Label text="Home Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </MDTabContentItem>
+        <MDTabContentItem>
+            <GridLayout>
+                <Label text="Account Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </MDTabContentItem>
+        <MDTabContentItem>
+            <GridLayout>
+                <Label text="Search Page" class="h2 text-center"></Label>
+            </GridLayout>
+        </MDTabContentItem>
+    </MDBottomNavigation>
+```
+
+##
+
+### NativeScript + React
+
+First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called `src/app.ts` or similar), before the `ReactNativeScript.start` function is called. Here's how to install it:
+
+```ts
+import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
+import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';
+
+registerTabNavigationBase();
+registerBottomNavigation();
+```
+
+When available (I've not implemented it at the time of writing, but intend to in time), it would be best to use this component via the `bottomNavigationNavigatorFactory()` API exported by [React NativeScript Navigation](https://github.com/shirakaba/react-nativescript-navigation/tree/master/react-nativescript-navigation), as it makes nested navigation easy, but here's how to use it directly:
+
+```tsx
+import * as React from 'react';
+
+export function BottomNavigation() {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+    return (
+        <bottomNavigation
+            selectedIndex={selectedIndex}
+            onSelectedIndexChanged={(args) => {
+                setSelectedIndex(args.newIndex);
+            }}
+            style={{ backgroundColor: 'orange' }}
+        >
+            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
+            <tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}>
+                <tabStripItem nodeRole="items">
+                    <label nodeRole="label">Home</label>
+                    <image nodeRole="image" src="font://&#xf015;" className="fas" />
+                </tabStripItem>
+                <tabStripItem nodeRole="items">
+                    <label nodeRole="label">Account</label>
+                    <image nodeRole="image" src="font://&#xf007;" className="fas" />
+                </tabStripItem>
+                <tabStripItem nodeRole="items">
+                    <label nodeRole="label">Search</label>
+                    <image nodeRole="image" src="font://&#xf00e;" className="fas" />
+                </tabStripItem>
+            </tabStrip>
+
+            {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
+            <tabContentItem nodeRole="items">
+                <gridLayout style={{ backgroundColor: 'blue' }}>
+                    <label style={{ color: 'white' }}>Home Page</label>
+                </gridLayout>
+            </tabContentItem>
+            <tabContentItem nodeRole="items">
+                <gridLayout style={{ backgroundColor: 'cyan' }}>
+                    <label style={{ color: 'black' }}>Account Page</label>
+                </gridLayout>
+            </tabContentItem>
+            <tabContentItem nodeRole="items">
+                <gridLayout style={{ backgroundColor: 'magenta' }}>
+                    <label style={{ color: 'black' }}>Search Page</label>
+                </gridLayout>
+            </tabContentItem>
+        </bottomNavigation>
+    );
+}
+```
+
+**Troubleshooting**
+
+If you see an error like this when writing e.g. `<bottomNavigation>` into your JSX:
+
+> Property 'bottomNavigation' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
+
+Make sure that you have:
+
+1. Installed the `react-nativescript` npm module.
+2. Installed the `@types/react` npm module, strictly with the exact version provided in the [React NativeScript starter template](https://github.com/NativeScript/nativescript-app-templates/tree/master/packages/template-blank-react).
+3. Run the postinstall script that comes with the React NativeScript template – `npm run postinstall` – to patch `@types/react`.
+4. Registered the component as described above (i.e. import and run the `registerTabNavigationBase()` and `registerBottomNavigation()` methods).
+5. If using Visual Studio Code, option-click the import `@nativescript-community/ui-material-bottom-navigation/react` to jump to the file; opening the file will force it to load its provided typings.
+
+## API
+
+### Attributes
+
+| Name |Type| Description|
+| ------------- |:-------------:| -----:|
+| items  |	Array<MDTabContentItem> | 	Gets or sets the items of the BottomNavigation.|
+|selectedIndex  |	number | 	Gets or sets the selectedIndex of the BottomNavigation.|
+|swipeEnabled  |	boolean  |	Gets or sets the swipe enabled state of the Tabs.|
+|offscreenTabLimit  |	number  |	Gets or sets the number of offscreen preloaded tabs of the Tabs.|
+|tabStrip 	 |TabStrip  |	Gets or sets the tab strip of the BottomNavigation.|
+|tabsPosition  |	"top", "bottom"  |	Gets or sets the position state of the Tabs. Default value: top|
+|iOSTabBarItemsAlignment  |	"leading", "justified", "center", "centerSelected" 	 |iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified|
+
+### Events
+
+| Name | Description |
+| ------------- | -----:|
+| selectedIndexChanged | Emitted when the selectedIndex property is changed. |
+| loaded |	Emitted when the view is loaded. |
+| unloaded | Emitted when the view is unloaded. |
+| layoutChanged | Emitted when the layout bounds of a view changes due to layout processing. |

package/angular/bundles/nativescript-community-ui-material-bottom-navigation-angular.umd.js

@@ -0,0 +1,71 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@nativescript/angular'), require('@nativescript-community/ui-material-bottom-navigation')) :
+    typeof define === 'function' && define.amd ? define('@nativescript-community/ui-material-bottom-navigation-angular', ['exports', '@angular/core', '@nativescript/angular', '@nativescript-community/ui-material-bottom-navigation'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['nativescript-community'] = global['nativescript-community'] || {}, global['nativescript-community']['ui-material-bottom-navigation-angular'] = {}), global.ng.core, global['ns-angular'], global['ns-material-bottom-navigation']));
+}(this, (function (exports, i0, angular, uiMaterialBottomNavigation) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+
+    var MaterialBottomNavigationDirective = /** @class */ (function () {
+        function MaterialBottomNavigationDirective() {
+        }
+        return MaterialBottomNavigationDirective;
+    }());
+    MaterialBottomNavigationDirective.ɵfac = function MaterialBottomNavigationDirective_Factory(t) { return new (t || MaterialBottomNavigationDirective)(); };
+    MaterialBottomNavigationDirective.ɵdir = i0__namespace.ɵɵdefineDirective({ type: MaterialBottomNavigationDirective, selectors: [["MDBottomNavigation"]] });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MaterialBottomNavigationDirective, [{
+                type: i0.Directive,
+                args: [{ selector: 'MDBottomNavigation' }]
+            }], null, null);
+    })();
+    var NativeScriptMaterialBottomNavigationModule = /** @class */ (function () {
+        function NativeScriptMaterialBottomNavigationModule() {
+        }
+        return NativeScriptMaterialBottomNavigationModule;
+    }());
+    NativeScriptMaterialBottomNavigationModule.ɵfac = function NativeScriptMaterialBottomNavigationModule_Factory(t) { return new (t || NativeScriptMaterialBottomNavigationModule)(); };
+    NativeScriptMaterialBottomNavigationModule.ɵmod = i0__namespace.ɵɵdefineNgModule({ type: NativeScriptMaterialBottomNavigationModule });
+    NativeScriptMaterialBottomNavigationModule.ɵinj = i0__namespace.ɵɵdefineInjector({});
+    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(NativeScriptMaterialBottomNavigationModule, { declarations: [MaterialBottomNavigationDirective], exports: [MaterialBottomNavigationDirective] }); })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NativeScriptMaterialBottomNavigationModule, [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [MaterialBottomNavigationDirective],
+                        exports: [MaterialBottomNavigationDirective]
+                    }]
+            }], null, null);
+    })();
+    angular.registerElement('MDBottomNavigation', function () { return uiMaterialBottomNavigation.BottomNavigation; });
+    angular.registerElement('MDTabStrip', function () { return uiMaterialBottomNavigation.TabStrip; });
+    angular.registerElement('MDTabStripItem', function () { return uiMaterialBottomNavigation.TabStripItem; });
+    angular.registerElement('MDTabContentItem', function () { return uiMaterialBottomNavigation.TabContentItem; });
+
+    exports.MaterialBottomNavigationDirective = MaterialBottomNavigationDirective;
+    exports.NativeScriptMaterialBottomNavigationModule = NativeScriptMaterialBottomNavigationModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=nativescript-community-ui-material-bottom-navigation-angular.umd.js.map

package/angular/bundles/nativescript-community-ui-material-bottom-navigation-angular.umd.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@nativescript/angular"),require("@nativescript-community/ui-material-bottom-navigation")):"function"==typeof define&&define.amd?define("@nativescript-community/ui-material-bottom-navigation-angular",["exports","@angular/core","@nativescript/angular","@nativescript-community/ui-material-bottom-navigation"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["nativescript-community"]=e["nativescript-community"]||{},e["nativescript-community"]["ui-material-bottom-navigation-angular"]={}),e.ng.core,e["ns-angular"],e["ns-material-bottom-navigation"])}(this,(function(e,t,n,i){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=o(t),a=function(){};a.ɵfac=function(e){return new(e||a)},a.ɵdir=r.ɵɵdefineDirective({type:a,selectors:[["MDBottomNavigation"]]}),("undefined"==typeof ngDevMode||ngDevMode)&&r.ɵsetClassMetadata(a,[{type:t.Directive,args:[{selector:"MDBottomNavigation"}]}],null,null);var u=function(){};u.ɵfac=function(e){return new(e||u)},u.ɵmod=r.ɵɵdefineNgModule({type:u}),u.ɵinj=r.ɵɵdefineInjector({}),("undefined"==typeof ngJitMode||ngJitMode)&&r.ɵɵsetNgModuleScope(u,{declarations:[a],exports:[a]}),("undefined"==typeof ngDevMode||ngDevMode)&&r.ɵsetClassMetadata(u,[{type:t.NgModule,args:[{declarations:[a],exports:[a]}]}],null,null),n.registerElement("MDBottomNavigation",(function(){return i.BottomNavigation})),n.registerElement("MDTabStrip",(function(){return i.TabStrip})),n.registerElement("MDTabStripItem",(function(){return i.TabStripItem})),n.registerElement("MDTabContentItem",(function(){return i.TabContentItem})),e.MaterialBottomNavigationDirective=a,e.NativeScriptMaterialBottomNavigationModule=u,Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=nativescript-community-ui-material-bottom-navigation-angular.umd.min.js.map

package/angular/esm2015/index.js

@@ -0,0 +1,30 @@
+import { Directive, NgModule } from '@angular/core';
+import { registerElement } from '@nativescript/angular';
+import { BottomNavigation, TabContentItem, TabStrip, TabStripItem } from '@nativescript-community/ui-material-bottom-navigation';
+import * as i0 from "@angular/core";
+export class MaterialBottomNavigationDirective {
+}
+MaterialBottomNavigationDirective.ɵfac = function MaterialBottomNavigationDirective_Factory(t) { return new (t || MaterialBottomNavigationDirective)(); };
+MaterialBottomNavigationDirective.ɵdir = i0.ɵɵdefineDirective({ type: MaterialBottomNavigationDirective, selectors: [["MDBottomNavigation"]] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MaterialBottomNavigationDirective, [{
+        type: Directive,
+        args: [{ selector: 'MDBottomNavigation' }]
+    }], null, null); })();
+export class NativeScriptMaterialBottomNavigationModule {
+}
+NativeScriptMaterialBottomNavigationModule.ɵfac = function NativeScriptMaterialBottomNavigationModule_Factory(t) { return new (t || NativeScriptMaterialBottomNavigationModule)(); };
+NativeScriptMaterialBottomNavigationModule.ɵmod = i0.ɵɵdefineNgModule({ type: NativeScriptMaterialBottomNavigationModule });
+NativeScriptMaterialBottomNavigationModule.ɵinj = i0.ɵɵdefineInjector({});
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NativeScriptMaterialBottomNavigationModule, { declarations: [MaterialBottomNavigationDirective], exports: [MaterialBottomNavigationDirective] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NativeScriptMaterialBottomNavigationModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [MaterialBottomNavigationDirective],
+                exports: [MaterialBottomNavigationDirective]
+            }]
+    }], null, null); })();
+registerElement('MDBottomNavigation', () => BottomNavigation);
+registerElement('MDTabStrip', () => TabStrip);
+registerElement('MDTabStripItem', () => TabStripItem);
+registerElement('MDTabContentItem', () => TabContentItem);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYm90dG9tLW5hdmlnYXRpb24vYW5ndWxhci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGNBQWMsRUFBRSxRQUFRLEVBQUUsWUFBWSxFQUFFLE1BQU0sdURBQXVELENBQUM7O0FBR2pJLE1BQU0sT0FBTyxpQ0FBaUM7O2tIQUFqQyxpQ0FBaUM7c0VBQWpDLGlDQUFpQzt1RkFBakMsaUNBQWlDO2NBRDdDLFNBQVM7ZUFBQyxFQUFFLFFBQVEsRUFBRSxvQkFBb0IsRUFBRTs7QUFPN0MsTUFBTSxPQUFPLDBDQUEwQzs7b0lBQTFDLDBDQUEwQzs4RUFBMUMsMENBQTBDOzt3RkFBMUMsMENBQTBDLG1CQU4xQyxpQ0FBaUMsYUFBakMsaUNBQWlDO3VGQU1qQywwQ0FBMEM7Y0FKdEQsUUFBUTtlQUFDO2dCQUNOLFlBQVksRUFBRSxDQUFDLGlDQUFpQyxDQUFDO2dCQUNqRCxPQUFPLEVBQUUsQ0FBQyxpQ0FBaUMsQ0FBQzthQUMvQzs7QUFHRCxlQUFlLENBQUMsb0JBQW9CLEVBQUUsR0FBRyxFQUFFLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztBQUM5RCxlQUFlLENBQUMsWUFBWSxFQUFFLEdBQUcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0FBQzlDLGVBQWUsQ0FBQyxnQkFBZ0IsRUFBRSxHQUFHLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FBQztBQUN0RCxlQUFlLENBQUMsa0JBQWtCLEVBQUUsR0FBRyxFQUFFLENBQUMsY0FBYyxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyByZWdpc3RlckVsZW1lbnQgfSBmcm9tICdAbmF0aXZlc2NyaXB0L2FuZ3VsYXInO1xuaW1wb3J0IHsgQm90dG9tTmF2aWdhdGlvbiwgVGFiQ29udGVudEl0ZW0sIFRhYlN0cmlwLCBUYWJTdHJpcEl0ZW0gfSBmcm9tICdAbmF0aXZlc2NyaXB0LWNvbW11bml0eS91aS1tYXRlcmlhbC1ib3R0b20tbmF2aWdhdGlvbic7XG5cbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ01EQm90dG9tTmF2aWdhdGlvbicgfSlcbmV4cG9ydCBjbGFzcyBNYXRlcmlhbEJvdHRvbU5hdmlnYXRpb25EaXJlY3RpdmUge31cblxuQE5nTW9kdWxlKHtcbiAgICBkZWNsYXJhdGlvbnM6IFtNYXRlcmlhbEJvdHRvbU5hdmlnYXRpb25EaXJlY3RpdmVdLFxuICAgIGV4cG9ydHM6IFtNYXRlcmlhbEJvdHRvbU5hdmlnYXRpb25EaXJlY3RpdmVdXG59KVxuZXhwb3J0IGNsYXNzIE5hdGl2ZVNjcmlwdE1hdGVyaWFsQm90dG9tTmF2aWdhdGlvbk1vZHVsZSB7fVxuXG5yZWdpc3RlckVsZW1lbnQoJ01EQm90dG9tTmF2aWdhdGlvbicsICgpID0+IEJvdHRvbU5hdmlnYXRpb24pO1xucmVnaXN0ZXJFbGVtZW50KCdNRFRhYlN0cmlwJywgKCkgPT4gVGFiU3RyaXApO1xucmVnaXN0ZXJFbGVtZW50KCdNRFRhYlN0cmlwSXRlbScsICgpID0+IFRhYlN0cmlwSXRlbSk7XG5yZWdpc3RlckVsZW1lbnQoJ01EVGFiQ29udGVudEl0ZW0nLCAoKSA9PiBUYWJDb250ZW50SXRlbSk7XG4iXX0=

package/angular/esm2015/nativescript-community-ui-material-bottom-navigation-angular.js

@@ -0,0 +1,2 @@
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF0aXZlc2NyaXB0LWNvbW11bml0eS11aS1tYXRlcmlhbC1ib3R0b20tbmF2aWdhdGlvbi1hbmd1bGFyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2JvdHRvbS1uYXZpZ2F0aW9uL2FuZ3VsYXIvbmF0aXZlc2NyaXB0LWNvbW11bml0eS11aS1tYXRlcmlhbC1ib3R0b20tbmF2aWdhdGlvbi1hbmd1bGFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlBLGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==

package/angular/fesm2015/nativescript-community-ui-material-bottom-navigation-angular.js

@@ -0,0 +1,33 @@
+import * as i0 from '@angular/core';
+import { Directive, NgModule } from '@angular/core';
+import { registerElement } from '@nativescript/angular';
+import { BottomNavigation, TabStrip, TabStripItem, TabContentItem } from '@nativescript-community/ui-material-bottom-navigation';
+
+class MaterialBottomNavigationDirective {
+}
+MaterialBottomNavigationDirective.ɵfac = function MaterialBottomNavigationDirective_Factory(t) { return new (t || MaterialBottomNavigationDirective)(); };
+MaterialBottomNavigationDirective.ɵdir = i0.ɵɵdefineDirective({ type: MaterialBottomNavigationDirective, selectors: [["MDBottomNavigation"]] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MaterialBottomNavigationDirective, [{
+        type: Directive,
+        args: [{ selector: 'MDBottomNavigation' }]
+    }], null, null); })();
+class NativeScriptMaterialBottomNavigationModule {
+}
+NativeScriptMaterialBottomNavigationModule.ɵfac = function NativeScriptMaterialBottomNavigationModule_Factory(t) { return new (t || NativeScriptMaterialBottomNavigationModule)(); };
+NativeScriptMaterialBottomNavigationModule.ɵmod = i0.ɵɵdefineNgModule({ type: NativeScriptMaterialBottomNavigationModule });
+NativeScriptMaterialBottomNavigationModule.ɵinj = i0.ɵɵdefineInjector({});
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NativeScriptMaterialBottomNavigationModule, { declarations: [MaterialBottomNavigationDirective], exports: [MaterialBottomNavigationDirective] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NativeScriptMaterialBottomNavigationModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [MaterialBottomNavigationDirective],
+                exports: [MaterialBottomNavigationDirective]
+            }]
+    }], null, null); })();
+registerElement('MDBottomNavigation', () => BottomNavigation);
+registerElement('MDTabStrip', () => TabStrip);
+registerElement('MDTabStripItem', () => TabStripItem);
+registerElement('MDTabContentItem', () => TabContentItem);
+
+export { MaterialBottomNavigationDirective, NativeScriptMaterialBottomNavigationModule };
+//# sourceMappingURL=nativescript-community-ui-material-bottom-navigation-angular.js.map

package/angular/index.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class MaterialBottomNavigationDirective {
+    static ɵfac: i0.ɵɵFactoryDef<MaterialBottomNavigationDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MaterialBottomNavigationDirective, "MDBottomNavigation", never, {}, {}, never>;
+}
+export declare class NativeScriptMaterialBottomNavigationModule {
+    static ɵfac: i0.ɵɵFactoryDef<NativeScriptMaterialBottomNavigationModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<NativeScriptMaterialBottomNavigationModule, [typeof MaterialBottomNavigationDirective], never, [typeof MaterialBottomNavigationDirective]>;
+    static ɵinj: i0.ɵɵInjectorDef<NativeScriptMaterialBottomNavigationModule>;
+}

package/angular/nativescript-community-ui-material-bottom-navigation-angular.d.ts

@@ -0,0 +1,2 @@
+/// <amd-module name="@nativescript-community/ui-material-bottom-navigation-angular" />
+export * from './index';

package/angular/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@nativescript-community/ui-material-bottom-navigation-angular",
+  "main": "bundles/nativescript-community-ui-material-bottom-navigation-angular.umd.js",
+  "module": "fesm2015/nativescript-community-ui-material-bottom-navigation-angular.js",
+  "es2015": "fesm2015/nativescript-community-ui-material-bottom-navigation-angular.js",
+  "esm2015": "esm2015/nativescript-community-ui-material-bottom-navigation-angular.js",
+  "fesm2015": "fesm2015/nativescript-community-ui-material-bottom-navigation-angular.js",
+  "typings": "nativescript-community-ui-material-bottom-navigation-angular.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "scripts": {
+    "prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled by Ivy. This is not allowed.\\nPlease delete and rebuild the package, without compiling with Ivy, before attempting to publish.\\n')\" && exit 1"
+  }
+}

package/index.android.d.ts

@@ -0,0 +1,69 @@
+import { TabContentItem } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-content-item';
+import { TabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-navigation-base';
+import { TabStrip } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-strip';
+import { TabStripItem } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-strip-item';
+import { Color, CoreTypes, Font } from '@nativescript/core';
+export { TabContentItem, TabStrip, TabStripItem };
+export declare const tabs: WeakRef<BottomNavigation>[];
+export declare class BottomNavigation extends TabNavigationBase {
+    private _contentView;
+    private _contentViewId;
+    private _bottomNavigationBar;
+    private _currentFragment;
+    private _currentTransaction;
+    private _attachedToWindow;
+    _originalBackground: any;
+    private _textTransform;
+    private _selectedItemColor;
+    private _unSelectedItemColor;
+    fragments: androidx.fragment.app.Fragment[];
+    constructor();
+    get _hasFragments(): boolean;
+    onItemsChanged(oldItems: TabContentItem[], newItems: TabContentItem[]): void;
+    createNativeView(): org.nativescript.widgets.GridLayout;
+    initNativeView(): void;
+    _loadUnloadTabItems(newIndex: number): void;
+    onLoaded(): void;
+    _onAttachedToWindow(): void;
+    _onDetachedFromWindow(): void;
+    onUnloaded(): void;
+    disposeNativeView(): void;
+    _onRootViewReset(): void;
+    private disposeTabFragments;
+    private attachFragment;
+    changeTab(index: number): void;
+    private instantiateItem;
+    private setPrimaryItem;
+    private destroyItem;
+    private hideFragment;
+    private showFragment;
+    private removeFragment;
+    private setTabStripItems;
+    private getItemLabelTextTransform;
+    private createTabItemSpec;
+    private getOriginalIcon;
+    private getDrawableInfo;
+    private getIconInfo;
+    private getFixedSizeIcon;
+    updateAndroidItemAt(index: number, spec: com.nativescript.material.core.TabItemSpec): void;
+    getTabBarBackgroundColor(): android.graphics.drawable.Drawable;
+    setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void;
+    private updateTabStripItems;
+    _setItemsColors(items: TabStripItem[]): void;
+    getTabBarSelectedItemColor(): Color;
+    setTabBarSelectedItemColor(value: Color): void;
+    getTabBarUnSelectedItemColor(): Color;
+    setTabBarUnSelectedItemColor(value: Color): void;
+    private updateItem;
+    setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void;
+    setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void;
+    _setItemColor(tabStripItem: TabStripItem): void;
+    private setIconColor;
+    setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void;
+    setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void;
+    setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void;
+    setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void;
+    setTabBarItemTextTransform(tabStripItem: TabStripItem, value: CoreTypes.TextTransformType): void;
+    getTabBarTextTransform(): CoreTypes.TextTransformType;
+    setTabBarTextTransform(value: CoreTypes.TextTransformType): void;
+}