feat(toggle): Inizia implementazione e documentazione del toggle button

ref #17

projects/design-angular-kit/src/lib/design-angular-kit.module.ts

@@ -3,13 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { CheckboxComponent } from './checkbox/checkbox.component';
+import { ToggleComponent } from './toggle/toggle.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule
   ],
-  declarations: [CheckboxComponent],
-  exports: [CheckboxComponent]
+  declarations: [CheckboxComponent, ToggleComponent],
+  exports: [CheckboxComponent, ToggleComponent]
 })
 export class DesignAngularKitModule { }

projects/design-angular-kit/src/lib/toggle/toggle.component.html

@@ -0,0 +1,13 @@
+<div class="form-check">
+  <div class="toggles">
+    <label [attr.for]=inputId>
+      {{label}}
+      <input type=checkbox
+        [id]=inputId
+        [checked]=checked
+        [disabled]=disabled
+        (change)=handleChange($event)>
+      <span class="lever"></span>
+    </label>
+  </div>
+</div>

projects/design-angular-kit/src/lib/toggle/toggle.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToggleComponent } from './toggle.component';
+
+describe('ToggleComponent', () => {
+  let component: ToggleComponent;
+  let fixture: ComponentFixture<ToggleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ToggleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/design-angular-kit/src/lib/toggle/toggle.component.ts

@@ -0,0 +1,103 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+let identifier = 0;
+
+export class ToggleChange {
+  source: ToggleComponent;
+  checked: boolean;
+}
+
+/**
+ * Una toggle con design bootstrap italia. Supporta tutte le funzionalità di una checkbox HTML5,
+ * ed espone una API simile. Una `<it-toggle>` può essere checked, unchecked, o disabled.
+ */
+@Component({
+  selector: 'it-toggle',
+  templateUrl: './toggle.component.html',
+  styleUrls: ['./toggle.component.css'],
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ToggleComponent), multi: true }],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ToggleComponent implements ControlValueAccessor {
+  /**
+   * Se la toggle è selezionata.
+   */
+  @Input()
+  get checked(): boolean { return this._checked; }
+  set checked(value: boolean) {
+    if (value !== this.checked) {
+      this._checked = value;
+      this._changeDetectorRef.markForCheck();
+    }
+  }
+  private _checked = false;
+
+  /**
+   * L'etichetta della toggle.
+   */
+  @Input()
+  label: string;
+
+  /**
+   * Se la toggle è disabilitata.
+   */
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    if (value !== this.disabled) {
+      this._disabled = value;
+      this._changeDetectorRef.markForCheck();
+    }
+  }
+  private _disabled = false;
+
+  /**
+   * Evento emesso quando il valore `checked` della toggle cambia.
+   */
+  @Output() readonly change: EventEmitter<ToggleChange> =
+    new EventEmitter<ToggleChange>();
+
+    inputId = `toggle-${identifier++}`;
+
+  private _onTouched: () => any = () => {};
+
+  private _controlValueAccessorChangeFn: (value: any) => void = () => { };
+
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef
+  ) { }
+
+  writeValue(value: any) {
+    this.checked = !!value;
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this._controlValueAccessorChangeFn = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this._onTouched = fn;
+  }
+
+  handleChange(event: Event) {
+    event.stopPropagation();
+    if (!this.disabled) {
+      this._toggle();
+      this._emitChangeEvent();
+    }
+  }
+
+  private _toggle(): void {
+    this.checked = !this.checked;
+  }
+
+  private _emitChangeEvent() {
+    const event = new ToggleChange();
+    event.source = this;
+    event.checked = this.checked;
+
+    this._controlValueAccessorChangeFn(this.checked);
+    this.change.emit(event);
+  }
+}

projects/design-angular-kit/src/public_api.ts

@@ -3,4 +3,5 @@
  */
 
 export * from './lib/checkbox/checkbox.component';
+export * from './lib/toggle/toggle.component';
 export * from './lib/design-angular-kit.module';

src/app/app-routing.module.ts

@@ -11,7 +11,8 @@ const routes: Routes = [
   ]},
   { path: 'componenti', component: RouterDispatcherComponent, children: [
     { path: '', redirectTo: 'checkbox', pathMatch: 'full' },
-    { path: 'checkbox', loadChildren: 'src/app/checkbox/checkbox.module#CheckboxModule' }
+    { path: 'checkbox', loadChildren: 'src/app/checkbox/checkbox.module#CheckboxModule' },
+    { path: 'toggle', loadChildren: 'src/app/toggle/toggle.module#ToggleModule' }
   ]}
 ];
 

src/app/table-of-content.service.ts

@@ -31,6 +31,10 @@ export class TableOfContentService {
           {
             label: 'Checkbox',
             link: '/componenti/checkbox',
+          },
+          {
+            label: 'Toggle',
+            link: '/componenti/toggle',
           }
         ]
       }

src/app/toggle/toggle-example/toggle-example.component.html

@@ -0,0 +1,20 @@
+<div class="card w-50 mt-2">
+  <div class="card-body">
+    <h4 class="card-title">Configurazione toggle</h4>
+
+    <p class="card-text" class="example-section">
+      <it-toggle [(ngModel)]="checked" label="Spuntato"></it-toggle>
+      <it-toggle [(ngModel)]="disabled" label="Disabilitato"></it-toggle>
+    </p>
+  </div>
+</div>
+
+<div class="card w-50 mt-2">
+  <div class="card-body">
+    <h4 class="card-title">Risultato</h4>
+
+    <p class="card-text" class="example-section">
+        <it-toggle [(ngModel)]="checked" [label]="label" [disabled]="disabled"></it-toggle>
+    </p>
+  </div>
+</div>

src/app/toggle/toggle-example/toggle-example.component.scss

@@ -0,0 +1,7 @@
+.example-section {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    height: 60px;
+}
+

src/app/toggle/toggle-example/toggle-example.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'it-toggle-example',
+  templateUrl: './toggle-example.component.html',
+  styleUrls: ['./toggle-example.component.scss']
+})
+export class ToggleExampleComponent implements OnInit {
+
+  checked = true;
+  label = 'Sono una toggle';
+  disabled = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}