style(components): add protected to the render function

packages/core/src/components/app/app.tsx

@@ -68,7 +68,7 @@ export class IonApp implements App {
     return null;
   }
 
-  render() {
+  protected render() {
     return ([
       <slot></slot>
     ]);

packages/core/src/components/avatar/avatar.tsx

@@ -21,7 +21,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Avatar {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/badge/badge.tsx

@@ -39,7 +39,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Badge {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/button/button.tsx

@@ -163,7 +163,7 @@ export class Button {
    */
   @Prop() color: string;
 
-  render() {
+  protected render() {
     const buttonType = this.buttonType;
     const mode = this.mode;
 

packages/core/src/components/buttons/buttons.tsx

@@ -17,7 +17,7 @@ export class Buttons {
     }
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card-content/card-content.tsx

@@ -12,7 +12,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardContent {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card-header/card-header.tsx

@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardHeader {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card-title/card-title.tsx

@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardTitle {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card/card.tsx

@@ -12,7 +12,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Card {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/checkbox/checkbox.tsx

@@ -148,7 +148,7 @@ export class Checkbox {
     };
   }
 
-  render() {
+  protected render() {
     const checkboxClasses: CssClassMap = {
       'checkbox-icon': true,
       'checkbox-checked': this.checked

packages/core/src/components/chip-button/chip-button.tsx

@@ -72,7 +72,7 @@ export class ChipButton {
     return classList;
   }
 
-  render() {
+  protected render() {
     const buttonType = 'chip-button';
 
     const hostClasses = getElementClassObject(this.el.classList);

packages/core/src/components/chip/chip.tsx

@@ -99,7 +99,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Chip {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/content/content.tsx

@@ -78,7 +78,7 @@ export class Content {
   @Prop() fullscreen: boolean = false;
 
 
-  render() {
+  protected render() {
     const props: any = {};
     const scrollStyle: any = {};
 

packages/core/src/components/fab/fab-container.tsx

@@ -98,7 +98,7 @@ export class FabContainer {
     fab.close();
   }
 
-  render() {
+  protected render() {
     return (
       <slot></slot>
     );

packages/core/src/components/fab/fab-list.tsx

@@ -53,7 +53,7 @@ export class FabList {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <slot></slot>
     );

packages/core/src/components/fab/fab.tsx

@@ -151,7 +151,7 @@ export class FabButton {
     ];
   }
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'fab');
     const hostClasses = getElementClassObject(this.el.classList);
 

packages/core/src/components/fixed/fixed.tsx

@@ -34,7 +34,7 @@ export class Fixed {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <slot></slot>
     );

packages/core/src/components/footer/footer.tsx

@@ -8,7 +8,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Footer {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/header/header.tsx

@@ -8,7 +8,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Header {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/input/input.tsx

@@ -319,7 +319,7 @@ export class Input implements InputComponent {
   }
 
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
     // TODO aria-labelledby={this.item.labelId}
 

packages/core/src/components/input/textarea.tsx

@@ -298,7 +298,7 @@ export class Textarea implements TextareaComponent {
   }
 
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
     // TODO aria-labelledby={this.item.labelId}
 

packages/core/src/components/item-divider/item-divider.tsx

@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class ItemDivider {
-  render() {
+  protected render() {
     return [
       <slot name='start'></slot>,
       <div class='item-inner'>

packages/core/src/components/item-sliding/item-option.tsx

@@ -34,7 +34,7 @@ export class ItemOption {
     return !!ele;
   }
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'item-option-button');
 
     const TagType = this.href ? 'a' : 'button';

packages/core/src/components/item-sliding/item-options.tsx

@@ -55,7 +55,7 @@ export class ItemOptions {
     return this.el.offsetWidth;
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/item-sliding/item-sliding.tsx

@@ -485,7 +485,7 @@ export class ItemSliding {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <ion-gesture {...{
         'canStart': this.canStart.bind(this),

packages/core/src/components/item/item.tsx

@@ -104,7 +104,7 @@ export class Item {
     return this.itemId + '-' + (++this.ids);
   }
 
-  render() {
+  protected render() {
     let childStyles = {};
 
     for (var key in this.itemStyles) {

packages/core/src/components/label/label.tsx

@@ -63,7 +63,7 @@ export class Label {
     });
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/list-header/list-header.tsx

@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class ListHeader {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/list/list.tsx

@@ -18,7 +18,7 @@ export class List {
 
   @State() openContainer: ItemSliding;
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 

packages/core/src/components/menu/menu.tsx

@@ -180,7 +180,7 @@ export class Menu {
     return this.isRightSide ? 'right' : 'left';
   }
 
-  render() {
+  protected render() {
     return ([
       <div class='menu-inner'>
         <slot></slot>

packages/core/src/components/nav-controller/nav-controller.tsx

@@ -102,7 +102,7 @@ export class NavControllerImpl implements NavController {
     });
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/nav/nav.tsx

@@ -124,7 +124,7 @@ export class IonNav implements Nav {
   }
 
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/nav/page-one.tsx

@@ -16,7 +16,7 @@ export class PageOne {
     nav.push('page-two');
   }
 
-  render() {
+  protected render() {
     return [<ion-header>
       <ion-navbar>
         <ion-title>Page One</ion-title>

packages/core/src/components/nav/page-three.tsx

@@ -16,7 +16,7 @@ export class PageThree {
     nav.pop();
   }
 
-  render() {
+  protected render() {
     return [<ion-header>
       <ion-navbar>
         <ion-title>Page Three</ion-title>

packages/core/src/components/nav/page-two.tsx

@@ -21,7 +21,7 @@ export class PageTwo {
     nav.pop();
   }
 
-  render() {
+  protected render() {
     return [<ion-header>
       <ion-navbar>
         <ion-title>Page Two</ion-title>

packages/core/src/components/note/note.tsx

@@ -40,7 +40,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Note {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/page/page.tsx

@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Page {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/popover/popover.tsx

@@ -266,7 +266,7 @@ export class Popover {
     }
   }
 
-  render() {
+  protected render() {
     const ThisComponent = this.component;
 
     const wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper');

packages/core/src/components/radio/radio-group.tsx

@@ -177,7 +177,7 @@ export class RadioGroup {
     };
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/radio/radio.tsx

@@ -164,7 +164,7 @@ export class Radio {
     };
   }
 
-  render() {
+  protected render() {
     const radioClasses: CssClassMap = {
       'radio-icon': true,
       'radio-checked': this.checked

packages/core/src/components/range/range-knob.tsx

@@ -57,7 +57,7 @@ export class RangeKnob {
     };
   }
 
-  render() {
+  protected render() {
     if (this.pin) {
       return [
         <div class='range-pin' role='presentation'>{this.val}</div>,

packages/core/src/components/range/range.tsx

@@ -329,7 +329,7 @@ export class Range implements BaseInputComponent {
     };
   }
 
-  render() {
+  protected render() {
     return [
       <slot name='range-start' />,
 

packages/core/src/components/reorder/reorder-group.tsx

@@ -372,7 +372,7 @@ export class ReorderGroup {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <ion-gesture {...{
         disableScroll: true,

packages/core/src/components/reorder/reorder.tsx

@@ -12,7 +12,7 @@ export class ItemReorder {
     this.hasContent = this.ele.childElementCount > 0;
   }
 
-  render() {
+  protected render() {
     // TODO: https://github.com/ionic-team/stencil/issues/171
     if (this.hasContent === true) {
       return <slot></slot>;

packages/core/src/components/router/route-link.tsx

@@ -21,7 +21,7 @@ export class RouteLink {
     */
   }
 
-  render() {
+  protected render() {
     /*
     const router = document.querySelector(this.router);
     const match = router.match

packages/core/src/components/router/route.tsx

@@ -32,7 +32,7 @@ export class Route {
 */
   }
 
-  render() {
+  protected render() {
 /*
     this.match.url = this.routerInstance.routeMatch.url;
     const match = this.match

packages/core/src/components/router/router.tsx

@@ -55,7 +55,7 @@ export class Router {
     console.log('Hash change', e)
   }
 
-  render() {
+  protected render() {
     console.log('<ion-router> rendering')
     return (
       <slot></slot>

packages/core/src/components/scroll/scroll.tsx

@@ -341,7 +341,7 @@ export class Scroll {
     this.gesture = this.detail = this.detail.event = null;
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 

packages/core/src/components/searchbar/searchbar.tsx

@@ -349,7 +349,7 @@ export class Searchbar {
 
   // TODO remove the ion-buttons and replace with native buttons to remove
   // the button dependency
-  render() {
+  protected render() {
     return [
       <div class='searchbar-input-container'>
         <ion-button

packages/core/src/components/segment-button/segment-button.tsx

@@ -105,7 +105,7 @@ export class SegmentButton {
     return classList;
   }
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
     const hostClasses = getElementClassObject(this.el.classList);
 

packages/core/src/components/segment/segment.tsx

@@ -134,7 +134,7 @@ export class Segment {
     };
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/select-option/select-option.tsx

@@ -32,7 +32,7 @@ export class SelectOption {
     return this.el.textContent || '';
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 

packages/core/src/components/select/select-popover.tsx

@@ -50,7 +50,7 @@ export class SelectPopover {
     this.dismiss(value);
   }
 
-  render() {
+  protected render() {
     return (
       <ion-list no-lines={this.mode === 'md'}>
         <ion-radio-group value={this.value}>

packages/core/src/components/select/select.tsx

@@ -369,7 +369,7 @@ export class Select {
     };
   }
 
-  render() {
+  protected render() {
     let addPlaceholderClass = false;
 
     // If selected text has been passed in, use that first

packages/core/src/components/skeleton-text/skeleton-text.tsx

@@ -8,7 +8,7 @@ import { Component, Prop } from '@stencil/core';
 export class SkeletonText {
   @Prop() width: string = '100%';
 
-  render() {
+  protected render() {
     return <span style={{width: this.width}}>&nbsp;</span>;
   }
 }

packages/core/src/components/slides/slide.tsx

@@ -28,7 +28,7 @@ export class Slide {
     };
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/slides/slides.tsx

@@ -133,7 +133,7 @@ export class Slides {
   @Prop() keyboardControl: boolean;
 
 
-  render() {
+  protected render() {
     return (
       <div class='swiper-container' data-dir='rtl'>
         <div class='swiper-wrapper'>

packages/core/src/components/spinner/spinner.tsx

@@ -167,7 +167,7 @@ export class Spinner {
     };
   }
 
-  render() {
+  protected render() {
     const name = this.getName();
 
     const spinner = SPINNERS[name] || SPINNERS['lines'];

packages/core/src/components/split-pane/split-pane.tsx

@@ -265,7 +265,7 @@ export class SplitPane {
     };
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 

packages/core/src/components/tabs/tab-bar.tsx

@@ -36,7 +36,7 @@ export class TabBar {
     this.onTabSelected && this.onTabSelected(tab, index);
   }
 
-  render() {
+  protected render() {
     return (
       <div class="tabbar" role="tablist">
         {this.tabs.map((tab, index) => {

packages/core/src/components/tabs/tab-button.tsx

@@ -46,7 +46,7 @@ export class TabButton {
     };
   }
 
-  render() {
+  protected render() {
     if (!this.tab) {
       return null;
     }

packages/core/src/components/tabs/tab-highlight.tsx

@@ -5,7 +5,7 @@ import { Component } from '@stencil/core';
   tag: 'ion-tab-highlight'
 })
 export class TabHighlight {
-  render() {
+  protected render() {
     return (
       <div></div>
     );

packages/core/src/components/tabs/tab.tsx

@@ -94,7 +94,7 @@ export class Tab {
     this.ionTabDidLoad.emit({ tab: this });
   }
 
-  render() {
+  protected render() {
     const RootComponent = this.root;
     return [
       <RootComponent />,

packages/core/src/components/tabs/tabs.tsx

@@ -85,7 +85,7 @@ export class Tabs {
     this.ionChange && this.ionChange(tab);
   }
 
-  render() {
+  protected render() {
     return [
       <ion-tab-bar
         tabs={this.tabs}

packages/core/src/components/thumbnail/thumbnail.tsx

@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Thumbnail {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/title/title.tsx

@@ -52,7 +52,7 @@ export class ToolbarTitle {
   mode: string;
   color: string;
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'toolbar-title');
 
     return [

packages/core/src/components/toggle/toggle.tsx

@@ -149,7 +149,7 @@ export class Toggle implements BooleanInputComponent {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <ion-gesture {...{
         'canStart': this.canStart.bind(this),

packages/core/src/components/toolbar/navbar.tsx

@@ -78,7 +78,7 @@ export class Navbar {
     };
   }
 
-  render() {
+  protected render() {
     const backButtonIcon = this.backButtonIcon || this.config.get('backButtonText', 'Back');
     const backButtonText = this.backButtonText || this.config.get('backButtonIcon', 'Back');
 

packages/core/src/components/toolbar/toolbar.tsx

@@ -122,7 +122,7 @@ export class Toolbar {
     };
   }
 
-  render() {
+  protected render() {
     const backgroundCss = createThemedClasses(this.mode, this.color, 'toolbar-background');
     const contentCss = createThemedClasses(this.mode, this.color, 'toolbar-content');