@lion/choice-input - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.7.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.6.2...@lion/choice-input@0.7.0) (2020-02-20)
+
+
+### Features
+
+* api normalisation formElements and values ([9b905c4](https://github.com/ing-bank/lion/commit/9b905c492a0c0d2226cc1d75c73e2e70dc97815a))
+
+
+
+
+
 ## [0.6.2](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.6.1...@lion/choice-input@0.6.2) (2020-02-19)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/choice-input",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Base for all choise inputs like checkbox/radio",
@@ -38,7 +38,7 @@ "author": "ing-bank",
     "@lion/core": "0.4.4",
-    "@lion/field": "0.9.2"
+    "@lion/field": "0.10.0"
   },
   "devDependencies": {
-    "@lion/fieldset": "0.7.2",
-    "@lion/input": "0.5.12",
+    "@lion/fieldset": "0.8.0",
+    "@lion/input": "0.5.13",
     "@lion/validate": "0.6.7",
@@ -49,3 +49,3 @@ "@open-wc/demoing-storybook": "^1.10.4",
   },
-  "gitHead": "417b37a61695128619c6040a6523819c51f51651"
+  "gitHead": "a5afaaeb272d9eb4c1f40ab6c742b25a86d3c422"
 }

src/ChoiceGroupMixin.js

