feat(checkbox): added checkbox component (#4)

package.json

@@ -21,8 +21,8 @@
         "@angular/elements": "6.0.0",
         "@angular/forms": "6.0.0",
         "@angular/platform-browser": "6.0.0",
+        "@ptsecurity/mosaic-icons": "2.5.1",
         "core-js": "^2.5.5",
-        "@ptsecurity/mosaic-icons": "2.5.0",
         "rxjs": "6.0.0",
         "systemjs": "0.19.43",
         "tslib": "^1.9.1",
@@ -145,6 +145,7 @@
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
         "server-dev:typography": "npm run server-dev -- --env.component typography",
         "server-dev:badge": "npm run server-dev -- --env.component badge",
+        "server-dev:checkbox": "npm run server-dev -- --env.component checkbox",
         "server-dev:navbar": "npm run server-dev -- --env.component navbar"
     },
     "lint-staged": {

src/lib-dev/checkbox/module.ts

@@ -0,0 +1,45 @@
+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 { McCheckboxModule } from '../../lib/checkbox';
+
+
+/* tslint:disable:no-trailing-whitespace */
+@Component({
+    selector: 'app',
+    styleUrls: ['./styles.css'],
+    encapsulation: ViewEncapsulation.None,
+    template: require('./template.html')
+})
+export class DemoComponent {
+    checked: boolean[] = [true, true, false];
+    indeterminate: boolean = true;
+    disabled: boolean = false;
+    labelPosition = 'after';
+
+    onCheckboxChange(val) {
+        console.log('onCheckboxChange', val);
+    }
+}
+
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        McCheckboxModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {
+}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));

src/lib-dev/checkbox/styles.scss

@@ -0,0 +1,2 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+@import '../../lib/core/theming/prebuilt/default-theme';

src/lib-dev/checkbox/template.html

@@ -0,0 +1,32 @@
+<div class="mc-body">
+    <p>
+        <mc-checkbox> Default</mc-checkbox>
+    </p>
+
+    <p>
+        <mc-checkbox [(ngModel)]="checked[0]"> Checked</mc-checkbox>
+
+    </p>
+
+    <p>
+        <mc-checkbox [(ngModel)]="checked[2]" [indeterminate]="true"> Indeterminate
+        </mc-checkbox>
+    </p>
+
+    <p>
+        <mc-checkbox [disabled]="true"> Default disabled</mc-checkbox>
+    </p>
+
+
+    <p>
+        <mc-checkbox [(ngModel)]="checked" disabled="disabled"> Checked disabled
+        </mc-checkbox>
+    </p>
+
+    <p>
+        <mc-checkbox [(ngModel)]="checked[2]" [indeterminate]="true" disabled="disabled"> Indeterminate disabled
+        </mc-checkbox>
+    </p>
+
+
+</div>

src/lib/checkbox/README.md

@@ -0,0 +1 @@
+Please see the official documentation at https://github.com/positive-js/mosaic

src/lib/checkbox/_checkbox-theme.scss

