From 07c598fd68b983846f95284c24375b7efe25528d Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Wed, 12 Aug 2020 16:44:09 +0200
Subject: [PATCH] fix(form-core): form should be able to access formattedValue
 of children

---
 .changeset/fair-schools-rescue.md             |  6 ++++
 package.json                                  |  2 +-
 .../src/choice-group/ChoiceGroupMixin.js      |  8 ++++--
 .../docs/15-features-overview.md              | 19 ++-----------
 .../test/form-integrations.test.js            | 28 +++++++++++++++++--
 .../test/helpers/umbrella-form.js             |  8 +++---
 6 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/fair-schools-rescue.md

diff --git a/.changeset/fair-schools-rescue.md b/.changeset/fair-schools-rescue.md
new file mode 100644
index 000000000..e0eeed46a
--- /dev/null
+++ b/.changeset/fair-schools-rescue.md
@@ -0,0 +1,6 @@
+---
+'@lion/form-core': patch
+'@lion/form-integrations': patch
+---
+
+Form should be able to access formattedValue of children
diff --git a/package.json b/package.json
index 371e37e46..d11cca24c 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "build:docs": "wca analyze \"packages/tabs/**/*.js\"",
     "build:types": "tsc -p tsconfig.build.types.json",
     "bundlesize": "rollup -c bundlesize/rollup.config.js && bundlesize",
-    "debug": "web-test-runner \"packages/form-core/test/**/*.test.js\" --watch",
+    "debug": "web-test-runner \"packages/form-integrations/test/**/*.test.js\" --watch",
     "dev-server": "es-dev-server",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint --ext .js,.html . --fix",
diff --git a/packages/form-core/src/choice-group/ChoiceGroupMixin.js b/packages/form-core/src/choice-group/ChoiceGroupMixin.js
index 74e3b355f..3e996484e 100644
--- a/packages/form-core/src/choice-group/ChoiceGroupMixin.js
+++ b/packages/form-core/src/choice-group/ChoiceGroupMixin.js
@@ -155,9 +155,13 @@ export const ChoiceGroupMixin = dedupeMixin(
        * @override
        */
       _getFromAllFormElements(property, filterCondition = () => true) {
-        // For modelValue and serializedValue, an exception should be made,
+        // For modelValue, serializedValue and formattedValue, an exception should be made,
         // The reset can be requested from children
-        if (property === 'modelValue' || property === 'serializedValue') {
+        if (
+          property === 'modelValue' ||
+          property === 'serializedValue' ||
+          property === 'formattedValue'
+        ) {
           return this[property];
         }
         return this.formElements.filter(filterCondition).map(el => el.property);
diff --git a/packages/form-integrations/docs/15-features-overview.md b/packages/form-integrations/docs/15-features-overview.md
index 9375a1b63..78428ebd8 100644
--- a/packages/form-integrations/docs/15-features-overview.md
+++ b/packages/form-integrations/docs/15-features-overview.md
@@ -40,18 +40,9 @@ export const main = () => {
   loadDefaultFeedbackMessages();
   Required.getMessage = () => 'Please enter a value';
   return html`
-    <lion-form
-      @model-value-changed="${ev => {
-        console.log('lion-form::', ev.target.name, ':', ev.detail.formPath);
-      }}"
-    >
+    <lion-form>
       <form>
-        <lion-fieldset
-          name="full_name"
-          @model-value-changed="${ev => {
-            console.log('lion-fieldset::', ev.target.name, ':', ev.detail.formPath);
-          }}"
-        >
+        <lion-fieldset name="full_name">
           <lion-input
             name="first_name"
             label="First Name"
@@ -85,9 +76,6 @@ export const main = () => {
         <lion-input-iban name="iban" label="Iban"></lion-input-iban>
         <lion-input-email name="email" label="Email"></lion-input-email>
         <lion-checkbox-group
-          @model-value-changed="${ev => {
-            console.log('lion-cb-group::', ev.target.name, ':', ev.detail.formPath);
-          }}"
           label="What do you like?"
           name="checkers"
           .validators="${[new Required()]}"
@@ -97,9 +85,6 @@ export const main = () => {
           <lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox>
         </lion-checkbox-group>
         <lion-radio-group
-          @model-value-changed="${ev => {
-            console.log('lion-radio-group::', ev.target.name, ':', ev.detail.formPath);
-          }}"
           name="dinosaurs"
           label="Favorite dinosaur"
           .validators="${[new Required()]}"
diff --git a/packages/form-integrations/test/form-integrations.test.js b/packages/form-integrations/test/form-integrations.test.js
index 9ab691478..4cab703e3 100644
--- a/packages/form-integrations/test/form-integrations.test.js
+++ b/packages/form-integrations/test/form-integrations.test.js
@@ -8,11 +8,35 @@ describe('Form Integrations', () => {
     const formEl = el._lionFormNode;
     expect(formEl.serializedValue).to.eql({
       bio: '',
-      'checkers[]': [[]],
+      checkers: ['foo', 'bar'],
       comments: '',
       date: '2000-12-12',
       datepicker: '2020-12-12',
-      dinosaurs: '',
+      dinosaurs: 'brontosaurus',
+      email: '',
+      favoriteColor: 'hotpink',
+      full_name: {
+        first_name: '',
+        last_name: '',
+      },
+      iban: '',
+      lyrics: '1',
+      money: '',
+      range: 2.3,
+      terms: [],
+    });
+  });
+
+  it('".formattedValue" returns all non disabled fields based on form structure', async () => {
+    const el = await fixture(html`<umbrella-form></umbrella-form>`);
+    const formEl = el._lionFormNode;
+    expect(formEl.formattedValue).to.eql({
+      bio: '',
+      checkers: ['foo', 'bar'],
+      comments: '',
+      date: '12/12/2000',
+      datepicker: '12/12/2020',
+      dinosaurs: 'brontosaurus',
       email: '',
       favoriteColor: 'hotpink',
       full_name: {
diff --git a/packages/form-integrations/test/helpers/umbrella-form.js b/packages/form-integrations/test/helpers/umbrella-form.js
index 10a0d6c3c..da9e44136 100644
--- a/packages/form-integrations/test/helpers/umbrella-form.js
+++ b/packages/form-integrations/test/helpers/umbrella-form.js
@@ -64,11 +64,11 @@ export class UmbrellaForm extends LitElement {
           <lion-input-email name="email" label="Email"></lion-input-email>
           <lion-checkbox-group
             label="What do you like?"
-            name="checkers[]"
+            name="checkers"
             .validators="${[new Required()]}"
           >
-            <lion-checkbox .choiceValue=${'foo'} label="I like foo"></lion-checkbox>
-            <lion-checkbox .choiceValue=${'bar'} label="I like bar"></lion-checkbox>
+            <lion-checkbox .choiceValue=${'foo'} checked label="I like foo"></lion-checkbox>
+            <lion-checkbox .choiceValue=${'bar'} checked label="I like bar"></lion-checkbox>
             <lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox>
           </lion-checkbox-group>
           <lion-radio-group
@@ -77,7 +77,7 @@ export class UmbrellaForm extends LitElement {
             .validators="${[new Required()]}"
           >
             <lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
-            <lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
+            <lion-radio .choiceValue=${'brontosaurus'} checked label="brontosaurus"></lion-radio>
             <lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
           </lion-radio-group>
           <lion-select-rich name="favoriteColor" label="Favorite color">