fix: #216 - review that properties that are accessed from template are public

Author: mseemann

README.md

@@ -20,7 +20,7 @@ This package assumes that you are building an Angular2 app with TypeScript. Angu
 **Here is a plnkr if you'd like to play around http://plnkr.co/edit/I3dLfLUDIH2xlEJqj0da?p=preview.**
 
 
-### Status of the npm package version 2.0 (mdl version 1.2.1; angular 2.0 final)
+### Status of the npm package version 2 (mdl version 1.2.1; angular 2 final)
 
 - Badges
 - Buttons

src/lib/components/badge/mdl-badge.directive.ts

@@ -18,7 +18,7 @@ export class MdlBadgeDirective implements OnChanges {
 
   private el: HTMLElement;
 
-  @Input('mdl-badge') private mdlBadgeContent: string;
+  @Input('mdl-badge') public mdlBadgeContent: string;
 
   constructor(private elementRef: ElementRef, private renderer: Renderer) {
     this.el = elementRef.nativeElement;

src/lib/components/button/mdl-button.component.ts

@@ -60,8 +60,8 @@ export class MdlButtonComponent implements OnChanges {
 
   private element: HTMLElement;
 
-  @Input('mdl-button-type') private mdlButtonType: 'raised' | 'fab' | 'mini-fab' | 'icon' | '' ;
-  @Input('mdl-colored') private mdlColoredType: 'primary' | 'accent' | '';
+  @Input('mdl-button-type') public mdlButtonType: 'raised' | 'fab' | 'mini-fab' | 'icon' | '' ;
+  @Input('mdl-colored') public mdlColoredType: 'primary' | 'accent' | '';
   @Input() @BooleanProperty() public disabled = false;
 
   constructor(public elementRef: ElementRef, private renderer: Renderer) {

src/lib/components/checkbox/mdl-checkbox.component.ts

@@ -57,7 +57,7 @@ export class MdlCheckboxComponent implements ControlValueAccessor {
 
   @Input() @BooleanProperty() public disabled = false;
 
-  private change: EventEmitter<boolean> = new EventEmitter<boolean>();
+  public change: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   private value_: boolean = false;
 

src/lib/components/chips/mdl-chip.component.ts

@@ -28,8 +28,8 @@ export class MdlChipComponent {
 
   @Input('mdl-label') public mdlLabel;
   @Input('mdl-action-icon') public mdlActionIcon;
-  @Output('action-click') private actionClick = new EventEmitter();
-  @ContentChild(MdlChipContactDirective) protected chipContact: MdlChipContactDirective;
+  @Output('action-click') public actionClick = new EventEmitter();
+  @ContentChild(MdlChipContactDirective) public chipContact: MdlChipContactDirective;
 
   public action() {
     this.actionClick.emit();

src/lib/components/common/mdl-ripple.directive.ts

@@ -12,7 +12,7 @@ import {
 import { MaterialRipple } from './ripple.vendor';
 
 // known bugs: https://github.com/google/material-design-lite/issues/4215
-export class MdlRippleDirective implements OnChanges{
+export class MdlRippleDirective implements OnChanges {
 
   private RIPPLE = 'mdl-ripple';
 

src/lib/components/layout/mdl-layout-content.component.ts

@@ -20,7 +20,7 @@ export class MdlLayoutContentComponent {
 
   @ContentChildren(MdlLayoutTabPanelComponent) public tabs: QueryList<MdlLayoutTabPanelComponent>;
 
-  protected el: HTMLElement;
+  public el: HTMLElement;
 
   constructor(private elRef: ElementRef) {
     this.el = elRef.nativeElement;

src/lib/components/layout/mdl-layout-header.component.ts

@@ -53,7 +53,7 @@ export class MdlLayoutHeaderComponent {
 
   // set from MdlLayoutComponent
   public mode: string;
-  protected el: HTMLElement;
+  public el: HTMLElement;
   public isCompact = false;
   public isAnimating = false;
   public isSeamed = false;

src/lib/components/layout/mdl-layout.component.ts

@@ -74,14 +74,14 @@ export class MdlLayoutComponent implements AfterContentInit, OnDestroy, OnChange
   @Input('mdl-layout-fixed-header') @BooleanProperty() public isFixedHeader = false;
   @Input('mdl-layout-header-seamed') @BooleanProperty() public isSeamed = false;
   @Input('mdl-layout-tab-active-index') @NumberProperty() public selectedIndex: number = 0;
-  @Input('mdl-ripple') @BooleanProperty() protected isRipple = false;
+  @Input('mdl-ripple') @BooleanProperty() public isRipple = false;
   @Input('mdl-layout-no-drawer-button') @BooleanProperty() public isNoDrawer = false;
   @Output('mdl-layout-tab-active-changed') public selectedTabEmitter = new EventEmitter();
   @Output('mdl-layout-tab-mouseover') public mouseoverTabEmitter = new EventEmitter();
   @Output('mdl-layout-tab-mouseout') public mouseoutTabEmitter = new EventEmitter();
 
-  @Output('open') onOpen = new EventEmitter<void>();
-  @Output('close') onClose = new EventEmitter<void>();
+  @Output('open') public onOpen = new EventEmitter<void>();
+  @Output('close') public onClose = new EventEmitter<void>();
 
   public isDrawerVisible = false;
   public isSmallScreen = false;

src/lib/components/list/mdl-list.component.ts

@@ -44,7 +44,7 @@ export class MdlListComponent {}
 })
 export class MdlListItemComponent implements OnInit, OnChanges {
 
-  @Input() @NumberProperty() private lines: number = 1;
+  @Input() @NumberProperty() public lines: number = 1;
 
   constructor(@Optional() private mdlListComponent: MdlListComponent) {}
 

src/lib/components/menu/mdl-menu.component.ts

@@ -94,7 +94,7 @@ export class MdlMenuComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @ContentChildren(MdlMenuItemComponent) private menuItemComponents: QueryList<MdlMenuItemComponent>;
 
-  private cssPosition = 'mdl-menu--bottom-left';
+  public cssPosition = 'mdl-menu--bottom-left';
 
   private isVisible   = false;
 

src/lib/components/menu/mdl-toggle-menu.directive.ts

@@ -9,12 +9,12 @@ import { MdlButtonComponent } from '../button/mdl-button.component';
 })
 export class MdlToggleMenuDirective {
 
-  @Input('mdl-toggle-menu') menu: MdlMenuComponent;
+  @Input('mdl-toggle-menu') public menu: MdlMenuComponent;
 
   constructor(private button: MdlButtonComponent){}
 
   @HostListener('click', ['$event'])
   public onClick($event){
     this.menu.toggle($event, this.button);
   }
-}
+}

src/lib/components/spinner/mdl-spinner.component.ts

@@ -30,7 +30,7 @@ import { CommonModule } from '@angular/common';
   encapsulation: ViewEncapsulation.None
 })
 export class MdlSpinnerComponent {
-  protected layers = [1, 2, 3, 4];
+  public layers = [1, 2, 3, 4];
 
   @Input() @BooleanProperty() public active: boolean;
   @Input('single-color') @BooleanProperty() public singleColor: boolean;

src/lib/components/table/mdl-table.component.ts

@@ -85,7 +85,7 @@ export class MdlTableComponent {
 
   @Input('table-model') public model: IMdlTableModel;
 
-  protected selectable = false;
+  public selectable = false;
 }
 
 
@@ -101,8 +101,8 @@ export class MdlSelectableTableComponent extends MdlTableComponent {
   @Input('table-model-selected') public selected: Array<IMdlTableModelItem>;
   @Output('table-model-selectionChanged') public selectionChange = new EventEmitter();
 
-  protected selectable = true;
-  protected allSelected = false;
+  public selectable = true;
+  public allSelected = false;
 
   public isAllSelected() {
     return this.model.data.every( data => data.selected);

src/lib/components/tabs/mdl-tabs.component.ts

@@ -69,7 +69,7 @@ export class MdlTabsComponent implements AfterContentInit, OnChanges {
     }
   }
 
-  protected tabSelected(tab: MdlTabPanelComponent) {
+  public tabSelected(tab: MdlTabPanelComponent) {
     if (tab.disabled) {
       return;
     }

src/lib/components/textfield/mdl-textfield.component.ts

@@ -130,10 +130,10 @@ export class MdlTextFieldComponent implements ControlValueAccessor, OnChanges, D
   private el: HTMLElement;
 
   @Output('blur')
-  private blurEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
+  public blurEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
 
   @Output('focus')
-  private focusEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
+  public focusEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
 
   @ViewChild('input') private inputEl: ElementRef;