@lion/ui 0.2.1 → 0.3.0

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

@@ -0,0 +1,232 @@
+import { uuid } from '@lion/ui/core.js';
+import { LionValidationFeedback } from '@lion/ui/form-core.js';
+import { LocalizeMixin } from '@lion/ui/localize.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { css, html, LitElement, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ * @typedef {import('../types/input-file.js').InputFile} InputFile
+ * @typedef {import('../types/input-file.js').SystemFile} SystemFile
+ */
+
+export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitElement)) {
+  static get scopedElements() {
+    return {
+      // @ts-expect-error [external] fix types scopedElements
+      ...super.scopedElements,
+      'lion-validation-feedback': LionValidationFeedback,
+    };
+  }
+
+  static get properties() {
+    return {
+      fileList: { type: Array },
+      multiple: { type: Boolean },
+    };
+  }
+
+  static localizeNamespaces = [
+    { 'lion-input-file': localizeNamespaceLoader },
+    ...super.localizeNamespaces,
+  ];
+
+  constructor() {
+    super();
+    /**
+     * @type {InputFile[]}
+     */
+    this.fileList = [];
+    this.multiple = false;
+  }
+
+  /**
+   * @param {import('lit').PropertyValues} changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('fileList')) {
+      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 => {
+      // Generic focus/blur handling that works for both Fields/FormGroups
+      inputFileNode?.addEventListener('focusin', () => {
+        feedbackEl.setAttribute('aria-live', 'polite');
+      });
+      inputFileNode?.addEventListener('focusout', () => {
+        feedbackEl.setAttribute('aria-live', 'assertive');
+      });
+    });
+  }
+
+  /**
+   * @protected
+   * @param {InputFile} removedFile
+   */
+  _removeFile(removedFile) {
+    this.dispatchEvent(
+      // TODO: do we need bubble and composed for an internal event that only LionInputFile should know about?
+      new CustomEvent('file-remove-requested', {
+        // composed: true,
+        // bubbles: true,
+        detail: {
+          removedFile,
+          status: removedFile.status,
+          uploadResponse: removedFile.response,
+        },
+      }),
+    );
+  }
+
+  /**
+   * @protected
+   * @param {Array<import('../../form-core/types/validate/ValidateMixinTypes.js').FeedbackMessage>} validationFeedback
+   * @param {string} fileUuid
+   * @return {TemplateResult}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _validationFeedbackTemplate(validationFeedback, fileUuid) {
+    return html`
+      <lion-validation-feedback
+        id="file-feedback-${fileUuid}"
+        .feedbackData="${validationFeedback}"
+        aria-live="assertive"
+      ></lion-validation-feedback>
+    `;
+  }
+
+  /**
+   * @protected
+   * @param {InputFile} file
+   * @return {TemplateResult|nothing}
+   */
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  _listItemBeforeTemplate(file) {
+    return nothing;
+  }
+
+  /**
+   * @protected
+   * @param {InputFile} file
+   * @param {string} fileUuid
+   * @return {TemplateResult}
+   */
+  // eslint-disable-next-line no-unused-vars
+  _listItemAfterTemplate(file, fileUuid) {
+    return html`
+      <button
+        class="selected__list__item__remove-button"
+        aria-label="${this.msgLit('lion-input-file:removeButtonLabel', {
+          fileName: file.systemFile.name,
+        })}"
+        @click=${() => this._removeFile(file)}
+      >
+        ${this._removeButtonContentTemplate()}
+      </button>
+    `;
+  }
+
+  /**
+   * @protected
+   * @return {TemplateResult}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _removeButtonContentTemplate() {
+    return html`✖️`;
+  }
+
+  /**
+   * @protected
+   * @param {InputFile} file
+   * @return {TemplateResult}
+   */
+  _selectedListItemTemplate(file) {
+    const fileUuid = uuid();
+    return html`
+      <div class="selected__list__item" status="${file.status ? file.status.toLowerCase() : ''}">
+        <div class="selected__list__item__label">
+          ${this._listItemBeforeTemplate(file)}
+          <span id="selected-list-item-label-${fileUuid}" class="selected__list__item__label__text">
+            <span class="sr-only">${this.msgLit('lion-input-file:fileNameDescriptionLabel')}</span>
+            ${file.downloadUrl && file.status !== 'LOADING'
+              ? html`
+                  <a
+                    class="selected__list__item__label__link"
+                    href="${file.downloadUrl}"
+                    target="${file.downloadUrl.startsWith('blob') ? '_blank' : ''}"
+                    rel="${ifDefined(
+                      file.downloadUrl.startsWith('blob') ? 'noopener noreferrer' : undefined,
+                    )}"
+                    >${file.systemFile?.name}</a
+                  >
+                `
+              : file.systemFile?.name}
+          </span>
+          ${this._listItemAfterTemplate(file, fileUuid)}
+        </div>
+        ${file.status === 'FAIL' && file.validationFeedback
+          ? html`
+              ${repeat(
+                file.validationFeedback,
+                validationFeedback => html`
+                  ${this._validationFeedbackTemplate([validationFeedback], fileUuid)}
+                `,
+              )}
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
+  render() {
+    return this.fileList?.length
+      ? html`
+          ${this.multiple
+            ? html`
+                <ul class="selected__list">
+                  ${this.fileList.map(
+                    file => html` <li>${this._selectedListItemTemplate(file)}</li> `,
+                  )}
+                </ul>
+              `
+            : html` ${this._selectedListItemTemplate(this.fileList[0])} `}
+        `
+      : nothing;
+  }
+
+  static get styles() {
+    return [
+      css`
+        .selected__list {
+          list-style-type: none;
+          margin-block-start: 0;
+          margin-block-end: 0;
+          padding-inline-start: 0;
+        }
+
+        .sr-only {
+          position: absolute;
+          top: 0;
+          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;
+        }
+      `,
+    ];
+  }
+}

