@lion/ui 0.4.2 → 0.5.0

package/components/form-core/src/choice-group/CustomChoiceGroupMixin.js

@@ -0,0 +1,173 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { ChoiceGroupMixin } from './ChoiceGroupMixin.js';
+
+/**
+ * @typedef {import('../../types/choice-group/CustomChoiceGroupMixinTypes.js').CustomChoiceGroupMixin} CustomChoiceGroupMixin
+ * @typedef {import('../../types/choice-group/CustomChoiceGroupMixinTypes.js').CustomChoiceGroupHost} CustomChoiceGroupHost
+ */
+
+/**
+ * @param {any|any[]} value
+ * @returns {any[]}
+ */
+function ensureArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+
+/**
+ * Extends the ChoiceGroupMixin to add optional support for custom user choices without altering the initial choice list.
+ *
+ * @type {CustomChoiceGroupMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
+ */
+const CustomChoiceGroupMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  class CustomChoiceGroupMixin extends ChoiceGroupMixin(superclass) {
+    static get properties() {
+      return {
+        allowCustomChoice: {
+          type: Boolean,
+          attribute: 'allow-custom-choice',
+        },
+        modelValue: { type: Object },
+      };
+    }
+
+    // @ts-ignore
+    get modelValue() {
+      return this.__getChoicesFrom(super.modelValue);
+    }
+
+    set modelValue(value) {
+      super.modelValue = value;
+
+      if (value === null || value === undefined || value === '') {
+        // @ts-ignore
+        this._customChoices = new Set();
+      } else if (this.allowCustomChoice) {
+        const old = this.modelValue;
+        // @ts-ignore
+        this._customChoices = new Set(ensureArray(value));
+        this.requestUpdate('modelValue', old);
+      }
+    }
+
+    // @ts-ignore
+    get formattedValue() {
+      return this.__getChoicesFrom(super.formattedValue);
+    }
+
+    set formattedValue(value) {
+      super.formattedValue = value;
+
+      if (value === null || value === undefined) {
+        this._customChoices = new Set();
+      } else if (this.allowCustomChoice) {
+        const old = this.modelValue;
+        // Convert formattedValue to modelValue to store as custom choices, or fall back to the input value
+        this._customChoices = new Set(
+          ensureArray(value).map(
+            val => this.formElements.find(el => el.formattedValue === val)?.modelValue || val,
+          ),
+        );
+        this.requestUpdate('modelValue', old);
+      }
+    }
+
+    // @ts-ignore
+    get serializedValue() {
+      return this.__getChoicesFrom(super.serializedValue);
+    }
+
+    set serializedValue(value) {
+      super.serializedValue = value;
+
+      if (value === null || value === undefined) {
+        this._customChoices = new Set();
+      } else if (this.allowCustomChoice) {
+        const old = this.modelValue;
+        // Convert serializedValue to modelValue to store as custom choices, or fall back to the input value
+        this._customChoices = new Set(
+          ensureArray(value).map(
+            val => this.formElements.find(el => el.serializedValue === val)?.modelValue || val,
+          ),
+        );
+        this.requestUpdate('modelValue', old);
+      }
+    }
+
+    /**
+     * Custom elements are all missing elements that have no corresponding element, independent if enabled or not.
+     */
+    // @ts-ignore
+    get customChoices() {
+      if (!this.allowCustomChoice) {
+        return [];
+      }
+
+      const elems = this._getCheckedElements();
+
+      return Array.from(this._customChoices).filter(
+        choice => !elems.some(elem => elem.choiceValue === choice),
+      );
+    }
+
+    constructor() {
+      super();
+
+      this.allowCustomChoice = false;
+
+      /**
+       * @type {Set<unknown>}
+       * @protected
+       */
+      this._customChoices = new Set();
+    }
+
+    /**
+     * @private
+     */
+    // @ts-ignore
+    __getChoicesFrom(input) {
+      const values = input;
+      if (!this.allowCustomChoice) {
+        return values;
+      }
+
+      if (this.multipleChoice) {
+        return [...ensureArray(values), ...this.customChoices];
+      }
+
+      if (values === '') {
+        return this._customChoices.values().next().value || '';
+      }
+
+      return values;
+    }
+
+    /**
+     * @protected
+     */
+    _isEmpty() {
+      return super._isEmpty() && this._customChoices.size === 0;
+    }
+
+    clear() {
+      this._customChoices = new Set();
+      super.clear();
+    }
+
+    /**
+     * @param {string|string[]} value
+     * @returns {*}
+     */
+    parser(value) {
+      if (this.allowCustomChoice && Array.isArray(value)) {
+        return value.filter(v => v.trim() !== '');
+      }
+
+      return value;
+    }
+  };
+
+export const CustomChoiceGroupMixin = dedupeMixin(CustomChoiceGroupMixinImplementation);

