ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2231 from ing-bank/release-0.6.0

Browse source 
Release 0.6.0
This commit is contained in:
Thijs Louisse 2024-03-27 18:25:15 +01:00 committed by GitHub
commit 79a64674f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
38 changed files with 2414 additions and 393 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/blog/lion-without-polyfills.md
View file

@ -23,7 +23,7 @@ To clarify: within Lion class files we never import files that run `customElemen
```js
import { LitElement, html } from 'lit';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { MyCardHeader } from './MyCardHeader.js';
export class MyCard extends ScopedElementsMixin(LitElement) {
@ -78,7 +78,7 @@ Be sure to always define **ALL** the sub elements you are using in your template
```js
import { LitElement, html } from 'lit';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { MyCardHeader } from './MyCardHeader.js';
export class MyCard extends ScopedElementsMixin(LitElement) {

4
docs/components/accordion/overview.md
View file

@ -8,7 +8,7 @@ import { html as previewHtml } from '@mdjs/mdjs-preview';
```js preview-story
import { html, LitElement } from 'lit';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { LionAccordion } from '@lion/ui/accordion.js';
class MyComponent extends ScopedElementsMixin(LitElement) {
@ -83,7 +83,7 @@ npm i --save @lion/ui
```js
import { html, LitElement } from 'lit';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { LionAccordion } from '@lion/ui/accordion.js';
class MyComponent extends ScopedElementsMixin(LitElement) {

1
docs/components/fieldset/use-cases.md
View file

@ -4,7 +4,6 @@
import { html } from '@mdjs/mdjs-preview';
import { localize } from '@lion/ui/localize.js';
import { MinLength, Validator, Required } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/ui/define/lion-input.js';
import '@lion/ui/define/lion-fieldset.js';

19
docs/components/form/overview.md
View file

@ -11,14 +11,25 @@ A web component that enhances the functionality of the native `form` component.
It is designed to interact with (instances of) the [form controls](../../fundamentals/systems/form/overview.md).
```js preview-story
export const main = () => html`
<lion-form>
<form>
export const main = () => {
const submitHandler = ev => {
const formData = ev.target.serializedValue;
console.log('formData', formData);
fetch('/api/foo/', {
method: 'POST',
body: JSON.stringify(formData),
});
};
return html`
<lion-form @submit=${submitHandler}>
<form @submit=${ev => ev.preventDefault()}>
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<button>Submit</button>
</form>
</lion-form>
`;
`;
};
```
## Features

16
docs/components/form/use-cases.md
View file

@ -10,32 +10,28 @@ import '@lion/ui/define/lion-form.js';
## Submit & Reset
To submit a form, use a regular button (or `LionButtonSubmit`) somewhere inside the native `<form>`.
To submit a form, use a regular `<button>` (or `<lion-button-submit>`) somewhere inside the native `<form>`.
Then, add a `submit` handler on the `lion-form`.
Then, add a `submit` handler on the `<lion-form>`.
You can use this event to do your own (pre-)submit logic, like getting the serialized form data and sending it to a backend API.
Another example is checking if the form has errors, and focusing the first field with an error.
To fire a submit from JavaScript, select the `lion-form` element and call `.submit()`.
To fire a submit from JavaScript, select the `<lion-form>` element and call `.submit()`.
```js preview-story
export const formSubmit = () => {
loadDefaultFeedbackMessages();
const submitHandler = ev => {
if (ev.target.hasFeedbackFor.includes('error')) {
const firstFormElWithError = ev.target.formElements.find(el =>
el.hasFeedbackFor.includes('error'),
);
firstFormElWithError.focus();
return;
}
const formData = ev.target.serializedValue;
console.log('formData', formData);
if (!ev.target.hasFeedbackFor?.includes('error')) {
fetch('/api/foo/', {
method: 'POST',
body: JSON.stringify(formData),
});
}
};
const submitViaJS = ev => {
// Call submit on the lion-form element, in your own code you should use

2
docs/components/input-file/use-cases.md
View file

@ -4,7 +4,7 @@
import { Required, Validator } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { html } from '@mdjs/mdjs-preview';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { LitElement } from 'lit';
import '@lion/ui/define/lion-input-file.js';
loadDefaultFeedbackMessages();

2
docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
View file

@ -1,4 +1,4 @@
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { html, css } from 'lit';
import { ref } from 'lit/directives/ref.js';
import { repeat } from 'lit/directives/repeat.js';

4
docs/components/switch/overview.md
View file

@ -9,7 +9,7 @@ import '@lion/ui/define/lion-switch.js';
```js preview-story
import { html, LitElement } from 'lit';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { LionSwitch } from '@lion/ui/switch.js';
class MyComponent extends ScopedElementsMixin(LitElement) {
@ -51,7 +51,7 @@ npm i --save @lion/ui
```js
import { html, LitElement } from 'lit';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { LionSwitch } from '@lion/ui/switch.js';
class MyComponent extends ScopedElementsMixin(LitElement) {

21
docs/fundamentals/systems/form/use-cases.md
View file

@ -30,6 +30,8 @@ import '@lion/ui/define/lion-select.js';
import '@lion/ui/define/lion-select-rich.js';
import '@lion/ui/define/lion-switch.js';
import '@lion/ui/define/lion-textarea.js';
import '@lion/ui/define/lion-button-submit.js';
import '@lion/ui/define/lion-button-reset.js';
import { MinLength, Required } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
```
@ -39,7 +41,6 @@ import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
```js preview-story
export const main = () => {
loadDefaultFeedbackMessages();
Required.getMessage = () => 'Please enter a value';
return html`
<lion-form>
<form>
@ -47,11 +48,13 @@ export const main = () => {
<lion-input
name="firstName"
label="First Name"
.fieldName="${'first name'}"
.validators="${[new Required()]}"
></lion-input>
<lion-input
name="lastName"
label="Last Name"
.fieldName="${'last name'}"
.validators="${[new Required()]}"
></lion-input>
</lion-fieldset>
@ -70,6 +73,7 @@ export const main = () => {
<lion-textarea
name="bio"
label="Biography"
.fieldName="${'value'}"
.validators="${[new Required(), new MinLength(10)]}"
help-text="Please enter at least 10 characters"
></lion-textarea>
@ -82,6 +86,7 @@ export const main = () => {
label="What do you like?"
name="checkers"
.validators="${[new Required()]}"
.fieldName="${'value'}"
>
<lion-checkbox .choiceValue=${'foo'} label="I like foo"></lion-checkbox>
<lion-checkbox .choiceValue=${'bar'} label="I like bar"></lion-checkbox>
@ -90,6 +95,7 @@ export const main = () => {
<lion-radio-group
name="dinosaurs"
label="Favorite dinosaur"
.fieldName="${'dinosaur'}"
.validators="${[new Required()]}"
>
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
@ -136,18 +142,23 @@ export const main = () => {
label="Input range"
></lion-input-range>
<lion-checkbox-group
.multipleChoice="${false}"
name="terms"
.validators="${[new Required()]}"
.validators="${[
new Required('', {
getMessage: () => `Please accept our terms.`,
}),
]}"
>
<lion-checkbox label="I blindly accept all terms and conditions"></lion-checkbox>
<lion-checkbox
.choiceValue="${'true'}"
label="I blindly accept all terms and conditions"
></lion-checkbox>
</lion-checkbox-group>
<lion-switch name="notifications" label="Notifications"></lion-switch>
<lion-input-stepper max="5" min="0" name="rsvp">
<label slot="label">RSVP</label>
<div slot="help-text">Max. 5 guests</div>
</lion-input-stepper>
<lion-textarea name="comments" label="Comments"></lion-textarea>
<div class="buttons">
<lion-button-submit>Submit</lion-button-submit>
<lion-button-reset

38
docs/guides/principles/scoped-elements.md
View file

@ -7,7 +7,8 @@ apply ScopedElementsMixin to make sure it uses the right version of this interna
```js
import { LitElement, html } from '@lion/ui/core.js';
import { ScopedElementsMixin, LitElement, html } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { html, LitElement } from 'lit';
import { LionInput } from '@lion/ui/input.js';
import { LionButton } from '@lion/ui/button.js';
@ -29,28 +30,31 @@ class MyElement extends ScopedElementsMixin(LitElement) {
}
```
## Query selectors
## Polyfill
Since Scoped Elements changes tagnames under the hood, a tagname querySelector should be written like this:
This package requires use of the Scoped Custom Element Registry polyfill. Make sure to load it as the first thing in your application:
```js
this.querySelector(
this.constructor.getScopedTagName('lion-input', this.constructor.scopedElements),
);
import '@webcomponents/scoped-custom-element-registry';
```
## CSS selectors
If you're using `@web/rollup-plugin-polyfills-loader`, you can use it in your rollup config like this:
Avoid tagname css selectors.
We already avoid query selectors internally in lion, but just be aware that a selector like
```css
lion-input {
padding: 20px;
}
```js
polyfillsLoader({
polyfills: {
scopedCustomElementRegistry: true,
},
});
```
will stop working.
If you're using `@web/dev-server` for local development, you can use the `@web/dev-server-polyfill` plugin:
```js
polyfill({
scopedCustomElementRegistry: true,
});
```
## Edge cases
@ -91,12 +95,12 @@ In a less complex case, we might just want to add a child node to the dom.
```js
import { LitElement } from 'lit';
import { ScopedElementsMixin, getScopedTagName } from '@open-wc/scoped-elements';
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
...
__getLightDomNode() {
return document.createElement(getScopedTagName('lion-input', this.constructor.scopedElements));
return document.createElement('lion-input', this.constructor.scopedElements);
}
```

1279
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -55,6 +55,7 @@
"@rocket/cli": "^0.10.2",
"@rocket/launch": "^0.6.0",
"@rocket/search": "^0.5.1",
"@types/autosize": "^4.0.3",
"@types/chai-as-promised": "^7.1.5",
"@types/chai-dom": "^0.0.8",
"@types/convert-source-map": "^1.5.2",

162
packages-node/providence-analytics/test-node/program/analyzers/e2e/match-imports_-_importing-target-project_0.0.2-target-mock_+_exporting-ref-project_1.0.0__1789378150.json Normal file
View file

@ -0,0 +1,162 @@
{
"meta": {
"searchType": "ast-analyzer",
"analyzerMeta": {
"name": "match-imports",
"requiredAst": "swc",
"identifier": "importing-target-project_0.0.2-target-mock_+_exporting-ref-project_1.0.0__1789378150",
"targetProject": {
"mainEntry": "./target-src/match-imports/root-level-imports.js",
"name": "importing-target-project",
"version": "0.0.2-target-mock",
"commitHash": "[not-a-git-root]"
},
"referenceProject": {
"mainEntry": "./index.js",
"name": "exporting-ref-project",
"version": "1.0.0",
"commitHash": "[not-a-git-root]"
},
"configuration": {
"gatherFilesConfig": {},
"targetProjectResult": null,
"referenceProjectResult": null,
"skipCheckMatchCompatibility": false,
"addSystemPathsInResult": false
}
}
},
"queryOutput": [
{
"exportSpecifier": {
"id": "[default]::./index.js::exporting-ref-project",
"name": "[default]",
"filePath": "./index.js",
"project": "exporting-ref-project"
},
"matchesPerProject": [
{
"project": "importing-target-project",
"files": [
"./target-src/match-imports/root-level-imports.js",
"./target-src/match-subclasses/internalProxy.js"
]
}
]
},
{
"exportSpecifier": {
"id": "RefClass::./index.js::exporting-ref-project",
"name": "RefClass",
"filePath": "./index.js",
"project": "exporting-ref-project"
},
"matchesPerProject": [
{
"project": "importing-target-project",
"files": [
"./target-src/find-customelements/multiple.js",
"./target-src/match-imports/root-level-imports.js",
"./target-src/match-subclasses/ExtendedComp.js"
]
}
]
},
{
"exportSpecifier": {
"id": "RefRenamedClass::./index.js::exporting-ref-project",
"name": "RefRenamedClass",
"filePath": "./index.js",
"project": "exporting-ref-project"
},
"matchesPerProject": [
{
"project": "importing-target-project",
"files": [
"./target-src/match-imports/root-level-imports.js"
]
}
]
},
{
"exportSpecifier": {
"id": "[file]::./ref-component.js::exporting-ref-project",
"name": "[file]",
"filePath": "./ref-component.js",
"project": "exporting-ref-project"
},
"matchesPerProject": [
{
"project": "importing-target-project",
"files": [
"./target-src/match-imports/deep-imports.js"
]
}
]
},
{
"exportSpecifier": {
"id": "RefClass::./ref-src/core.js::exporting-ref-project",
"name": "RefClass",
"filePath": "./ref-src/core.js",
"project": "exporting-ref-project"
},
"matchesPerProject": [
{
"project": "importing-target-project",
"files": [
"./target-src/match-imports/deep-imports.js"
]
}
]
},
{
"exportSpecifier": {
"id": "[default]::./ref-src/core.js::exporting-ref-project",
"name": "[default]",
"filePath": "./ref-src/core.js",
"project": "exporting-ref-project"
},
"matchesPerProject": [
{
"project": "importing-target-project",
"files": [
"./target-src/match-imports/deep-imports.js"
]
}
]
},
{
"exportSpecifier": {
"id": "[file]::./ref-src/core.js::exporting-ref-project",
"name": "[file]",
"filePath": "./ref-src/core.js",
"project": "exporting-ref-project"
},
"matchesPerProject": [
{
"project": "importing-target-project",
"files": [
"./target-src/match-imports/deep-imports.js"
]
}
]
},
{
"exportSpecifier": {
"id": "resolvePathCorrect::./ref-src/folder/index.js::exporting-ref-project",
"name": "resolvePathCorrect",
"filePath": "./ref-src/folder/index.js",
"project": "exporting-ref-project"
},
"matchesPerProject": [
{
"project": "importing-target-project",
"files": [
"./target-src/match-imports/deep-imports.js"
]
}
]
}
]
}

22
packages/ui/CHANGELOG.md
View file

@ -1,5 +1,27 @@
# @lion/ui
## 0.6.0
BREAKING:
- [form] set focus to the first erroneous form element on submit (mildly breaking, since it could conflict with custom focus management)
- Update to lit version 3
- Moved to scoped-elements v3
### Patch Changes
- [input-tel-dropdown] use ScopedElementsMixin in to run test-suite with select-rich
- [core] add Firefox to browserDetection
- [textarea] set box-sizing in tests to make it work cross browser
- [input-stepper] fix the toggling of the disabled state for the buttons
- [core] update types for ScopedElementsMixin
- [form-core] order aria-labelledby and aria-describedby based on slot order instead of dom order
- [input-range] add screen-reader labels for minimum and maximum value
- [form-core] remove fieldset label/helpt-text from input-field aria-labelledby/aria-describedby. See https://github.com/ing-bank/lion/issues/1576
- [validation-messages] get correct validation min and max dates in French
- [form-core]: set aria-disabled next to the disabled attribute for NVDA screen reader
- [input-stepper] a11y enhancement & added translations
- [checkbox-group] add role="list" and role="listitem" to checkbox-indeterminate and its children
## 0.5.6
### Patch Changes

148
packages/ui/components/core/src/ScopedElementsMixin.js Normal file
View file

@ -0,0 +1,148 @@
/*
* 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
* @typedef {import('./types.js').ScopedElementsHostV2Constructor} ScopedElementsHostV2Constructor
*/
const supportsScopedRegistry = Boolean(
// @ts-expect-error
ShadowRoot.prototype.createElement && ShadowRoot.prototype.importNode,
);
/**
* @template {LitElementConstructor} T
* @param {T} superclass
* @return {T & ScopedElementsHostConstructor & ScopedElementsHostV2Constructor}
*/
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);

1
packages/ui/components/core/src/browserDetection.js
View file

@ -35,6 +35,7 @@ export const browserDetection = {
isChrome: checkChrome(),
isIOSChrome: checkChrome('ios'),
isChromium: checkChrome('chromium'),
isFirefox: navigator.userAgent.toLowerCase().indexOf('firefox') > -1,
isMac: navigator.appVersion.indexOf('Mac') !== -1,
isIOS: /iPhone|iPad|iPod/i.test(navigator.userAgent),
isMacSafari:

19
packages/ui/components/core/src/types.ts Normal file
View file

@ -0,0 +1,19 @@
// Note. This file is a partial copy of https://github.com/open-wc/open-wc/blob/scoped-elements-v2/packages/scoped-elements/src/types.d.ts
import { Constructor } from '@open-wc/dedupe-mixin';
export declare class ScopedElementsHostV2 {
/**
* Defines a scoped element inside the CustomElementRegistry bound to the shadowRoot.
*/
defineScopedElement<T extends HTMLElement>(tagName: string, klass: Constructor<T>): void;
/**
* Create a scoped element inside the CustomElementRegistry bound to the shadowRoot.
*
* @param tagName string The tag name of the element to create
*/
createScopedElement(tagName: string): HTMLElement;
}
export type ScopedElementsHostV2Constructor = Constructor<ScopedElementsHostV2>;

19
packages/ui/components/core/test/SlotMixin.test.js
View file

@ -1,6 +1,6 @@
import sinon from 'sinon';
import { defineCE, expect, fixture, fixtureSync, 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', () => {
@ -514,6 +511,7 @@ describe('SlotMixin', () => {
class ScopedEl extends LitElement {}
const tagName = defineCE(
// @ts-ignore
class extends ScopedElementsMixin(SlotMixin(LitElement)) {
static get scopedElements() {
return {
@ -545,6 +543,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(
@ -582,6 +582,7 @@ describe('SlotMixin', () => {
document.body.removeChild(renderTarget);
docSpy.restore();
unMockScopedRegistry();
});
});
});

2
packages/ui/components/form-core/src/validate/ValidateMixin.js
View file

@ -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';

15
packages/ui/components/form-core/types/validate/ValidateMixinTypes.ts
View file

@ -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';
@ -216,6 +215,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 &

24
packages/ui/components/form/src/LionForm.js
View file

@ -1,5 +1,9 @@
import { LionFieldset } from '@lion/ui/fieldset.js';
/**
* @typedef {import('../../form-core/types/registration/FormRegistrarMixinTypes.js').FormRegistrarHost} FormRegistrarHost
*/
const throwFormNodeError = () => {
throw new Error(
'No form node found. Did you put a <form> element inside your custom-form element?',
@ -57,6 +61,10 @@ export class LionForm extends LionFieldset {
ev.stopPropagation();
this.submitGroup();
this.dispatchEvent(new Event('submit', { bubbles: true }));
if (this.hasFeedbackFor?.includes('error')) {
this._setFocusOnFirstErroneousFormElement(this);
}
}
reset() {
@ -78,6 +86,22 @@ export class LionForm extends LionFieldset {
this.dispatchEvent(new Event('reset', { bubbles: true }));
}
/**
* @param {FormRegistrarHost} element
* @protected
*/
_setFocusOnFirstErroneousFormElement(element) {
const firstFormElWithError =
element.formElements.find(child => child.hasFeedbackFor.includes('error')) ||
element.formElements[0];
if (firstFormElWithError.formElements?.length > 0) {
this._setFocusOnFirstErroneousFormElement(firstFormElWithError);
} else {
firstFormElWithError._focusableNode.focus();
}
}
/** @private */
__registerEventsForLionForm() {
this._formNode.addEventListener('submit', this._submit);

68
packages/ui/components/form/test/lion-form.test.js
View file

@ -1,6 +1,6 @@
import { LionFieldset } from '@lion/ui/fieldset.js';
import '@lion/ui/define/lion-fieldset.js';
import { LionField } from '@lion/ui/form-core.js';
import { LionField, Required } from '@lion/ui/form-core.js';
import '@lion/ui/define/lion-field.js';
import '@lion/ui/define/lion-validation-feedback.js';
@ -191,7 +191,7 @@ describe('<lion-form>', () => {
const el = await fixture(html`
<lion-form>
<form>
<button type="reset">submit</button>
<button type="reset">reset</button>
</form>
</lion-form>
`);
@ -202,4 +202,68 @@ describe('<lion-form>', () => {
expect(dispatchSpy.args[0][0].type).to.equal('reset');
expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
});
it('sets focus on submit to the first erroneous form element', async () => {
const el = await fixture(html`
<lion-form>
<form>
<${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
new Required(),
]}></${childTag}>
<${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
<button type="submit">submit</button>
</form>
</lion-form>
`);
const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
const dispatchSpy = spy(el, 'dispatchEvent');
button.click();
expect(dispatchSpy.args[0][0].type).to.equal('submit');
// @ts-ignore [allow-protected] in test
expect(document.activeElement).to.equal(el.formElements[1]._inputNode);
});
it('sets focus on submit to the first erroneous form element with a fieldset', async () => {
const el = await fixture(html`
<lion-form>
<form>
<lion-fieldset name="name">
<${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
new Required(),
]}></${childTag}>
<${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
</lion-fieldset>
<button type="submit">submit</button>
</form>
</lion-form>
`);
const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
const dispatchSpy = spy(el, 'dispatchEvent');
button.click();
expect(dispatchSpy.args[0][0].type).to.equal('submit');
const fieldset = el.formElements[0];
// @ts-ignore [allow-protected] in test
expect(document.activeElement).to.equal(fieldset.formElements[1]._inputNode);
});
it('sets focus on submit to the first form element within a erroneous fieldset', async () => {
const el = await fixture(html`
<lion-form>
<form>
<lion-fieldset name="name" .validators=${[new Required()]}>
<${childTag} name="firstName"></${childTag}>
<${childTag} name="lastName"></${childTag}>
</lion-fieldset>
<button type="submit">submit</button>
</form>
</lion-form>
`);
const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
const dispatchSpy = spy(el, 'dispatchEvent');
button.click();
expect(dispatchSpy.args[0][0].type).to.equal('submit');
const fieldset = el.formElements[0];
// @ts-ignore [allow-protected] in test
expect(document.activeElement).to.equal(fieldset.formElements[0]._inputNode);
});
});

2
packages/ui/components/input-datepicker/src/LionInputDatepicker.js
View file

@ -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';
/**

2
packages/ui/components/input-file/src/LionInputFile.js
View file

@ -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';

2
packages/ui/components/input-file/src/LionSelectedFileList.js
View file

@ -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';
/**

1
packages/ui/components/input-iban/src/formatters.js
View file

@ -11,5 +11,6 @@ export function formatIBAN(modelValue) {
if (!modelValue) {
return '';
}
// @ts-ignore should not return null
return friendlyFormatIBAN(modelValue);
}

5
packages/ui/components/input-stepper/src/LionInputStepper.js
View file

@ -196,7 +196,10 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
const incrementButton = this.__getSlot('suffix');
const disableIncrementor = this.currentValue >= max && max !== Infinity;
const disableDecrementor = this.currentValue <= min && min !== Infinity;
if (disableDecrementor || disableIncrementor) {
if (
(disableDecrementor && decrementButton === document.activeElement) ||
(disableIncrementor && incrementButton === document.activeElement)
) {
this._inputNode.focus();
}
decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');

17
packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
View file

@ -3,11 +3,11 @@ import { repeat } from 'lit/directives/repeat.js';
import { ref } from 'lit/directives/ref.js';
import { aTimeout, expect, fixture, html } from '@open-wc/testing';
import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
import { LionOption } from '@lion/ui/listbox.js';
import { LionSelectRich } from '@lion/ui/select-rich.js';
import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js';
import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
import '@lion/ui/define/lion-option.js';
import '@lion/ui/define/lion-select-rich.js';
import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
/**
* @typedef {import('lit').TemplateResult} TemplateResult
@ -16,7 +16,16 @@ import '@lion/ui/define/lion-select-rich.js';
* @typedef {import('../types/index.js').RegionMeta} RegionMeta
*/
class WithFormControlInputTelDropdown extends LionInputTelDropdown {
class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdown) {
/**
* @configure ScopedElementsMixin
*/
static scopedElements = {
...super.scopedElements,
'lion-select-rich': LionSelectRich,
'lion-option': LionOption,
};
static templates = {
...(super.templates || {}),
/**

2
packages/ui/components/listbox/src/ListboxMixin.js
View file

@ -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"]

11
packages/ui/components/overlays/test/local-positioning.test.js
View file

@ -2,6 +2,7 @@
import { expect, fixture, fixtureSync } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
import { OverlayController } from '@lion/ui/overlays.js';
import { browserDetection } from '@lion/ui/core.js';
import { normalizeTransformStyle } from '../test-helpers/normalizeTransformStyle.js';
/**
@ -85,6 +86,11 @@ describe('Local Positioning', () => {
`);
await ctrl.show();
// TODO: test fails on Firefox, but looks fine in browser => try again in a later version and investigate when persists (or move to anchor positioning when available in all browsers)
if (browserDetection.isFirefox) {
return;
}
expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
'translate(70px, -508px)',
);
@ -223,6 +229,11 @@ describe('Local Positioning', () => {
await ctrl.show();
// TODO: test fails on Firefox, but looks fine in browser => try again in a later version and investigate when persists (or move to anchor positioning when available in all browsers)
if (browserDetection.isFirefox) {
return;
}
// N.B. margin between invoker and content = 8px
expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
'translate(110px, -308px)',

2
packages/ui/components/select-rich/src/LionSelectRich.js
View file

@ -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';
/**

2
packages/ui/components/switch/src/LionSwitch.js
View file

@ -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)) {

4
packages/ui/components/textarea/src/LionTextarea.js
View file

@ -1,6 +1,5 @@
/* eslint-disable max-classes-per-file */
// @ts-expect-error [external]: https://github.com/jackmoore/autosize/pull/384 wait for this, then we can switch to just 'autosize'; and then types will work!
import autosize from 'autosize/src/autosize.js';
import autosize from 'autosize';
import { LionField, NativeTextFieldMixin } from '@lion/ui/form-core.js';
import { css } from 'lit';
@ -155,6 +154,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
...super.styles,
css`
.input-group__container > .input-group__input ::slotted(.form-control) {
box-sizing: content-box;
overflow-x: hidden; /* for FF adds height to the TextArea to reserve place for scroll-bars */
}

15
packages/ui/components/textarea/test/lion-textarea.test.js
View file

@ -12,11 +12,6 @@ import '@lion/ui/define/lion-textarea.js';
const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionTextarea>} */ (_fixture);
const isFirefox = (() => {
const ua = navigator.userAgent.toLowerCase();
return ua.indexOf('firefox') !== -1 && ua.indexOf('safari') === -1 && ua.indexOf('chrome') === -1;
})();
function hasBrowserResizeSupport() {
const textarea = document.createElement('textarea');
return textarea.style.resize !== undefined;
@ -100,7 +95,7 @@ describe('<lion-textarea>', () => {
it(`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>`);
const el = await fixture(html`<lion-textarea></lion-textarea>`);
return [1, 2, 3, 4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {
const oldHeight = await heightPromise;
el.modelValue += '\n';
@ -119,10 +114,9 @@ describe('<lion-textarea>', () => {
}, Promise.resolve(0));
});
// TODO: make test simpler => no reduce please (also update autosize npm dependency to latest version)
// TODO: make test simpler => no reduce please
it('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>`);
const el = await fixture(html` <lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea> `);
return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {
const oldHeight = await heightPromise;
el.modelValue += `\n`;
@ -131,10 +125,7 @@ describe('<lion-textarea>', () => {
if (i > el.maxRows) {
// stop growing
// TODO: fails on Firefox => fix it
if (!isFirefox) {
expect(newHeight).to.equal(oldHeight);
}
} else if (i > el.rows) {
// growing normally
expect(newHeight >= oldHeight).to.equal(true);

18
packages/ui/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@lion/ui",
"version": "0.5.6",
"version": "0.6.0",
"description": "A package of extendable web components",
"license": "MIT",
"author": "ing-bank",
@ -61,14 +61,14 @@
"exports/overlays.js"
],
"dependencies": {
"@bundled-es-modules/message-format": "^6.0.4",
"@open-wc/dedupe-mixin": "^1.3.1",
"@open-wc/scoped-elements": "2.2.0",
"@popperjs/core": "^2.11.6",
"autosize": "4.0.2",
"awesome-phonenumber": "^4.0.0",
"ibantools": "^2.2.0",
"lit": "^2.4.0",
"@bundled-es-modules/message-format": "^6.2.4",
"@open-wc/dedupe-mixin": "^1.4.0",
"@open-wc/scoped-elements": "^3.0.5",
"@popperjs/core": "^2.11.8",
"autosize": "^6.0.0",
"awesome-phonenumber": "^6.4.0",
"ibantools": "^4.3.9",
"lit": "^3.1.2",
"singleton-manager": "^1.7.0"
},
"keywords": [

5
vscode.css-custom-data.json Normal file
View file

@ -0,0 +1,5 @@
{
"version": 1.1,
"properties": [],
"pseudoElements": []
}

815
vscode.html-custom-data.json Normal file
View file

File diff suppressed because one or more lines are too long

15
web-test-runner.config.mjs
View file

@ -18,6 +18,20 @@ const packages = fs
.map(dir => ({ name: dir, path: `packages/ui/components/${dir}/test` })),
);
/**
* @type {import('@web/test-runner').TestRunnerConfig['testRunnerHtml']}
*
*/
const testRunnerHtml = (testRunnerImport) =>
`
<html>
<head>
<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>
<script type="module" src="${testRunnerImport}"></script>
</head>
</html>
`;
export default {
nodeResolve: true,
coverageConfig: {
@ -35,6 +49,7 @@ export default {
timeout: '5000',
},
},
testRunnerHtml,
browsers: [
playwrightLauncher({ product: 'firefox', concurrency: 1 }),
playwrightLauncher({ product: 'chromium' }),