make all event handlers private

packages/checkbox/src/mwc-checkbox.ts

@@ -93,10 +93,10 @@ export class Checkbox extends FormElement {
   render() {
     return html`
       ${this.renderStyle()}
-      <div class="mdc-checkbox" @animationend="${this.animationEndHandler}" .ripple="${ripple()}">
+      <div class="mdc-checkbox" @animationend="${this._animationEndHandler}" .ripple="${ripple()}">
         <input type="checkbox"
               class="mdc-checkbox__native-control"
-              @change="${this.changeHandler}"
+              @change="${this._changeHandler}"
               .indeterminate="${this.indeterminate}"
               .checked="${this.checked}"
               .value="${this.value}">
@@ -112,13 +112,13 @@ export class Checkbox extends FormElement {
       </div>`;
   }
 
-  protected changeHandler() {
+  private _changeHandler() {
     this.checked = this.formElement.checked;
     this.indeterminate = this.formElement.indeterminate;
     this.mdcFoundation.handleChange();
   }
 
-  protected animationEndHandler() {
+  private _animationEndHandler() {
     this.mdcFoundation.handleAnimationEnd();
   }
 }

packages/drawer/src/mwc-drawer.ts

@@ -86,7 +86,7 @@ export class Drawer extends BaseElement {
   // TODO(sorvell): integrate focus trapping.
   private _previousFocus: HTMLElement|null = null;
 
-  protected handleScrimClick() {
+  private _handleScrimClick() {
     this.mdcFoundation.handleScrimClick()
   };
 
@@ -130,7 +130,7 @@ export class Drawer extends BaseElement {
         ${header}
         <div class="mdc-drawer__content"><slot></slot></div>
       </aside>
-      ${modal ? html`<div class="mdc-drawer-scrim" @click="${this.handleScrimClick}"></div>` : ''}
+      ${modal ? html`<div class="mdc-drawer-scrim" @click="${this._handleScrimClick}"></div>` : ''}
       `;
   }
 

packages/formfield/src/mwc-formfield.ts

@@ -102,11 +102,11 @@ export class Formfield extends BaseElement {
     return html`${this.renderStyle()}
       <div class="mdc-form-field ${classMap({'mdc-form-field--align-end': this.alignEnd})}">
         <slot></slot>
-        <label class="mdc-label" @click="${this.labelClick}">${this.label}</label>
+        <label class="mdc-label" @click="${this._labelClick}">${this.label}</label>
       </div>`;
   }
 
-  protected labelClick() {
+  private _labelClick() {
     const input = this.input;
     if (input) {
       input.focus();

packages/radio/src/mwc-radio.ts

@@ -118,20 +118,20 @@ export class Radio extends FormElement {
     };
   }
 
-  protected changeHandler() {
+  private _changeHandler() {
     this.checked = this.formElement.checked;
     if (this._selectionController) {
       this._selectionController.update(this);
     }
   }
 
-  protected focusHandler() {
+  private _focusHandler() {
     if (this._selectionController) {
       this._selectionController.focus(this);
     }
   }
 
-  protected clickHandler() {
+  private _clickHandler() {
     // Firefox has weird behavior with radios if they are not focused
     this.formElement.focus();
   }
@@ -141,9 +141,9 @@ export class Radio extends FormElement {
       ${this.renderStyle()}
       <div class="mdc-radio" .ripple="${ripple()}">
         <input class="mdc-radio__native-control" type="radio" name="${this.name}" .checked="${this.checked}" .value="${this.value}"
-        @change="${this.changeHandler}"
-        @focus="${this.focusHandler}"
-        @click="${this.clickHandler}">
+        @change="${this._changeHandler}"
+        @focus="${this._focusHandler}"
+        @click="${this._clickHandler}">
         <div class="mdc-radio__background">
           <div class="mdc-radio__outer-circle"></div>
           <div class="mdc-radio__inner-circle"></div>

packages/switch/src/mwc-switch.ts

@@ -62,7 +62,7 @@ export class Switch extends FormElement {
 
   protected mdcFoundation!: SwitchFoundation;
 
-  protected changeHandler(e: Event) {
+  private _changeHandler(e: Event) {
     this.mdcFoundation.handleChange(e);
     // catch "click" event and sync properties
     this.checked = this.formElement.checked;
@@ -96,7 +96,7 @@ export class Switch extends FormElement {
         <div class="mdc-switch__track"></div>
         <div class="mdc-switch__thumb-underlay" .ripple="${ripple()}">
           <div class="mdc-switch__thumb">
-            <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch" @change="${this.changeHandler}">
+            <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch" @change="${this._changeHandler}">
           </div>
         </div>
       </div>

packages/tab-bar/src/mwc-tab-bar.ts

@@ -72,11 +72,11 @@ export class TabBar extends BaseElement {
 
   private _previousActiveIndex = -1;
 
-  protected handleTabInteraction(e: Event) {
+  private _handleTabInteraction(e: Event) {
     this.mdcFoundation.handleTabInteraction(e);
   }
 
-  protected handleKeydown(e: Event) {
+  private _handleKeydown(e: Event) {
     this.mdcFoundation.handleKeyDown(e);
   }
 
@@ -89,8 +89,8 @@ export class TabBar extends BaseElement {
     return html`
       ${this.renderStyle()}
       <div class="mdc-tab-bar" role="tablist"
-          @MDCTab:interacted="${this.handleTabInteraction}"
-          @keydown="${this.handleKeydown}">
+          @MDCTab:interacted="${this._handleTabInteraction}"
+          @keydown="${this._handleKeydown}">
         <mwc-tab-scroller><slot></slot></mwc-tab-scroller>
       </div>
       `;

packages/tab-scroller/src/mwc-tab-scroller.ts

@@ -55,15 +55,15 @@ export class TabScroller extends BaseElement {
   protected scrollContentElement!: HTMLElement;
 
   @eventOptions({passive: true})
-  protected handleInteraction(e: Event) {
+  private _handleInteraction(e: Event) {
     this.mdcFoundation.handleInteraction(e);
   }
 
-  protected handleTransitionEnd(e: Event) {
+  private _handleTransitionEnd(e: Event) {
     this.mdcFoundation.handleTransitionEnd(e);
   }
 
-  private _srollbarHeight = -1;
+  private _scrollbarHeight = -1;
 
   renderStyle() {
     return style;
@@ -74,12 +74,12 @@ export class TabScroller extends BaseElement {
       ${this.renderStyle()}
       <div class="mdc-tab-scroller">
         <div class="mdc-tab-scroller__scroll-area"
-            @wheel="${this.handleInteraction}"
-            @touchstart="${this.handleInteraction}"
-            @pointerdown="${this.handleInteraction}"
-            @mousedown="${this.handleInteraction}"
-            @keydown="${this.handleInteraction}"
-            @transitionend="${this.handleTransitionEnd}">
+            @wheel="${this._handleInteraction}"
+            @touchstart="${this._handleInteraction}"
+            @pointerdown="${this._handleInteraction}"
+            @mousedown="${this._handleInteraction}"
+            @keydown="${this._handleInteraction}"
+            @transitionend="${this._handleTransitionEnd}">
           <div class="mdc-tab-scroller__scroll-content"><slot></slot></div>
         </div>
       </div>
@@ -107,12 +107,12 @@ export class TabScroller extends BaseElement {
       computeScrollAreaClientRect: () => this.scrollAreaElement.getBoundingClientRect(),
       computeScrollContentClientRect: () => this.scrollContentElement.getBoundingClientRect(),
       computeHorizontalScrollbarHeight: () => {
-        if (this._srollbarHeight === -1) {
+        if (this._scrollbarHeight === -1) {
           this.scrollAreaElement.style.overflowX = 'scroll';
-          this._srollbarHeight = this.scrollAreaElement.offsetHeight - this.scrollAreaElement.clientHeight;;
+          this._scrollbarHeight = this.scrollAreaElement.offsetHeight - this.scrollAreaElement.clientHeight;;
           this.scrollAreaElement.style.overflowX = '';
         }
-        return this._srollbarHeight;
+        return this._scrollbarHeight;
       },
     };
   }

packages/tab/src/mwc-tab.ts

@@ -90,7 +90,7 @@ export class Tab extends BaseElement {
   @query('.mdc-tab__content')
   private _contentElement!: HTMLElement;
 
-  protected handleClick(e: Event) {
+  private _handleClick(e: Event) {
     this.mdcFoundation.handleClick(e);
   }
 
@@ -109,7 +109,7 @@ export class Tab extends BaseElement {
     };
     return html`
       ${this.renderStyle()}
-      <button @click="${this.handleClick}" class="mdc-tab ${classMap(classes)}" role="tab" aria-selected="false" tabindex="-1">
+      <button @click="${this._handleClick}" class="mdc-tab ${classMap(classes)}" role="tab" aria-selected="false" tabindex="-1">
         <span class="mdc-tab__content">
           <slot></slot>
           ${this.icon ? html`<span class="mdc-tab__icon material-icons">${this.icon}</span>` : ''}