@lion/ui 0.7.2 → 0.7.4

package/components/core/src/SlotMixin.js

@@ -131,7 +131,13 @@ const SlotMixinImplementation = superclass =>
       if (isFirstRender) {
         // @ts-expect-error wait for browser support
         const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
-        const registryRoot = supportsScopedRegistry ? this.shadowRoot || document : document;
+        const hasShadowRoot = Boolean(this.shadowRoot);
+        if (!hasShadowRoot) {
+          // TODO: throw an error in a breaking release
+          // eslint-disable-next-line no-console
+          console.error(`[SlotMixin] No shadowRoot was found`);
+        }
+        const registryRoot = supportsScopedRegistry ? this.shadowRoot : document;
 
         // @ts-expect-error wait for browser support
         const renderTargetThatRespectsShadowRootScoping = registryRoot.createElement('div');

package/components/form/test/lion-form.test.js

@@ -208,8 +208,8 @@ describe('<lion-form>', () => {
       <lion-form>
         <form>
           <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
-      new Required(),
-    ]}></${childTag}>
+            new Required(),
+          ]}></${childTag}>
           <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
           <button type="submit">submit</button>
         </form>
@@ -229,8 +229,8 @@ describe('<lion-form>', () => {
         <form>
           <lion-fieldset name="name">
             <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
-      new Required(),
-    ]}></${childTag}>
+              new Required(),
+            ]}></${childTag}>
             <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
           </lion-fieldset>
           <button type="submit">submit</button>

package/components/form-core/src/FormControlMixin.js

