feat(platform): checkbox,checkbox-group - range selection & code enhancements

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox-no-form.component.html

@@ -1,30 +1,19 @@
 <h3>Binary Checkbox With Value</h3>
-<fdp-checkbox
-    name="orion"
-    [isBinary]="true"
-    label="Orion"
-    value="orion"
-    title="Orion"
-    [(checked)]="orion"
-    (checkedChange)="checkedChangeFunction()"
-    (indeterminateChange)="indeterminateChangeFunction()"
-    (change)="changeFunction()"
->
+<fdp-checkbox name="orion" label="Orion" title="Orion" [values]="{ trueValue: 'orion' }" [(checked)]="orion">
 </fdp-checkbox>
 <div>value: {{ orion }}</div>
 
-<fdp-checkbox name="cygnus" [isBinary]="true" label="Cygnus" title="Cygnus" value="cygnus" [(checked)]="cygnus">
+<fdp-checkbox name="cygnus" label="Cygnus" title="Cygnus" [(checked)]="cygnus" [values]="{ trueValue: 'cygnus' }">
 </fdp-checkbox>
 <div>value: {{ cygnus }}</div>
 <br />
 <br />
 <h3>Binary Checkbox Without Value</h3>
-<fdp-checkbox name="lyra" [isBinary]="true" label="Lyra" title="Lyra" [(checked)]="lyra"> </fdp-checkbox>
+<fdp-checkbox name="lyra" label="Lyra" title="Lyra" [(checked)]="lyra"> </fdp-checkbox>
 <div>value: {{ lyra }}</div>
 
-<fdp-checkbox name="gemini" [isBinary]="true" label="Gemini" title="Gemini" [(checked)]="gemini"> </fdp-checkbox>
+<fdp-checkbox name="gemini" label="Gemini" title="Gemini" [(checked)]="gemini"> </fdp-checkbox>
 <div>value: {{ gemini }}</div>
 
 <h3>Disabled Checkbox</h3>
-<fdp-checkbox name="orion" [isBinary]="true" label="Orion" title="Orion" [(checked)]="orion" [disabled]="true">
-</fdp-checkbox>
+<fdp-checkbox name="orion" label="Orion" title="Orion" [(checked)]="orion" [disabled]="true"> </fdp-checkbox>

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox-no-form.component.ts

@@ -9,10 +9,4 @@ export class PlatformChekboxNoFormComponent {
     cygnus = false;
     lyra = true;
     gemini = false;
-
-    public checkedChangeFunction(): void {}
-
-    public indeterminateChangeFunction(): void {}
-
-    public changeFunction(): void {}
 }

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox.component.html

@@ -1,22 +1,15 @@
 <h3>Binary Checkbox in Template Driven Form</h3>
 <fdp-form-group [noLabelLayout]="false">
     <fdp-form-field id="yellow" label="Yellow" [noLabelLayout]="true" [rank]="4" [editable]="true">
-        <fdp-checkbox
-            name="yellow-cb"
-            [isBinary]="true"
-            (checkedChange)="checkedChangeFunction()"
-            (indeterminateChange)="indeterminateChangeFunction()"
-            (change)="changeFunction()"
-            [(ngModel)]="yellow"
-        ></fdp-checkbox>
+        <fdp-checkbox name="yellow-cb" [(ngModel)]="yellow"></fdp-checkbox>
     </fdp-form-field>
 
     <fdp-form-field id="white" [rank]="4" label="White">
-        <fdp-checkbox name="white-cb" [isBinary]="true" title="White" [(ngModel)]="white"></fdp-checkbox>
+        <fdp-checkbox name="white-cb" title="White" [(ngModel)]="white"></fdp-checkbox>
     </fdp-form-field>
 
     <fdp-form-field id="violet" label="Violet" [rank]="4">
-        <fdp-checkbox name="violet-cb" [isBinary]="true" title="Violet" [(ngModel)]="violet"></fdp-checkbox>
+        <fdp-checkbox name="violet-cb" title="Violet" [(ngModel)]="violet"></fdp-checkbox>
     </fdp-form-field>
 </fdp-form-group>
 <div style="padding-left: 2rem">
@@ -30,23 +23,13 @@ <h3>Binary Checkbox in Template Driven Form</h3>
 <h3>Binary Checkbox in Reactive/Model Driven Form</h3>
 <fdp-form-group [formGroup]="customForm" [object]="data">
     <fdp-form-field #red id="red" label="Red" [rank]="4">
-        <fdp-checkbox
-            name="red-cb"
-            [isBinary]="true"
-            title="Red"
-            (checkedChange)="checkedChangeFunction()"
-            (indeterminateChange)="indeterminateChangeFunction()"
-            (change)="changeFunction()"
-            contentDensity="compact"
-            [formControl]="red.formControl"
-        >
+        <fdp-checkbox name="red-cb" title="Red" contentDensity="compact" [formControl]="red.formControl">
         </fdp-checkbox>
     </fdp-form-field>
 
     <fdp-form-field #blue id="blue" label="Blue" [rank]="4">
         <fdp-checkbox
             name="blue-cb"
-            [isBinary]="true"
             title="Blue"
             contentDensity="compact"
             [formControl]="blue.formControl"
@@ -56,7 +39,6 @@ <h3>Binary Checkbox in Reactive/Model Driven Form</h3>
     <fdp-form-field #green id="green" label="Green" [rank]="4">
         <fdp-checkbox
             name="green-cb"
-            [isBinary]="true"
             title="Green"
             contentDensity="compact"
             [formControl]="green.formControl"