package/components/form-core/src/utils/getAriaElementsInRightDomOrder.js

@@ -1,6 +1,4 @@
 /* eslint-disable no-bitwise */
-import { browserDetection } from '@lion/ui/core.js';
-
 const moveDownConditions = [
   Node.DOCUMENT_POSITION_PRECEDING,
   Node.DOCUMENT_POSITION_CONTAINS,
@@ -8,30 +6,25 @@ const moveDownConditions = [
 ];
 
 /**
- * @desc Let the order of adding ids to aria element by DOM order, so that the screen reader
+ * Let the order of adding ids to aria element by DOM order, so that the screen reader
  * respects visual order when reading:
  * https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters
- * @param {HTMLElement[]} descriptionElements - holds references to description or label elements whose
+ * @param {Element[]} descriptionElements - holds references to description or label elements whose
  * id should be returned
  * @param {Object} opts
  * @param {boolean} [opts.reverse]
- * @returns {HTMLElement[]} sorted set of elements based on dom order
+ * @returns {Element[]} sorted set of elements based on dom order
  */
 export function getAriaElementsInRightDomOrder(descriptionElements, { reverse } = {}) {
   /**
-   * @param {HTMLElement} a
-   * @param {HTMLElement} b
-   * @return {-1|1}
+   * @param {Node} a
+   * @param {Node} b
+   * @returns {-1|1}
    */
   const putPrecedingSiblingsAndLocalParentsFirst = (a, b) => {
     // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
     const pos = a.compareDocumentPosition(b);
-
-    // Unfortunately, for IE, we have to switch the order (?)
-    if (moveDownConditions.includes(pos)) {
-      return browserDetection.isIE11 ? -1 : 1;
-    }
-    return browserDetection.isIE11 ? 1 : -1;
+    return moveDownConditions.includes(pos) ? 1 : -1;
   };
 
   const descriptionEls = descriptionElements.filter(el => el); // filter out null references

package/components/form-core/src/validate/validators/Required.js

@@ -45,7 +45,7 @@ export class Required extends Validator {
   /**
    * @param {FormControlHost & HTMLElement} formControl
    */
-  // @ts-ignore [allow-protected] we are allowed to know FormControl protcected props in form-core
+  // @ts-ignore [allow-protected] we are allowed to know FormControl protected props in form-core
   // eslint-disable-next-line class-methods-use-this
   onFormControlConnect({ _inputNode: inputNode }) {
     if (inputNode) {
@@ -61,7 +61,7 @@ export class Required extends Validator {
   /**
    * @param {FormControlHost & HTMLElement} formControl
    */
-  // @ts-ignore [allow-protected] we are allowed to know FormControl protcected props in form-core
+  // @ts-ignore [allow-protected] we are allowed to know FormControl protected props in form-core
   // eslint-disable-next-line class-methods-use-this
   onFormControlDisconnect({ _inputNode: inputNode }) {
     if (inputNode) {

package/components/form-core/test/choice-group/CustomChoiceGroupMixin.integrations.test.js

@@ -0,0 +1,55 @@
+import { runChoiceGroupMixinSuite } from '@lion/ui/form-core-test-suites.js';
+import { LitElement } from 'lit';
+import '@lion/ui/define/lion-fieldset.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+import { FormGroupMixin, ChoiceInputMixin } from '@lion/ui/form-core.js';
+import { LionInput } from '@lion/ui/input.js';
+import { CustomChoiceGroupMixin } from '../../src/choice-group/CustomChoiceGroupMixin.js';
+
+class CustomChoiceGroup extends CustomChoiceGroupMixin(FormGroupMixin(LitElement)) {}
+customElements.define('custom-choice-input-group', CustomChoiceGroup);
+
+class ChoiceInput extends ChoiceInputMixin(LionInput) {}
+customElements.define('custom-choice-input', ChoiceInput);
+
+class CustomChoiceGroupAllowCustom extends CustomChoiceGroupMixin(FormGroupMixin(LitElement)) {
+  constructor() {
+    super();
+    this.allowCustomChoice = true;
+  }
+}
+customElements.define('allow-custom-choice-input-group', CustomChoiceGroupAllowCustom);
+
+class MultipleCustomChoiceGroup extends CustomChoiceGroupMixin(FormGroupMixin(LitElement)) {
+  constructor() {
+    super();
+    this.multipleChoice = true;
+  }
+}
+customElements.define('multiple-custom-choice-input-group', MultipleCustomChoiceGroup);
+
+class MultipleCustomChoiceGroupAllowCustom extends CustomChoiceGroupMixin(
+  FormGroupMixin(LitElement),
+) {
+  constructor() {
+    super();
+    this.multipleChoice = true;
+    this.allowCustomChoice = true;
+  }
+}
+customElements.define(
+  'multiple-allow-custom-choice-input-group',
+  MultipleCustomChoiceGroupAllowCustom,
+);
+
+runChoiceGroupMixinSuite({ parentTagString: 'custom-choice-input-group' });
+runChoiceGroupMixinSuite({
+  parentTagString: 'multiple-custom-choice-input-group',
+  choiceType: 'multiple',
+});
+runChoiceGroupMixinSuite({ parentTagString: 'allow-custom-choice-input-group' });
+runChoiceGroupMixinSuite({
+  parentTagString: 'multiple-allow-custom-choice-input-group',
+  choiceType: 'multiple',
+});

package/components/form-core/test/choice-group/CustomChoiceGroupMixin.test.js

@@ -0,0 +1,16 @@
+import { ChoiceInputMixin, FormGroupMixin } from '@lion/ui/form-core.js';
+import { LionInput } from '@lion/ui/input.js';
+import { LitElement } from 'lit';
+import '@lion/ui/define/lion-fieldset.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+import { CustomChoiceGroupMixin } from '../../src/choice-group/CustomChoiceGroupMixin.js';
+import { runCustomChoiceGroupMixinSuite } from '../../test-suites/choice-group/CustomChoiceGroupMixin.suite.js';
+
+export class CustomChoiceGroup extends CustomChoiceGroupMixin(FormGroupMixin(LitElement)) {}
+customElements.define('custom-choice-input-group', CustomChoiceGroup);
+
+class ChoiceInput extends ChoiceInputMixin(LionInput) {}
+customElements.define('custom-choice-input', ChoiceInput);
+
+runCustomChoiceGroupMixinSuite();

package/components/form-core/test/utils/getAriaElementsInRightDomOrder.test.js

@@ -1,7 +1,5 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
-import sinon from 'sinon';
-import { browserDetection } from '@lion/ui/core.js';
 import { getAriaElementsInRightDomOrder } from '../../src/utils/getAriaElementsInRightDomOrder.js';
 
 describe('getAriaElementsInRightDomOrder', () => {
@@ -47,27 +45,4 @@ describe('getAriaElementsInRightDomOrder', () => {
     const result = getAriaElementsInRightDomOrder(unorderedNodes, { reverse: true });
     expect(result).to.eql([c, bChild, b, a]);
   });
-
-  it('orders in reverse for IE11', async () => {
-    const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
-    const el = await fixture(html`
-      <div>
-        <div id="a"></div>
-        <div></div>
-        <div id="b">
-          <div></div>
-          <div id="b-child"></div>
-        </div>
-        <div></div>
-        <div id="c"></div>
-        <div></div>
-      </div>
-    `);
-    // eslint-disable-next-line no-unused-vars
-    const [a, _1, b, _2, bChild, _3, c, _4] = Array.from(el.querySelectorAll('div'));
-    const unorderedNodes = [bChild, c, a, b];
-    const result = getAriaElementsInRightDomOrder(unorderedNodes);
-    expect(result).to.eql([c, bChild, b, a]);
-    browserDetectionStub.restore();
-  });
 });

package/components/form-core/test/validate/StringValidators.test.js

@@ -124,7 +124,7 @@ describe('String Validation', () => {
     isEnabled = validator.execute('#LionRests');
     expect(isEnabled).to.be.true;
 
-    validator = new Pattern(new RegExp('#LionRocks'));
+    validator = new Pattern(/#LionRocks/);
     isEnabled = validator.execute('Some string #LionRocks');
     expect(isEnabled).to.be.false;
 

package/components/form-core/test-helpers/ExampleValidators.js

@@ -2,9 +2,7 @@
 import { Validator } from '@lion/ui/form-core.js';
 
 export class AlwaysInvalid extends Validator {
-  static get validatorName() {
-    return 'AlwaysInvalid';
-  }
+  static validatorName = 'AlwaysInvalid';
 
   execute() {
     const showMessage = true;

package/components/form-core/test-suites/FormRegistrationMixins.suite.js

@@ -165,6 +165,7 @@ export const runRegistrationSuite = customConfig => {
     it('works for components that have a delayed render', async () => {
       class PerformUpdate extends FormRegistrarMixin(LitElement) {
         async performUpdate() {
+          // eslint-disable-next-line no-promise-executor-return
           await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
           await super.performUpdate();
         }
@@ -359,6 +360,7 @@ export const runRegistrationSuite = customConfig => {
         const delayedPortalString = defineCE(
           class extends FormRegistrarPortalMixin(LitElement) {
             async performUpdate() {
+              // eslint-disable-next-line no-promise-executor-return
               await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
               await super.performUpdate();
             }

package/components/form-core/test-suites/NativeTextFieldMixin.suite.js

@@ -5,9 +5,9 @@ import { sendKeys } from '@web/test-runner-commands';
 import { spy } from 'sinon';
 import { NativeTextFieldMixin } from '@lion/ui/form-core.js';
 
-const isFirefox = (() => {
+const isSafari = (() => {
   const ua = navigator.userAgent.toLowerCase();
-  return ua.indexOf('firefox') !== -1 && ua.indexOf('safari') === -1 && ua.indexOf('chrome') === -1;
+  return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
 })();
 
 /**
@@ -54,8 +54,8 @@ export function runNativeTextFieldMixinSuite(customConfig) {
     });
 
     it('move focus to a next focusable element after writing some text', async () => {
-      if (isFirefox) {
-        // TODO: This test is broken on Firefox, to be fixed later
+      if (isSafari) {
+        // TODO: This test is broken on Safari, to be fixed later
         return;
       }
       const el = /** @type {NativeTextFieldClass} */ (await fixture(html`<${tag}></${tag}>`));

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -9,6 +9,7 @@ import {
 } from '@lion/ui/form-core-test-helpers.js';
 import sinon from 'sinon';
 import {
+  EqualsLength,
   MaxLength,
   MinLength,
   Required,
@@ -779,6 +780,32 @@ export function runValidateMixinSuite(customConfig) {
       });
     });
 
+    describe('getMessages with custom HTML', () => {
+      it('will render HTML for lion-validation-feedback', async () => {
+        const messageHtmlId = 'test123';
+        const messageHtml = `<div id="test123">test</div>`;
+        const el = /** @type {ValidateElement} */ (
+          await fixture(html`
+          <${tag}
+            .validators="${[
+              new EqualsLength(4, { getMessage: () => html`<div id="test123">test</div>` }),
+            ]}" })]}"
+            .modelValue="${'123'}"            
+            label="Custom message for validator instance"
+          ></${tag}>
+        `)
+        );
+        expect(el.validationStates.error.EqualsLength).to.be.true;
+        expect(el.hasFeedbackFor).to.deep.equal(['error']);
+        const { _feedbackNode } = getFormControlMembers(el);
+        await el.updateComplete;
+        await el.updateComplete;
+        const messageHtmlNode = _feedbackNode.shadowRoot?.querySelector(`#${messageHtmlId}`);
+        expect(messageHtmlNode?.outerHTML).to.equal(messageHtml);
+        expect(messageHtmlNode?.tagName).to.equal('DIV');
+      });
+    });
+
     describe('Required Validator integration', () => {
       it('will result in erroneous state when form control is empty', async () => {
         const el = /** @type {ValidateElement} */ (

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -517,7 +517,11 @@ export function runValidateMixinFeedbackPart() {
             .submitted=${true}
             .validators=${[constructorValidator]}
             .modelValue=${'cat'}
-            .fieldName=${new Promise(resolve => resolve('myField'))}
+            .fieldName=${new Promise(
+              (
+                resolve, // eslint-disable-next-line no-promise-executor-return
+              ) => resolve('myField'),
+            )}
           >${lightDom}</${tag}>
         `)
         );
@@ -537,6 +541,7 @@ export function runValidateMixinFeedbackPart() {
 
       it('".getMessage()" gets .fieldName defined on Validator config', async () => {
         const constructorValidator = new MinLength(4, {
+          // eslint-disable-next-line no-promise-executor-return
           fieldName: new Promise(resolve => resolve('myFieldViaCfg')),
         });
         const ctorValidator = /** @type {typeof MinLength} */ (constructorValidator.constructor);
@@ -548,7 +553,11 @@ export function runValidateMixinFeedbackPart() {
             .submitted=${true}
             .validators=${[constructorValidator]}
             .modelValue=${'cat'}
-            .fieldName=${new Promise(resolve => resolve('myField'))}
+            .fieldName=${new Promise(
+              (
+                resolve, // eslint-disable-next-line no-promise-executor-return
+              ) => resolve('myField'),
+            )}
           >${lightDom}</${tag}>
         `)
         );

package/components/form-core/test-suites/choice-group/ChoiceGroupMixin.suite.js

@@ -55,6 +55,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           </${parentTag}>
         `)
         );
+
         expect(el.modelValue).to.equal('female');
         el.formElements[0].checked = true;
         expect(el.modelValue).to.equal('male');