@@ -34,7 +34,6 @@ const FormControlMixinImplementation = superclass =>
     /** @type {any} */
     static get properties() {
       return {
-        name: { type: String, reflect: true },
         readOnly: { type: Boolean, attribute: 'readonly', reflect: true },
         label: String, // FIXME: { attribute: false } breaks a bunch of tests, but shouldn't...
         labelSrOnly: { type: Boolean, attribute: 'label-sr-only', reflect: true },
@@ -156,14 +155,6 @@ const FormControlMixinImplementation = superclass =>
     constructor() {
       super();
 
-      /**
-       * The name the element will be registered with to the .formElements collection
-       * of the parent. Also, it serves as the key of key/value pairs in
-       *  modelValue/serializedValue objects
-       * @type {string}
-       */
-      this.name = '';
-
       /**
        * A Boolean attribute which, if present, indicates that the user should not be able to edit
        * the value of the input. The difference between disabled and readonly is that read-only

package/components/form-core/src/localizeNamespaceLoader.js

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
+  switch (locale) {
+    case 'bg-BG':
+      return import('@lion/ui/form-core-translations/bg-BG.js');
+    case 'bg':
+      return import('@lion/ui/form-core-translations/bg.js');
+    case 'cs-CZ':
+      return import('@lion/ui/form-core-translations/cs-CZ.js');
+    case 'cs':
+      return import('@lion/ui/form-core-translations/cs.js');
+    case 'de-DE':
+      return import('@lion/ui/form-core-translations/de-DE.js');
+    case 'de':
+      return import('@lion/ui/form-core-translations/de.js');
+    case 'en-AU':
+      return import('@lion/ui/form-core-translations/en-AU.js');
+    case 'en-GB':
+      return import('@lion/ui/form-core-translations/en-GB.js');
+    case 'en-US':
+      return import('@lion/ui/form-core-translations/en-US.js');
+    case 'en-PH':
+    case 'en':
+      return import('@lion/ui/form-core-translations/en.js');
+    case 'es-ES':
+      return import('@lion/ui/form-core-translations/es-ES.js');
+    case 'es':
+      return import('@lion/ui/form-core-translations/es.js');
+    case 'fr-FR':
+      return import('@lion/ui/form-core-translations/fr-FR.js');
+    case 'fr-BE':
+      return import('@lion/ui/form-core-translations/fr-BE.js');
+    case 'fr':
+      return import('@lion/ui/form-core-translations/fr.js');
+    case 'hu-HU':
+      return import('@lion/ui/form-core-translations/hu-HU.js');
+    case 'hu':
+      return import('@lion/ui/form-core-translations/hu.js');
+    case 'it-IT':
+      return import('@lion/ui/form-core-translations/it-IT.js');
+    case 'it':
+      return import('@lion/ui/form-core-translations/it.js');
+    case 'nl-BE':
+      return import('@lion/ui/form-core-translations/nl-BE.js');
+    case 'nl-NL':
+      return import('@lion/ui/form-core-translations/nl-NL.js');
+    case 'nl':
+      return import('@lion/ui/form-core-translations/nl.js');
+    case 'pl-PL':
+      return import('@lion/ui/form-core-translations/pl-PL.js');
+    case 'pl':
+      return import('@lion/ui/form-core-translations/pl.js');
+    case 'ro-RO':
+      return import('@lion/ui/form-core-translations/ro-RO.js');
+    case 'ro':
+      return import('@lion/ui/form-core-translations/ro.js');
+    case 'ru-RU':
+      return import('@lion/ui/form-core-translations/ru-RU.js');
+    case 'ru':
+      return import('@lion/ui/form-core-translations/ru.js');
+    case 'sk-SK':
+      return import('@lion/ui/form-core-translations/sk-SK.js');
+    case 'sk':
+      return import('@lion/ui/form-core-translations/sk.js');
+    case 'uk-UA':
+      return import('@lion/ui/form-core-translations/uk-UA.js');
+    case 'uk':
+      return import('@lion/ui/form-core-translations/uk.js');
+    case 'zh-CN':
+    case 'zh':
+      return import('@lion/ui/form-core-translations/zh.js');
+    default:
+      return import('@lion/ui/form-core-translations/en.js');
+  }
+};

package/components/form-core/src/registration/FormRegisteringMixin.js

@@ -22,6 +22,14 @@ const FormRegisteringMixinImplementation = superclass =>
   class extends superclass {
     constructor() {
       super();
+      /**
+       * The name the element will be registered with to the .formElements collection
+       * of the parent. Also, it serves as the key of key/value pairs in
+       *  modelValue/serializedValue objects
+       * @type {string}
+       */
+      this.name = '';
+
       /**
        * The registrar this FormControl registers to, Usually a descendant of FormGroup or
        * ChoiceGroup
@@ -37,8 +45,28 @@ const FormRegisteringMixinImplementation = superclass =>
       this.allowCrossRootRegistration = false;
     }
 
+    /**
+     * Name attribute for the control.
+     * @type {string}
+     */
+    get name() {
+      return this.__name || '';
+    }
+
+    /**
+     * Converts values provided for the `name` attribute to string type.
+     * Mimics the native `input` behavior.
+     * @param {string} newName
+     */
+    set name(newName) {
+      const oldName = this.name;
+      this.__name = newName.toString();
+      this.requestUpdate('name', oldName);
+    }
+
     static get properties() {
       return {
+        name: { type: String, reflect: true },
         allowCrossRootRegistration: { type: Boolean, attribute: 'allow-cross-root-registration' },
       };
     }

package/components/form-core/src/validate/LionValidationFeedback.js

@@ -1,4 +1,6 @@
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
+import { localizeNamespaceLoader } from '../localizeNamespaceLoader.js';
 
 /**
  * @typedef {import('./Validator.js').Validator} Validator
@@ -6,17 +8,46 @@ import { html, LitElement } from 'lit';
  * @typedef {import('../../types/validate/ValidateMixinTypes.js').FeedbackMessage} FeedbackMessage
  */
 
+/**
+ * @param {string} string
+ */
+const capitalize = string => `${string[0].toUpperCase()}${string.slice(1)}`;
+
 /**
  * @desc Takes care of accessible rendering of error messages
  * Should be used in conjunction with FormControl having ValidateMixin applied
  */
-export class LionValidationFeedback extends LitElement {
+export class LionValidationFeedback extends LocalizeMixin(LitElement) {
   static get properties() {
     return {
       feedbackData: { attribute: false },
     };
   }
 
+  static localizeNamespaces = [
+    { 'lion-form-core': localizeNamespaceLoader },
+    ...super.localizeNamespaces,
+  ];
+
+  static get styles() {
+    return [
+      css`
+        .validation-feedback__type {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(100%);
+          clip: rect(1px, 1px, 1px, 1px);
+          white-space: nowrap;
+          border: 0;
+          margin: 0;
+          padding: 0;
+        }
+      `,
+    ];
+  }
+
   /**
    * @overridable
    * @param {Object} opts
@@ -58,6 +89,9 @@ export class LionValidationFeedback extends LitElement {
       ${this.feedbackData &&
       this.feedbackData.map(
         ({ message, type, validator }) => html`
+          <div class="validation-feedback__type">
+            ${this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)}
+          </div>
           ${this._messageTemplate({ message, type, validator })}
         `,
       )}

package/components/form-core/test/validate/lion-validation-feedback.test.js

@@ -14,10 +14,10 @@ describe('lion-validation-feedback', () => {
     const el = /** @type {LionValidationFeedback} */ (
       await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
     );
-    expect(el).shadowDom.to.equal('');
+    expect(el.shadowRoot?.textContent).to.not.include('hello');
     el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
     await el.updateComplete;
-    expect(el).shadowDom.to.equal('hello');
+    expect(el.shadowRoot?.textContent).to.include('hello');
   });
 
   it('renders the validation type attribute', async () => {
@@ -73,4 +73,32 @@ describe('lion-validation-feedback', () => {
 
     clock.restore();
   });
+
+  it('shares to the user the type of validation feedback', async () => {
+    const el = /** @type {LionValidationFeedback} */ (
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
+    );
+
+    el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
+    await el.updateComplete;
+
+    const validationFeedbackType = el.shadowRoot?.querySelector('.validation-feedback__type');
+    expect(validationFeedbackType?.textContent?.trim()).to.equal('Error');
+
+    el.feedbackData = [{ message: 'hello', type: 'info', validator: new AlwaysInvalid() }];
+    await el.updateComplete;
+
+    expect(validationFeedbackType?.textContent?.trim()).to.equal('Info');
+  });
+
+  describe('accessibility', () => {
+    it('passes a11y audit when with a message', async () => {
+      const el = /** @type {LionValidationFeedback} */ (
+        await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
+      );
+      el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
+      await el.updateComplete;
+      await expect(el).to.be.accessible();
+    });
+  });
 });

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

@@ -310,6 +310,23 @@ export const runRegistrationSuite = customConfig => {
         expect(eventSpy).to.have.been.calledOnce;
         expect(eventSpy.getCall(0).args[0].composed).to.equal(false);
       });
+      it('accepts a name attribute and converts the values provided to a string', async () => {
+        const elAttr = /** @type {RegisteringClass} */ (
+          await fixture(html`<${childTag} name=${5}></${childTag}>`)
+        );
+
+        expect(elAttr.hasAttribute('name')).to.be.true;
+        expect(elAttr.name).to.be.a('string');
+        expect(elAttr.name).to.equal('5', 'as an attribute');
+
+        const elProp = /** @type {RegisteringClass} */ (
+          await fixture(html`<${childTag} .name=${5}></${childTag}>`)
+        );
+
+        expect(elProp.hasAttribute('name')).to.be.true;
+        expect(elProp.name).to.be.a('string');
+        expect(elProp.name).to.equal('5', 'as a property');
+      });
     });
     describe('FormRegistrarPortalMixin', () => {
       it('forwards registrations to the .registrationTarget', async () => {

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

@@ -788,6 +788,7 @@ export function runValidateMixinSuite(customConfig) {
           await fixture(html`
           <${tag}
             .validators="${[
+              // @ts-expect-error
               new EqualsLength(4, { getMessage: () => html`<div id="test123">test</div>` }),
             ]}" })]}"
             .modelValue="${'123'}"            
@@ -799,7 +800,7 @@ export function runValidateMixinSuite(customConfig) {
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
         const { _feedbackNode } = getFormControlMembers(el);
         await el.updateComplete;
-        await el.updateComplete;
+        await _feedbackNode.updateComplete;
         const messageHtmlNode = _feedbackNode.shadowRoot?.querySelector(`#${messageHtmlId}`);
         expect(messageHtmlNode?.outerHTML).to.equal(messageHtml);
         expect(messageHtmlNode?.tagName).to.equal('DIV');

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

@@ -1485,9 +1485,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1503,9 +1503,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1530,9 +1530,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1551,9 +1551,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1574,9 +1574,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag}  .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1595,9 +1595,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );

package/components/form-core/translations/bg-BG.js

@@ -0,0 +1,5 @@
+import bg from './bg.js';
+
+export default {
+  ...bg,
+};

package/components/form-core/translations/bg.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Грешка',
+  validationWarning: 'Предупреждение',
+  validationSuccess: 'Успех',
+  validationInfo: 'Информация',
+};

package/components/form-core/translations/cs-CZ.js

@@ -0,0 +1,5 @@
+import cs from './cs.js';
+
+export default {
+  ...cs,
+};

package/components/form-core/translations/cs.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Chyba',
+  validationWarning: 'Varování',
+  validationSuccess: 'Úspěch',
+  validationInfo: 'Informace',
+};

package/components/form-core/translations/de-DE.js

@@ -0,0 +1,5 @@
+import de from './de.js';
+
+export default {
+  ...de,
+};

package/components/form-core/translations/de.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Fehler',
+  validationWarning: 'Warnhinweis',
+  validationSuccess: 'Erfolgreich',
+  validationInfo: 'Info',
+};

package/components/form-core/translations/en-AU.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

package/components/form-core/translations/en-GB.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

package/components/form-core/translations/en-US.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

package/components/form-core/translations/en.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Error',
+  validationWarning: 'Warning',
+  validationSuccess: 'Success',
+  validationInfo: 'Info',
+};

