@lion/ui 0.2.2 → 0.3.0

package/components/form-integrations/test/helpers/umbrella-form.js

@@ -1,29 +1,31 @@
-import { LitElement, html } from 'lit';
-import { Required, MinLength } from '@lion/ui/form-core.js';
-import '@lion/ui/define/lion-form.js';
+import '@lion/ui/define/lion-button-reset.js';
+import '@lion/ui/define/lion-button-submit.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-fieldset.js';
-import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-form.js';
+import '@lion/ui/define/lion-input-amount.js';
 import '@lion/ui/define/lion-input-date.js';
 import '@lion/ui/define/lion-input-datepicker.js';
-import '@lion/ui/define/lion-input-amount.js';
-import '@lion/ui/define/lion-input-iban.js';
 import '@lion/ui/define/lion-input-email.js';
-import '@lion/ui/define/lion-input-tel.js';
+import '@lion/ui/define/lion-input-file.js';
+import '@lion/ui/define/lion-input-iban.js';
+import '@lion/ui/define/lion-input-range.js';
+import '@lion/ui/define/lion-input-stepper.js';
 import '@lion/ui/define/lion-input-tel-dropdown.js';
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-input-tel.js';
+import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-radio-group.js';
 import '@lion/ui/define/lion-radio.js';
-import '@lion/ui/define/lion-select.js';
 import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-import '@lion/ui/define/lion-combobox.js';
-import '@lion/ui/define/lion-input-range.js';
-import '@lion/ui/define/lion-textarea.js';
-import '@lion/ui/define/lion-button.js';
+import '@lion/ui/define/lion-select.js';
 import '@lion/ui/define/lion-switch.js';
