@lion/ui 0.6.0-alpha.0 → 0.6.0-alpha.2

package/components/core/src/ScopedElementsMixin.js

@@ -0,0 +1,146 @@
+/*
+ * This file is combination of '@open-wc/scoped-elements@v3/lit-element.js' and '@open-wc/scoped-elements@v3/html-element.js'.
+ * Then on top of those, some code from '@open-wc/scoped-elements@v2' is brought to to make polyfill not mandatory.
+ *
+ * ## Considerations
+ * In its current state, the [scoped-custom-element-registry](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry) draft spec has uncertainties:
+ * - the spec is not yet final; it's not clear how long it will be dependent on a polyfill
+ * - the polyfill conflicts with new browser functionality (form-associated custom elements in Safari, ShadowRoot.createElement in Chrome Canary, etc.).
+ * - the spsc is not compatible with SSR and it remains unclear if it will be in the future
+ *
+ * Also see: https://github.com/webcomponents/polyfills/issues?q=scoped-custom-element-registry
+ *
+ * In previous considerations (last year), we betted on the spec to evolve quickly and the polyfill to be stable.
+ * Till this day, little progress has been made. In the meantime. @lit-labs/ssr (incompatible with the spec) is released as well.
+ *
+ * This file aims to achieve two things:
+ * = being up to date with the latest version of @open-wc/scoped-elements (v3)
+ * - make the impact of this change for lion as minimal as possible
+ *
+ * In order to achieve the latter, we keep the ability to opt out of the polyfill.
+ * This can be beneficial for performance, bundle size, ease of use and SSR capabilities.
+ *
+ * We will keep a close eye on developments in spec and polyfill, and will re-evaluate the scoped-elements approach when the time is right.
+ */
+
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { adoptStyles } from 'lit';
+import { ScopedElementsMixin as OpenWcLitScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+
+/**
+ * @typedef {import('@open-wc/scoped-elements/lit-element.js').ScopedElementsHost} ScopedElementsHost
+ * @typedef {import('../../form-core/types/validate/ValidateMixinTypes.js').ScopedElementsMap} ScopedElementsMap
+ * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
+ * @typedef {import('lit').LitElement} LitElement
+ * @typedef {typeof import('lit').LitElement} TypeofLitElement
+ * @typedef {import('@open-wc/dedupe-mixin').Constructor<LitElement>} LitElementConstructor
+ * @typedef {import('@open-wc/dedupe-mixin').Constructor<ScopedElementsHost>} ScopedElementsHostConstructor
+ */
+
+const supportsScopedRegistry = Boolean(
+  // @ts-expect-error
+  ShadowRoot.prototype.createElement && ShadowRoot.prototype.importNode,
+);
+
+/**
+ * @template {LitElementConstructor} T
+ * @param {T} superclass
+ */
+const ScopedElementsMixinImplementation = superclass =>
+  /** @type {ScopedElementsHost} */
+  class ScopedElementsHost extends OpenWcLitScopedElementsMixin(superclass) {
+    createScopedElement(/** @type {string} */ tagName) {
+      const root = supportsScopedRegistry ? this.shadowRoot : document;
+      // @ts-expect-error polyfill to support createElement on shadowRoot is loaded
+      return root.createElement(tagName);
+    }
+
+    /**
+     * Defines a scoped element.
+     *
+     * @param {string} tagName
+     * @param {typeof HTMLElement} klass
+     */
+    defineScopedElement(tagName, klass) {
+      // @ts-ignore
+      const registeredClass = this.registry.get(tagName);
+      if (registeredClass && supportsScopedRegistry === false && registeredClass !== klass) {
+        // eslint-disable-next-line no-console
+        console.error(
+          [
+            `You are trying to re-register the "${tagName}" custom element with a different class via ScopedElementsMixin.`,
+            'This is only possible with a CustomElementRegistry.',
+            'Your browser does not support this feature so you will need to load a polyfill for it.',
+            'Load "@webcomponents/scoped-custom-element-registry" before you register ANY web component to the global customElements registry.',
+            'e.g. add "<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>" as your first script tag.',
+            'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
+          ].join('\n'),
+        );
+      }
+      if (!registeredClass) {
+        // @ts-ignore
+        return this.registry.define(tagName, klass);
+      }
+      // @ts-ignore
+      return this.registry.get(tagName);
+    }
+
+    /**
+     * @param {ShadowRootInit} options
+     * @returns {ShadowRoot}
+     */
+    attachShadow(options) {
+      // @ts-ignore
+      const { scopedElements } = /** @type {typeof ScopedElementsHost} */ (this.constructor);
+
+      const shouldCreateRegistry =
+        !this.registry ||
+        // @ts-ignore
+        (this.registry === this.constructor.__registry &&
+          !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
+
+      /**
+       * Create a new registry if:
+       * - the registry is not defined
+       * - this class doesn't have its own registry *AND* has no shared registry
+       * This is important specifically for superclasses/inheritance
+       */
+      if (shouldCreateRegistry) {
+        // @ts-ignore
+        this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
+        for (const [tagName, klass] of Object.entries(scopedElements ?? {})) {
+          this.defineScopedElement(tagName, klass);
+        }
+      }
+
+      return Element.prototype.attachShadow.call(this, {
+        ...options,
+        // The polyfill currently expects the registry to be passed as `customElements`
+        customElements: this.registry,
+        // But the proposal has moved forward, and renamed it to `registry`
+        // For backwards compatibility, we pass it as both
+        registry: this.registry,
+      });
+    }
+
+    createRenderRoot() {
+      const { shadowRootOptions, elementStyles } = /** @type {TypeofLitElement} */ (
+        this.constructor
+      );
+
+      const createdRoot = this.attachShadow(shadowRootOptions);
+      if (supportsScopedRegistry) {
+        // @ts-expect-error
+        this.renderOptions.creationScope = createdRoot;
+      }
+
+      if (createdRoot instanceof ShadowRoot) {
+        adoptStyles(createdRoot, elementStyles);
+        this.renderOptions.renderBefore = this.renderOptions.renderBefore || createdRoot.firstChild;
+      }
+
+      return createdRoot;
+    }
+  };
+
+export const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);

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

@@ -1,6 +1,6 @@
 import sinon from 'sinon';
 import { defineCE, expect, fixture, unsafeStatic, html } from '@open-wc/testing';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { SlotMixin } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
 
@@ -8,25 +8,22 @@ import { LitElement } from 'lit';
  * @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
  */
 
-const mockedRenderTarget = document.createElement('div');
+// @ts-ignore
+const createElementNative = ShadowRoot.prototype.createElement;
 function mockScopedRegistry() {
   const outputObj = { createElementCallCount: 0 };
   // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = () => {
+  ShadowRoot.prototype.createElement = (tagName, options) => {
     outputObj.createElementCallCount += 1;
     // Return an element that lit can use as render target
-    return mockedRenderTarget;
+    return createElementNative(tagName, options);
   };
-  // @ts-expect-error wait for browser support
-  window.CustomElementRegistry = class {};
   return outputObj;
 }
 
 function unMockScopedRegistry() {
   // @ts-expect-error wait for browser support
-  delete ShadowRoot.prototype.createElement;
-  // @ts-expect-error wait for browser support
-  delete window.CustomElementRegistry;
+  ShadowRoot.prototype.createElement = createElementNative;
 }
 
 describe('SlotMixin', () => {
@@ -468,6 +465,8 @@ describe('SlotMixin', () => {
     });
 
     it('does not scope elements when polyfill not loaded', async () => {
+      // @ts-expect-error
+      ShadowRoot.prototype.createElement = null;
       class ScopedEl extends LitElement {}
 
       const tagName = defineCE(
@@ -505,6 +504,7 @@ describe('SlotMixin', () => {
 
       document.body.removeChild(renderTarget);
       docSpy.restore();
+      unMockScopedRegistry();
     });
   });
 });

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

@@ -1,9 +1,9 @@
 /* eslint-disable class-methods-use-this, camelcase, no-param-reassign, max-classes-per-file */
 import { SlotMixin, DisabledMixin } from '@lion/ui/core.js';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 // TODO: make form-core independent from localize
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
+import { ScopedElementsMixin } from '../../../core/src/ScopedElementsMixin.js';
 import { AsyncQueue } from '../utils/AsyncQueue.js';
 import { pascalCase } from '../utils/pascalCase.js';
 import { SyncUpdatableMixin } from '../utils/SyncUpdatableMixin.js';

package/components/form-core/types/validate/ValidateMixinTypes.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { Constructor } from '@open-wc/dedupe-mixin';
-import { ScopedElementsHost } from '@open-wc/scoped-elements/types.js';
 
 import { DisabledHost } from '../../../core/types/DisabledMixinTypes.js';
 import { SlotHost } from '../../../core/types/SlotMixinTypes.js';
@@ -214,6 +213,20 @@ export declare class ValidateHost {
   private __getFeedbackMessages(validators: Validator[]): Promise<FeedbackMessage[]>;
 }
 
+export type ScopedElementsMap = {
+  [key: string]: typeof HTMLElement;
+};
+export declare class ScopedElementsHost {
+  /**
+   * Obtains the scoped elements definitions map
+   */
+  static scopedElements: ScopedElementsMap;
+  /**
+   * Obtains the CustomElementRegistry
+   */
+  registry?: CustomElementRegistry;
+}
+
 export declare function ValidateImplementation<T extends Constructor<LitElement>>(
   superclass: T,
 ): T &

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

@@ -1,7 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LionCalendar } from '@lion/ui/calendar.js';
 import { uuid } from '@lion/ui/core.js';
-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';
@@ -13,6 +12,7 @@ import {
   ArrowMixin,
 } from '@lion/ui/overlays.js';
 import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
+import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
 
 /**

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

@@ -1,8 +1,8 @@
 import { LionField } from '@lion/ui/form-core.js';
 import { LocalizeMixin } from '@lion/ui/localize.js';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { FileHandle, MAX_FILE_SIZE } from './FileHandle.js';
 import { LionSelectedFileList } from './LionSelectedFileList.js';
 import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';

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

@@ -1,10 +1,10 @@
 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 { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
 
 /**

package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js

@@ -49,7 +49,8 @@ class WithFormControlInputTelDropdown extends LionInputTelDropdown {
 runInputTelSuite({ klass: LionInputTelDropdown });
 runInputTelDropdownSuite();
 
-describe('WithFormControlInputTelDropdown', () => {
+// TODO: To be fixed in 4095205
+describe.skip('WithFormControlInputTelDropdown', () => {
   // @ts-expect-error
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
   runInputTelDropdownSuite({ klass: WithFormControlInputTelDropdown });

package/components/listbox/src/ListboxMixin.js

@@ -1,8 +1,8 @@
 import { css, html } from 'lit';
 import { SlotMixin, uuid } from '@lion/ui/core.js';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { ChoiceGroupMixin, FormControlMixin, FormRegistrarMixin } from '@lion/ui/form-core.js';
+import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { LionOptions } from './LionOptions.js';
 
 // TODO: extract ListNavigationWithActiveDescendantMixin that can be reused in [role="menu"]

package/components/overlays/test/local-positioning.test.js

@@ -65,7 +65,8 @@ describe('Local Positioning', () => {
       expect(ctrl._popper.state.modifiersData).to.exist;
     });
 
-    it('positions correctly', async () => {
+    // TODO: To be fixed in 4096926
+    it.skip('positions correctly', async () => {
       // smoke test for integration of popper
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
@@ -206,7 +207,8 @@ describe('Local Positioning', () => {
       expect(ctrl._popper.state.modifiersData.offset.auto).to.eql({ x: 0, y: 16 });
     });
 
-    it('positions the Popper element correctly on show', async () => {
+    // TODO: To be fixed in 4096926
+    it.skip('positions the Popper element correctly on show', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
         contentNode: createContentSync({ width: 80, height: 20 }),

package/components/select-rich/src/LionSelectRich.js

@@ -1,8 +1,8 @@
 import { LionListbox } from '@lion/ui/listbox.js';
 import { html } from 'lit';
 import { SlotMixin, browserDetection } from '@lion/ui/core.js';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js';
+import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { LionSelectInvoker } from './LionSelectInvoker.js';
 
 /**

package/components/switch/src/LionSwitch.js

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { ChoiceInputMixin, LionField } from '@lion/ui/form-core.js';
+import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { LionSwitchButton } from './LionSwitchButton.js';
 
 export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {

package/components/textarea/test/lion-textarea.test.js

@@ -98,7 +98,8 @@ describe('<lion-textarea>', () => {
     expect(hightWith1Line < hightWith5TextLines).to.equal(true);
   });
 
-  it(`starts growing when content is bigger than "rows"
+  // TODO: To be fixed in 4096171
+  it.skip(`starts growing when content is bigger than "rows"
     'and stops growing after property "maxRows" is reached`, async () => {
     const el = await fixture(`<lion-textarea></lion-textarea>`);
     return [1, 2, 3, 4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {
@@ -120,7 +121,8 @@ describe('<lion-textarea>', () => {
   });
 
   // TODO: make test simpler => no reduce please (also update autosize npm dependency to latest version)
-  it('stops growing after property "maxRows" is reached when there was an initial value', async () => {
+  // TODO: To be fixed in 4096171
+  it.skip('stops growing after property "maxRows" is reached when there was an initial value', async () => {
     const el = await fixture(html`<lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea>`);
 
     return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {

package/components/validate-messages/src/getLocalizedMessage.js

@@ -0,0 +1,111 @@
+/**
+ * @typedef {import('../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
+ * @typedef {import('@lion/ui/localize.js').LocalizeManager} LocalizeManager
+ */
+
+/** @type {Promise<void | object>} */
+let pendingPromise;
+
+/**
+ * @param {{localize: LocalizeManager}} opts
+ */
+export async function loadValidateNamespace({ localize }) {
+  if (pendingPromise) {
+    return pendingPromise;
+  }
+
+  pendingPromise = localize.loadNamespace(
+    {
+      'lion-validate': /** @param {string} locale */ locale => {
+        switch (locale) {
+          case 'bg-BG':
+            return import('@lion/ui/validate-messages-translations/bg-BG.js');
+          case 'bg':
+            return import('@lion/ui/validate-messages-translations/bg.js');
+          case 'cs-CZ':
+            return import('@lion/ui/validate-messages-translations/cs-CZ.js');
+          case 'cs':
+            return import('@lion/ui/validate-messages-translations/cs.js');
+          case 'de-DE':
+            return import('@lion/ui/validate-messages-translations/de-DE.js');
+          case 'de':
+            return import('@lion/ui/validate-messages-translations/de.js');
+          case 'en-AU':
+            return import('@lion/ui/validate-messages-translations/en-AU.js');
+          case 'en-GB':
+            return import('@lion/ui/validate-messages-translations/en-GB.js');
+          case 'en-US':
+            return import('@lion/ui/validate-messages-translations/en-US.js');
+          case 'en-PH':
+            return import('@lion/ui/validate-messages-translations/en-PH.js');
+          case 'en':
+            return import('@lion/ui/validate-messages-translations/en.js');
+          case 'es-ES':
+            return import('@lion/ui/validate-messages-translations/es-ES.js');
+          case 'es':
+            return import('@lion/ui/validate-messages-translations/es.js');
+          case 'fr-FR':
+            return import('@lion/ui/validate-messages-translations/fr-FR.js');
+          case 'fr-BE':
+            return import('@lion/ui/validate-messages-translations/fr-BE.js');
+          case 'fr':
+            return import('@lion/ui/validate-messages-translations/fr.js');
+          case 'hu-HU':
+            return import('@lion/ui/validate-messages-translations/hu-HU.js');
+          case 'hu':
+            return import('@lion/ui/validate-messages-translations/hu.js');
+          case 'it-IT':
+            return import('@lion/ui/validate-messages-translations/it-IT.js');
+          case 'it':
+            return import('@lion/ui/validate-messages-translations/it.js');
+          case 'nl-BE':
+            return import('@lion/ui/validate-messages-translations/nl-BE.js');
+          case 'nl-NL':
+            return import('@lion/ui/validate-messages-translations/nl-NL.js');
+          case 'nl':
+            return import('@lion/ui/validate-messages-translations/nl.js');
+          case 'pl-PL':
+            return import('@lion/ui/validate-messages-translations/pl-PL.js');
+          case 'pl':
+            return import('@lion/ui/validate-messages-translations/pl.js');
+          case 'ro-RO':
+            return import('@lion/ui/validate-messages-translations/ro-RO.js');
+          case 'ro':
+            return import('@lion/ui/validate-messages-translations/ro.js');
+          case 'ru-RU':
+            return import('@lion/ui/validate-messages-translations/ru-RU.js');
+          case 'ru':
+            return import('@lion/ui/validate-messages-translations/ru.js');
+          case 'sk-SK':
+            return import('@lion/ui/validate-messages-translations/sk-SK.js');
+          case 'sk':
+            return import('@lion/ui/validate-messages-translations/sk.js');
+          case 'uk-UA':
+            return import('@lion/ui/validate-messages-translations/uk-UA.js');
+          case 'uk':
+            return import('@lion/ui/validate-messages-translations/uk.js');
+          case 'zh-CN':
+          case 'zh':
+            return import('@lion/ui/validate-messages-translations/zh.js');
+          default:
+            return import('@lion/ui/validate-messages-translations/en.js');
+        }
+      },
+    },
+    { locale: localize.locale },
+  );
+
+  return pendingPromise;
+}
+
+/**
+ * @param {{data:FeedbackMessageData; localize: LocalizeManager}} opts
+ * @returns {Promise<string|Element>}
+ */
+export const getLocalizedMessage = async ({ data, localize }) => {
+  await loadValidateNamespace({ localize });
+  if (data) {
+    return localize.msg(`lion-validate:${data.type}.${data.name}`, data);
+  }
+  return '';
+};