package/components/form-core/translations/es-ES.js

@@ -0,0 +1,5 @@
+import es from './es.js';
+
+export default {
+  ...es,
+};

package/components/form-core/translations/es.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Error',
+  validationWarning: 'Advertencia',
+  validationSuccess: 'Satisfactorio',
+  validationInfo: 'Información',
+};

package/components/form-core/translations/fr-BE.js

@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+  ...fr,
+};

package/components/form-core/translations/fr-FR.js

@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+  ...fr,
+};

package/components/form-core/translations/fr.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Erreur',
+  validationWarning: 'Avertissement',
+  validationSuccess: 'Succès',
+  validationInfo: 'Info',
+};

package/components/form-core/translations/hu-HU.js

@@ -0,0 +1,5 @@
+import hu from './hu.js';
+
+export default {
+  ...hu,
+};

package/components/form-core/translations/hu.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Hiba',
+  validationWarning: 'Figyelmeztetés',
+  validationSuccess: 'Sikeres',
+  validationInfo: 'Információ',
+};

package/components/form-core/translations/it-IT.js

@@ -0,0 +1,5 @@
+import it from './it.js';
+
+export default {
+  ...it,
+};

package/components/form-core/translations/it.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Errore',
+  validationWarning: 'Avvertenza',
+  validationSuccess: 'Operazione riuscita',
+  validationInfo: 'Info',
+};

