chore(Button): *BREAKING CHANGE* clicked is now emitter name

chore(Button): *BREAKING CHANGE* clicked is now emitter name

IconButton has same breaking change
remove \`click\` (angular native)
insure all eventEmitter()s are
invoked
update internal dependencies

BREAKING CHANGE:
update emitter name to \`clicked\`

ISSUES CLOSED: #398

demo/app/components/button/button.component.html

@@ -36,7 +36,7 @@ <h3 tsCardTitle tsVerticalSpacing="small--0">Demo Controls</h3>
   <div [style.textAlign]="layout">
     <ts-button
       [theme]="myTheme"
-      (clickEvent)="run('progress2')"
+      (clicked)="run('progress2')"
       [isDisabled]="disabled"
       [showProgress]="progress2"
       [iconName]="icon"
@@ -102,7 +102,7 @@ <h3 tsCardTitle tsVerticalSpacing>
     format="hollow"
     [isDisabled]="true"
     [showProgress]="progress2"
-    (clickEvent)="run('progress2')"
+    (clicked)="run('progress2')"
     tsVerticalSpacing
   >I'm disabled AND empty inside :(</ts-button>
 </ts-card>

demo/app/components/confirmation/confirmation.component.html

@@ -19,7 +19,7 @@ <h3 tsCardTitle tsVerticalSpacing="small--0">Use 'after' when the button is on t
     <ts-button
       tsConfirmation
       [showProgress]="progress"
-      (clickEvent)="submit()"
+      (clicked)="submit()"
       (cancelled)="cancel($event)"
       confirmationButtonText="Custom Confirmation Button Text"
       [explanationText]="explanation"
@@ -36,7 +36,7 @@ <h3 tsCardTitle tsVerticalSpacing="small--0">Use 'before' when the button is on
     <ts-button
       tsConfirmation
       [showProgress]="progress"
-      (clickEvent)="submit()"
+      (clicked)="submit()"
       (cancelled)="cancel($event)"
       confirmationButtonText="Custom Confirmation Button Text"
       [explanationText]="explanation"
@@ -53,7 +53,7 @@ <h3 tsCardTitle tsVerticalSpacing="small--0">Use 'before' when the button is on
   <ts-button
     tsConfirmation
     [showProgress]="progress"
-    (clickEvent)="submit()"
+    (clicked)="submit()"
     (cancelled)="cancel($event)"
     confirmationButtonText="Custom Confirmation Button Text"
     [explanationText]="explanation"

demo/app/components/expansion-panel/expansion-panel.component.html

@@ -178,7 +178,7 @@ <h3 tsVerticalSpacing>Accordion as a stepper</h3>
       And here is my standard panel content.
 
       <ts-expansion-panel-action-row>
-        <ts-button (click)="nextStep()">
+        <ts-button (clicked)="nextStep()">
           Next
         </ts-button>
       </ts-expansion-panel-action-row>
@@ -197,10 +197,10 @@ <h3 tsVerticalSpacing>Accordion as a stepper</h3>
       And here is my standard panel content.
 
       <ts-expansion-panel-action-row>
-        <ts-button format="hollow" (click)="previousStep()">
+        <ts-button format="hollow" (clicked)="previousStep()">
           Previous
         </ts-button>
-        <ts-button (click)="nextStep()">
+        <ts-button (clicked)="nextStep()">
           Next
         </ts-button>
       </ts-expansion-panel-action-row>
@@ -219,10 +219,10 @@ <h3 tsVerticalSpacing>Accordion as a stepper</h3>
       And here is my standard panel content.
 
       <ts-expansion-panel-action-row>
-        <ts-button format="hollow" (click)="previousStep()">
+        <ts-button format="hollow" (clicked)="previousStep()">
           Previous
         </ts-button>
-        <ts-button (click)="nextStep()">
+        <ts-button (clicked)="nextStep()">
           End
         </ts-button>
       </ts-expansion-panel-action-row>

demo/app/components/icon-button/icon-button.component.html

@@ -1,7 +1,7 @@
 <ts-card>
   <div fxLayout="row" fxLayoutAlign="start center" tsVerticalSpacing>
     <div>
-      <ts-icon-button (clickEvent)="click('default')">forum</ts-icon-button>
+      <ts-icon-button (clicked)="clickTheme('default')">forum</ts-icon-button>
     </div>
 
     <div>
@@ -13,21 +13,21 @@
   <div tsVerticalSpacing>
     <ts-icon-button
       theme="primary"
-      (clickEvent)="click('primary')"
+      (clicked)="clickTheme('primary')"
     >add_circle</ts-icon-button>
   </div>
 
   <div tsVerticalSpacing>
     <ts-icon-button
       theme="accent"
-      (clickEvent)="click('accent')"
+      (clicked)="clickTheme('accent')"
     >reply_all</ts-icon-button>
   </div>
 
   <div tsVerticalSpacing>
     <ts-icon-button
       theme="warn"
-      (clickEvent)="click('warn')"
+      (clicked)="clickTheme('warn')"
     >delete_forever</ts-icon-button>
   </div>
 </ts-card>

demo/app/components/icon-button/icon-button.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
 })
 export class IconButtonComponent {
 
-  click(v: string): void {
+  clickTheme(v: string): void {
     console.log(`DEMO: '${v}' icon-button clicked.`);
   }
 

demo/app/components/menu/menu.component.html

@@ -65,19 +65,19 @@ <h3 tsCardTitle tsVerticalSpacing>
   </div>
 
   <ng-template #myTemplate>
-    <ts-button (click)="customItemSelected('yup')">
+    <ts-button (clicked)="customItemSelected('yup')">
       Roger, Roger.
     </ts-button>
 
-    <ts-button (click)="customItemSelected('nope')">
+    <ts-button (clicked)="customItemSelected('nope')">
       Don't call me Shirley.
     </ts-button>
 
     <ts-link [destination]="'foo/'">
       A tasty link
     </ts-link>
 
-    <ts-button (click)="customItemSelected('nope')">
+    <ts-button (clicked)="customItemSelected('nope')">
       And a final button
     </ts-button>
   </ng-template>

terminus-ui/button/src/button.component.html

@@ -10,7 +10,7 @@
   [attr.type]="buttonType"
   [disabled]="shouldBeDisabled"
   tabindex="{{ tabIndex }}"
-  (click)="clicked($event)"
+  (click)="clickedButton($event)"
   #button
 >
   <ts-icon

terminus-ui/button/src/button.component.spec.ts

@@ -18,7 +18,7 @@ import { TsButtonModule } from './button.module';
     [iconName]="iconName"
     [format]="format"
     [theme]="theme"
-    (clickEvent)="clickEvent($event)"
+    (clicked)="clicked($event)"
     collapseDelay="collapseDelay"
   >Click Me!</ts-button>
   `,
