Feat/toggle

package.json

@@ -159,6 +159,7 @@
         "server-dev:select": "npm run server-dev -- --env.component select",
         "server-dev:splitter": "npm run server-dev -- --env.component splitter",
         "server-dev:tag": "npm run server-dev -- --env.component tag",
+        "server-dev:toggle": "npm run server-dev -- --env.component toggle",
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
         "server-dev:tree": "npm run server-dev -- --env.component tree",
         "server-dev:typography": "npm run server-dev -- --env.component typography",

src/lib-dev/toggle/module.ts

@@ -0,0 +1,47 @@
+// tslint:disable:no-console
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McButtonModule } from '../../lib/button/';
+import { McToggleModule } from '../../lib/toggle/';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent {
+    valueSmallOff: boolean = false;
+    valueSmallOn: boolean = true;
+
+    valueBigOff: boolean = false;
+    valueBigOn: boolean = true;
+
+    disabled: boolean = false;
+}
+
+
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        McToggleModule,
+        McButtonModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+

src/lib-dev/toggle/styles.scss

@@ -0,0 +1,22 @@
+@import '../../lib/core/theming/prebuilt/default-theme';
+
+@import '../../lib/core/visual/prebuilt/default-visual';
+
+.container {
+    margin-top: 32px;
+    margin-left: 16px;
+}
+
+.toggle-demo-container {
+    margin-bottom: 8px;
+}
+
+.control-buttons-container {
+    display: inline-block;
+    margin-right: 16px;
+    margin-bottom: 16px;
+}
+
+.toggles-container {
+    max-width: 500px;
+}

src/lib-dev/toggle/template.html

@@ -0,0 +1,67 @@
+<div class="container">
+    <h1>Toggles</h1>
+
+    <div class="control-buttons-container">
+        <button mc-button (click)="disabled = false">Set Enabled</button>
+    </div>
+    <div class="control-buttons-container">
+        <button mc-button (click)="disabled = true">Set Disabled</button>
+    </div>
+
+    <div class="layout-row flex-100 toggles-container">
+        <div class="flex-50">
+            <h3>Small Toggles</h3>
+            <div class="layout-row flex-100 toggle-demo-container">
+                <div class="flex-33">
+                    <mc-toggle class="mc-toggle_small" [(ngModel)]="valueSmallOff"  [disabled]="disabled">
+                    </mc-toggle>
+                </div>
+                <div class="flex-33">
+                    <mc-toggle class="mc-toggle_small" color="primary" [(ngModel)]="valueSmallOn"  [disabled]="disabled">
+                    </mc-toggle>
+                </div>
+                <div class="flex-33">
+                    <mc-toggle class="mc-toggle_small" color="error" [(ngModel)]="valueSmallOn"  [disabled]="disabled">
+                    </mc-toggle>
+                </div>
+            </div>
+            <div class="toggle-demo-container">
+                <mc-toggle class="mc-toggle_small" [(ngModel)]="valueSmallOff"  [disabled]="disabled">
+                    Quack like a duck
+                </mc-toggle>
+            </div>
+            <div class="toggle-demo-container">
+                <mc-toggle class="mc-toggle_small cdk-keyboard-focused" labelPosition="left" [(ngModel)]="valueSmallOff"  [disabled]="disabled">
+                    Quack like a duck
+                </mc-toggle>
+            </div>
+        </div>
+        <div class="flex-50">
+            <h3>Big Toggles</h3>
+            <div class="layout-row flex-100 toggle-demo-container">
+                <div class="flex-33">
+                    <mc-toggle [(ngModel)]="valueBigOff"  [disabled]="disabled">
+                    </mc-toggle>
+                </div>
+                <div class="flex-33">
+                    <mc-toggle color="primary" [(ngModel)]="valueBigOn"  [disabled]="disabled">
+                    </mc-toggle>
+                </div>
+                <div class="flex-33">
+                    <mc-toggle color="error" [(ngModel)]="valueBigOn"  [disabled]="disabled">
+                    </mc-toggle>
+                </div>
+            </div>
+            <div class="toggle-demo-container">
+                <mc-toggle [(ngModel)]="valueBigOff"  [disabled]="disabled">
+                    Quack like a duck
+                </mc-toggle>
+            </div>
+            <div class="toggle-demo-container">
+                <mc-toggle class="cdk-keyboard-focused" labelPosition="left" [(ngModel)]="valueBigOff"  [disabled]="disabled">
+                    Quack like a duck
+                </mc-toggle>
+            </div>
+        </div>
+    </div>
+</div>

src/lib/core/styles/typography/_all-typography.scss

@@ -14,6 +14,7 @@
 @import '../../../tag/tag-theme';
 @import '../../option/option-theme';
 @import '../../../tooltip/tooltip-theme';
+@import '../../../toggle/toggle-theme';
 
 
 @mixin mosaic-typography($config: null) {
@@ -38,4 +39,5 @@
     @include mc-modal-typography($config);
     @include mc-option-typography($config);
     @include mc-tag-typography($config);
+    @include mc-toggle-typography($config);
 }

src/lib/core/theming/_all-theme.scss

@@ -20,6 +20,7 @@
 @import '../option/option-theme';
 @import '../../tag/tag-theme';
 @import '../../tooltip/tooltip-theme';
+@import '../../toggle/toggle-theme';
 @import '../../splitter/splitter-theme';
 
 
