fix: (platform) Introduce Checkbox as a Component (#2293)

* Rebased with Master fix:tristate checkbox fix:documentation changes * fix:removed logs * docs:documentation added after review * docs:documentation fix * fix:review change fix: nested tristate remaining, documentation done * fix: tristate change done * fix:setvalue included * docs: disabled example included * fix:review implementation for example changes [ci skip] * fix:multiselect example removed,value used * docs: pre tag removed from import, review
SAP · Jun 17, 2020 · 9f410fb · 9f410fb
1 parent 379ecaa
commit 9f410fb
Show file tree

Hide file tree

Showing 26 changed files with 1,731 additions and 35 deletions.
diff --git a/apps/docs/src/app/platform/api-files.ts b/apps/docs/src/app/platform/api-files.ts
@@ -5,14 +5,15 @@
  * Names are sorted in the ApiComponent so order does not matter.
  */
 export const API_FILES = {
-    button: ['buttoncomponent'],
     actionbar: ['actionbarcomponent'],
-    menu: ['MenuComponent', 'MenuItemComponent', 'MenuTriggerDirective'],
+    button: ['buttoncomponent'],
+    checkbox: ['CheckboxComponent'],
+    infoLabel: ['InfoLabelComponent'],
     link: ['LinkComponent'],
+    menu: ['MenuComponent', 'MenuItemComponent', 'MenuTriggerDirective'],
+    menuButton: ['MenuButtonComponent'],
+    radioGroup: ['RadioGroupComponent'],
     searchField: ['SearchFieldComponent'],
     select: ['SelectPlatformComponent'],
-    radioGroup: ['RadioGroupComponent'],
-    menuButton: ['MenuButtonComponent'],
-    splitMenuButton: ['SplitMenuButtonComponent'],
-    infoLabel: ['InfoLabelComponent']
+    splitMenuButton: ['SplitMenuButtonComponent']
 };
diff --git a/...app/platform/component-docs/platform-forms/checkbox/platform-checkbox-docs.component.html b/...app/platform/component-docs/platform-forms/checkbox/platform-checkbox-docs.component.html
@@ -0,0 +1,64 @@
+<fd-docs-section-title [id]="'def1'" [componentName]="'CheckboxComponent'">
+    Binary Checkbox Used With Form
+</fd-docs-section-title>
+<description>
+    This example shows Binary Checkbox use with Template Driven form and with Reactive/Model Driven form
+</description>
+<component-example>
+    <fdp-binary-checkbox></fdp-binary-checkbox>
+</component-example>
+<code-example [exampleFiles]="binaryCheckbox"></code-example>
+
+<separator></separator>
+<fd-docs-section-title [id]="'def5'" [componentName]="'CheckboxComponent'">
+    Checkbox Used Without Form
+</fd-docs-section-title>
+<description>
+    This example shows Binary Checkbox without form
+    <ul style="list-style-type: circle;">
+        <li>checkbox with value property</li>
+        <li>checkbox without value property</li>
+    </ul>
+</description>
+<component-example>
+    <fdp-binary-checkbox-no-form></fdp-binary-checkbox-no-form>
+</component-example>
+<code-example [exampleFiles]="noFormCheckbox"></code-example>
+
+<separator></separator>
+<fd-docs-section-title [id]="'def2'" [componentName]="'CheckboxComponent'">
+    Checkboxes With Value Property
+</fd-docs-section-title>
+<description>
+    This example shows multiple Checkbox selection with Template Driven form and with Reactive/Model Driven form
+</description>
+<component-example>
+    <fdp-multiselect-checkbox></fdp-multiselect-checkbox>
+</component-example>
+<code-example [exampleFiles]="multiselectCheckbox"></code-example>
+
+<separator></separator>
+<fd-docs-section-title [id]="'def3'" [componentName]="'CheckboxComponent'">
+    Tistate Checkbox With Value Property and Without Value Property
+</fd-docs-section-title>
+<description>
+    This example shows tristate checkbox in Reactive form and Template driven form
+    <ul style="list-style-type: circle;">
+        <li>Tristate checkbox with value property</li>
+        <li>Tristate checkbox without value property</li>
+    </ul>
+</description>
+<component-example>
+    <fdp-tristate-checkbox></fdp-tristate-checkbox>
+</component-example>
+<code-example [exampleFiles]="triCheckbox"></code-example>
+
+<separator></separator>
+<fd-docs-section-title [id]="'def4'" [componentName]="'CheckboxComponent'">
+    Checkbox With Form and State Change on Error
+</fd-docs-section-title>
+<description>This example shows Checkbox Error state, when form has error </description>
+<component-example>
+    <fdp-checkbox-error-handling></fdp-checkbox-error-handling>
+</component-example>
+<code-example [exampleFiles]="errorCheckbox"></code-example>
diff --git a/...c/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-docs.component.ts b/...c/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-docs.component.ts
@@ -0,0 +1,88 @@
+import { Component } from '@angular/core';
+import * as multiselectCheckboxhtml from '!raw-loader!./platform-checkbox-examples/platform-multiselect-checkbox.component.html';
+import * as multiselectCheckboxSrc from '!raw-loader!./platform-checkbox-examples/platform-multiselect-checkbox.component.ts';
+import * as binaryCheckboxhtml from '!raw-loader!./platform-checkbox-examples/platform-binary-checkbox.component.html';
+import * as binaryCheckboxSrc from '!raw-loader!./platform-checkbox-examples/platform-binary-checkbox.component.ts';
+import * as checkboxStylehtml from '!raw-loader!./platform-checkbox-examples/platform-checkbox-error-handling.component.html';
+import * as checkboxStyleSrc from '!raw-loader!./platform-checkbox-examples/platform-checkbox-error-handling.component.ts';
+import * as checkboxNoFormhtml from '!raw-loader!./platform-checkbox-examples/platform-binary-checkbox-no-form.component.html';
+import * as checkboxNoFormSrc from '!raw-loader!./platform-checkbox-examples/platform-binary-checkbox-no-form.component.ts';
+import * as triCheckboxhtml from '!raw-loader!./platform-checkbox-examples/platform-tristate-checkbox.component.html';
+import * as triCheckboxSrc from '!raw-loader!./platform-checkbox-examples/platform-tristate-checkbox.component.ts';
+import { ExampleFile } from '../../../../documentation/core-helpers/code-example/example-file';
+
+@Component({
+    selector: 'app-checkbox',
+    templateUrl: 'platform-checkbox-docs.component.html'
+})
+export class PlatformCheckboxDocsComponent {
+    multiselectCheckbox: ExampleFile[] = [
+        {
+            language: 'html',
+            code: multiselectCheckboxhtml,
+            fileName: 'platform-cozy-checkbox-example'
+        },
+        {
+            language: 'typescript',
+            code: multiselectCheckboxSrc,
+            fileName: 'platform-cozy-checkbox-example',
+            component: 'PlatformCozyChekboxExampleComponent'
+        }
+    ];
+
+    binaryCheckbox: ExampleFile[] = [
+        {
+            language: 'html',
+            code: binaryCheckboxhtml,
+            fileName: 'platform-compact-checkbox-example'
+        },
+        {
+            language: 'typescript',
+            code: binaryCheckboxSrc,
+            fileName: 'platform-compact-checkbox-example',
+            component: 'PlatformCompactChekboxExampleComponent'
+        }
+    ];
+
+    errorCheckbox: ExampleFile[] = [
+        {
+            language: 'html',
+            code: checkboxStylehtml,
+            fileName: 'platform-checkbox-styling'
+        },
+        {
+            language: 'typescript',
+            code: checkboxStyleSrc,
+            fileName: 'platform-checkbox-styling',
+            component: 'PlatformChekboxStyleComponent'
+        }
+    ];
+
+    noFormCheckbox: ExampleFile[] = [
+        {
+            language: 'html',
+            code: checkboxNoFormhtml,
+            fileName: 'platform-checkbox-no-form'
+        },
+        {
+            language: 'typescript',
+            code: checkboxNoFormSrc,
+            fileName: 'platform-checkbox-no-form',
+            component: 'PlatformChekboxNoFormComponent'
+        }
+    ];
+
+    triCheckbox: ExampleFile[] = [
+        {
+            language: 'html',
+            code: triCheckboxhtml,
+            fileName: 'platform-checkbox-tristate'
+        },
+        {
+            language: 'typescript',
+            code: triCheckboxSrc,
+            fileName: 'platform-checkbox-tristate',
+            component: 'PlatformChekboxTristateComponent'
+        }
+    ];
+}
diff --git a/.../src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-docs.module.ts b/.../src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-docs.module.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ApiComponent } from '../../../../documentation/core-helpers/api/api.component';
+import { API_FILES } from '../../../api-files';
+import { SharedDocumentationModule } from '../../../../documentation/shared-documentation.module';
+import { PlatformCheckboxDocsComponent } from './platform-checkbox-docs.component';
+import { PlatformCheckboxHeaderComponent } from './platform-checkbox-header/platform-checkbox-header.component';
+import { PlatformCozyChekboxExampleComponent } from './platform-checkbox-examples/platform-multiselect-checkbox.component';
+import { PlatformCompactChekboxExampleComponent } from './platform-checkbox-examples/platform-binary-checkbox.component';
+import { PlatformChekboxStyleComponent } from './platform-checkbox-examples/platform-checkbox-error-handling.component';
+import { PlatformChekboxNoFormComponent } from './platform-checkbox-examples/platform-binary-checkbox-no-form.component';
+import { PlatformChekboxTristateComponent } from './platform-checkbox-examples/platform-tristate-checkbox.component';
+import { PlatformCheckboxModule, FdpFormGroupModule, PlatformButtonModule } from '@fundamental-ngx/platform';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: PlatformCheckboxHeaderComponent,
+        children: [
+            { path: '', component: PlatformCheckboxDocsComponent },
+            { path: 'api', component: ApiComponent, data: { content: API_FILES.checkbox } }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+        SharedDocumentationModule,
+        PlatformCheckboxModule,
+        FdpFormGroupModule,
+        PlatformButtonModule
+    ],
+    exports: [RouterModule],
+    declarations: [
+        PlatformCheckboxDocsComponent,
+        PlatformCheckboxHeaderComponent,
+        PlatformCozyChekboxExampleComponent,
+        PlatformCompactChekboxExampleComponent,
+        PlatformChekboxStyleComponent,
+        PlatformChekboxNoFormComponent,
+        PlatformChekboxTristateComponent,
+    ]
+})
+export class CheckboxDocsModule { }
diff --git a/...forms/checkbox/platform-checkbox-examples/platform-binary-checkbox-no-form.component.html b/...forms/checkbox/platform-checkbox-examples/platform-binary-checkbox-no-form.component.html
@@ -0,0 +1,29 @@
+<h3>Binary Checkbox With Value</h3>
+<fdp-checkbox
+    [name]="'orion'"
+    [isBinary]="true"
+    [label]="'Orion'"
+    [value]="'orion'"
+    [(checked)]="orion"
+    (checkedChange)="checkedChangeFunction($event)"
+    (indeterminateChange)="indeterminateChangeFunction($event)"
+    (change)="changeFunction($event)"
+>
+</fdp-checkbox>
+<div>value: {{ orion }}</div>
+
+<fdp-checkbox [name]="'cygnus'" [isBinary]="true" [label]="'Cygnus'" [value]="'cygnus'" [(checked)]="cygnus">
+</fdp-checkbox>
+<div>value: {{ cygnus }}</div>
+<br />
+<br />
+<h3>Binary Checkbox Without Value</h3>
+<fdp-checkbox [name]="'lyra'" [isBinary]="true" [label]="'Lyra'" [(checked)]="lyra"> </fdp-checkbox>
+<div>value: {{ lyra }}</div>
+
+<fdp-checkbox [name]="'gemini'" [isBinary]="true" [label]="'Gemini'" [(checked)]="gemini"> </fdp-checkbox>
+<div>value: {{ gemini }}</div>
+
+<h3>Disabled Checkbox</h3>
+<fdp-checkbox [name]="'orion'" [isBinary]="true" [label]="'Orion'" [(checked)]="orion" [disabled]="true">
+</fdp-checkbox>
diff --git a/...m-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox-no-form.component.ts b/...m-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox-no-form.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fdp-binary-checkbox-no-form',
+    templateUrl: 'platform-binary-checkbox-no-form.component.html'
+})
+export class PlatformChekboxNoFormComponent {
+    orion: boolean = true;
+    cygnus: boolean = false;
+    lyra: boolean = true;
+    gemini: boolean = false;
+
+    public checkedChangeFunction(event: any): void {}
+
+    public indeterminateChangeFunction(event: any): void {}
+
+    public changeFunction(event: any): void {}
+}
diff --git a/...latform-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox.component.html b/...latform-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox.component.html
@@ -0,0 +1,78 @@
+<h3>Binary Checkbox in Template Driven Form</h3>
+<fdp-form-group [multiLayout]="true" [noLabelLayout]="false">
+    <fdp-form-field [id]="'yellow'" [label]="'Yellow'" [noLabelLayout]="true" zone="zLeft" rank="4" [editable]="true">
+        <fdp-checkbox
+            [name]="'yellow-cb'"
+            [isBinary]="true"
+            (checkedChange)="checkedChangeFunction($event)"
+            (indeterminateChange)="indeterminateChangeFunction($event)"
+            (change)="changeFunction($event)"
+            [(ngModel)]="yellow"
+        ></fdp-checkbox>
+    </fdp-form-field>
+
+    <fdp-form-field [id]="'white'" zone="zLeft" rank="4" [label]="'White'">
+        <fdp-checkbox [name]="'white-cb'" [isBinary]="true" [(ngModel)]="white"></fdp-checkbox>
+    </fdp-form-field>
+
+    <fdp-form-field [id]="'violet'" [label]="'Violet'" zone="zLeft" rank="4">
+        <fdp-checkbox [name]="'violet-cb'" [isBinary]="true" [(ngModel)]="violet"></fdp-checkbox>
+    </fdp-form-field>
+</fdp-form-group>
+<div style="padding-left: 2rem;">
+    <div>Yellow: {{ yellow }}</div>
+    <div>White: {{ white }}</div>
+    <div>Violet: {{ violet }}</div>
+</div>
+<br />
+<br />
+
+<h3>Binary Checkbox in Reactive/Model Driven Form</h3>
+<fdp-form-group [multiLayout]="true" [formGroup]="customForm" [object]="data">
+    <fdp-form-field #red [id]="'red'" [label]="'Red'" zone="zLeft" rank="4">
+        <fdp-checkbox
+            [name]="'red-cb'"
+            [isBinary]="true"
+            (checkedChange)="checkedChangeFunction($event)"
+            (indeterminateChange)="indeterminateChangeFunction($event)"
+            (change)="changeFunction($event)"
+            [contentDensity]="'compact'"
+            [formControl]="red.formControl"
+        ></fdp-checkbox>
+    </fdp-form-field>
+
+    <fdp-form-field #blue [id]="'blue'" [label]="'Blue'" zone="zLeft" rank="4">
+        <fdp-checkbox
+            [name]="'blue-cb'"
+            [isBinary]="true"
+            [contentDensity]="'compact'"
+            [formControl]="blue.formControl"
+        ></fdp-checkbox>
+    </fdp-form-field>
+
+    <fdp-form-field #green [id]="'green'" [label]="'Green'" zone="zLeft" rank="4">
+        <fdp-checkbox
+            [name]="'green-cb'"
+            [isBinary]="true"
+            [contentDensity]="'compact'"
+            [formControl]="green.formControl"
+        ></fdp-checkbox>
+    </fdp-form-field>
+</fdp-form-group>
+
+<div style="padding-left: 2rem;">form value: {{ customForm.getRawValue() | json }}</div>
+
+<h3>Disabled Checkbox</h3>
+<fdp-form-group [multiLayout]="true">
+    <fdp-form-field #disabled [id]="'disabled'" [label]="'Red'" zone="zLeft" rank="1">
+        <fdp-checkbox
+            [name]="'disabled-cb'"
+            [isBinary]="true"
+            (checkedChange)="checkedChangeFunction($event)"
+            (indeterminateChange)="indeterminateChangeFunction($event)"
+            (change)="changeFunction($event)"
+            [contentDensity]="'compact'"
+            [disabled]="true"
+        ></fdp-checkbox>
+    </fdp-form-field>
+</fdp-form-group>
diff --git a/.../platform-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox.component.ts b/.../platform-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox.component.ts
@@ -0,0 +1,25 @@
+import { FormGroup, FormControl } from '@angular/forms';
+import { Component, Optional } from '@angular/core';
+
+@Component({
+    selector: 'fdp-binary-checkbox',
+    templateUrl: 'platform-binary-checkbox.component.html'
+})
+export class PlatformCompactChekboxExampleComponent {
+    customForm = new FormGroup({});
+    data: DataObject = new DataObject(false, true);
+
+    yellow: boolean = false;
+    white: boolean = true;
+    violet: boolean;
+
+    public checkedChangeFunction(event: any): void {}
+
+    public indeterminateChangeFunction(event: any): void {}
+
+    public changeFunction(event: any): void {}
+}
+
+class DataObject {
+    constructor(public red: boolean, public blue: boolean, @Optional() public green?: boolean) {}
+}