@@ -36,7 +36,7 @@ class TestHostComponent implements OnInit, OnDestroy {
   buttonComponent!: TsButtonComponent;
 
   changed = jest.fn();
-  clickEvent = jest.fn();
+  clicked = jest.fn();
   private COLLAPSE_DEFAULT_DELAY = undefined;
   public ngOnInit() { }
   public ngOnDestroy() { }
@@ -65,22 +65,22 @@ describe(`TsButtonComponent`, function() {
         expect(buttonComponent.isDisabled).toEqual(false);
         expect(button.disabled).toEqual(false);
         button.click();
-        expect(component.clickEvent).toHaveBeenCalled();
+        expect(component.clicked).toHaveBeenCalled();
       });
 
       test(`should have button disabled`, () => {
         component.disabled = true;
         fixture.detectChanges();
         expect(buttonComponent.isDisabled).toEqual(true);
         expect(button.disabled).toEqual(true);
-        expect(component.clickEvent).not.toHaveBeenCalled();
+        expect(component.clicked).not.toHaveBeenCalled();
       });
     });
 
     test(`click`, () => {
-      component.buttonComponent.clickEvent.emit = jest.fn();
+      component.buttonComponent.clicked.emit = jest.fn();
       button.click();
-      expect(buttonComponent.clickEvent.emit).toHaveBeenCalled();
+      expect(buttonComponent.clicked.emit).toHaveBeenCalled();
     });
 
     describe(`showProgress`, () => {
@@ -326,27 +326,27 @@ describe(`TsButtonComponent`, function() {
     });
 
 
-    describe(`clicked()`, () => {
+    describe(`clickedButton()`, () => {
       let mouseEvent: MouseEvent;
 
       beforeEach(() => {
-        buttonComponent.clickEvent.emit = jest.fn();
+        buttonComponent.clicked.emit = jest.fn();
         mouseEvent = createMouseEvent('click');
       });
 
 
       test(`should emit the click when interceptClick is false`, () => {
-        buttonComponent.clicked(mouseEvent);
+        buttonComponent.clickedButton(mouseEvent);
 
-        expect(buttonComponent.clickEvent.emit).toHaveBeenCalledWith(mouseEvent);
+        expect(buttonComponent.clicked.emit).toHaveBeenCalledWith(mouseEvent);
       });
 
 
       test(`should not emit the click when interceptClick is true`, () => {
         buttonComponent.interceptClick = true;
-        buttonComponent.clicked(mouseEvent);
+        buttonComponent.clickedButton(mouseEvent);
 
-        expect(buttonComponent.clickEvent.emit).not.toHaveBeenCalledWith();
+        expect(buttonComponent.clicked.emit).not.toHaveBeenCalledWith();
         expect(buttonComponent.originalClickEvent).toEqual(mouseEvent);
       });
 

terminus-ui/button/src/button.component.ts

@@ -75,7 +75,7 @@ export const tsButtonFormatTypesArray = ['filled', 'hollow', 'collapsable'];
  *              [collapsed]="false"
  *              collapseDelay="500"
  *              tabIndex="2"
- *              (clickEvent)="myMethod($event)"
+ *              (clicked)="myMethod($event)"
  * >Click Me!</ts-button>
  *
  * <example-url>https://getterminus.github.io/ui-demos-master/components/button</example-url>
@@ -269,7 +269,7 @@ export class TsButtonComponent implements OnInit, OnDestroy {
    * Pass the click event through to the parent
    */
   @Output()
-  public clickEvent: EventEmitter<MouseEvent> = new EventEmitter;
+  public clicked: EventEmitter<MouseEvent> = new EventEmitter();
 
   /**
    * Provide access to the inner button element
@@ -325,16 +325,16 @@ export class TsButtonComponent implements OnInit, OnDestroy {
 
 
   /**
-   * Do something when clicked
+   * Handle button clicks
    *
    * @param event - The MouseEvent
    */
-  public clicked(event: MouseEvent): void {
+  public clickedButton(event: MouseEvent): void {
     // Allow the click to propagate
     if (!this.interceptClick) {
-      this.clickEvent.emit(event);
+      this.clicked.emit(event);
     } else {
-      // Save the original event but don't emit the clickEvent
+      // Save the original event but don't emit the originalClickEvent
       this.originalClickEvent = event;
     }
   }

terminus-ui/checkbox/src/checkbox.component.ts

@@ -190,13 +190,13 @@ export class TsCheckboxComponent extends TsReactiveFormBaseComponent {
    * Emit an event on input change
    */
   @Output()
-  readonly inputChange: EventEmitter<boolean> = new EventEmitter;
+  readonly inputChange: EventEmitter<boolean> = new EventEmitter();
 
   /**
    * Emit a change when moving from the indeterminate state
    */
   @Output()
-  readonly indeterminateChange: EventEmitter<TsCheckboxChange> = new EventEmitter;
+  readonly indeterminateChange: EventEmitter<TsCheckboxChange> = new EventEmitter();
 
 
   constructor(

terminus-ui/confirmation/src/confirmation-overlay.component.html

@@ -11,14 +11,14 @@
       class="qa-confirmation-cancel"
       theme="warn"
       format="hollow"
-      (clickEvent)="confirm.next(false)"
+      (clicked)="confirm.next(false)"
     >
       {{ cancelButtonTxt }}
     </ts-button>
 
     <ts-button
       class="qa-confirmation-confirm"
-      (clickEvent)="confirm.next(true)"
+      (clicked)="confirm.next(true)"
     >
       {{ confirmationButtonTxt }}
     </ts-button>

terminus-ui/confirmation/src/confirmation.directive.md

@@ -32,7 +32,7 @@ Add the directive to any `ts-button`:
 ```html
 <ts-button
   ts-confirmation
-  (clickEvent)="myContinueFn($event)"
+  (clicked)="myContinueFn($event)"
 >
   Click me!
 </ts-button>
@@ -47,7 +47,7 @@ from the confirmation pop-up.
 ```html
 <ts-button
   ts-confirmation
-  (clickEvent)="myContinueFn($event)"
+  (clicked)="myContinueFn($event)"
   (cancelled)="myCancelEvent($event)"
 >
   Click me!
@@ -62,7 +62,7 @@ Customizes the text in the overlay of the confirmation button; default is "Confi
 ```html
 <ts-button
     tsConfirmation
-    (clickEvent)="submit()"
+    (clicked)="submit()"
     (cancelled)="cancel($event)"
     confirmationButtonText="Custom Confirmation Button Text"
   >
@@ -78,7 +78,7 @@ Customizes the text in the overlay of the cancel button; default is "Cancel".
 ```html
 <ts-button
     tsConfirmation
-    (clickEvent)="submit()"
+    (clicked)="submit()"
     (cancelled)="cancel($event)"
     cancelButtonText="Custom Cancel Button Text"
   >
@@ -94,7 +94,7 @@ Optional text to appear inside of the overlay, generally to use as a warning, fo
 ```html
 <ts-button
     tsConfirmation
-    (clickEvent)="submit()"
+    (clicked)="submit()"
     (cancelled)="cancel($event)"
     explanationText="Optional text within overlay."
   >
@@ -109,7 +109,7 @@ Optional overlayPosition for defining where the overlay will appear relative to
 ```html
 <ts-button
     tsConfirmation
-    (clickEvent)="submit()"
+    (clicked)="submit()"
     (cancelled)="cancel($event)"
     overlayPosition="before"
   >

terminus-ui/confirmation/src/confirmation.directive.spec.ts

@@ -48,14 +48,14 @@ class TsButtonComponentMock {
   @Input()
   public showProgress = false;
   @Output()
-  public clickEvent: EventEmitter<MouseEvent> = new EventEmitter;
+  public clicked: EventEmitter<MouseEvent> = new EventEmitter();
 
-  public clicked(event: MouseEvent): void {
+  public clickedButton(event: MouseEvent): void {
     // Allow the click to propagate
     if (!this.interceptClick) {
-      this.clickEvent.emit(event);
+      this.clicked.emit(event);
     } else {
-      // Save the original event but don't emit the clickEvent
+      // Save the original event but don't emit the originalClickEvent
       this.originalClickEvent = event;
     }
   }
@@ -157,15 +157,15 @@ describe(`TsConfirmationDirective`, function() {
   describe(`overlay content`, () => {
 
     test(`should dismiss the overlay and emit event on confirm`, () => {
-      directive['host'].clickEvent.emit = jest.fn();
+      directive['host'].clicked.emit = jest.fn();
       expect(directive['overlayRef']).toBeFalsy();
       button.click();
       expect(directive['overlayRef']).toBeTruthy();
 
       directive['overlayInstance'].confirm.next(true);
 
       expect(directive['overlayRef']!.hasAttached()).toEqual(false);
-      expect(directive['host'].clickEvent.emit).toHaveBeenCalled();
+      expect(directive['host'].clicked.emit).toHaveBeenCalled();
     });