Move constructor to top

src/components/alert/alert.tsx

@@ -16,13 +16,13 @@ import { focusVisible } from '../../utilities/focus-visible';
   shadow: true
 })
 export class Tab {
-  alert: HTMLElement;
-
   constructor() {
     this.handleCloseClick = this.handleCloseClick.bind(this);
     this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
   }
 
+  alert: HTMLElement;
+
   @Element() host: HTMLSlAlertElement;
 
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */

src/components/button/button.tsx

@@ -15,13 +15,13 @@ import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil
   shadow: true
 })
 export class Button {
-  button: HTMLButtonElement;
-
   constructor() {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
   }
 
+  button: HTMLButtonElement;
+
   @State() hasFocus = false;
 
   /** The button's type. */

src/components/checkbox/checkbox.tsx

@@ -15,10 +15,6 @@ let id = 0;
   shadow: true
 })
 export class Checkbox {
-  id = `checkbox-${++id}`;
-  labelId = `checkbox-label-${id}`;
-  input: HTMLInputElement;
-
   constructor() {
     this.handleClick = this.handleClick.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
@@ -26,6 +22,10 @@ export class Checkbox {
     this.handleMouseDown = this.handleMouseDown.bind(this);
   }
 
+  id = `checkbox-${++id}`;
+  labelId = `checkbox-label-${id}`;
+  input: HTMLInputElement;
+
   @State() hasFocus = false;
 
   /** A native input's name attribute. */

src/components/color-picker/color-picker.tsx

@@ -13,20 +13,6 @@ import { clamp } from '../../utilities/math';
   shadow: true
 })
 export class ColorPicker {
-  alphaSlider: HTMLElement;
-  alphaHandle: HTMLElement;
-  bypassValueParse = false;
-  copyButton: HTMLSlButtonElement;
-  dropdown: HTMLSlDropdownElement;
-  grid: HTMLElement;
-  gridHandle: HTMLElement;
-  hueSlider: HTMLElement;
-  hueHandle: HTMLElement;
-  lastValueEmitted: string;
-  menu: HTMLElement;
-  textInput: HTMLSlInputElement;
-  trigger: HTMLElement;
-
   constructor() {
     this.handleAlphaDrag = this.handleAlphaDrag.bind(this);
     this.handleAlphaInput = this.handleAlphaInput.bind(this);
@@ -50,6 +36,20 @@ export class ColorPicker {
     this.handleTextInputKeyDown = this.handleTextInputKeyDown.bind(this);
   }
 
+  alphaSlider: HTMLElement;
+  alphaHandle: HTMLElement;
+  bypassValueParse = false;
+  copyButton: HTMLSlButtonElement;
+  dropdown: HTMLSlDropdownElement;
+  grid: HTMLElement;
+  gridHandle: HTMLElement;
+  hueSlider: HTMLElement;
+  hueHandle: HTMLElement;
+  lastValueEmitted: string;
+  menu: HTMLElement;
+  textInput: HTMLSlInputElement;
+  trigger: HTMLElement;
+
   @Element() host: HTMLSlColorPickerElement;
 
   @State() textInputValue = '';

src/components/details/details.tsx

@@ -16,17 +16,17 @@ let id = 0;
   shadow: true
 })
 export class Details {
-  details: HTMLElement;
-  header: HTMLElement;
-  id = `details-${++id}`;
-  body: HTMLElement;
-
   constructor() {
     this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
     this.handleSummaryClick = this.handleSummaryClick.bind(this);
     this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
   }
 
+  details: HTMLElement;
+  header: HTMLElement;
+  id = `details-${++id}`;
+  body: HTMLElement;
+
   /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
   @Prop({ mutable: true, reflect: true }) open = false;
 

src/components/dialog/dialog.tsx

@@ -17,10 +17,6 @@ let id = 0;
   shadow: true
 })
 export class Dialog {
-  panel: HTMLElement;
-  dialog: HTMLElement;
-  id = `dialog-${++id}`;
-
   constructor() {
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleCloseClick = this.handleCloseClick.bind(this);
@@ -29,6 +25,10 @@ export class Dialog {
     this.handleOverlayClick = this.handleOverlayClick.bind(this);
   }
 
+  panel: HTMLElement;
+  dialog: HTMLElement;
+  id = `dialog-${++id}`;
+
   @Element() host: HTMLSlDialogElement;
 
   /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */

src/components/drawer/drawer.tsx

@@ -17,10 +17,6 @@ let id = 0;
   shadow: true
 })
 export class Drawer {
-  panel: HTMLElement;
-  drawer: HTMLElement;
-  id = `drawer-${++id}`;
-
   constructor() {
     this.handleCloseClick = this.handleCloseClick.bind(this);
     this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
@@ -29,6 +25,10 @@ export class Drawer {
     this.handleOverlayClick = this.handleOverlayClick.bind(this);
   }
 
+  panel: HTMLElement;
+  drawer: HTMLElement;
+  id = `drawer-${++id}`;
+
   @Element() host: HTMLSlDrawerElement;
 
   /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */

src/components/dropdown/dropdown.tsx

@@ -17,14 +17,6 @@ let id = 0;
   shadow: true
 })
 export class Dropdown {
-  id = `dropdown-${++id}`;
-  ignoreMouseEvents = false;
-  ignoreMouseTimeout: any;
-  ignoreOpenWatcher = false;
-  panel: HTMLElement;
-  popover: Popover;
-  trigger: HTMLElement;
-
   constructor() {
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -33,6 +25,14 @@ export class Dropdown {
     this.togglePanel = this.togglePanel.bind(this);
   }
 
+  id = `dropdown-${++id}`;
+  ignoreMouseEvents = false;
+  ignoreMouseTimeout: any;
+  ignoreOpenWatcher = false;
+  panel: HTMLElement;
+  popover: Popover;
+  trigger: HTMLElement;
+
   @Element() host: HTMLSlDropdownElement;
 
   /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */

src/components/input/input.tsx

@@ -17,8 +17,6 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, h } from
   shadow: true
 })
 export class Input {
-  input: HTMLInputElement;
-
   constructor() {
     this.handleChange = this.handleChange.bind(this);
     this.handleInput = this.handleInput.bind(this);
@@ -29,6 +27,8 @@ export class Input {
     this.handlePasswordToggle = this.handlePasswordToggle.bind(this);
   }
 
+  input: HTMLInputElement;
+
   @Element() host: HTMLSlInputElement;
 
   @State() hasFocus = false;

src/components/menu/menu.tsx

@@ -15,12 +15,6 @@ import { getTextContent } from '../../utilities/slot';
   shadow: true
 })
 export class Menu {
-  ignoreMouseEvents = false;
-  ignoreMouseTimeout: any;
-  menu: HTMLElement;
-  typeToSelect = '';
-  typeToSelectTimeout: any;
-
   constructor() {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
@@ -31,6 +25,12 @@ export class Menu {
     this.handleMouseOut = this.handleMouseOut.bind(this);
   }
 
+  ignoreMouseEvents = false;
+  ignoreMouseTimeout: any;
+  menu: HTMLElement;
+  typeToSelect = '';
+  typeToSelectTimeout: any;
+
   /** Emitted when the menu gains focus. */
   @Event() slFocus: EventEmitter;
 

src/components/radio/radio.tsx

@@ -15,10 +15,6 @@ let id = 0;
   shadow: true
 })
 export class Radio {
-  id = `radio-${++id}`;
-  labelId = `radio-label-${id}`;
-  input: HTMLInputElement;
-
   constructor() {
     this.handleClick = this.handleClick.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
@@ -26,6 +22,10 @@ export class Radio {
     this.handleMouseDown = this.handleMouseDown.bind(this);
   }
 
+  id = `radio-${++id}`;
+  labelId = `radio-label-${id}`;
+  input: HTMLInputElement;
+
   @Element() host: HTMLSlRadioElement;
 
   @State() hasFocus = false;

src/components/range/range.tsx

@@ -12,16 +12,16 @@ import ResizeObserver from 'resize-observer-polyfill';
   shadow: true
 })
 export class Range {
-  input: HTMLInputElement;
-  output: HTMLElement;
-  resizeObserver: any;
-
   constructor() {
     this.handleInput = this.handleInput.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
   }
 
+  input: HTMLInputElement;
+  output: HTMLElement;
+  resizeObserver: any;
+
   @State() hasFocus = false;
 
   /** The input's name attribute. */

src/components/select/select.tsx

@@ -13,11 +13,6 @@ import { getTextContent } from '../../utilities/slot';
   shadow: true
 })
 export class Select {
-  dropdown: HTMLSlDropdownElement;
-  input: HTMLSlInputElement;
-  menu: HTMLSlMenuElement;
-  resizeObserver: any;
-
   constructor() {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
@@ -29,6 +24,11 @@ export class Select {
     this.handleSlotChange = this.handleSlotChange.bind(this);
   }
 
+  dropdown: HTMLSlDropdownElement;
+  input: HTMLSlInputElement;
+  menu: HTMLSlMenuElement;
+  resizeObserver: any;
+
   @Element() host: HTMLSlSelectElement;
 
   @State() hasFocus = false;

src/components/switch/switch.tsx

@@ -16,10 +16,6 @@ let id = 0;
   shadow: true
 })
 export class Switch {
-  id = `switch-${++id}`;
-  labelId = `switch-label-${id}`;
-  input: HTMLInputElement;
-
   constructor() {
     this.handleClick = this.handleClick.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
@@ -28,6 +24,10 @@ export class Switch {
     this.handleMouseDown = this.handleMouseDown.bind(this);
   }
 
+  id = `switch-${++id}`;
+  labelId = `switch-label-${id}`;
+  input: HTMLInputElement;
+
   @State() hasFocus = false;
 
   /** A native input's name attribute. */

src/components/tab-group/tab-group.tsx

@@ -17,6 +17,11 @@ import { focusVisible } from '../../utilities/focus-visible';
   shadow: true
 })
 export class TabGroup {
+  constructor() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
   activeTab: HTMLSlTabElement;
   activeTabIndicator: HTMLElement;
   body: HTMLElement;
@@ -25,11 +30,6 @@ export class TabGroup {
   tabGroup: HTMLElement;
   tabs: HTMLElement;
 
-  constructor() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
   @Element() host: HTMLSlTabGroupElement;
 
   /** The placement of the tabs. */

src/components/tag/tag.tsx

@@ -13,12 +13,12 @@ import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
   shadow: true
 })
 export class Tag {
-  tag: HTMLElement;
-
   constructor() {
     this.handleRemoveClick = this.handleRemoveClick.bind(this);
   }
 
+  tag: HTMLElement;
+
   /** The tag's type. */
   @Prop() type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'primary';
 

src/components/textarea/textarea.tsx

@@ -12,9 +12,6 @@ import ResizeObserver from 'resize-observer-polyfill';
   shadow: true
 })
 export class Textarea {
-  resizeObserver: any;
-  textarea: HTMLTextAreaElement;
-
   constructor() {
     this.handleChange = this.handleChange.bind(this);
     this.handleInput = this.handleInput.bind(this);
@@ -22,6 +19,9 @@ export class Textarea {
     this.handleFocus = this.handleFocus.bind(this);
   }
 
+  resizeObserver: any;
+  textarea: HTMLTextAreaElement;
+
   @State() hasFocus = false;
 
   /** The textarea's size. */

src/components/tooltip/tooltip.tsx

@@ -16,11 +16,6 @@ let id = 0;
   shadow: true
 })
 export class Tooltip {
-  id = `tooltip-${++id}`;
-  popover: Popover;
-  target: HTMLElement;
-  tooltip: any;
-
   constructor() {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
@@ -30,6 +25,11 @@ export class Tooltip {
     this.handleSlotChange = this.handleSlotChange.bind(this);
   }
 
+  id = `tooltip-${++id}`;
+  popover: Popover;
+  target: HTMLElement;
+  tooltip: any;
+
   @Element() host: HTMLSlTooltipElement;
 
   /** The tooltip's content. */