feat(icon-toggle): rename isOn/isOnChange to on/onChange

BREAKING CHANGE: the isOn/isOnChange properties of mdcIconToggle are renamed
to on/onChange

Author: gjdev

bundle/src/components/icon-toggle/mdc.icon-toggle.directive.spec.ts

@@ -15,7 +15,7 @@ describe('MdcIconToggleDirective standalone', () => {
                 iconOn="favorite"
                 iconOff="favorite_border"
                 [disabled]="disabled"
-                [(isOn)]="favorite"
+                [(on)]="favorite"
                 (click)="action()"></i>
         `
     })
@@ -73,23 +73,23 @@ describe('MdcIconToggleDirective standalone', () => {
         const iconToggle = fixture.debugElement.query(By.directive(MdcIconToggleDirective)).injector.get(MdcIconToggleDirective);
         const testComponent = fixture.debugElement.injector.get(TestComponent);
 
-        expect(iconToggle.isOn).toBe(false); // initial value from 'favorite' property
+        expect(iconToggle.on).toBe(false); // initial value from 'favorite' property
         expect(testComponent.favorite).toBeFalsy(); // not yet initialized, may be undefined or false
         expect(iconToggle._elm.nativeElement.textContent).toBe('favorite_border');
         expect(iconToggle._elm.nativeElement.getAttribute('aria-label')).toBe('Add to favorites');
         expect(iconToggle._elm.nativeElement.getAttribute('aria-pressed')).toBe('false');
 
         iconToggle._elm.nativeElement.click(); tick(); fixture.detectChanges();
 
-        expect(iconToggle.isOn).toBe(true);
+        expect(iconToggle.on).toBe(true);
         expect(testComponent.favorite).toBe(true);
         expect(iconToggle._elm.nativeElement.textContent).toBe('favorite');
         expect(iconToggle._elm.nativeElement.getAttribute('aria-label')).toBe('Remove from favorites');
         expect(iconToggle._elm.nativeElement.getAttribute('aria-pressed')).toBe('true');
 
         iconToggle._elm.nativeElement.click(); tick(); fixture.detectChanges();
 
-        expect(iconToggle.isOn).toBe(false);
+        expect(iconToggle.on).toBe(false);
         expect(testComponent.favorite).toBe(false);
         expect(iconToggle._elm.nativeElement.textContent).toBe('favorite_border');
         expect(iconToggle._elm.nativeElement.getAttribute('aria-label')).toBe('Add to favorites');
@@ -106,7 +106,7 @@ describe('MdcIconToggleDirective with MdcIconToggleIconDirective', () => {
                 iconOn="fa-heart"
                 iconOff="fa-heart-o"
                 [disabled]="disabled"
-                [(isOn)]="like">
+                [(on)]="like">
               <i mdcIconToggleIcon class="fa"></i>
             </span>
         `

bundle/src/components/icon-toggle/mdc.icon-toggle.directive.ts

@@ -10,10 +10,6 @@ import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple';
 import { AbstractMdcIcon } from '../icon/abstract.mdc.icon';
 import { MdcEventRegistry } from '../../utils/mdc.event.registry';
 
-interface MdcIconToggleChangeEvent {
-    isOn: boolean
-}
-
 /**
  * Directive for an icon nested inside a <code>MdcIconToggleDirective</code>.
  * This directive is only needed when the icon font uses CSS pseudo-elements in order
@@ -49,7 +45,7 @@ export class MdcIconToggleDirective extends AbstractMdcIcon implements AfterCont
      * Event emitted when the state of the icon changes (for example when a user clicks
      * the icon).
      */
-    @Output() isOnChange: EventEmitter<boolean> = new EventEmitter();
+    @Output() onChange: EventEmitter<boolean> = new EventEmitter();
     private _onChange: (value: any) => void = (value) => {};
     private _onTouched: () => any = () => {};
     private _beforeInitQueu: Array<() => any> = [];
@@ -85,9 +81,9 @@ export class MdcIconToggleDirective extends AbstractMdcIcon implements AfterCont
         getAttr: (name: string) => this._elm.nativeElement.getAttribute(name),
         setAttr: (name: string, value: string) => { this.renderer.setAttribute(this._elm.nativeElement, name, value); },
         rmAttr: (name: string) => { this.renderer.removeAttribute(this._elm.nativeElement, name); },
-        notifyChange: (evtData: MdcIconToggleChangeEvent) => {
+        notifyChange: (evtData: {isOn: boolean}) => {
             this._onChange(evtData.isOn);
-            this.isOnChange.emit(evtData.isOn);
+            this.onChange.emit(evtData.isOn);
         }
     };
     private foundation: {
@@ -206,11 +202,11 @@ export class MdcIconToggleDirective extends AbstractMdcIcon implements AfterCont
     /**
      * The current state of the icon (true for on/pressed, false for off/unpressed).
      */
-    @Input() get isOn() {
+    @Input() get on() {
         return this.foundation.isOn();
     }
 
-    set isOn(value: any) {
+    set on(value: any) {
         this.execAfterInit(() => this.foundation.toggle(asBoolean(value)));
     }
 

site/src/app/components/code.sample/code.sample.component.html

@@ -13,7 +13,7 @@ <h3><ng-content select="[bloxSampleTitle]"></ng-content></h3>
         labelOff="Show source code"
         iconOn="expand_less"
         iconOff="expand_more"
-        [(isOn)]="showCode"
+        [(on)]="showCode"
         title="Show/hide code"></i>
     </div>
   </div>

site/src/app/components/snippets/directives/snippet.icon-toggle.component.html

@@ -7,7 +7,7 @@
     iconOn="favorite"
     iconOff="favorite_border"
     [disabled]="disabled"
-    [(isOn)]="favorite"></i>
+    [(on)]="favorite"></i>
   <span>(Value: {{favorite}}. Uses an icon from Material Icons.)</span>
 </div>
 <div>
@@ -17,7 +17,7 @@
     iconOn="fa-thumbs-up"
     iconOff="fa-thumbs-o-up"
     [disabled]="disabled"
-    [(isOn)]="like">
+    [(on)]="like">
     <i mdcIconToggleIcon class="fa"></i>
   </span>
   <span>(Value: {{like}}. Uses an icon from Font Awesome.)</span>