Merge branch 'master' of https://github.com/US-CBP/ngx-cbp-theme into…

… upstream_master

# Conflicts:
#	package-lock.json

src/app/buttons/buttons.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CBPToggleSwitchComponent } from './cbp-toggle-switch/cbp-toggle-switch.component';
+import {FormsModule} from '@angular/forms';
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule
+  ],
+  exports: [CBPToggleSwitchComponent],
+  declarations: [CBPToggleSwitchComponent]
+})
+export class CBPButtonsModule { }

src/app/buttons/cbp-toggle-switch/cbp-toggle-switch.component.html

@@ -0,0 +1,4 @@
+<span class="switch">
+  <input type="checkbox" [(ngModel)]="isOn" (ngModelChange)="valueChange($event)" [attr.required]="required" [attr.id]="toggleSwitchId" [attr.disabled]="disabled">
+  <label [attr.for]="toggleSwitchId"  [attr.data-on]="onLabel" [attr.data-off]="offLabel">{{ label }}</label>
+</span>

src/app/buttons/cbp-toggle-switch/cbp-toggle-switch.component.scss

@@ -0,0 +1,94 @@
+@import '../../variables';
+
+// copied from https://raw.githubusercontent.com/US-CBP/cbp-theme/master/app/styles/custom/_forms.scss
+.switch {
+  padding-left: 64px;
+  overflow: hidden;
+  position: relative;
+
+  > input {
+    appearance: none;
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    opacity: 0;
+    left: 0;
+    top: 0;
+  }
+
+  > label {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    font-weight: 400;
+    margin-bottom: 0;
+  }
+
+  > label:before {
+    cursor: pointer;
+    display: inline-block;
+    border-radius: 25px;
+    height: 25px;
+    width: 58px;
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 25px;
+    text-align: center;
+    background: #aaa;
+    transition: 0.2s background-color ease-out;
+    margin-left: -64px;
+    margin-right: 6px;
+  }
+
+  > input:checked + label:before {
+    background: $brand-info;
+  }
+
+  > input:disabled + label:before {
+    cursor: not-allowed;
+    background: mix(#aaa, #fff, 30%);
+  }
+  > input:checked:disabled + label:before {
+    background: mix($brand-primary, #fff, 30%);
+  }
+
+  > label:before {
+    content: attr(data-off);
+    padding-left: 20px;
+    padding-right: 0;
+  }
+
+  > input:checked + label:before {
+    content: attr(data-on);
+    padding-right: 20px;
+    padding-left: 0;
+  }
+
+  > label:after {
+    cursor: pointer;
+    content: "";
+    margin: 1px;
+    border-radius: 19px;
+    width: 19px;
+    height: 19px;
+    display: block;
+    background: #fff;
+    position: absolute;
+    top: 2px;
+    left: -62px;
+    z-index: 2;
+    transition: 0.2s left ease-out;
+  }
+
+  > input:checked + label:after {
+    left: -29px;
+  }
+
+
+
+}
+
+*, :after, :before {
+  box-sizing: border-box;
+}

src/app/buttons/cbp-toggle-switch/cbp-toggle-switch.component.spec.ts

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

src/app/buttons/cbp-toggle-switch/cbp-toggle-switch.component.ts

@@ -0,0 +1,37 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+
+let toggleSwitchCounter = 1;
+
+
+@Component({
+  selector: 'cbp-toggle-switch',
+  templateUrl: './cbp-toggle-switch.component.html',
+  styleUrls: ['./cbp-toggle-switch.component.scss']
+})
+export class CBPToggleSwitchComponent implements OnInit {
+
+  @Input() onLabel = 'ON';
+  @Input() offLabel = 'OFF';
+  @Input() onValue = true;
+  @Input() offValue = false;
+  @Input() label: string = null;
+  @Input() initialValue: any;
+  @Input() required: boolean;
+  @Input() disabled: boolean;
+  @Output() changed = new EventEmitter<boolean>();
+
+  isOn: Boolean;
+
+  toggleSwitchId = `cbp-toggle-sw-${toggleSwitchCounter}`;
+
+  constructor() {
+      toggleSwitchCounter++;
+  }
+  ngOnInit() {
+      this.isOn = this.initialValue === this.onValue;
+  }
+
+  valueChange($event: any) {
+    this.changed.emit($event  ? this.onValue : this.offValue);
+  }
+}

src/app/buttons/index.ts

@@ -0,0 +1,2 @@
+export * from './cbp-toggle-switch/cbp-toggle-switch.component';
+export * from './buttons.module';

src/app/index.ts

@@ -1,3 +1,4 @@
+export * from './buttons/index';
 export * from './accordion/index';
 export * from './applications/index';
 export * from './cbp-root/index';

src/app/test-module.ts

@@ -6,6 +6,7 @@ import {CBPHeaderModule} from './header/cbp-header/cbp-header.module';
 import {CBPAppHeaderModule} from './header/app-header/app-header.module';
 import {CBPProgressModule} from './progress/progress.module';
 import {CBPRootComponent} from './cbp-root/cbp-root.component';
+import {CBPButtonsModule} from './buttons/buttons.module';
 
 
 @NgModule({
@@ -15,7 +16,8 @@ import {CBPRootComponent} from './cbp-root/cbp-root.component';
         CBPAccordionModule,
         CBPHeaderModule,
         CBPAppHeaderModule,
-        CBPProgressModule
+        CBPProgressModule,
+        CBPButtonsModule
     ],
     providers: [],
     schemas: [],

src/demo/app/demo-buttons/demo-buttons.component.html

@@ -12,4 +12,30 @@ <h3>Disabled Buttons</h3>
 <button mat-raised-button color="accent" disabled>Accent</button>
 <button mat-raised-button color="warn" disabled>Danger</button>
 <button mat-button disabled>Default</button>
-<a href mat-button mat-button-link disabled>SomeLink</a>
+<a href mat-button mat-button-link disabled>SomeLink</a>
+
+<h3>Toggle Switches</h3>
+<div>
+    <cbp-toggle-switch label="Access" [initialValue]="toggle.one" (changed)="toggle.one = $event"></cbp-toggle-switch>
+    <span style="padding: 10px;">value = {{ toggle.one }}</span>
+</div>
+<br>
+<div>
+    <cbp-toggle-switch label="Alert" onLabel="YES" offLabel="NO" onValue="Y" offValue="N" [initialValue]="toggle.two" (changed)="toggle.two = $event"></cbp-toggle-switch>
+    <span style="padding: 10px;">value = {{ toggle.two }}</span>
+</div>
+<br>
+<div>
+    <cbp-toggle-switch label="Undefined" onLabel="YES" offLabel="NO" onValue="Y" offValue="N" [initialValue]="toggle.something" (changed)="toggle.something = $event"></cbp-toggle-switch>
+    <span style="padding: 10px;">value = {{ toggle.something }}</span>
+</div>
+<br>
+<div>
+    <cbp-toggle-switch label="Disabled" disabled="true" onLabel="YES" offLabel="NO" onValue="Y" offValue="N" [initialValue]="toggle.disabled" (changed)="toggle.disabled = $event"></cbp-toggle-switch>
+    <span style="padding: 10px;">value = {{ toggle.disabled }}</span>
+</div>
+<br>
+<div>
+    <cbp-toggle-switch label="Disabled" disabled="true" onLabel="YES" offLabel="NO" [initialValue]="false"></cbp-toggle-switch>
+    <span style="padding: 10px;">value = false</span>
+</div>

src/demo/app/demo-buttons/demo-buttons.component.spec.ts

@@ -3,11 +3,12 @@ import { TestBed, async } from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {BrowserModule} from '@angular/platform-browser';
 import {DemoButtonsComponent} from './demo-buttons.component';
+import {CBPButtonsModule} from '../../../app/buttons/buttons.module';
 
 describe('DemoButtonsComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [BrowserModule, NoopAnimationsModule],
+            imports: [BrowserModule, NoopAnimationsModule, CBPButtonsModule],
             declarations: [
                 DemoButtonsComponent]
         }).compileComponents();

src/demo/app/demo-buttons/demo-buttons.component.ts

@@ -8,4 +8,9 @@ import {Component} from '@angular/core';
 })
 export class DemoButtonsComponent {
 
+    toggle = {
+        one: true,
+        two: false,
+        disabled: 'Y',
+    }
 }

src/demo/app/demo-buttons/demo-buttons.module.ts

@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {DemoButtonsComponent} from './demo-buttons.component';
 import {MatButtonModule} from '@angular/material';
+import {CBPButtonsModule} from '../../../app/buttons/buttons.module';
 
 @NgModule({
   imports: [
-    CommonModule, MatButtonModule
+    CommonModule, MatButtonModule, CBPButtonsModule
   ],
   exports: [DemoButtonsComponent, MatButtonModule],
   declarations: [DemoButtonsComponent]