-import '@lion/ui/define/lion-input-stepper.js';
+import '@lion/ui/define/lion-textarea.js';
+import { MinLength, Required } from '@lion/ui/form-core.js';
+import { html, LitElement } from 'lit';
 
 export class UmbrellaForm extends LitElement {
   get _lionFormNode() {
@@ -83,6 +85,7 @@ export class UmbrellaForm extends LitElement {
           <lion-input-amount name="money" label="Money"></lion-input-amount>
           <lion-input-iban name="iban" label="Iban"></lion-input-iban>
           <lion-input-email name="email" label="Email"></lion-input-email>
+          <lion-input-file name="file" label="File"></lion-input-file>
           <lion-input-tel name="tel" label="Telephone Number"></lion-input-tel>
           <lion-input-tel-dropdown
             name="tel-dropdown"
@@ -151,7 +154,7 @@ export class UmbrellaForm extends LitElement {
             .validators="${[new Required()]}"
           >
             <lion-checkbox
-              .choiceValue="agreed"
+              .choiceValue="${'agreed'}"
               label="I blindly accept all terms and conditions"
             ></lion-checkbox>
           </lion-checkbox-group>

package/components/input-amount/src/LionInputAmount.js

@@ -31,6 +31,11 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
        * validators.
        */
       modelValue: Number,
+      /**
+       * The slot to put the currency display node in. Can be 'prefix', 'suffix', 'before' and 'after'.
+       * Default will be 'after'.
+       */
+      _currencyDisplayNodeSlot: { attribute: false },
       locale: { attribute: false },
     };
   }
@@ -38,7 +43,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   get slots() {
     return {
       ...super.slots,
-      after: () => {
+      [this._currencyDisplayNodeSlot]: () => {
         const el = document.createElement('span');
         // The data-label attribute will make sure that FormControl adds this to
         // input[aria-labelledby]
@@ -70,6 +75,8 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     this.locale = undefined;
     this.__currencyDisplayNodeIsConnected = true;
     this.defaultValidators.push(new IsNumber());
+    /** @protected */
+    this._currencyDisplayNodeSlot = 'after';
   }
 
   connectedCallback() {
@@ -103,14 +110,14 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
 
   /**
    * Upon connecting slot mixin, we should check if
-   * the after slot was created by the slot mixin,
+   * the required slot was created by the slot mixin,
    * and if so, we should execute the currency changed flow
    * which evaluates whether the slot node should be
    * removed for invalid currencies
    */
   _connectSlotMixin() {
     super._connectSlotMixin();
-    if (this._isPrivateSlot('after')) {
+    if (this._isPrivateSlot(this._currencyDisplayNodeSlot)) {
       this._onCurrencyChanged({ currency: this.currency || null });
     }
   }
@@ -179,7 +186,9 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
    * @private
    */
   get __currencyDisplayNode() {
-    const node = Array.from(this.children).find(child => child.slot === 'after');
+    const node = Array.from(this.children).find(
+      child => child.slot === this._currencyDisplayNodeSlot,
+    );
     if (node) {
       this.__storedCurrencyDisplayNode = node;
     }

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

@@ -3,13 +3,12 @@ import { html } from 'lit';
 import { localize } from '@lion/ui/localize.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { getInputMembers } from '@lion/ui/input-test-helpers.js';
-import { formatAmount, parseAmount } from '@lion/ui/input-amount.js';
+import { LionInputAmount, formatAmount, parseAmount } from '@lion/ui/input-amount.js';
 
 import '@lion/ui/define/lion-input-amount.js';
 
 /**
  * @typedef {import('../../input/src/LionInput.js').LionInput} LionInput
- * @typedef {import('../src/LionInputAmount.js').LionInputAmount} LionInputAmount
  */
 
 describe('<lion-input-amount>', () => {
@@ -187,24 +186,6 @@ describe('<lion-input-amount>', () => {
     ).to.equal('USD');
   });
 
-  it('ignores currency if a suffix is already present', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(
-        `<lion-input-amount currency="EUR"><span slot="suffix">my-currency</span></lion-input-amount>`,
-      )
-    );
-    expect(
-      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
-        ?.innerText,
-    ).to.equal('my-currency');
-    el.currency = 'EUR';
-    await el.updateComplete;
-    expect(
-      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
-        ?.innerText,
-    ).to.equal('my-currency');
-  });
-
   it('reformats on locale changes', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(
@@ -275,6 +256,24 @@ describe('<lion-input-amount>', () => {
     expect(currLabel?.innerText).to.equal('EUR');
   });
 
+  it('can override the currency label slot', async () => {
+    customElements.define(
+      'my-input-amount',
+      class extends LionInputAmount {
+        constructor() {
+          super();
+          // Put the currency label in the suffix slot
+          this._currencyDisplayNodeSlot = 'suffix';
+        }
+      },
+    );
+    const el = await fixture(html`<my-input-amount currency="EUR"></my-input-amount>`);
+    expect(
+      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
+        ?.innerText,
+    ).to.equal('EUR');
+  });
+
   describe('Accessibility', () => {
     it('is accessible', async () => {
       const el = await fixture(

package/components/input-date/src/LionInputDate.js

@@ -2,16 +2,6 @@ import { IsDate } from '@lion/ui/form-core.js';
 import { LionInput } from '@lion/ui/input.js';
 import { formatDate, LocalizeMixin, parseDate } from '@lion/ui/localize-no-side-effects.js';
 
-/**
- * @param {Date|number} date
- */
-function isValidDate(date) {
-  // to make sure it is a valid date we use isNaN and not Number.isNaN
-  // @ts-ignore [allow]: dirty hack, you're not supposed to pass Date instances to isNaN
-  // eslint-disable-next-line no-restricted-globals
-  return date instanceof Date && !isNaN(date);
-}
-
 /**
  * `LionInputDate` has a .modelValue of type Date. It parses, formats and validates based
  * on locale.
@@ -51,7 +41,8 @@ export class LionInputDate extends LocalizeMixin(LionInput) {
    */
   // eslint-disable-next-line class-methods-use-this
   serializer(modelValue) {
-    if (!isValidDate(modelValue)) {
+    const isDate = new IsDate();
+    if (isDate.execute(modelValue)) {
       return '';
     }
     // modelValue is localized, so we take the timezone offset in milliseconds and subtract it

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -4,6 +4,7 @@ import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { html, css } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LionInputDate } from '@lion/ui/input-date.js';
+import { IsDate } from '@lion/ui/form-core.js';
 import {
   OverlayMixin,
   withBottomSheetConfig,
@@ -373,10 +374,12 @@ export class LionInputDatepicker extends ScopedElementsMixin(
    * The LionCalendar shouldn't know anything about the modelValue;
    * it can't handle Unparseable dates, but does handle 'undefined'
    * @param {?} modelValue
-   * @returns {Date|undefined} a 'guarded' modelValue
+   * @returns {Date | undefined} a 'guarded' modelValue
    */
   static __getSyncDownValue(modelValue) {
-    return modelValue instanceof Date ? modelValue : undefined;
+    const isDate = new IsDate();
+    const hasError = isDate.execute(modelValue);
+    return hasError ? undefined : modelValue;
   }
 
   /**

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

@@ -360,6 +360,26 @@ describe('<lion-input-datepicker>', () => {
         expect(el.__calendarMaxDate.toString()).to.equal(new Date('2019/07/15').toString());
       });
 
+      it('should show error on invalid date passed to modelValue', async () => {
+        const myDate = new Date('foo');
+        const el = await fixture(html`
+          <lion-input-datepicker .modelValue="${myDate}"></lion-input-datepicker>
+        `);
+        expect(el.hasFeedbackFor).to.include('error');
+        expect(el.validationStates).to.have.property('error');
+        expect(el.validationStates.error).to.have.property('IsDate');
+      });
+
+      it('should show error on date with invalid format passed to modelValue', async () => {
+        const myDate = new Date('30/01/2022');
+        const el = await fixture(html`
+          <lion-input-datepicker .modelValue="${myDate}"></lion-input-datepicker>
+        `);
+        expect(el.hasFeedbackFor).to.include('error');
+        expect(el.validationStates).to.have.property('error');
+        expect(el.validationStates.error).to.have.property('IsDate');
+      });
+
       /**
        * Not in scope:
        * - min/max attr (like platform has): could be added in future if observers needed

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

@@ -0,0 +1,98 @@
+import { IsAcceptedFile } from './validators.js';
+
+/**
+ * @typedef {import('../types/input-file.js').SystemFile} SystemFile
+ */
+
+// Do these global constants add value? They are only used in this file
+// Typing filehandle would be enough
+
+/**
+ * 500MB in bytes
+ */
+export const MAX_FILE_SIZE = 524288000;
+
+/**
+ * @typedef {Object} property
+ * @property {string} type
+ * @property {string} size
+ */
+export const FILE_FAILED_PROP = {
+  type: 'FILE_TYPE',
+  size: 'FILE_SIZE',
+};
+
+export const UPLOAD_FILE_STATUS = {
+  fail: 'FAIL',
+  pass: 'SUCCESS',
+};
+
+export class FileHandle {
+  /**
+   * @param {SystemFile} systemFile
+   * @param {{ allowedFileTypes: Array<string>; allowedFileExtensions: Array<string>; maxFileSize: number; }} _acceptCriteria
+   */
+  constructor(systemFile, _acceptCriteria) {
+    /**
+     * @type {Array<string>}
+     */
+    this.failedProp = [];
+    this.systemFile = systemFile;
+    this._acceptCriteria = _acceptCriteria;
+    this.uploadFileStatus();
+    if (this.failedProp.length === 0) {
+      this.createDownloadUrl(systemFile);
+    }
+  }
+
+  // TDOO: same util as in validators.js
+  /**
+   * @param {string} fileName
+   * @return {string}
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _getFileNameExtension(fileName) {
+    return fileName.slice(fileName.lastIndexOf('.') + 1);
+  }
+
+  // TODO: seems to suggest upload is going on...
+  // checks the file size and type to set failedProp property
+  uploadFileStatus() {
+    if (this._acceptCriteria.allowedFileExtensions.length) {
+      const fileExtension = this._getFileNameExtension(this.systemFile.name);
+      if (
+        !IsAcceptedFile.isExtensionAllowed(
+          fileExtension,
+          this._acceptCriteria.allowedFileExtensions,
+        )
+      ) {
+        this.status = UPLOAD_FILE_STATUS.fail;
+        this.failedProp.push(FILE_FAILED_PROP.type);
+      }
+    } else if (this._acceptCriteria.allowedFileTypes.length) {
+      const fileType = this.systemFile.type;
+      if (!IsAcceptedFile.isFileTypeAllowed(fileType, this._acceptCriteria.allowedFileTypes)) {
+        this.status = UPLOAD_FILE_STATUS.fail;
+        this.failedProp.push(FILE_FAILED_PROP.type);
+      }
+    }
+
+    if (IsAcceptedFile.checkFileSize(this.systemFile.size, this._acceptCriteria.maxFileSize)) {
+      if (this.status !== UPLOAD_FILE_STATUS.fail) {
+        this.status = UPLOAD_FILE_STATUS.pass;
+      }
+    } else {
+      this.status = UPLOAD_FILE_STATUS.fail;
+      this.failedProp.push(FILE_FAILED_PROP.size);
+    }
+  }
+
+  /**
+   * @param {SystemFile} file
+   */
+  createDownloadUrl(file) {
+    // @ts-ignore
+    this.downloadUrl = window.URL.createObjectURL(file);
+  }
+}