fix(angular): generate proxies for ion-tabbar (#15954)

angular/src/directives/proxies-list.txt

@@ -72,6 +72,7 @@ export const DIRECTIVES = [
   d.Spinner,
   d.SplitPane,
   d.Tab,
+  d.Tabbar,
   d.Tabs,
   d.Text,
   d.Textarea,

angular/src/directives/proxies.ts

@@ -826,6 +826,18 @@ export class Tab {
   }
 }
 
+export declare interface Tabbar extends StencilComponents<'IonTabbar'> {}
+@Component({ selector: 'ion-tabbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'layout', 'placement', 'selectedTab', 'tabs', 'highlight', 'translucent'] })
+export class Tabbar {
+  ionTabbarClick: EventEmitter<CustomEvent>;
+
+  constructor(r: ElementRef) {
+    const el = r.nativeElement;
+    proxyInputs(this, el, ['mode', 'color', 'layout', 'placement', 'selectedTab', 'tabs', 'highlight', 'translucent']);
+    proxyOutputs(this, el, ['ionTabbarClick']);
+  }
+}
+
 export declare interface Tabs extends StencilComponents<'IonTabs'> {}
 @Component({ selector: 'ion-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['name', 'tabbarHidden', 'useRouter'] })
 export class Tabs {

angular/src/ionic-module.ts

@@ -81,6 +81,7 @@ const DECLARATIONS = [
   d.Spinner,
   d.SplitPane,
   d.Tab,
+  d.Tabbar,
   d.Tabs,
   d.Text,
   d.Textarea,

core/src/components/tabbar/readme.md

@@ -1,6 +1,25 @@
 # ion-tabbar
 
-Tabbar is an internal component for Tabs. Please see the [Tabs documentation](../tabs).
+Tabbar is the UI component that implements the array of button of `ion-tabs`. It's provided by default when `ion-tabs` is used, though, this "implicit" tabbar can not be customized.
+
+In order to have a custom tabbar, it should be provided in user's markup as direct children of `ion-tabs`:
+
+```html
+<style>
+  ion-tabbar {
+    font-size: 20px;
+  }
+</style>
+
+<ion-tabs>
+  <!-- User tabs  -->
+  <ion-tab></ion-tab>
+  <ion-tab></ion-tab>
+
+  <!-- User provided ion-tabbar that can be customized -->
+  <ion-tabbar color="dark" layout="icon-only">
+</ion-tabs>
+```
 
 
 <!-- Auto Generated Below -->

core/src/components/tabs/readme.md

@@ -3,6 +3,26 @@
 Tabs are a top level navigation component for created multiple stacked navs.
 The component is a container of individual [Tab](../Tab/) components.
 
+`ion-tabs` is a styleless component that works as a router outlet in
+order to handle navigation. When the user does not provide a `ion-tabbar` in their markup, `ion-tabs`, by default provides one. Notice that `ion-tabbar` is the UI component that can be used to switch between tabs.
+
+In order to customize the style of the `ion-tabbar`, it should be included in the user's markup as
+direct children of `ion-tabs`, like this:
+
+```html
+<style>
+  .my-custom-tabs {
+    font-size: 20px;
+  }
+</style>
+<ion-tabs>
+  <ion-tab label="Indiana Jones"></ion-tab>
+  <ion-tab label="Star Wars"></ion-tab>
+  <ion-tab label="Jurassic Park"></ion-tab>
+
+  <ion-tabbar color="danger" layout="icon-start" placement="top"></ion-tabbar>
+</ion-tabs>
+```
 
 <!-- Auto Generated Below -->
 

core/stencil.config.ts

@@ -97,7 +97,6 @@ export const config: Config = {
         'ion-route-redirect',
         'ion-router-outlet',
         'ion-anchor',
-        'ion-tabbar',
 
         // auxiliar
         'ion-picker-column',