@lion/ui 0.22.0 → 0.24.0

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

@@ -48,27 +48,53 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
       'lion-selected-file-list': LionSelectedFileList,
     };
   }
-
   static get properties() {
     return {
       ...super.properties,
-      accept: { type: String },
-      multiple: { type: Boolean, reflect: true },
-      buttonLabel: { type: String, attribute: 'button-label' },
-      maxFileSize: { type: Number, attribute: 'max-file-size' },
-      enableDropZone: { type: Boolean, attribute: 'enable-drop-zone' },
-      uploadOnSelect: { type: Boolean, attribute: 'upload-on-select' },
-      isDragging: { type: Boolean, attribute: 'is-dragging', reflect: true },
-      uploadResponse: { type: Array, state: false },
-      _selectedFilesMetaData: { type: Array, state: true },
+      accept: {
+        type: String,
+      },
+      multiple: {
+        type: Boolean,
+        reflect: true,
+      },
+      buttonLabel: {
+        type: String,
+        attribute: 'button-label',
+      },
+      maxFileSize: {
+        type: Number,
+        attribute: 'max-file-size',
+      },
+      enableDropZone: {
+        type: Boolean,
+        attribute: 'enable-drop-zone',
+      },
+      uploadOnSelect: {
+        type: Boolean,
+        attribute: 'upload-on-select',
+      },
+      isDragging: {
+        type: Boolean,
+        attribute: 'is-dragging',
+        reflect: true,
+      },
+      uploadResponse: {
+        type: Array,
+        state: false,
+      },
+      _selectedFilesMetaData: {
+        type: Array,
+        state: true,
+      },
     };
   }
-
   static localizeNamespaces = [
-    { 'lion-input-file': localizeNamespaceLoader },
+    {
+      'lion-input-file': localizeNamespaceLoader,
+    },
     ...super.localizeNamespaces,
   ];
-
   static get validationTypes() {
     return ['error', 'info'];
   }
@@ -106,7 +132,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @protected
    */
   get _inputNode() {
-    return /** @type {HTMLInputElement} */ (super._inputNode);
+    return /** @type {HTMLInputElement} */ super._inputNode;
   }
 
   /**
@@ -163,9 +189,8 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @returns {import('../../form-core/types/FormControlMixinTypes.js').HTMLElementWithValue & HTMLButtonElement}
    */
   get _focusableNode() {
-    return /** @type {import('../../form-core/types/FormControlMixinTypes.js').HTMLElementWithValue & HTMLButtonElement} */ (
-      this._buttonNode
-    );
+    return /** @type {import('../../form-core/types/FormControlMixinTypes.js').HTMLElementWithValue & HTMLButtonElement} */ this
+      ._buttonNode;
   }
 
   /**
@@ -190,7 +215,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @type {FileList | null}
    */
   __previouslyParsedFiles;
-
   constructor() {
     super();
     this.type = 'file';
@@ -219,8 +243,9 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
      * @type {EventListener}
      */
     this._onRemoveFile = this._onRemoveFile.bind(this);
-
-    this.__duplicateFileNamesValidator = new DuplicateFileNames({ show: false });
+    this.__duplicateFileNamesValidator = new DuplicateFileNames({
+      show: false,
+    });
     this.__previouslyParsedFiles = null;
   }
 
