@lion/ui 0.7.3 → 0.7.5

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

@@ -800,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/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: 'Інформація',
+};

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

@@ -0,0 +1,6 @@
+export default {
+  validationError: '错误',
+  validationWarning: '警告',
+  validationSuccess: '成功',
+  validationInfo: '信息',
+};

package/components/form-core/types/FormControlMixinTypes.ts

@@ -43,10 +43,6 @@ export declare interface HTMLElementWithValue extends HTMLElement {
 export declare class FormControlHost {
   static get styles(): CSSResultArray;
   static get properties(): {
-    name: {
-      type: StringConstructor;
-      reflect: boolean;
-    };
     readOnly: {
       type: BooleanConstructor;
       attribute: string;

package/components/form-core/types/registration/FormRegisteringMixinTypes.ts

@@ -4,10 +4,13 @@ import { LitElement } from 'lit';
 import { FormRegistrarHost } from './FormRegistrarMixinTypes.js';
 
 export declare class FormRegisteringHost {
-  /**
-   * The name the host is registered with to a parent
-   */
-  name: string;
+  static get properties(): {
+    name: {
+      type: StringConstructor;
+      reflect: boolean;
+    };
+  }
+  
   /**
    * To encourage accessibility best practices, `form-element-register` events
    * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that
@@ -17,12 +20,22 @@ export declare class FormRegisteringHost {
    */
   allowCrossRootRegistration: boolean;
 
+  /**
+   * 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
+   */
+  get name(): string;
+  set name(arg: any);
+
   /**
    * The registrar this FormControl registers to, Usually a descendant of FormGroup or
    * ChoiceGroup
    */
   protected _parentFormGroup: FormRegistrarHost | undefined;
 
+  private __name: string;
+
   private __unregisterFormElement: void;
 }
 

package/components/input-amount/test/lion-input-amount.test.js

@@ -195,6 +195,9 @@ describe('<lion-input-amount>', () => {
     expect(el.formattedValue).to.equal('123.45');
     localize.locale = 'nl-NL';
     await el.updateComplete;
+    // TODO find out why the localize needs to be loaded for the feedbackNode
+    // @ts-ignore [allow-protected] in test
+    await el._feedbackNode.localizeNamespacesLoaded;
     expect(el.formattedValue).to.equal('123,45');
   });
 

package/components/input-file/src/LionInputFile.js

@@ -77,6 +77,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         >
           ${this.buttonLabel}
         </button>`,
+      after: () => html`<div data-description></div>`,
       'selected-file-list': () => ({
         template: html`
           <lion-selected-file-list
@@ -105,8 +106,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   }
 
   /**
-   * The helpt text for the input node.
-   * When no light dom defined via [slot=help-text], this value will be used
+   * The label of the button
    * @type {string}
    */
   get buttonLabel() {
@@ -176,6 +176,11 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
 
     /** @private */
     this.__duplicateFileNamesValidator = new DuplicateFileNames({ show: false });
+    /**
+     * @private
+     * @type {FileList | null}
+     */
+    this.__previouslyParsedFiles = null;
   }
 
   /**
@@ -283,8 +288,20 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @returns {InputFile[]} parsedValue
    */
   parser() {
-    // @ts-ignore
-    return this._inputNode.files ? Array.from(this._inputNode.files) : [];
+    // parser is called twice for one user event; one for 'user-input-change', another for 'change'
+    if (this.__previouslyParsedFiles === this._inputNode.files) {
+      return this.modelValue;
+    }
+    this.__previouslyParsedFiles = this._inputNode.files;
+
+    const files = this._inputNode.files
+      ? /** @type {InputFile[]} */ (Array.from(this._inputNode.files))
+      : [];
+    if (this.multiple) {
+      return [...(this.modelValue ?? []), ...files];
+    }
+
+    return files;
   }
 
   /**
@@ -332,8 +349,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     super.firstUpdated(changedProperties);
 
     this.__setupFileValidators();
-    // We need to update our light dom
-    this._enhanceSelectedList();
 
     // TODO: if there's no inputNode by now, we should either throw an error or add a slot change listener
     if (this._inputNode) {
@@ -443,6 +458,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
           this._selectedFilesMetaData = [...this._selectedFilesMetaData];
         }
       });
+      this._updateUploadButtonDescription();
     }
   }
 
@@ -482,16 +498,17 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     }
 
     this._inputNode.files = ev.dataTransfer.files;
-    // @ts-ignore
-    this.modelValue = Array.from(ev.dataTransfer.files);
-    // if same file is selected again, e.dataTransfer.files lists that file.
-    // So filter if the file already exists
-    // @ts-ignore
-    // const newFiles = this.__computeNewAddedFiles(Array.from(ev.dataTransfer.files));
-    // if (newFiles.length > 0) {
-    //   this._processFiles(newFiles);
-    // }
-    this._processFiles(Array.from(ev.dataTransfer.files));
+
+    if (this.multiple) {
+      const computedFiles = this.__computeNewAddedFiles(
+        /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)),
+      );
+      this.modelValue = [...(this.modelValue ?? []), ...computedFiles];
+    } else {
+      this.modelValue = /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files));
+    }
+
+    this._processFiles(/** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)));
   }
 
   /**
@@ -521,20 +538,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     ev.target.value = ''; // eslint-disable-line no-param-reassign
   }
 
-  /**
-   * @protected
-   */
-  _enhanceSelectedList() {
-    /**
-     * @type {LionSelectedFileList | null}
-     */
-    const selectedFileList = this.querySelector('[slot="selected-file-list"]');
-    if (selectedFileList) {
-      selectedFileList.setAttribute('id', `selected-file-list-${this._inputId}`);
-      this.addToAriaDescribedBy(selectedFileList, { idPrefix: 'selected-file-list' });
-    }
-  }
-
   /**
    * @protected
    */
@@ -739,6 +742,46 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     fileObj.validationFeedback?.push(errorObj);
   }
 
+  /**
+   * Description for screen readers connected to the button about how many files have been updated
+   * @protected
+   */
+  _updateUploadButtonDescription() {
+    const erroneousFilesNames = /** @type {string[]} */ ([]);
+    let errorMessage;
+
+    this._selectedFilesMetaData.forEach(file => {
+      if (file.status === 'FAIL') {
+        errorMessage = file.validationFeedback ? file.validationFeedback[0].message.toString() : '';
+        erroneousFilesNames.push(/** @type {string} */ (file.systemFile.name));
+      }
+    });
+
+    const selectedFiles = this.querySelector('[slot="after"]');
+    if (selectedFiles) {
+      if (!this._selectedFilesMetaData || this._selectedFilesMetaData.length === 0) {
+        selectedFiles.textContent = /** @type {string} */ (
+          this.msgLit('lion-input-file:noFilesSelected')
+        );
+      } else if (this._selectedFilesMetaData.length === 1) {
+        selectedFiles.textContent = /** @type {string} */ (
+          errorMessage || this._selectedFilesMetaData[0].systemFile.name
+        );
+      } else {
+        selectedFiles.textContent = `${this.msgLit('lion-input-file:numberOfFiles', {
+          numberOfFiles: this._selectedFilesMetaData.length,
+        })} ${
+          errorMessage
+            ? this.msgLit('lion-input-file:generalValidatorMessage', {
+                validatorMessage: errorMessage,
+                listOfErroneousFiles: erroneousFilesNames.join(', '),
+              })
+            : ''
+        }`;
+      }
+    }
+  }
+
   /**
    * @private
    * @param {InputFile} removedFile
@@ -755,6 +798,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     }
     this._inputNode.value = '';
     this._handleErrors();
+    this._updateUploadButtonDescription();
   }
 
   /**
@@ -847,6 +891,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   _inputGroupInputTemplate() {
     return html`
       <slot name="input"> </slot>
+      <slot name="after"> </slot>
       ${this.enableDropZone && this._isDragAndDropSupported
         ? this._dropZoneTemplate()
         : html`
@@ -891,6 +936,19 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
           border: dashed 2px black;
           padding: 24px 0;
         }
+
+        .input-group__container ::slotted([slot='after']) {
+          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;
+        }
       `,
     ];
   }