package/components/form-core/translations/nl-BE.js

@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+  ...nl,
+};

package/components/form-core/translations/nl-NL.js

@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+  ...nl,
+};

package/components/form-core/translations/nl.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Fout',
+  validationWarning: 'Waarschuwing',
+  validationSuccess: 'Succes',
+  validationInfo: 'Informatie',
+};

package/components/form-core/translations/pl-PL.js

@@ -0,0 +1,5 @@
+import pl from './pl.js';
+
+export default {
+  ...pl,
+};

package/components/form-core/translations/pl.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Błąd',
+  validationWarning: 'Ostrzeżenie',
+  validationSuccess: 'Zrealizowano pomyślnie',
+  validationInfo: 'Informacja',
+};

package/components/form-core/translations/ro-RO.js

@@ -0,0 +1,5 @@
+import ro from './ro.js';
+
+export default {
+  ...ro,
+};

package/components/form-core/translations/ro.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Eroare',
+  validationWarning: 'Atenție',
+  validationSuccess: 'Succes',
+  validationInfo: 'Informații',
+};

package/components/form-core/translations/ru-RU.js

@@ -0,0 +1,5 @@
+import ru from './ru.js';
+
+export default {
+  ...ru,
+};

package/components/form-core/translations/ru.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Ошибка',
+  validationWarning: 'Предупреждение',
+  validationSuccess: 'Успешно',
+  validationInfo: 'Информация',
+};

package/components/form-core/translations/sk-SK.js

@@ -0,0 +1,5 @@
+import sk from './sk.js';
+
+export default {
+  ...sk,
+};

package/components/form-core/translations/sk.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Chyba',
+  validationWarning: 'Varovanie',
+  validationSuccess: 'Úspešné',
+  validationInfo: 'Info',
+};

package/components/form-core/translations/uk-UA.js

@@ -0,0 +1,5 @@
+import uk from './uk.js';
+
+export default {
+  ...uk,
+};

package/components/form-core/translations/uk.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Помилка',
+  validationWarning: 'Попередження',
+  validationSuccess: 'Успішно',
+  validationInfo: 'Інформація',
+};