feat: rewrite Checkbox as a separate module | suit to Fiori3 (#1777)

* Working cheeckbox implementation * Create documentation examples * Add checkbox interface annotations * feat(core): update unit tests * feat(core) Update checkbox api description * core(feat) Working unit tests for checkbox * feat(core) Introduce compareObjects function | Compare values in checkbox using compareObjects * core(feat) Review changes * feat(core) Remove checkbox support in FormControlDirective | Update documentation examples using old versions of checkbox * feat(core) fix circular dependencies * feat(core) Add custom label example | Add files indexing * feat(core) Change encapsulation and change detection strategy * feat(core) Make MultiInput tests async
SAP · Jan 14, 2020 · 3ef07f8 · 3ef07f8
1 parent 3d6d7e4
commit 3ef07f8
Show file tree

Hide file tree

Showing 36 changed files with 1,028 additions and 357 deletions.
diff --git a/apps/docs/src/app/core/api-files.ts b/apps/docs/src/app/core/api-files.ts
@@ -56,6 +56,9 @@ export const API_FILES = {
     combobox: [
         'ComboboxComponent'
     ],
+    checkbox: [
+        'CheckboxComponent'
+    ],
     datePicker: [
         'DatePickerComponent',
         'DateFormatParser',

diff --git a/apps/docs/src/app/core/component-docs/checkbox/checkbox-docs.component.html b/apps/docs/src/app/core/component-docs/checkbox/checkbox-docs.component.html
@@ -1,20 +1,104 @@
-<fd-docs-section-title [id]="'checkbox-standard'" [componentName]="'checkbox'">
+<fd-docs-section-title [id]="'checkbox-default-example'" [componentName]="'checkbox'">
     Standard Checkbox
 </fd-docs-section-title>
+<description>
+    By default fd-checkbox component is binary, returning <code>true</code> and <code>false</code> values.
+</description>
 <component-example [name]="'ex1'">
-    <fd-checkbox-example></fd-checkbox-example>
+    <fd-default-checkbox-example></fd-default-checkbox-example>
 </component-example>
-<code-example [exampleFiles]="checkboxFormHtml"></code-example>
+<code-example [exampleFiles]="checkboxDefault"></code-example>
 
 <separator></separator>
-<fd-docs-section-title [id]="'checkbox-reactiveForms'" [componentName]="'checkbox'">
-    Checkbox Reactive Forms
+
+<fd-docs-section-title [id]="'checkbox-tristate-example'" [componentName]="'checkbox'">
+    Tristate Checkbox
 </fd-docs-section-title>
 <description>
-    The checkbox input element, like several other native html elements, support Angular reactive forms. Using the
-    checkbox within the form element greatly simplifies value access and validation.
+    Tristate mode adds third state to default checkbox behaviour. In this mode checkbox returns:
+    <code>true</code>, <code>false</code> and <code>null</code> values.
+    <br>
+    To prevent user from manually selecting third state of the checkbox use <code>[tristateSelectable]</code> property.
 </description>
 <component-example [name]="'ex2'">
-    <fd-checkbox-form-group-example></fd-checkbox-form-group-example>
+    <fd-checkbox-tristate-example></fd-checkbox-tristate-example>
+</component-example>
+<code-example [exampleFiles]="checkboxTristate"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'checkbox-custom-values-example'" [componentName]="'checkbox'">
+    Checkbox custom values
+</fd-docs-section-title>
+<description>
+    Values returned by checkbox can be customized using <code>[values]</code> property.
+    <br>
+    <ul>
+        <li style="margin-bottom: .5rem;">
+            Type: <code>{{'{ trueValue?: any, falseValue?: any, thirdStateValue?: any }'}}</code>
+        </li>
+        <li>
+            Default value: <code>{{'{ trueValue: true, falseValue: false, thirdStateValue: null }'}}</code>
+        </li>
+    </ul>
+</description>
+<component-example [name]="'ex3'">
+    <fd-checkbox-custom-values-example></fd-checkbox-custom-values-example>
+</component-example>
+<code-example [exampleFiles]="checkboxCustomValues"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'checkbox-reactive-forms-example'" [componentName]="'checkbox'">
+    Checkbox with Reactive Forms
+</fd-docs-section-title>
+<description>
+    Checkbox can be used with Reactive Forms by binding it as standard form control with <code>[formControlName]</code>
+    input. Example below shows usage of checkbox component with Reactive Form. "Accept all" behaves as master control
+    representing overall state of agreements controls.
+</description>
+<component-example [name]="'ex4'">
+    <fd-checkbox-reactive-forms-example></fd-checkbox-reactive-forms-example>
+</component-example>
+<code-example [exampleFiles]="checkboxReactiveForms"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'checkbox-custom-label-example'" [componentName]="'checkbox'">
+    Checkbox with custom label
+</fd-docs-section-title>
+<description>
+    Checkbox label can by passed to component as external content using content projection mechanism. If external
+    content is provided value passed using <code>[label]</code> property is ignored.
+</description>
+<component-example [name]="'ex5'">
+    <fd-checkbox-custom-label-example></fd-checkbox-custom-label-example>
+</component-example>
+<code-example [exampleFiles]="checkboxCustomLabel"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'checkbox-states-example'" [componentName]="'checkbox'">
+    Checkbox styling properties
+</fd-docs-section-title>
+<description>
+    Checkbox can be but in various states by modifying following properties:
+    <ul>
+        <li style="margin-bottom: .5rem;">
+            Modifies visual appearance of checkbox <br>
+            <code>[state] = 'valid' | 'invalid' | 'information' | 'warning'</code>
+        </li>
+        <li style="margin-bottom: .5rem;">
+            Disables control <br>
+            <code>[disable] = true | false</code>
+        </li>
+        <li>
+            Miniaturizes checkbox <br>
+            <code>[compact] = true | false</code>
+        </li>
+    </ul>
+</description>
+<component-example [name]="'ex6'">
+    <fd-checkbox-states-example></fd-checkbox-states-example>
 </component-example>
-<code-example [exampleFiles]="checkboxFormGroup"></code-example>
+<code-example [exampleFiles]="checkboxStates"></code-example>
diff --git a/apps/docs/src/app/core/component-docs/checkbox/checkbox-docs.component.ts b/apps/docs/src/app/core/component-docs/checkbox/checkbox-docs.component.ts
@@ -1,42 +1,70 @@
-import { Component, OnInit, ViewChildren, ElementRef, QueryList } from '@angular/core';
+import {Component} from '@angular/core';
 
-import * as formHtml from '!raw-loader!./examples/checkbox-example.component.html';
-import * as formHtmlTsCode from '!raw-loader!./examples/checkbox-examples.component.ts';
-import * as formGroupInputHtml from '!raw-loader!./examples/checkbox-form-group-example.component.html';
-import * as formGroupInputTs from '!raw-loader!./examples/checkbox-form-group-example.component.ts';
-import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
-import { DocsSectionTitleComponent } from '../../../documentation/core-helpers/docs-section-title/docs-section-title.component';
-import { ActivatedRoute } from '@angular/router';
+import * as checkboxDefaultTsCode from '!raw-loader!./examples/checkbox-default-example.component.ts';
+import * as checkboxTristateTsCode from '!raw-loader!./examples/checkbox-tristate-example.component.ts';
+import * as checkboxCustomValuesTsCode from '!raw-loader!./examples/checkbox-custom-values-example.component.ts';
+import * as checkboxReactiveFormsTsCode from '!raw-loader!./examples/checkbox-reactive-forms-example.component.ts';
+import * as checkboxStatesTsCode from '!raw-loader!./examples/checkbox-states-example.component.ts';
+import * as checkboxCustomLabelTsCode from '!raw-loader!./examples/checkbox-custom-label-example.component.ts';
+
+import {ExampleFile} from '../../../documentation/core-helpers/code-example/example-file';
 
 @Component({
     selector: 'app-input',
     templateUrl: './checkbox-docs.component.html'
 })
-export class CheckboxDocsComponent implements OnInit {
-    checkboxFormHtml: ExampleFile[] = [
+export class CheckboxDocsComponent {
+    checkboxDefault: ExampleFile[] = [
+        {
+            language: 'typescript',
+            fileName: 'checkbox-default-example',
+            component: 'CheckboxDefaultExamplesComponent',
+            code: checkboxDefaultTsCode
+        }
+    ];
+
+    checkboxTristate: ExampleFile[] = [
+        {
+            language: 'typescript',
+            fileName: 'checkbox-tristate-example',
+            component: 'DefaultCheckboxExamplesComponent',
+            code: checkboxTristateTsCode
+        }
+    ];
+
+    checkboxCustomValues: ExampleFile[] = [
         {
-            language: 'html',
-            code: formHtml,
-            fileName: 'checkbox-example',
-            component: 'CheckboxExample',
-            secondFile: 'checkbox-examples',
-            typescriptFileCode: formHtmlTsCode
+            language: 'typescript',
+            fileName: 'checkbox-custom-values-example',
+            component: 'CheckboxCustomValuesExampleComponent',
+            code: checkboxCustomValuesTsCode
         }
     ];
 
-    checkboxFormGroup: ExampleFile[] = [
+    checkboxReactiveForms: ExampleFile[] = [
         {
-            language: 'html',
-            code: formGroupInputHtml,
-            fileName: 'checkbox-form-group-example'
-        },
+            language: 'typescript',
+            fileName: 'checkbox-reactive-forms-example',
+            component: 'CheckboxReactiveFormsExampleComponent',
+            code: checkboxReactiveFormsTsCode
+        }
+    ];
+
+    checkboxStates: ExampleFile[] = [
         {
             language: 'typescript',
-            code: formGroupInputTs,
-            fileName: 'checkbox-form-group-example',
-            component: 'CheckboxFormGroupExampleComponent'
+            fileName: 'checkbox-states-example',
+            component: 'CheckboxStatesExampleComponent',
+            code: checkboxStatesTsCode
         }
     ];
 
-    ngOnInit() { }
+    checkboxCustomLabel: ExampleFile[] = [
+        {
+            language: 'typescript',
+            fileName: 'checkbox-custom-label-example',
+            component: 'CheckboxCustomLabelExampleComponent',
+            code: checkboxCustomLabelTsCode
+        }
+    ];
 }
diff --git a/.../docs/src/app/core/component-docs/checkbox/checkbox-header/checkbox-header.component.html b/.../docs/src/app/core/component-docs/checkbox/checkbox-header/checkbox-header.component.html
@@ -4,7 +4,7 @@
     disabled and also displayed in a row. <br />Checkboxes are keyboard navigable via the tab key and selected with
     the space bar.
 </description>
-<import module="FormModule"></import>
+<import module="CheckboxModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>
diff --git a/apps/docs/src/app/core/component-docs/checkbox/checkbox-header/checkbox-header.component.ts b/apps/docs/src/app/core/component-docs/checkbox/checkbox-header/checkbox-header.component.ts
@@ -1,14 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-select-header',
-  templateUrl: './checkbox-header.component.html',
+    selector: 'app-select-header',
+    templateUrl: './checkbox-header.component.html',
 })
-export class CheckboxHeaderComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+export class CheckboxHeaderComponent {
 }
diff --git a/.../src/app/core/component-docs/checkbox/examples/checkbox-custom-label-example.component.ts b/.../src/app/core/component-docs/checkbox/examples/checkbox-custom-label-example.component.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'fd-checkbox-custom-label-example',
+    template: `
+        <fd-checkbox [(ngModel)]="checkboxValue">
+            I accept&nbsp;<a href="#">Terms and conditions</a>
+        </fd-checkbox>
+        Value: {{checkboxValue}}
+    `
+})
+export class CheckboxCustomLabelExampleComponent {
+    checkboxValue = false;
+}
+
diff --git a/...src/app/core/component-docs/checkbox/examples/checkbox-custom-values-example.component.ts b/...src/app/core/component-docs/checkbox/examples/checkbox-custom-values-example.component.ts
@@ -0,0 +1,24 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'fd-checkbox-custom-values-example',
+    template: `
+        <fd-checkbox label="I accept the new Terms of Service"
+                     [values]="{trueValue: 'Yes', falseValue: 'No'}"
+                     [(ngModel)]="checkboxValue1">
+        </fd-checkbox>
+        Value: {{checkboxValue1}}
+
+        <fd-checkbox label="Banana is the best fruit"
+                     [tristate]="true"
+                     [values]="{trueValue: 'Yes', falseValue: 'No', thirdStateValue: 'I dont have an opinion'}"
+                     [(ngModel)]="checkboxValue2">
+        </fd-checkbox>
+        Value: {{checkboxValue2}}
+    `
+})
+export class CheckboxCustomValuesExampleComponent {
+    checkboxValue1 = 'Yes';
+    checkboxValue2 = 'Yes';
+}
+
diff --git a/.../docs/src/app/core/component-docs/checkbox/examples/checkbox-default-example.component.ts b/.../docs/src/app/core/component-docs/checkbox/examples/checkbox-default-example.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'fd-default-checkbox-example',
+    template: `
+        <fd-checkbox label="Option 1" [(ngModel)]="checkboxValue"></fd-checkbox>
+        Value: {{checkboxValue}}
+    `
+})
+export class CheckboxDefaultExampleComponent {
+    checkboxValue = false;
+}