@@ -47,5 +48,6 @@
     @include mc-option-theme($theme);
     @include mc-tag-theme($theme);
     @include mc-tooltip-theme($theme);
+    @include mc-toggle-theme($theme);
     @include mc-splitter-theme($theme);
 }

src/lib/toggle/_toggle-theme.scss

@@ -0,0 +1,118 @@
+$hover-darken: 5%;
+
+@mixin _mc-toggle-color($palette) {
+    $color: mc-color($palette, 500);
+
+    .mc-toggle-bar {
+        background: $color;
+    }
+}
+
+@mixin _mc-toggle-border-color($palette) {
+    $color: mc-color($palette, 500);
+
+    .mc-toggle-bar {
+        border: 1px solid $color;
+    }
+}
+
+@mixin _mc-toggle-circle-color($darken) {
+    $toggle-circle-color-1: darken(white, $darken);
+    $toggle-circle-color-2: darken(mc-color($mc-grey, 100), $darken);
+
+    border: 1px solid mc-color($mc-grey, 300);
+    background:
+        $toggle-circle-color-1
+        linear-gradient(to bottom, $toggle-circle-color-1, $toggle-circle-color-2);
+}
+
+@mixin _mc-toggle-off-color($darken) {
+    $toggle-off-color-1: darken(mc-color($second, 100), $darken);
+    $toggle-off-color-2: darken(mc-color($second, 60), $darken);
+
+    background: $toggle-off-color-1 linear-gradient(to bottom, $toggle-off-color-1, $toggle-off-color-2);
+}
+
+@mixin mc-toggle-theme($theme) {
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+    $error: map-get($theme, error);
+    $background: map-get($theme, background);
+
+    $toggle-off-color-1: mc-color($second, 100);
+    $toggle-off-color-2: mc-color($second, 60);
+
+    mc-toggle {
+        .mc-toggle__circle {
+            @include _mc-toggle-circle-color(0);
+        }
+
+        .mc-toggle-bar {
+            border: 1px solid mc-color($mc-grey, 300);
+        }
+
+        &.mc-toggle-off {
+            .mc-toggle-input {
+                ~ .mc-toggle-bar-container .mc-toggle-bar {
+                    @include _mc-toggle-off-color(0)
+                }
+            }
+        }
+
+        &.mc-primary:not(.mc-toggle-off) {
+            @include _mc-toggle-color($primary);
+            @include _mc-toggle-border-color($primary);
+        }
+
+        &.mc-error:not(.mc-toggle-off) {
+            @include _mc-toggle-color($error);
+            @include _mc-toggle-border-color($error);
+        }
+    }
+
+    mc-toggle:not(.mc-disabled) {
+        .mc-toggle-input {
+            &:hover {
+                ~ .mc-toggle-bar-container .mc-toggle-bar {
+                    .mc-toggle__circle {
+                        @include _mc-toggle-circle-color($hover-darken);
+                    }
+                }
+            }
+        }
+
+        &.cdk-keyboard-focused {
+            .mc-toggle-input {
+                + .mc-toggle-bar-container .mc-toggle__focus-frame {
+                    border: 2px solid map-get($primary, 500);
+                    box-shadow: inset 0 0 0 1px map-get($background, background);
+                }
+            }
+        }
+
+        &.mc-toggle-off {
+            .mc-toggle-input {
+                &:hover {
+                    ~ .mc-toggle-bar-container .mc-toggle-bar {
+                        @include _mc-toggle-off-color($hover-darken)
+                    }
+                }
+            }
+        }
+    }
+
+    mc-toggle.mc-disabled {
+        opacity: 0.5;
+    }
+}
+
+
+@mixin mc-toggle-typography($config) {
+    mc-toggle:not(.mc-toggle_small) {
+        @include mc-typography-level-to-styles($config, body);
+    }
+
+    mc-toggle.mc-toggle_small {
+        @include mc-typography-level-to-styles($config, caption);
+    }
+}

src/lib/toggle/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/lib/toggle/public-api.ts

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

src/lib/toggle/toggle.component.html

@@ -0,0 +1,31 @@
+<label [attr.for]="inputId" class="mc-toggle-layout" #label>
+    <div class="mc-toggle__container" [class.left]="labelPosition === 'left'">
+        <input #input
+               type="checkbox"
+               class="mc-toggle-input cdk-visually-hidden"
+               [id]="inputId"
+               [checked]="checked"
+               [attr.value]="value"
+               [disabled]="disabled"
+               [attr.name]="name"
+               [tabIndex]="tabIndex"
+               [attr.aria-label]="ariaLabel || null"
+               [attr.aria-labelledby]="ariaLabelledby"
+               [attr.aria-checked]="_getAriaChecked()"
+               (click)="_onInputClick($event)"
+               (change)="_onInteractionEvent($event)"/>
+        <div class="mc-toggle-bar-container">
+            <div class="mc-toggle__focus-frame"></div>
+            <div class="mc-toggle-bar">
+                <div class="mc-toggle__circle" [@switch]="checked"></div>
+            </div>
+        </div>
+        <div class="mc-toggle__content"
+             [class.left]="labelPosition === 'left'"
+             [class.right]="labelPosition === 'right'">
+            <span class="mc-toggle-label" (cdkObserveContent)="_onLabelTextChange()">
+                <ng-content></ng-content>
+            </span>
+        </div>
+    </div>
+</label>