package/components/input-file/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/input-file-translations/bg-BG.js');
+    case 'bg':
+      return import('@lion/ui/input-file-translations/bg.js');
+    case 'cs-CZ':
+      return import('@lion/ui/input-file-translations/cs-CZ.js');
+    case 'cs':
+      return import('@lion/ui/input-file-translations/cs.js');
+    case 'de-DE':
+      return import('@lion/ui/input-file-translations/de-DE.js');
+    case 'de':
+      return import('@lion/ui/input-file-translations/de.js');
+    case 'en-AU':
+      return import('@lion/ui/input-file-translations/en-AU.js');
+    case 'en-GB':
+      return import('@lion/ui/input-file-translations/en-GB.js');
+    case 'en-US':
+      return import('@lion/ui/input-file-translations/en-US.js');
+    case 'en-PH':
+    case 'en':
+      return import('@lion/ui/input-file-translations/en.js');
+    case 'es-ES':
+      return import('@lion/ui/input-file-translations/es-ES.js');
+    case 'es':
+      return import('@lion/ui/input-file-translations/es.js');
+    case 'fr-FR':
+      return import('@lion/ui/input-file-translations/fr-FR.js');
+    case 'fr-BE':
+      return import('@lion/ui/input-file-translations/fr-BE.js');
+    case 'fr':
+      return import('@lion/ui/input-file-translations/fr.js');
+    case 'hu-HU':
+      return import('@lion/ui/input-file-translations/hu-HU.js');
+    case 'hu':
+      return import('@lion/ui/input-file-translations/hu.js');
+    case 'it-IT':
+      return import('@lion/ui/input-file-translations/it-IT.js');
+    case 'it':
+      return import('@lion/ui/input-file-translations/it.js');
+    case 'nl-BE':
+      return import('@lion/ui/input-file-translations/nl-BE.js');
+    case 'nl-NL':
+      return import('@lion/ui/input-file-translations/nl-NL.js');
+    case 'nl':
+      return import('@lion/ui/input-file-translations/nl.js');
+    case 'pl-PL':
+      return import('@lion/ui/input-file-translations/pl-PL.js');
+    case 'pl':
+      return import('@lion/ui/input-file-translations/pl.js');
+    case 'ro-RO':
+      return import('@lion/ui/input-file-translations/ro-RO.js');
+    case 'ro':
+      return import('@lion/ui/input-file-translations/ro.js');
+    case 'ru-RU':
+      return import('@lion/ui/input-file-translations/ru-RU.js');
+    case 'ru':
+      return import('@lion/ui/input-file-translations/ru.js');
+    case 'sk-SK':
+      return import('@lion/ui/input-file-translations/sk-SK.js');
+    case 'sk':
+      return import('@lion/ui/input-file-translations/sk.js');
+    case 'uk-UA':
+      return import('@lion/ui/input-file-translations/uk-UA.js');
+    case 'uk':
+      return import('@lion/ui/input-file-translations/uk.js');
+    case 'zh-CN':
+    case 'zh':
+      return import('@lion/ui/input-file-translations/zh.js');
+    default:
+      return import('@lion/ui/input-file-translations/en.js');
+  }
+};

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