@@ -69,15 +51,6 @@ <h3>Binary Checkbox in Reactive/Model Driven Form</h3>
 <h3>Disabled Checkbox</h3>
 <fdp-form-group>
     <fdp-form-field #disabled id="disabled" label="Red" [rank]="1">
-        <fdp-checkbox
-            name="disabled-cb"
-            [isBinary]="true"
-            title="Red"
-            (checkedChange)="checkedChangeFunction()"
-            (indeterminateChange)="indeterminateChangeFunction()"
-            (change)="changeFunction()"
-            contentDensity="compact"
-            [disabled]="true"
-        ></fdp-checkbox>
+        <fdp-checkbox name="disabled-cb" title="Red" contentDensity="compact" [disabled]="true"></fdp-checkbox>
     </fdp-form-field>
 </fdp-form-group>

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-binary-checkbox.component.ts

@@ -12,12 +12,6 @@ export class PlatformCompactChekboxExampleComponent {
     yellow = false;
     white = true;
     violet: boolean;
-
-    public checkedChangeFunction(): void {}
-
-    public indeterminateChangeFunction(): void {}
-
-    public changeFunction(): void {}
 }
 
 class DataObject {

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-checkbox-a11y.component.html

@@ -4,25 +4,18 @@ <h3>Checkbox A11y Examples using aria-label, aria-labelledby, aria-disabled and
     <fdp-form-field id="a11y1" [noLabelLayout]="true" [rank]="1">
         <fdp-checkbox
             name="checkboxA11y1"
-            [isBinary]="true"
             ariaLabel="checkbox using aria-label"
             [(ngModel)]="checkboxA11y1"
         ></fdp-checkbox>
     </fdp-form-field>
 
     <fdp-form-field id="a11y2" [rank]="2">
-        <fdp-checkbox
-            name="checkboxA11y2"
-            [isBinary]="true"
-            ariaLabelledBy="checkboxLable"
-            [(ngModel)]="checkboxA11y2"
-        ></fdp-checkbox>
+        <fdp-checkbox name="checkboxA11y2" ariaLabelledBy="checkboxLable" [(ngModel)]="checkboxA11y2"></fdp-checkbox>
     </fdp-form-field>
 
     <fdp-form-field id="a11y3" label="Disabled checkbox using aria-disabled" [rank]="3">
         <fdp-checkbox
             name="checkboxA11y3"
-            [isBinary]="true"
             title="It is a disabled checkbox"
             [disabled]="true"
             [(ngModel)]="checkboxA11y3"

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-checkbox-error-handling.component.html

@@ -11,12 +11,7 @@ <h3>Checkbox Error Handling</h3>
         [column]="1"
         [required]="true"
     >
-        <fdp-checkbox
-            name="presence-cb"
-            [isBinary]="true"
-            title="title text"
-            [formControl]="ffr1.formControl"
-        ></fdp-checkbox>
+        <fdp-checkbox name="presence-cb" title="title text" [formControl]="ffr1.formControl"></fdp-checkbox>
     </fdp-form-field>
 
     <fdp-form-field
@@ -31,7 +26,6 @@ <h3>Checkbox Error Handling</h3>
     >
         <fdp-checkbox
             name="aggrement-cb"
-            [isBinary]="true"
             title="Do you Agree with Terms and Conditions"
             [formControl]="ffr2.formControl"
         >

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-multiselect-checkbox.component.html

@@ -2,11 +2,16 @@ <h3>Template Driven Form</h3>
 <p>Checkbox can be pre-selected if value of checkbox matches any value in ngModel directive.</p>
 <fdp-form-group columnLayout="XL2-L2-M1-S1">
     <fdp-form-field id="sirius" label="Sirius" [column]="1" [rank]="1">
-        <fdp-checkbox name="sirius-cb" value="sirius" title="Sirius" [(ngModel)]="field1"></fdp-checkbox>
+        <fdp-checkbox
+            name="sirius-cb"
+            [values]="{ trueValue: 'sirius' }"
+            title="Sirius"
+            [(ngModel)]="field1"
+        ></fdp-checkbox>
     </fdp-form-field>
 
     <fdp-form-field id="vega" label="Vega" [column]="2" [rank]="1">
-        <fdp-checkbox name="vega-cb" value="vega" title="Vega" [(ngModel)]="field2"></fdp-checkbox>
+        <fdp-checkbox name="vega-cb" [values]="{ trueValue: 'vega' }" title="Vega" [(ngModel)]="field2"></fdp-checkbox>
     </fdp-form-field>
 </fdp-form-group>
 <div style="padding-left: 2rem">field1: {{ field1 }}</div>
@@ -21,7 +26,7 @@ <h3>Reactive/Model Driven Form</h3>
     <fdp-form-field #rfield1 id="einstein" label="Einstein" [column]="1" [rank]="1">
         <fdp-checkbox
             name="einstein-cb"
-            value="einstein"
+            [values]="{ trueValue: 'einstein' }"
             contentDensity="compact"
             title="Albert Einstein"
             [formControl]="rfield1.formControl"
@@ -31,7 +36,7 @@ <h3>Reactive/Model Driven Form</h3>
     <fdp-form-field #rfield2 id="newton" label="Newton" [column]="2" [rank]="1">
         <fdp-checkbox
             name="newton-cb"
-            value="newton"
+            [values]="{ trueValue: 'newton' }"
             contentDensity="compact"
             title="Issac Newton"
             [formControl]="rfield2.formControl"