@@ -0,0 +1,129 @@
+@import '../core/theming/theming';
+@import '../core/styles/typography/typography-utils';
+@import '../core/styles/variables';
+
+@mixin mc-checkbox-theme($theme) {
+    $hover-lighten: 5%;
+    // main
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    // focus inset shadow color
+    $focus-border-box-shadow: inset 0 0 0 1px map-get($background, background);
+
+    // background
+    $toggle-background-unchecked: $background;
+    $toggle-background-checked: map-get($primary, 500);
+    $toggle-background-checked-hover: lighten($toggle-background-checked, $hover-lighten);
+    $toggle-background-disabled: map-get($second, 40);
+    $toggle-background-hover: map-get($background, hover);
+
+    // border
+    $toggle-border-color-checked: map-get($primary, 600);
+    $toggle-border-color-checked-hover: lighten($toggle-border-color-checked, $hover-lighten);
+    $toggle-border-color-unchecked: map-get($second, 300);
+    $toggle-border-color-focus: map-get($primary, 500);
+    $toggle-border-color-disabled: map-get($second, 100);
+
+    // icon
+    $icon-color-checked: map-get($background, background);
+    $icon-color-disabled: map-get($second, 200);
+
+    // label
+    $label-color-disabled: map-get($foreground, disabled-text);
+    $label-color: map-get($foreground, text);
+
+    .mc-checkbox-label {
+        color: $label-color;
+    }
+
+    .mc-checkbox-frame {
+        border-color: $toggle-border-color-unchecked;
+    }
+
+    .mc-checkbox-checkmark,
+    .mc-checkbox-mixedmark {
+        color: $icon-color-checked;
+    }
+
+    .mc-checkbox:not(.mc-checkbox-disabled) {
+        .mc-checkbox-input {
+            &:hover {
+                + .mc-checkbox-frame {
+                    background-color: $toggle-background-hover;
+                }
+            }
+
+            &:focus {
+                + .mc-checkbox-frame {
+                    border-color: $toggle-border-color-focus;
+                }
+            }
+        }
+
+        &.mc-checkbox-checked,
+        &.mc-checkbox-indeterminate {
+            .mc-checkbox-input {
+                &:focus {
+                    + .mc-checkbox-frame {
+                        border-color: $toggle-border-color-focus;
+                        box-shadow: $focus-border-box-shadow;
+                    }
+                }
+            }
+        }
+    }
+
+    .mc-checkbox-checked:not(.mc-checkbox-disabled),
+    .mc-checkbox-indeterminate:not(.mc-checkbox-disabled) {
+        .mc-checkbox-frame {
+            background: $toggle-background-checked;
+            border-color: $toggle-border-color-checked;
+        }
+        .mc-checkbox-input {
+            &:hover {
+                + .mc-checkbox-frame {
+                    background: $toggle-background-checked-hover;
+                    border-color: $toggle-border-color-checked-hover;
+                }
+            }
+            &:focus:hover {
+                + .mc-checkbox-frame {
+                    border-color: $toggle-border-color-focus;
+                    box-shadow: $focus-border-box-shadow;
+                }
+            }
+        }
+    }
+
+    .mc-checkbox-disabled {
+        .mc-checkbox-frame {
+            border-color: $toggle-border-color-disabled;
+            background-color: $toggle-background-disabled;
+        }
+
+        .mc-checkbox-label {
+            color: $label-color-disabled;
+        }
+
+        .mc-checkbox-checkmark,
+        .mc-checkbox-mixedmark {
+            color: $icon-color-disabled;
+        }
+    }
+}
+
+@mixin mc-checkbox-typography($config) {
+    .mc-checkbox {
+        font-family: mc-font-family($config);
+        font-size: mc-font-size($config, body);
+        line-height: mc-line-height($config, body);
+    }
+
+    .mc-checkbox-layout .mc-checkbox-label {
+        line-height: mc-line-height($config, body);
+        font-size: mc-font-size($config, body);
+    }
+}

src/lib/checkbox/checkbox-config.ts

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+
+
+/**
+ * Checkbox click action when user click on input element.
+ * noop: Do not toggle checked or indeterminate.
+ * check: Only toggle checked status, ignore indeterminate.
+ * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
+ * undefined: Same as `check-indeterminate`.
+ */
+export type McCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
+
+/**
+ * Injection token that can be used to specify the checkbox click behavior.
+ */
+export const MC_CHECKBOX_CLICK_ACTION =
+    new InjectionToken<McCheckboxClickAction>('mc-checkbox-click-action');

src/lib/checkbox/checkbox-module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { McCommonModule } from '@ptsecurity/mosaic/core';
+
+import { McCheckbox } from './checkbox';
+import { McCheckboxRequiredValidator } from './checkbox-required-validator';
+
+
+@NgModule({
+    imports: [CommonModule, McCommonModule],
+    exports: [McCheckbox, McCheckboxRequiredValidator, McCommonModule],
+    declarations: [McCheckbox, McCheckboxRequiredValidator]
+})
+export class McCheckboxModule {
+}

src/lib/checkbox/checkbox-required-validator.ts

@@ -0,0 +1,30 @@
+import {
+    Directive,
+    forwardRef,
+    Provider
+} from '@angular/core';
+import {
+    CheckboxRequiredValidator,
+    NG_VALIDATORS
+} from '@angular/forms';
+
+
+export const MC_CHECKBOX_REQUIRED_VALIDATOR: Provider = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => McCheckboxRequiredValidator),
+    multi: true
+};
+
+/**
+ * Validator for Mosaic checkbox's required attribute in template-driven checkbox.
+ * Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
+ * work with `mc-checkbox`.
+ */
+@Directive({
+    selector: `mc-checkbox[required][formControlName],
+             mc-checkbox[required][formControl], mc-checkbox[required][ngModel]`,
+    providers: [MC_CHECKBOX_REQUIRED_VALIDATOR],
+    host: { '[attr.required]': 'required ? "" : null' }
+})
+export class McCheckboxRequiredValidator extends CheckboxRequiredValidator {
+}