@@ -8,8 +8,26 @@ import { dedupeMixin } from '@lion/core';
     class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) {
+      static get properties() {
+        return {
+          /**
+           * @desc When false (default), modelValue and serializedValue will reflect the
+           * currently selected choice (usually a string). When true, modelValue will and
+           * serializedValue will be an array of strings.
+           * @type {boolean}
+           */
+          multipleChoice: {
+            type: Boolean,
+            attribute: 'multiple-choice',
+          },
+        };
+      }
+
       get modelValue() {
         const elems = this._getCheckedElements();
         if (this.multipleChoice) {
+          // TODO: holds for both modelValue and serializedValue of choiceInput:
+          // consider only allowing strings as values, in which case 'el.value' would suffice
+          // and choice-input could be simplified
           return elems.map(el => el.modelValue.value);
         }
-        return elems ? elems.modelValue.value : '';
+        return elems[0] ? elems[0].modelValue.value : '';
       }
@@ -22,7 +40,15 @@
       get serializedValue() {
+        // We want to filter out disabled values out by default:
+        // The goal of serializing values could either be submitting state to a backend
+        // ot storing state in a backend. For this, only values that are entered by the end
+        // user are relevant, choice values are always defined by the Application Developer
+        // and known by the backend.
+
+        // Assuming values are always defined as strings, modelValues and serializedValues
+        // are the same.
         const elems = this._getCheckedElements();
         if (this.multipleChoice) {
-          return this.modelValue;
+          return elems.map(el => el.serializedValue.value);
         }
-        return elems ? elems.serializedValue : '';
+        return elems[0] ? elems[0].serializedValue.value : '';
       }
@@ -58,2 +84,4 @@
         this._throwWhenInvalidChildModelValue(child);
+        // TODO: nice to have or does it have a function (since names are meant as keys for
+        // formElements)?
         this.__delegateNameAttribute(child);
@@ -64,17 +92,13 @@ super.addFormElement(child, indexToInsertAt);
       /**
-       * @override from LionFieldset
+       * @override
        */
-      // eslint-disable-next-line class-methods-use-this
-      get _childrenCanHaveSameName() {
-        return true;
+      _getFromAllFormElements(property, filterCondition = () => true) {
+        // For modelValue and serializedValue, an exception should be made,
+        // The reset can be requested from children
+        if (property === 'modelValue' || property === 'serializedValue') {
+          return this[property];
+        }
+        return this.formElements.filter(filterCondition).map(el => el.property);
       }
 
-      /**
-       * @override from LionFieldset
-       */
-      // eslint-disable-next-line class-methods-use-this
-      get _childNamesCanBeDuplicate() {
-        return true;
-      }
-
       _throwWhenInvalidChildModelValue(child) {
@@ -115,3 +139,3 @@ if (
         const groupName = target.name;
-        this.formElementsArray
+        this.formElements
           .filter(i => i.name === groupName)
@@ -127,7 +151,4 @@ .forEach(choice => {
       _getCheckedElements() {
-        const filtered = this.formElementsArray.filter(el => el.checked === true);
-        if (this.multipleChoice) {
-          return filtered;
-        }
-        return filtered.length > 0 ? filtered[0] : undefined;
+        // We want to filter out disabled values out by default
+        return this.formElements.filter(el => el.checked && !el.disabled);
       }
@@ -140,8 +161,8 @@
 
-        for (let i = 0; i < this.formElementsArray.length; i += 1) {
+        for (let i = 0; i < this.formElements.length; i += 1) {
           if (this.multipleChoice) {
-            this.formElementsArray[i].checked = value.includes(this.formElementsArray[i].value);
-          } else if (check(this.formElementsArray[i], value)) {
+            this.formElements[i].checked = value.includes(this.formElements[i].value);
+          } else if (check(this.formElements[i], value)) {
             // Allows checking against custom values e.g. formattedValue or serializedValue
-            this.formElementsArray[i].checked = true;
+            this.formElements[i].checked = true;
           }
@@ -148,0 +169,0 @@ }

test/ChoiceGroupMixin.test.js

@@ -1,3 +0,3 @@
-import { html } from '@lion/core';
-import { LionFieldset } from '@lion/fieldset';
+import { html, LitElement } from '@lion/core';
+import { FormGroupMixin } from '@lion/fieldset';
 import { LionInput } from '@lion/input';
@@ -8,2 +8,3 @@ import { Required } from '@lion/validate';
 import { ChoiceInputMixin } from '../src/ChoiceInputMixin.js';
+import '@lion/fieldset/lion-fieldset.js';
 
@@ -15,6 +16,6 @@ describe('ChoiceGroupMixin', () => {
 
-    class ChoiceGroup extends ChoiceGroupMixin(LionFieldset) {}
+    class ChoiceGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {}
     customElements.define('choice-group', ChoiceGroup);
 
-    class ChoiceGroupMultiple extends ChoiceGroupMixin(LionFieldset) {
+    class ChoiceGroupMultiple extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {
       constructor() {
@@ -38,5 +39,5 @@ super();
     expect(el.modelValue).to.equal('female');
-    el.formElementsArray[0].checked = true;
+    el.formElements[0].checked = true;
     expect(el.modelValue).to.equal('male');
-    el.formElementsArray[2].checked = true;
+    el.formElements[2].checked = true;
     expect(el.modelValue).to.equal('other');
@@ -74,4 +75,4 @@ });
 
-    expect(el.formElementsArray[0].name).to.equal('gender');
-    expect(el.formElementsArray[1].name).to.equal('gender');
+    expect(el.formElements[0].name).to.equal('gender');
+    expect(el.formElements[1].name).to.equal('gender');
 
@@ -83,3 +84,3 @@ const validChild = await fixture(html`
 
-    expect(el.formElementsArray[2].name).to.equal('gender');
+    expect(el.formElements[2].name).to.equal('gender');
   });
@@ -120,3 +121,3 @@
     expect(el.modelValue).to.equal('other');
-    expect(el.formElementsArray[2].checked).to.be.true;
+    expect(el.formElements[2].checked).to.be.true;
   });
@@ -136,3 +137,3 @@
     expect(el.modelValue).to.equal(date);
-    el.formElementsArray[0].checked = true;
+    el.formElements[0].checked = true;
     expect(el.modelValue).to.deep.equal({ some: 'data' });
@@ -151,3 +152,3 @@ });
     expect(el.modelValue).to.equal(0);
-    el.formElementsArray[1].checked = true;
+    el.formElements[1].checked = true;
     expect(el.modelValue).to.equal('');
@@ -171,3 +172,3 @@ });
     el.modelValue = 'other';
-    expect(el.formElementsArray[2].checked).to.be.true;
+    expect(el.formElements[2].checked).to.be.true;
   });
@@ -192,10 +193,10 @@
 
-    el.formElementsArray[0].checked = true;
+    el.formElements[0].checked = true;
     expect(counter).to.equal(2); // male becomes checked, female becomes unchecked
 
     // not changed values trigger no event
-    el.formElementsArray[0].checked = true;
+    el.formElements[0].checked = true;
     expect(counter).to.equal(2);
 
-    el.formElementsArray[2].checked = true;
+    el.formElements[2].checked = true;
     expect(counter).to.equal(4); // other becomes checked, male becomes unchecked
@@ -224,3 +225,3 @@
 
-    el.formElementsArray[0].checked = true;
+    el.formElements[0].checked = true;
     expect(el.hasFeedbackFor).not.to.include('error');
@@ -230,3 +231,3 @@ expect(el.validationStates).to.have.a.property('error');
 
-    el.formElementsArray[1].checked = true;
+    el.formElements[1].checked = true;
     expect(el.hasFeedbackFor).not.to.include('error');
@@ -244,4 +245,4 @@ expect(el.validationStates).to.have.a.property('error');
     `);
-    el.formElementsArray[0].checked = true;
-    expect(el.serializedValue).to.deep.equal({ checked: true, value: 'male' });
+    el.formElements[0].checked = true;
+    expect(el.serializedValue).to.deep.equal('male');
   });
@@ -272,5 +273,5 @@
       expect(el.modelValue).to.eql(['female']);
-      el.formElementsArray[0].checked = true;
+      el.formElements[0].checked = true;
       expect(el.modelValue).to.eql(['male', 'female']);
-      el.formElementsArray[2].checked = true;
+      el.formElements[2].checked = true;
       expect(el.modelValue).to.eql(['male', 'female', 'other']);
@@ -293,4 +294,4 @@ });
       expect(el.modelValue).to.eql(['male', 'other']);
-      expect(el.formElementsArray[0].checked).to.be.true;
-      expect(el.formElementsArray[2].checked).to.be.true;
+      expect(el.formElements[0].checked).to.be.true;
+      expect(el.formElements[2].checked).to.be.true;
     });
@@ -311,11 +312,38 @@
       expect(el.modelValue).to.eql(['male', 'other']);
-      expect(el.formElementsArray[0].checked).to.be.true;
-      expect(el.formElementsArray[2].checked).to.be.true;
+      expect(el.formElements[0].checked).to.be.true;
+      expect(el.formElements[2].checked).to.be.true;
 
       el.modelValue = ['female'];
-      expect(el.formElementsArray[0].checked).to.be.false;
-      expect(el.formElementsArray[1].checked).to.be.true;
-      expect(el.formElementsArray[2].checked).to.be.false;
+      expect(el.formElements[0].checked).to.be.false;
+      expect(el.formElements[1].checked).to.be.true;
+      expect(el.formElements[2].checked).to.be.false;
     });
   });
+
+  describe('Integration with a parent form/fieldset', () => {
+    it('will serialize all children with their serializedValue', async () => {
+      const el = await fixture(html`
+        <lion-fieldset>
+          <choice-group name="gender">
+            <choice-group-input .choiceValue=${'male'} checked disabled></choice-group-input>
+            <choice-group-input .choiceValue=${'female'} checked></choice-group-input>
+            <choice-group-input .choiceValue=${'other'}></choice-group-input>
+          </choice-group>
+        </lion-fieldset>
+      `);
+
+      await nextFrame();
+      await el.registrationReady;
+      await el.updateComplete;
+      expect(el.serializedValue).to.eql({
+        gender: 'female',
+      });
+
+      const choiceGroupEl = el.querySelector('[name="gender"]');
+      choiceGroupEl.multipleChoice = true;
+      expect(el.serializedValue).to.eql({
+        gender: ['female'],
+      });
+    });
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57284

increased by4.51%

Lines of code

866

increased by5.48%

Dependency changes

• + Added@lion/field@0.10.0(transitive)

• - Removed@lion/field@0.9.2(transitive)

• Updated@lion/field@0.10.0