@@ -0,0 +1,114 @@
+import { Validator } from '@lion/ui/form-core.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
+
+/**
+ * @typedef {import('../../form-core/types/validate/validate.js').ValidatorConfig} ValidatorConfig
+ * @typedef {import('../../form-core/types/validate/validate.js').ValidatorParam} ValidatorParam
+ * @typedef {import('../../form-core/types/validate/validate.js').ValidatorOutcome} ValidatorOutcome
+ * @typedef {import('../types/input-file.js').InputFile} InputFile
+ */
+
+/* eslint max-classes-per-file: ["error", 2] */
+export class IsAcceptedFile extends Validator {
+  static validatorName = 'IsAcceptedFile';
+
+  /**
+   * @param {number} fileFileSize
+   * @param {number} maxFileSize
+   */
+  static checkFileSize(fileFileSize, maxFileSize) {
+    return fileFileSize <= maxFileSize;
+  }
+
+  /**
+   * Gets the extension of a file name
+   * @param {string} fileName like myFile.txt
+   * @return {string} like .txt
+   */
+  static getExtension(fileName) {
+    return fileName?.slice(fileName.lastIndexOf('.'));
+  }
+
+  /**
+   * @param {string} extension
+   * @param {string[]} allowedFileExtensions
+   */
+  static isExtensionAllowed(extension, allowedFileExtensions) {
+    return allowedFileExtensions?.find(
+      allowedExtension => allowedExtension.toUpperCase() === extension.toUpperCase(),
+    );
+  }
+
+  /**
+   * @param {string} type
+   * @param {string[]} allowedFileTypes
+   */
+  static isFileTypeAllowed(type, allowedFileTypes) {
+    return allowedFileTypes?.find(allowedType => allowedType.toUpperCase() === type.toUpperCase());
+  }
+
+  /**
+   * @param {Array<File>} modelValue array of file objects
+   * @param {{ allowedFileTypes: string[]; allowedFileExtensions: string[]; maxFileSize: number; }} params
+   * @returns {Boolean}
+   */
+  execute(modelValue, params = this.param) {
+    let isInvalidType;
+    let isInvalidFileExt;
+
+    const ctor = /** @type {typeof IsAcceptedFile} */ (this.constructor);
+    const { allowedFileTypes, allowedFileExtensions, maxFileSize } = params;
+    if (allowedFileTypes?.length) {
+      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),
+      );
+      return isInvalidFileExt;
+    }
+    const invalidFileSize = modelValue.findIndex(
+      file => !ctor.checkFileSize(file.size, maxFileSize),
+    );
+    return invalidFileSize > -1;
+  }
+
+  // @todo: validation should be handled with ValidateMixin so overriding getMessage to return an empty string should
+  //        not be necessary anymore
+  static async getMessage() {
+    return '';
+  }
+}
+
+export class DuplicateFileNames extends Validator {
+  static validatorName = 'DuplicateFileNames';
+
+  /**
+   * @param {ValidatorParam} [param]
+   * @param {ValidatorConfig} [config]
+   */
+  constructor(param, config) {
+    super(param, config);
+    this.type = 'info';
+  }
+
+  /**
+   * @param {InputFile[]} modelValue
+   * @param {ValidatorParam} [params]
+   * @returns {ValidatorOutcome|Promise<ValidatorOutcome>}
+   */
+  execute(modelValue, params = this.param) {
+    return params.show;
+  }
+
+  /**
+   * @returns {Promise<string|Element>}
+   */
+  static async getMessage() {
+    const localizeManager = getLocalizeManager();
+    // TODO: we need to make sure namespace is loaded
+    // TODO: keep Validators localize system agnostic
+    return localizeManager.msg('lion-input-file:uploadTextDuplicateFileName');
+  }
+}

package/components/input-file/test/FileValidators.test.js