@@ -229,11 +254,10 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @type {LionSelectedFileList}
    */
   get _fileListNode() {
-    return /** @type {LionSelectedFileList} */ (
-      Array.from(this.children).find(child => child.slot === 'selected-file-list')
+    return /** @type {LionSelectedFileList} */ Array.from(this.children).find(
+      (child) => child.slot === 'selected-file-list',
     );
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.__initialUploadResponse = this.uploadResponse;
@@ -241,7 +265,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     this._inputNode.addEventListener('change', this._onChange);
     this._inputNode.addEventListener('click', this._onClick);
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this._inputNode.removeEventListener('change', this._onChange);
@@ -268,7 +291,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   get operationMode() {
     return 'upload';
   }
-
   get _acceptCriteria() {
     /** @type {string[]} */
     let allowedFileTypes = [];
@@ -276,8 +298,8 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     let allowedFileExtensions = [];
     if (this.accept) {
       const acceptedFiles = this.accept.replace(/\s+/g, '').split(',');
-      allowedFileTypes = acceptedFiles.filter(acceptedFile => acceptedFile.includes('/'));
-      allowedFileExtensions = acceptedFiles.filter(acceptedFile => !acceptedFile.includes('/'));
+      allowedFileTypes = acceptedFiles.filter((acceptedFile) => acceptedFile.includes('/'));
+      allowedFileExtensions = acceptedFiles.filter((acceptedFile) => !acceptedFile.includes('/'));
     }
     return {
       allowedFileTypes,
@@ -336,14 +358,12 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
       return this.modelValue;
     }
     this.__previouslyParsedFiles = this._inputNode.files;
-
     const files = this._inputNode.files
-      ? /** @type {InputFile[]} */ (Array.from(this._inputNode.files))
+      ? /** @type {InputFile[]} */ Array.from(this._inputNode.files)
       : [];
     if (this.multiple) {
       return [...(this.modelValue ?? []), ...files];
     }
-
     return files;
   }
 
@@ -361,7 +381,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   __setupDragDropEventListeners() {
     // TODO: this will break as soon as a Subclasser changes the template ... (changing class names is allowed, ids should be kept)
     const dropZone = this.shadowRoot?.querySelector('.input-file__drop-zone');
-    ['dragenter', 'dragover', 'dragleave'].forEach(eventName => {
+    ['dragenter', 'dragover', 'dragleave'].forEach((eventName) => {
       dropZone?.addEventListener(
         eventName,
         (/** @type {Event} */ ev) => {
@@ -372,10 +392,9 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         false,
       );
     });
-
     window.addEventListener(
       'drop',
-      ev => {
+      (ev) => {
         if (ev.target === this._inputNode) {
           ev.preventDefault();
         }
@@ -390,7 +409,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
-
     this.__setupFileValidators();
 
     // TODO: if there's no inputNode by now, we should either throw an error or add a slot change listener
@@ -405,15 +423,15 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         this._inputNode.accept = this.accept;
       }
     }
-
     if (this.enableDropZone && this._isDragAndDropSupported) {
       this.__setupDragDropEventListeners();
       this.setAttribute('drop-zone', '');
     }
 
-    /** @type {LionSelectedFileList} */ (this._fileListNode).addEventListener(
+    /** @type {LionSelectedFileList} */
+    this._fileListNode.addEventListener(
       'file-remove-requested',
-      /** @type {EventListener} */ (this._onRemoveFile),
+      /** @type {EventListener} */ this._onRemoveFile,
     );
   }
 
@@ -428,7 +446,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
       this._inputNode.disabled = this.disabled;
       this.validate();
     }
-
     if (changedProperties.has('buttonLabel') && this._buttonNode) {
       this._buttonNode.textContent = this.buttonLabel;
     }
@@ -437,11 +454,9 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     if (changedProperties.has('name')) {
       this._inputNode.name = this.name;
     }
-
     if (changedProperties.has('_ariaLabelledNodes')) {
       this.__syncAriaLabelledByAttributesToButton();
     }
-
     if (changedProperties.has('_ariaDescribedNodes')) {
       this.__syncAriaDescribedByAttributesToButton();
     }
@@ -453,7 +468,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
      */
     if (changedProperties.has('uploadResponse')) {
       if (this._selectedFilesMetaData.length === 0) {
-        this.uploadResponse.forEach(preResponse => {
+        this.uploadResponse.forEach((preResponse) => {
           const file = {
             systemFile: {
               name: preResponse.name,
@@ -470,14 +485,14 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
           this._selectedFilesMetaData = [...this._selectedFilesMetaData, file];
         });
       }
-      this._selectedFilesMetaData.forEach(file => {
+      this._selectedFilesMetaData.forEach((file) => {
         if (
-          !this.uploadResponse.some(response => response.name === file.systemFile.name) &&
+          !this.uploadResponse.some((response) => response.name === file.systemFile.name) &&
           this.uploadOnSelect
         ) {
           this.__removeFileFromList(file);
         } else {
-          this.uploadResponse.forEach(response => {
+          this.uploadResponse.forEach((response) => {
             if (response.name === file.systemFile.name) {
               // eslint-disable-next-line no-param-reassign
               file.response = response;
@@ -512,9 +527,9 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    */
   __computeNewAddedFiles(fileList) {
     const computedFileList = fileList.filter(
-      file =>
+      (file) =>
         this._selectedFilesMetaData.findIndex(
-          existLionFile => existLionFile.systemFile.name === file.name,
+          (existLionFile) => existLionFile.systemFile.name === file.name,
         ) === -1,
     );
     // TODO: put this logic in the Validator itself. Changing the param should trigger a re-validate
@@ -522,7 +537,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
       show: fileList.length !== computedFileList.length,
     };
     this.validate();
-
     return computedFileList;
   }
 
@@ -533,25 +547,21 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   _processDroppedFiles(ev) {
     ev.preventDefault();
     this.isDragging = false;
-
     const isDraggingMultipleWhileNotSupported =
       ev.dataTransfer && ev.dataTransfer.items.length > 1 && !this.multiple;
     if (isDraggingMultipleWhileNotSupported || !ev.dataTransfer?.files) {
       return;
     }
-
     this._inputNode.files = ev.dataTransfer.files;
-
     if (this.multiple) {
       const computedFiles = this.__computeNewAddedFiles(
-        /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)),
+        /** @type {InputFile[]} */ Array.from(ev.dataTransfer.files),
       );
       this.modelValue = [...(this.modelValue ?? []), ...computedFiles];
     } else {
-      this.modelValue = /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files));
+      this.modelValue = /** @type {InputFile[]} */ Array.from(ev.dataTransfer.files);
     }
-
-    this._processFiles(/** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)));
+    this._processFiles(/** @type {InputFile[]} */ Array.from(ev.dataTransfer.files));
   }
 
   /**
@@ -567,7 +577,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     // Here, we connect ourselves to the FormatMixin flow...
     // TODO: should we call super._onChange(ev) here instead?
     this._onUserInputChanged();
-    this._processFiles(/** @type {HTMLInputElement & {files:InputFile[]}} */ (ev?.target)?.files);
+    this._processFiles(/** @type {HTMLInputElement & {files:InputFile[]}} */ ev?.target?.files);
   }
 
   /**
@@ -665,10 +675,9 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     const _successFiles = this._selectedFilesMetaData
       .filter(
         ({ systemFile, status }) =>
-          newFiles.includes(/** @type {InputFile} */ (systemFile)) && status === 'SUCCESS',
+          newFiles.includes(/** @type {InputFile} */ systemFile) && status === 'SUCCESS',
       )
-      .map(({ systemFile }) => /** @type {InputFile} */ (systemFile));
-
+      .map(({ systemFile }) => /** @type {InputFile} */ systemFile);
     if (_successFiles.length > 0) {
       this._dispatchFileListChangeEvent(_successFiles);
     }
@@ -696,7 +705,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    */
   _handleErrors() {
     let hasErrors = false;
-    this._selectedFilesMetaData.forEach(fileObj => {
+    this._selectedFilesMetaData.forEach((fileObj) => {
       if (fileObj.failedProp && fileObj.failedProp.length > 0) {
         hasErrors = true;
       }
@@ -732,13 +741,12 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     let array = [];
     let arrayLength = 0;
     let lastItem;
-
     if (allowedFileExtensions.length) {
       array = allowedFileExtensions;
       lastItem = array.pop();
       arrayLength = array.length;
     } else if (allowedFileTypes.length) {
-      allowedFileTypes.forEach(MIMETypes => {
+      allowedFileTypes.forEach((MIMETypes) => {
         if (MIMETypes.endsWith('/*')) {
           array.push(MIMETypes.slice(0, -2));
         } else if (MIMETypes === 'text/plain') {
@@ -746,7 +754,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         } else {
           const index = MIMETypes.indexOf('/');
           const subTypes = MIMETypes.slice(index + 1);
-
           if (!subTypes.includes('+')) {
             array.push(`.${subTypes}`);
           } else {
@@ -775,7 +782,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         maxSize: formatBytes(this.maxFileSize),
       })}`;
     }
-
     const errorObj = {
       message,
       type: 'error',
@@ -788,38 +794,36 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @protected
    */
   _updateUploadButtonDescription() {
-    const erroneousFilesNames = /** @type {string[]} */ ([]);
+    const erroneousFilesNames = /** @type {string[]} */ [];
     let errorMessage;
-
-    this._selectedFilesMetaData.forEach(file => {
+    this._selectedFilesMetaData.forEach((file) => {
       if (file.status === 'FAIL') {
         errorMessage = file.validationFeedback ? file.validationFeedback[0].message.toString() : '';
-        erroneousFilesNames.push(/** @type {string} */ (file.systemFile.name));
+        erroneousFilesNames.push(/** @type {string} */ file.systemFile.name);
       }
     });
-
     const selectedFiles = this.querySelector('[slot="after"]');
     if (selectedFiles) {
       if (!this._selectedFilesMetaData || this._selectedFilesMetaData.length === 0) {
         if (this.uploadOnSelect) {
-          selectedFiles.textContent = /** @type {string} */ (
-            this.msgLit('lion-input-file:noFilesUploaded')
-          );
+          selectedFiles.textContent =
+            /** @type {string} */
+            this.msgLit('lion-input-file:noFilesUploaded');
         } else {
-          selectedFiles.textContent = /** @type {string} */ (
-            this.msgLit('lion-input-file:noFilesSelected')
-          );
+          selectedFiles.textContent =
+            /** @type {string} */
+            this.msgLit('lion-input-file:noFilesSelected');
         }
       } else if (this._selectedFilesMetaData.length === 1) {
         const { name } = this._selectedFilesMetaData[0].systemFile;
         if (this.uploadOnSelect) {
-          selectedFiles.textContent = /** @type {string} */ (
-            errorMessage || this.msgLit('lion-input-file:fileUploaded') + (name ?? '')
-          );
+          selectedFiles.textContent =
+            /** @type {string} */
+            errorMessage || this.msgLit('lion-input-file:fileUploaded') + (name ?? '');
         } else {
-          selectedFiles.textContent = /** @type {string} */ (
-            errorMessage || this.msgLit('lion-input-file:fileSelected') + (name ?? '')
-          );
+          selectedFiles.textContent =
+            /** @type {string} */
+            errorMessage || this.msgLit('lion-input-file:fileSelected') + (name ?? '');
         }
       } else if (this.uploadOnSelect) {
         selectedFiles.textContent = `${this.msgLit('lion-input-file:filesUploaded', {
@@ -853,7 +857,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    */
   __removeFileFromList(removedFile) {
     this._selectedFilesMetaData = this._selectedFilesMetaData.filter(
-      currentFile => currentFile.systemFile.name !== removedFile.systemFile.name,
+      (currentFile) => currentFile.systemFile.name !== removedFile.systemFile.name,
     );
     // checks if the file is not a pre-filled file
     if (this.modelValue) {
@@ -878,7 +882,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     if (!this.uploadOnSelect && removedFile) {
       this.__removeFileFromList(removedFile);
     }
-
     this._removeFile(removedFile);
   }
 
@@ -966,7 +969,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
           `}
     `;
   }
-
   static get styles() {
     return [
       super.styles,

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

@@ -21,19 +21,22 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
       'lion-validation-feedback': LionValidationFeedback,
     };
   }
-
   static get properties() {
     return {
-      fileList: { type: Array },
-      multiple: { type: Boolean },
+      fileList: {
+        type: Array,
+      },
+      multiple: {
+        type: Boolean,
+      },
     };
   }
-
   static localizeNamespaces = [
-    { 'lion-input-file': localizeNamespaceLoader },
+    {
+      'lion-input-file': localizeNamespaceLoader,
+    },
     ...super.localizeNamespaces,
   ];
-
   constructor() {
     super();
     /**
@@ -52,12 +55,11 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
       this._enhanceLightDomA11y();
     }
   }
-
   _enhanceLightDomA11y() {
     const fileFeedbackElementList = this.shadowRoot?.querySelectorAll('[id^="file-feedback"]');
     // TODO: this will break as soon as a Subclasser changes the template ...
     const inputFileNode = this.parentNode?.parentNode;
-    fileFeedbackElementList?.forEach(feedbackEl => {
+    fileFeedbackElementList?.forEach((feedbackEl) => {
       // Generic focus/blur handling that works for both Fields/FormGroups
       inputFileNode?.addEventListener('focusin', () => {
         feedbackEl.setAttribute('aria-live', 'polite');
@@ -174,7 +176,7 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
           ? html`
               ${repeat(
                 file.validationFeedback,
-                validationFeedback => html`
+                (validationFeedback) => html`
                   ${this._validationFeedbackTemplate([validationFeedback], fileUuid)}
                 `,
               )}
@@ -183,7 +185,6 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
       </div>
     `;
   }
-
   render() {
     return this.fileList?.length
       ? html`
@@ -191,7 +192,7 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
             ? html`
                 <ul class="selected__list">
                   ${this.fileList.map(
-                    file => html` <li>${this._selectedListItemTemplate(file)}</li> `,
+                    (file) => html` <li>${this._selectedListItemTemplate(file)}</li> `,
                   )}
                 </ul>
               `
@@ -199,7 +200,6 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
         `
       : nothing;
   }
-
   static get styles() {
     return [
       css`

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

@@ -36,7 +36,7 @@ export class IsAcceptedFile extends Validator {
    */
   static isExtensionAllowed(extension, allowedFileExtensions) {
     return allowedFileExtensions?.find(
-      allowedExtension => allowedExtension.toUpperCase() === extension.toUpperCase(),
+      (allowedExtension) => allowedExtension.toUpperCase() === extension.toUpperCase(),
     );
   }
 
@@ -45,7 +45,9 @@ export class IsAcceptedFile extends Validator {
    * @param {string[]} allowedFileTypes
    */
   static isFileTypeAllowed(type, allowedFileTypes) {
-    return allowedFileTypes?.find(allowedType => allowedType.toUpperCase() === type.toUpperCase());
+    return allowedFileTypes?.find(
+      (allowedType) => allowedType.toUpperCase() === type.toUpperCase(),
+    );
   }
 
   /**
@@ -56,21 +58,22 @@ export class IsAcceptedFile extends Validator {
   execute(modelValue, params = this.param) {
     let isInvalidType;
     let isInvalidFileExt;
-
-    const ctor = /** @type {typeof IsAcceptedFile} */ (this.constructor);
+    const ctor = /** @type {typeof IsAcceptedFile} */ this.constructor;
     const { allowedFileTypes, allowedFileExtensions, maxFileSize } = params;
     if (allowedFileTypes?.length) {
-      isInvalidType = modelValue.some(file => !ctor.isFileTypeAllowed(file.type, allowedFileTypes));
+      isInvalidType = modelValue.some(
+        (file) => !ctor.isFileTypeAllowed(file.type, allowedFileTypes),
+      );
       return isInvalidType;
     }
     if (allowedFileExtensions?.length) {
       isInvalidFileExt = modelValue.some(
-        file => !ctor.isExtensionAllowed(ctor.getExtension(file.name), allowedFileExtensions),
+        (file) => !ctor.isExtensionAllowed(ctor.getExtension(file.name), allowedFileExtensions),
       );
       return isInvalidFileExt;
     }
     const invalidFileSize = modelValue.findIndex(
-      file => !ctor.checkFileSize(file.size, maxFileSize),
+      (file) => !ctor.checkFileSize(file.size, maxFileSize),
     );
     return invalidFileSize > -1;
   }
@@ -81,7 +84,6 @@ export class IsAcceptedFile extends Validator {
     return '';
   }
 }
-
 export class DuplicateFileNames extends Validator {
   static validatorName = 'DuplicateFileNames';
 
@@ -113,7 +115,6 @@ export class DuplicateFileNames extends Validator {
     return localizeManager.msg('lion-input-file:uploadTextDuplicateFileName');
   }
 }
-
 export class MaxFileCount extends Validator {
   static get validatorName() {
     return 'MaxFileCount';