@lion/ui 0.5.5 → 0.5.7

package/components/core/src/SlotMixin.js

@@ -195,6 +195,11 @@ const SlotMixinImplementation = superclass =>
         } else if (isRerenderConfig(slotFunctionResult)) {
           // Rerenderable slots are scheduled in the "updated loop"
           this.__slotsThatNeedRerender.add(slotName);
+
+          // For backw. compat, we allow a first render on connectedCallback
+          if (slotFunctionResult.firstRenderOnConnected) {
+            this.__rerenderSlot(slotName);
+          }
         } else {
           throw new Error(
             `Slot "${slotName}" configured inside "get slots()" (in prototype) of ${this.constructor.name} may return these types: TemplateResult | Node | {template:TemplateResult, afterRender?:function} | undefined.

package/components/core/test/SlotMixin.test.js

@@ -1,5 +1,5 @@
 import sinon from 'sinon';
-import { defineCE, expect, fixture, unsafeStatic, html } from '@open-wc/testing';
+import { defineCE, expect, fixture, fixtureSync, unsafeStatic, html } from '@open-wc/testing';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { SlotMixin } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
@@ -300,6 +300,83 @@ describe('SlotMixin', () => {
       expect(document.activeElement).to.equal(el._focusableNode);
       expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
     });
+
+    describe('firstRenderOnConnected (for backwards compatibility)', () => {
+      it('does render on connected when firstRenderOnConnected:true', async () => {
+        // Start with elem that does not render on connectedCallback
+        const tag = defineCE(
+          // @ts-expect-error
+          class extends SlotMixin(LitElement) {
+            static properties = { currentValue: Number };
+
+            constructor() {
+              super();
+              this.currentValue = 0;
+            }
+
+            get slots() {
+              return {
+                ...super.slots,
+                template: () => ({
+                  firstRenderOnConnected: true,
+                  template: html`<span>${this.currentValue}</span> `,
+                }),
+              };
+            }
+
+            render() {
+              return html`<slot name="template"></slot>`;
+            }
+
+            get _templateNode() {
+              return /** @type HTMLSpanElement */ (
+                Array.from(this.children).find(elm => elm.slot === 'template')
+              );
+            }
+          },
+        );
+        const el = /** @type {* & SlotHost} */ (fixtureSync(`<${tag}></${tag}>`));
+        expect(el._templateNode.slot).to.equal('template');
+        expect(el._templateNode.textContent?.trim()).to.equal('0');
+      });
+
+      it('does not render on connected when firstRenderOnConnected:false', async () => {
+        // Start with elem that does not render on connectedCallback
+        const tag = defineCE(
+          // @ts-expect-error
+          class extends SlotMixin(LitElement) {
+            static properties = { currentValue: Number };
+
+            constructor() {
+              super();
+              this.currentValue = 0;
+            }
+
+            get slots() {
+              return {
+                ...super.slots,
+                template: () => ({ template: html`<span>${this.currentValue}</span> ` }),
+              };
+            }
+
+            render() {
+              return html`<slot name="template"></slot>`;
+            }
+
+            get _templateNode() {
+              return /** @type HTMLSpanElement */ (
+                Array.from(this.children).find(elm => elm.slot === 'template')
+              );
+            }
+          },
+        );
+        const el = /** @type {* & SlotHost} */ (fixtureSync(`<${tag}></${tag}>`));
+        expect(el._templateNode).to.be.undefined;
+        await el.updateComplete;
+        expect(el._templateNode.slot).to.equal('template');
+        expect(el._templateNode.textContent?.trim()).to.equal('0');
+      });
+    });
   });
 
   describe('SlotFunctionResult types', () => {

package/components/core/types/SlotMixinTypes.ts

@@ -8,9 +8,16 @@ export type SlotRerenderObject = {
   template: TemplateResult;
   /**
    * Add logic that will be performed after the render
-   * @deprecated
+   * @deprecated use regular ReactiveElement/LitElement reactive cycle callbacks instead
    */
   afterRender?: Function;
+  /**
+   * For backward compat with traditional light render methods,
+   * it might be needed to have slot contents available in `connectedCallback`.
+   * Only enable this for existing components that rely on light content availability in connectedCallback.
+   * For new components, please align with ReactiveElement/LitElement reactive cycle callbacks.
+   */
+  firstRenderOnConnected?: boolean;
 };
 
 export type SlotFunctionResult = TemplateResult | Element | SlotRerenderObject | undefined;

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

@@ -277,7 +277,7 @@ const FormControlMixinImplementation = superclass =>
       super.updated(changedProperties);
 
       if (changedProperties.has('disabled')) {
-        this._inputNode?.setAttribute('aria-disabled', this.disabled.toString());
+        this._inputNode?.setAttribute('aria-disabled', `${Boolean(this.disabled)}`);
       }
 
       if (changedProperties.has('_ariaLabelledNodes')) {

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

@@ -10,6 +10,7 @@ import { SyncUpdatableMixin } from '../utils/SyncUpdatableMixin.js';
 import { LionValidationFeedback } from './LionValidationFeedback.js';
 import { ResultValidator as MetaValidator } from './ResultValidator.js';
 import { Unparseable } from './Unparseable.js';
+// eslint-disable-next-line no-unused-vars
 import { Validator } from './Validator.js';
 import { Required } from './validators/Required.js';
 import { FormControlMixin } from '../FormControlMixin.js';
@@ -460,7 +461,9 @@ export const ValidateMixinImplementation = superclass =>
 
       if (isEmpty) {
         const hasSingleValue = !(/** @type {*  & ValidateHost} */ (this)._isFormOrFieldset);
-        const requiredValidator = this._allValidators.find(v => v instanceof Required);
+        const requiredValidator = this._allValidators.find(
+          v => /** @type {typeof Validator} */ (v.constructor)?.validatorName === 'Required',
+        );
         if (requiredValidator) {
           this.__syncValidationResult = [{ validator: requiredValidator, outcome: true }];
         }
@@ -685,7 +688,10 @@ export const ValidateMixinImplementation = superclass =>
       }
 
       for (const validatorToSetup of this._allValidators) {
-        if (!(validatorToSetup instanceof Validator)) {
+        // disable dot notation to avoid the renaming for the prop during build/minification
+        const validatorCtor = /** @type {typeof Validator}  */ (validatorToSetup.constructor);
+        // eslint-disable-next-line dot-notation
+        if (validatorCtor['_$isValidator$'] === undefined) {
           // throws in constructor are not visible to end user so we do both
           const errorType = Array.isArray(validatorToSetup) ? 'array' : typeof validatorToSetup;
           const errorMessage = `Validators array only accepts class instances of Validator. Type "${errorType}" found. This may be caused by having multiple installations of "@lion/ui/form-core.js".`;

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

@@ -1,10 +1,10 @@
 /**
  * @typedef {import('../../types/validate/index.js').FeedbackMessageData} FeedbackMessageData
- * @typedef {import('../../types/validate/index.js').ValidatorParam} ValidatorParam
- * @typedef {import('../../types/validate/index.js').ValidatorConfig} ValidatorConfig
  * @typedef {import('../../types/validate/index.js').ValidatorOutcome} ValidatorOutcome
- * @typedef {import('../../types/validate/index.js').ValidatorName} ValidatorName
+ * @typedef {import('../../types/validate/index.js').ValidatorConfig} ValidatorConfig
+ * @typedef {import('../../types/validate/index.js').ValidatorParam} ValidatorParam
  * @typedef {import('../../types/validate/index.js').ValidationType} ValidationType
+ * @typedef {import('../../types/validate/index.js').ValidatorName} ValidatorName
  * @typedef {import('../FormControlMixin.js').FormControlHost} FormControlHost
  */
 
@@ -32,8 +32,22 @@ export class Validator extends EventTarget {
      * @type {ValidationType}
      */
     this.type = config?.type || 'error';
+    /**
+     * Disable dot notation to avoid the renaming for the prop during build/minification
+     */
   }
 
+  /**
+   * This unique marker allows us to identify Validator instances across different lion versions.
+   * It's meant to be used as a replacement for an instanceof check.
+   *
+   * N.B. it's important to keep the bracket notation, as `static _$isValidator$ = true;` will
+   * be renamed during minification and that leads to different names across different
+   * lion versions.
+   * @type {boolean}
+   */
+  static ['_$isValidator$'] = true;
+
   /**
    * The name under which validation results get registered. For convenience and predictability, this
    * should always be the same as the constructor name (since it will be obfuscated in js builds,

package/components/form-core/test/validate/Validator.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable dot-notation */
 import { LitElement } from 'lit';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
@@ -187,6 +188,13 @@ describe('Validator', () => {
     expect(disconnectSpy.calledWith(el)).to.equal(true);
   });
 
+  it('adds static ["_$isValidator$"] property as a marker to identify the Validator class across different lion versions (as instanceof cannot be used)', async () => {
+    const myValidator = new Validator();
+
+    expect(myValidator.constructor['_$isValidator$']).to.exist;
+    expect(myValidator.constructor['_$isValidator$']).to.be.true;
+  });
+
   describe('Types', () => {
     it('has type "error" by default', async () => {
       expect(new Validator().type).to.equal('error');

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

@@ -175,6 +175,11 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
 
     /** @private */
     this.__duplicateFileNamesValidator = new DuplicateFileNames({ show: false });
+    /**
+     * @private
+     * @type {FileList | null}
+     */
+    this.__previouslyParsedFiles = null;
   }
 
   /**
@@ -282,8 +287,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;
   }
 
   /**
@@ -481,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)));
   }
 
   /**

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

@@ -1,7 +1,7 @@
 import '@lion/ui/define/lion-input-file.js';
 import { Required } from '@lion/ui/form-core.js';
 import { getInputMembers } from '@lion/ui/input-test-helpers.js';
-import { expect, fixture as _fixture, html, oneEvent } from '@open-wc/testing';
+import { expect, fixture as _fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
 import sinon from 'sinon';
 
 /**
@@ -556,19 +556,22 @@ describe('lion-input-file', () => {
       });
       const fileListChangedEvent = await oneEvent(el, 'file-list-changed');
       filesListChanged(el, fileListChangedEvent);
-      await el.updateComplete;
+      await elementUpdated(el);
 
       // @ts-expect-error [allow-protected-in-test]
       expect(el._selectedFilesMetaData.length).to.equal(2);
+      expect(el.modelValue.length).to.equal(2);
 
       setTimeout(() => {
         mimicSelectFile(el, [file3, file4]);
       });
       const fileListChangedEvent1 = await oneEvent(el, 'file-list-changed');
       filesListChanged(el, fileListChangedEvent1);
-      await el.updateComplete;
+      await elementUpdated(el);
+
       // @ts-expect-error [allow-protected-in-test]
       expect(el._selectedFilesMetaData.length).to.equal(4);
+      expect(el.modelValue.length).to.equal(4);
     });
 
     it('should add multiple files and dispatch file-list-changed event ONLY with newly added file', async () => {
@@ -958,6 +961,37 @@ describe('lion-input-file', () => {
       expect(el.hasAttribute('is-dragging')).to.equal(false);
     });
 
+    it('should update modelValue on drop', async () => {
+      const list = new DataTransfer();
+      // @ts-ignore
+      list.items.add(file);
+      const droppedFiles = list.files;
+
+      // @ts-expect-error [allow-protected-in-test]
+      await el._processDroppedFiles({
+        // @ts-ignore
+        dataTransfer: { files: droppedFiles, items: [{ name: 'test.txt' }] },
+        preventDefault: () => {},
+      });
+      await el.updateComplete;
+
+      expect(el.modelValue.length).to.equal(1);
+
+      const list2 = new DataTransfer();
+      // @ts-ignore
+      list2.items.add(file2);
+
+      // @ts-expect-error [allow-protected-in-test]
+      await el._processDroppedFiles({
+        // @ts-ignore
+        dataTransfer: { files: list2.files, items: [{ name: 'test2.txt' }] },
+        preventDefault: () => {},
+      });
+      await el.updateComplete;
+
+      expect(el.modelValue.length).to.equal(2);
+    });
+
     it('should call _processFiles method', async () => {
       const list = new DataTransfer();
       // @ts-ignore