@@ -0,0 +1,170 @@
+import { expect } from '@open-wc/testing';
+import { IsAcceptedFile } from '../src/validators.js';
+
+describe('lion-input-file: IsAcceptedFile', () => {
+  describe('valid file type', () => {
+    it('should return false for allowed file extension .csv', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ name: 'foo.csv' }], {
+        allowedFileExtensions: ['.csv'],
+        allowedFileTypes: undefined,
+      });
+      expect(returnVal).to.be.false;
+    });
+
+    it('should return false for allowed file extension .csv and .pdf', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ name: 'foo.pdf' }], {
+        allowedFileExtensions: ['.csv', '.pdf'],
+        allowedFileTypes: undefined,
+      });
+      expect(returnVal).to.be.false;
+    });
+
+    it('should return true for not allowed file extension .csv and .pdf', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ name: 'foo.pdf' }], {
+        allowedFileExtensions: ['.txt'],
+        allowedFileTypes: undefined,
+      });
+      expect(returnVal).to.be.true;
+    });
+
+    it('should return false for valid file type for single file', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ type: 'foo' }], {
+        allowedFileTypes: ['foo'],
+      });
+
+      expect(returnVal).to.be.false;
+    });
+
+    it('should return false for valid file type for multiple file', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ type: 'foo' }, { type: 'foo' }], {
+        allowedFileTypes: ['foo'],
+      });
+
+      expect(returnVal).to.be.false;
+    });
+
+    it('should return false if no file types are defined, and has small file size', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      const returnVal = fileTypeObj.execute(
+        [
+          // @ts-ignore ignore file typing
+          { type: 'foo', size: 1 },
+          // @ts-ignore ignore file typing
+          { type: 'foo', size: 1 },
+        ],
+        {
+          allowedFileTypes: [],
+          maxFileSize: 1028,
+        },
+      );
+
+      expect(returnVal).to.be.false;
+    });
+
+    it('should return false for valid file type for multiple file and multiple allowed types', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ type: 'foo' }, { type: 'bar' }], {
+        allowedFileTypes: ['foo', 'bar'],
+      });
+
+      expect(returnVal).to.be.false;
+    });
+  });
+
+  describe('invalid file type', () => {
+    it('should return true for invalid file type for single file', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ type: 'bar' }], {
+        allowedFileTypes: ['foo'],
+      });
+
+      expect(returnVal).to.be.true;
+    });
+
+    it('should return false for invalid file type for multiple file', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ type: 'foo' }, { type: 'bar' }], {
+        allowedFileTypes: ['foo'],
+      });
+
+      expect(returnVal).to.be.true;
+    });
+
+    it('should return false for invalid file type for multiple file and multiple allowed types', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ type: 'foo' }, { type: 'pdf' }], {
+        allowedFileTypes: ['foo', 'bar'],
+      });
+
+      expect(returnVal).to.be.true;
+    });
+
+    it('should return true for invalid file type for empty type', async () => {
+      const fileTypeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileTypeObj.execute([{ type: '' }], {
+        allowedFileTypes: ['foo'],
+      });
+
+      expect(returnVal).to.be.true;
+    });
+  });
+
+  describe('valid file size', () => {
+    it('should return false for valid file size for single file', async () => {
+      const fileSizeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileSizeObj.execute([{ size: 5 }], {
+        maxFileSize: 10,
+      });
+
+      expect(returnVal).to.be.false;
+    });
+
+    it('should return false for valid file size for multiple file', async () => {
+      const fileSizeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileSizeObj.execute([{ size: 5 }, { size: 9 }], {
+        maxFileSize: 10,
+      });
+
+      expect(returnVal).to.be.false;
+    });
+  });
+
+  describe('invalid file size', () => {
+    it('should return true for invalid file size for single file', async () => {
+      const fileSizeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileSizeObj.execute([{ size: 5 }], {
+        maxFileSize: 3,
+      });
+
+      expect(returnVal).to.be.true;
+    });
+
+    it('should return false for invalid file size for multiple file', async () => {
+      const fileSizeObj = new IsAcceptedFile();
+      // @ts-ignore ignore file typing
+      const returnVal = fileSizeObj.execute([{ size: 5 }, { size: 9 }], {
+        maxFileSize: 7,
+      });
+
+      expect(returnVal).to.be.true;
+    });
+  });
+});