@lion/form-core
Advanced tools
Comparing version 0.13.0 to 0.14.0
# Change Log | ||
## 0.14.0 | ||
### Minor Changes | ||
- 72067c0d: **BREAKING** Upgrade to [lit](https://lit.dev/) version 2 | ||
This does not change any of the public APIs of lion. | ||
It however effects you when you have your own extension layer or your own components especially when using directives. | ||
See the [official lit upgrade guide](https://lit.dev/docs/releases/upgrade/). | ||
**BREAKING** Upgrade to [ScopedElements](https://open-wc.org/docs/development/scoped-elements/) version 2 | ||
This version of `@open-wc/scoped-elements` is now following the [Scoped Custom Element Registries](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md) and automatically loads a polyfill [@webcomponents/scoped-custom-element-registry](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry). | ||
This means tag names are no longer being rewritten with a hash. | ||
```js | ||
import { css, LitElement } from 'lit'; | ||
import { ScopedElementsMixin } from '@open-wc/scoped-elements'; | ||
import { MyButton } from './MyButton.js'; | ||
export class MyElement extends ScopedElementsMixin(LitElement) { | ||
static get scopedElements() { | ||
return { | ||
'my-button': MyButton, | ||
}; | ||
} | ||
render() { | ||
return html` | ||
<my-button>click me</my-button> | ||
`; | ||
} | ||
} | ||
``` | ||
```html | ||
<!-- before (ScopedElements 1.x) --> | ||
<my-element> | ||
#shadow-root | ||
<my-button-23243424>click me</my-button-23243424> | ||
</my-element> | ||
<!-- after (ScopedElements 2.x) --> | ||
<my-element> | ||
#shadow-root | ||
<my-button>click me</my-button> | ||
</my-element> | ||
``` | ||
### Patch Changes | ||
- Updated dependencies [72067c0d] | ||
- @lion/core@0.18.0 | ||
- @lion/localize@0.20.0 | ||
## 0.13.0 | ||
@@ -4,0 +60,0 @@ |
@@ -7,4 +7,4 @@ # Systems >> Form >> Overview ||10 | ||
- Built in [validate](https://github.com/ing-bank/lion/blob/6589d4cc235d8b2ddfe0d695262dc4bcc910cdd1/docs/docs/systems/form/validate.md) for error/warning/info/success | ||
- Built in [validate](https://github.com/ing-bank/lion/blob/24b272ecf272f883ddb8130e22271557f4ff444e/docs/docs/systems/form/validate.md) for error/warning/info/success | ||
- Formatting of values | ||
- Accessible |
{ | ||
"name": "@lion/form-core", | ||
"version": "0.13.0", | ||
"version": "0.14.0", | ||
"description": "Form-core contains all essential building blocks for creating form fields and fieldsets", | ||
@@ -41,4 +41,4 @@ "license": "MIT", | ||
"dependencies": { | ||
"@lion/core": "0.17.0", | ||
"@lion/localize": "0.19.0" | ||
"@lion/core": "0.18.0", | ||
"@lion/localize": "0.20.0" | ||
}, | ||
@@ -45,0 +45,0 @@ "keywords": [ |
@@ -7,4 +7,4 @@ # Systems >> Form >> Overview ||10 | ||
- Built in [validate](https://github.com/ing-bank/lion/blob/6589d4cc235d8b2ddfe0d695262dc4bcc910cdd1/docs/docs/systems/form/validate.md) for error/warning/info/success | ||
- Built in [validate](https://github.com/ing-bank/lion/blob/24b272ecf272f883ddb8130e22271557f4ff444e/docs/docs/systems/form/validate.md) for error/warning/info/success | ||
- Formatting of values | ||
- Accessible |
@@ -56,4 +56,4 @@ /* eslint-disable class-methods-use-this */ | ||
*/ | ||
requestUpdateInternal(name, oldValue) { | ||
super.requestUpdateInternal(name, oldValue); | ||
requestUpdate(name, oldValue) { | ||
super.requestUpdate(name, oldValue); | ||
@@ -302,3 +302,3 @@ if (name === 'modelValue') { | ||
* hasChanged is designed for async (updated) callback, also check for sync | ||
* (requestUpdateInternal) callback | ||
* (requestUpdate) callback | ||
* @param {{ modelValue:unknown }} newV | ||
@@ -314,3 +314,3 @@ * @param {{ modelValue:unknown }} [old] | ||
// @ts-expect-error [external]: lit private property | ||
if (this.constructor._classProperties.get('modelValue').hasChanged(modelValue, _old)) { | ||
if (this.constructor.elementProperties.get('modelValue').hasChanged(modelValue, _old)) { | ||
super._onModelValueChanged({ modelValue }); | ||
@@ -317,0 +317,0 @@ } |
import { dedupeMixin } from '@lion/core'; | ||
const windowWithOptionalPolyfill = /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window); | ||
const windowWithOptionalPolyfill = | ||
/** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window); | ||
const polyfilledNodes = new WeakMap(); | ||
@@ -5,0 +6,0 @@ |
@@ -363,8 +363,7 @@ import { dedupeMixin, html, SlotMixin, DisabledMixin } from '@lion/core'; | ||
if (Array.isArray(this.formElements[name])) { | ||
this.formElements[name].forEach(( | ||
/** @type {FormControl} */ el, | ||
/** @type {number} */ index, | ||
) => { | ||
el[property] = values[name][index]; // eslint-disable-line no-param-reassign | ||
}); | ||
this.formElements[name].forEach( | ||
(/** @type {FormControl} */ el, /** @type {number} */ index) => { | ||
el[property] = values[name][index]; // eslint-disable-line no-param-reassign | ||
}, | ||
); | ||
} | ||
@@ -371,0 +370,0 @@ if (this.formElements[name]) { |
@@ -75,4 +75,4 @@ /* eslint-disable class-methods-use-this */ | ||
*/ | ||
requestUpdateInternal(name, oldVal) { | ||
super.requestUpdateInternal(name, oldVal); | ||
requestUpdate(name, oldVal) { | ||
super.requestUpdate(name, oldVal); | ||
@@ -529,4 +529,5 @@ if (name === 'modelValue' && this.modelValue !== oldVal) { | ||
this.formatOn, | ||
/** @type {EventListenerOrEventListenerObject} */ (this | ||
._reflectBackFormattedValueDebounced), | ||
/** @type {EventListenerOrEventListenerObject} */ ( | ||
this._reflectBackFormattedValueDebounced | ||
), | ||
); | ||
@@ -533,0 +534,0 @@ this._inputNode.removeEventListener('compositionstart', this.__onCompositionEvent); |
export type FormControlMixin = typeof import("../types/FormControlMixinTypes.js").FormControlImplementation; | ||
export const FormControlMixin: typeof import("../types/FormControlMixinTypes.js").FormControlImplementation; | ||
export type TemplateResult = import("@lion/core").TemplateResult; | ||
export type TemplateResult = { | ||
_$litType$: 1 | 2; | ||
strings: TemplateStringsArray; | ||
values: unknown[]; | ||
}; | ||
export type CSSResult = import("@lion/core").CSSResult; | ||
export type CSSResultArray = import("lit-element").CSSResultArray; | ||
export type nothing = any; | ||
export type CSSResultArray = import("lit").CSSResultGroup[]; | ||
export type SlotsMap = { | ||
@@ -8,0 +11,0 @@ [key: string]: typeof import("@lion/core/types/SlotMixinTypes").slotFunction; |
@@ -10,3 +10,2 @@ import { css, dedupeMixin, html, nothing, SlotMixin, DisabledMixin } from '@lion/core'; | ||
* @typedef {import('@lion/core').CSSResultArray} CSSResultArray | ||
* @typedef {import('@lion/core').nothing} nothing | ||
* @typedef {import('@lion/core/types/SlotMixinTypes').SlotsMap} SlotsMap | ||
@@ -769,3 +768,2 @@ * @typedef {import('./validate/LionValidationFeedback').LionValidationFeedback} LionValidationFeedback | ||
this._ariaLabelledNodes = [...this._ariaLabelledNodes]; | ||
// This value will be read when we need to reflect to attr | ||
@@ -772,0 +770,0 @@ /** @type {boolean} */ |
@@ -38,4 +38,4 @@ import { dedupeMixin } from '@lion/core'; | ||
*/ | ||
requestUpdateInternal(name, oldVal) { | ||
super.requestUpdateInternal(name, oldVal); | ||
requestUpdate(name, oldVal) { | ||
super.requestUpdate(name, oldVal); | ||
if (name === 'touched' && this.touched !== oldVal) { | ||
@@ -46,3 +46,3 @@ this._onTouchedChanged(); | ||
if (name === 'modelValue') { | ||
// We do this in requestUpdateInternal because we don't want to fire another re-render (e.g. when doing this in updated) | ||
// We do this in requestUpdate because we don't want to fire another re-render (e.g. when doing this in updated) | ||
// Furthermore, we cannot do it on model-value-changed event because it isn't fired initially. | ||
@@ -49,0 +49,0 @@ this.filled = !this._isEmpty(); |
declare const LionField_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/types/SlotMixinTypes").SlotHost> & Pick<typeof import("@lion/core/types/SlotMixinTypes").SlotHost, "prototype"> & Pick<{ | ||
new (): HTMLElement; | ||
prototype: HTMLElement; | ||
}, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/validate/ValidateMixinTypes.js").ValidateHost> & Pick<typeof import("../types/validate/ValidateMixinTypes.js").ValidateHost, "prototype" | "validationTypes"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/FormControlMixinTypes.js").FormControlHost> & Pick<typeof import("../types/FormControlMixinTypes.js").FormControlHost, "prototype" | "styles" | "properties"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/utils/SyncUpdatableMixinTypes.js").SyncUpdatableHost> & Pick<typeof import("../types/utils/SyncUpdatableMixinTypes.js").SyncUpdatableHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/types/DisabledMixinTypes").DisabledHost> & Pick<typeof import("@lion/core/types/DisabledMixinTypes").DisabledHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost> & Pick<typeof import("@open-wc/scoped-elements/src/types").ScopedElementsHost, "prototype" | "scopedElements" | "getScopedTagName"> & Pick<typeof LitElement, "prototype" | "render" | "styles" | "getStyles" | "properties" | "observedAttributes" | "createProperty"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/FormatMixinTypes.js").FormatHost> & Pick<typeof import("../types/FormatMixinTypes.js").FormatHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/FocusMixinTypes.js").FocusHost> & Pick<typeof import("../types/FocusMixinTypes.js").FocusHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/InteractionStateMixinTypes.js").InteractionStateHost> & Pick<typeof import("../types/InteractionStateMixinTypes.js").InteractionStateHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/registration/FormRegisteringMixinTypes.js").FormRegisteringHost> & Pick<typeof import("../types/registration/FormRegisteringMixinTypes.js").FormRegisteringHost, "prototype">; | ||
}, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/validate/ValidateMixinTypes.js").ValidateHost> & Pick<typeof import("../types/validate/ValidateMixinTypes.js").ValidateHost, "prototype" | "validationTypes"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/FormControlMixinTypes.js").FormControlHost> & Pick<typeof import("../types/FormControlMixinTypes.js").FormControlHost, "prototype" | "properties" | "styles"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/utils/SyncUpdatableMixinTypes.js").SyncUpdatableHost> & Pick<typeof import("../types/utils/SyncUpdatableMixinTypes.js").SyncUpdatableHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/types/DisabledMixinTypes").DisabledHost> & Pick<typeof import("@lion/core/types/DisabledMixinTypes").DisabledHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost> & Pick<typeof import("@open-wc/scoped-elements/src/types").ScopedElementsHost, "prototype" | "scopedElements" | "getScopedTagName"> & Pick<typeof LitElement, "prototype" | "_$litElement$" | "enabledWarnings" | "enableWarning" | "disableWarning" | "addInitializer" | "_initializers" | "elementProperties" | "properties" | "elementStyles" | "styles" | "observedAttributes" | "createProperty" | "shadowRootOptions"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/FormatMixinTypes.js").FormatHost> & Pick<typeof import("../types/FormatMixinTypes.js").FormatHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/FocusMixinTypes.js").FocusHost> & Pick<typeof import("../types/FocusMixinTypes.js").FocusHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/InteractionStateMixinTypes.js").InteractionStateHost> & Pick<typeof import("../types/InteractionStateMixinTypes.js").InteractionStateHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../types/registration/FormRegisteringMixinTypes.js").FormRegisteringHost> & Pick<typeof import("../types/registration/FormRegisteringMixinTypes.js").FormRegisteringHost, "prototype">; | ||
/** | ||
@@ -6,0 +6,0 @@ * `LionField`: wraps <input>, <textarea>, <select> and other interactable elements. |
export type FormRegisteringMixin = typeof import("../../types/registration/FormRegisteringMixinTypes").FormRegisteringImplementation; | ||
export const FormRegisteringMixin: typeof import("../../types/registration/FormRegisteringMixinTypes").FormRegisteringImplementation; | ||
export type LitElement = import("lit-element").LitElement; | ||
export type LitElement = import("@lion/core").LitElement; | ||
export type FormControlHost = import("../../types/FormControlMixinTypes").FormControlHost; | ||
@@ -5,0 +5,0 @@ export type FormRegisteringHost = import("../../types/registration/FormRegisteringMixinTypes").FormRegisteringHost; |
@@ -34,9 +34,9 @@ import { dedupeMixin } from '@lion/core'; | ||
this.registrationTarget = undefined; | ||
this.__redispatchEventForFormRegistrarPortalMixin = this.__redispatchEventForFormRegistrarPortalMixin.bind( | ||
this, | ||
); | ||
this.__redispatchEventForFormRegistrarPortalMixin = | ||
this.__redispatchEventForFormRegistrarPortalMixin.bind(this); | ||
this.addEventListener( | ||
'form-element-register', | ||
/** @type {EventListenerOrEventListenerObject} */ (this | ||
.__redispatchEventForFormRegistrarPortalMixin), | ||
/** @type {EventListenerOrEventListenerObject} */ ( | ||
this.__redispatchEventForFormRegistrarPortalMixin | ||
), | ||
); | ||
@@ -43,0 +43,0 @@ } |
@@ -21,3 +21,3 @@ import { dedupeMixin } from '@lion/core'; | ||
* - it is a stable abstraction on top of a protected/non official lifecycle LitElement api. | ||
* Whenever the implementation of `requestUpdateInternal` changes (this happened in the past for | ||
* Whenever the implementation of `requestUpdate` changes (this happened in the past for | ||
* `requestUpdate`) we only have to change our abstraction instead of all our components | ||
@@ -68,3 +68,3 @@ * @type {SyncUpdatableMixin} | ||
// @ts-expect-error [external]: accessing private lit property | ||
const properties = this._classProperties; | ||
const properties = this.elementProperties; | ||
if (properties.get(name) && properties.get(name).hasChanged) { | ||
@@ -79,4 +79,6 @@ return properties.get(name).hasChanged(newValue, oldValue); | ||
const ns = this.__SyncUpdatableNamespace; | ||
const ctor = /** @type {typeof SyncUpdatableMixin & typeof import('../../types/utils/SyncUpdatableMixinTypes').SyncUpdatableHost} */ (this | ||
.constructor); | ||
const ctor = | ||
/** @type {typeof SyncUpdatableMixin & typeof import('../../types/utils/SyncUpdatableMixinTypes').SyncUpdatableHost} */ ( | ||
this.constructor | ||
); | ||
@@ -99,4 +101,4 @@ ns.initialized = true; | ||
*/ | ||
requestUpdateInternal(name, oldValue) { | ||
super.requestUpdateInternal(name, oldValue); | ||
requestUpdate(name, oldValue) { | ||
super.requestUpdate(name, oldValue); | ||
@@ -106,4 +108,6 @@ this.__SyncUpdatableNamespace = this.__SyncUpdatableNamespace || {}; | ||
const ctor = /** @type {typeof SyncUpdatableMixin & typeof import('../../types/utils/SyncUpdatableMixinTypes').SyncUpdatableHost} */ (this | ||
.constructor); | ||
const ctor = | ||
/** @type {typeof SyncUpdatableMixin & typeof import('../../types/utils/SyncUpdatableMixinTypes').SyncUpdatableHost} */ ( | ||
this.constructor | ||
); | ||
// Before connectedCallback: queue | ||
@@ -122,3 +126,3 @@ if (!ns.initialized) { | ||
/** | ||
* An abstraction that has the exact same api as `requestUpdateInternal`, but taking | ||
* An abstraction that has the exact same api as `requestUpdate`, but taking | ||
* into account: | ||
@@ -131,3 +135,3 @@ * - [member order independence](https://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence) | ||
* effects when values didn't change | ||
* All code previously present in requestUpdateInternal can be placed in this method. | ||
* All code previously present in requestUpdate can be placed in this method. | ||
* @param {string} name | ||
@@ -134,0 +138,0 @@ * @param {*} oldValue |
@@ -31,3 +31,3 @@ /** | ||
validator: Validator; | ||
}): string | Node | import("@lion/core").TemplateResult; | ||
}): string | Node | import("@lion/core").TemplateResult<1 | 2>; | ||
currentType: string | undefined; | ||
@@ -39,3 +39,7 @@ removeMessage: number | undefined; | ||
export type Validator = import("./Validator").Validator; | ||
export type TemplateResult = import("@lion/core").TemplateResult; | ||
export type TemplateResult = { | ||
_$litType$: 1 | 2; | ||
strings: TemplateStringsArray; | ||
values: unknown[]; | ||
}; | ||
export type messageMap = { | ||
@@ -42,0 +46,0 @@ message: string | Node; |
@@ -42,4 +42,6 @@ /* eslint-disable class-methods-use-this, camelcase, no-param-reassign, max-classes-per-file */ | ||
static get scopedElements() { | ||
const scopedElementsCtor = /** @type {typeof import('@open-wc/scoped-elements/src/types').ScopedElementsHost} */ (super | ||
.constructor); | ||
const scopedElementsCtor = | ||
/** @type {typeof import('@open-wc/scoped-elements/src/types').ScopedElementsHost} */ ( | ||
super.constructor | ||
); | ||
return { | ||
@@ -486,6 +488,8 @@ ...scopedElementsCtor.scopedElements, | ||
__executeResultValidators(regularValidationResult) { | ||
const resultValidators = /** @type {ResultValidator[]} */ (this._allValidators.filter(v => { | ||
const vCtor = /** @type {typeof Validator} */ (v.constructor); | ||
return !vCtor.async && v instanceof ResultValidator; | ||
})); | ||
const resultValidators = /** @type {ResultValidator[]} */ ( | ||
this._allValidators.filter(v => { | ||
const vCtor = /** @type {typeof Validator} */ (v.constructor); | ||
return !vCtor.async && v instanceof ResultValidator; | ||
}) | ||
); | ||
@@ -516,4 +520,6 @@ return resultValidators.filter(v => | ||
const ctor = /** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ (this | ||
.constructor); | ||
const ctor = | ||
/** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ ( | ||
this.constructor | ||
); | ||
@@ -588,4 +594,6 @@ /** @type {Object.<string, Object.<string, boolean>>} */ | ||
} | ||
const ctor = /** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ (this | ||
.constructor); | ||
const ctor = | ||
/** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ ( | ||
this.constructor | ||
); | ||
if (ctor.validationTypes.indexOf(v.type) === -1) { | ||
@@ -783,8 +791,12 @@ const vCtor = /** @type {typeof Validator} */ (v.constructor); | ||
) { | ||
const ctor = /** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ (this | ||
.constructor); | ||
const ctor = | ||
/** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ ( | ||
this.constructor | ||
); | ||
// Necessary typecast because types aren't smart enough to understand that we filter out undefined | ||
this.showsFeedbackFor = /** @type {string[]} */ (ctor.validationTypes | ||
.map(type => (this._hasFeedbackVisibleFor(type) ? type : undefined)) | ||
.filter(Boolean)); | ||
this.showsFeedbackFor = /** @type {string[]} */ ( | ||
ctor.validationTypes | ||
.map(type => (this._hasFeedbackVisibleFor(type) ? type : undefined)) | ||
.filter(Boolean) | ||
); | ||
this._updateFeedbackComponent(); | ||
@@ -799,5 +811,5 @@ } | ||
if (changedProperties.has('validationStates')) { | ||
const prevStates = /** @type {{[key: string]: object;}} */ (changedProperties.get( | ||
'validationStates', | ||
)); | ||
const prevStates = /** @type {{[key: string]: object;}} */ ( | ||
changedProperties.get('validationStates') | ||
); | ||
if (prevStates) { | ||
@@ -820,17 +832,21 @@ Object.entries(this.validationStates).forEach(([type, feedbackObj]) => { | ||
_updateShouldShowFeedbackFor() { | ||
const ctor = /** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ (this | ||
.constructor); | ||
const ctor = | ||
/** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ ( | ||
this.constructor | ||
); | ||
// Necessary typecast because types aren't smart enough to understand that we filter out undefined | ||
const newShouldShowFeedbackFor = /** @type {string[]} */ (ctor.validationTypes | ||
.map(type => | ||
this.feedbackCondition( | ||
type, | ||
this._feedbackConditionMeta, | ||
this._showFeedbackConditionFor.bind(this), | ||
const newShouldShowFeedbackFor = /** @type {string[]} */ ( | ||
ctor.validationTypes | ||
.map(type => | ||
this.feedbackCondition( | ||
type, | ||
this._feedbackConditionMeta, | ||
this._showFeedbackConditionFor.bind(this), | ||
) | ||
? type | ||
: undefined, | ||
) | ||
? type | ||
: undefined, | ||
) | ||
.filter(Boolean)); | ||
.filter(Boolean) | ||
); | ||
@@ -851,4 +867,6 @@ if (JSON.stringify(this.shouldShowFeedbackFor) !== JSON.stringify(newShouldShowFeedbackFor)) { | ||
_prioritizeAndFilterFeedback({ validationResult }) { | ||
const ctor = /** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ (this | ||
.constructor); | ||
const ctor = | ||
/** @type {typeof import('../../types/validate/ValidateMixinTypes').ValidateHost} */ ( | ||
this.constructor | ||
); | ||
const types = ctor.validationTypes; | ||
@@ -855,0 +873,0 @@ // Sort all validators based on the type provided. |
@@ -95,3 +95,4 @@ /* eslint-disable max-classes-per-file */ | ||
const isEmailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | ||
const isEmailRegex = | ||
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | ||
export class IsEmail extends Validator { | ||
@@ -98,0 +99,0 @@ static get validatorName() { |
import { LitElement } from '@lion/core'; | ||
import { defineCE, expect, fixture, html, oneEvent, unsafeStatic } from '@open-wc/testing'; | ||
import { defineCE, expect, fixture, oneEvent } from '@open-wc/testing'; | ||
import { html, unsafeStatic } from 'lit/static-html.js'; | ||
import sinon from 'sinon'; | ||
import { FocusMixin } from '../src/FocusMixin.js'; | ||
const windowWithOptionalPolyfill = /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window); | ||
const windowWithOptionalPolyfill = | ||
/** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window); | ||
@@ -77,5 +79,7 @@ /** | ||
it('focuses/blurs the underlaying native element on .focus()/.blur()', async () => { | ||
const el = /** @type {Focusable} */ (await fixture(html` | ||
const el = /** @type {Focusable} */ ( | ||
await fixture(html` | ||
<${tag}><input slot="input"></${tag}> | ||
`)); | ||
`) | ||
); | ||
// @ts-ignore [allow-protected] in test | ||
@@ -91,5 +95,7 @@ const { _focusableNode } = el; | ||
it('has an attribute focused when focused', async () => { | ||
const el = /** @type {Focusable} */ (await fixture(html` | ||
const el = /** @type {Focusable} */ ( | ||
await fixture(html` | ||
<${tag}><input slot="input"></${tag}> | ||
`)); | ||
`) | ||
); | ||
@@ -106,5 +112,7 @@ el.focus(); | ||
it('becomes focused/blurred if the native element gets focused/blurred', async () => { | ||
const el = /** @type {Focusable} */ (await fixture(html` | ||
const el = /** @type {Focusable} */ ( | ||
await fixture(html` | ||
<${tag}><input slot="input"></${tag}> | ||
`)); | ||
`) | ||
); | ||
// @ts-ignore [allow-protected] in test | ||
@@ -121,5 +129,7 @@ const { _focusableNode } = el; | ||
it('dispatches [focus, blur] events', async () => { | ||
const el = /** @type {Focusable} */ (await fixture(html` | ||
const el = /** @type {Focusable} */ ( | ||
await fixture(html` | ||
<${tag}><input slot="input"></${tag}> | ||
`)); | ||
`) | ||
); | ||
setTimeout(() => el.focus()); | ||
@@ -144,5 +154,7 @@ const focusEv = await oneEvent(el, 'focus'); | ||
it('dispatches [focusin, focusout] events with { bubbles: true, composed: true }', async () => { | ||
const el = /** @type {Focusable} */ (await fixture(html` | ||
const el = /** @type {Focusable} */ ( | ||
await fixture(html` | ||
<${tag}><input slot="input"></${tag}> | ||
`)); | ||
`) | ||
); | ||
setTimeout(() => el.focus()); | ||
@@ -168,5 +180,7 @@ const focusinEv = await oneEvent(el, 'focusin'); | ||
it('sets focusedVisible to true when focusable element matches :focus-visible', async () => { | ||
const el = /** @type {Focusable} */ (await fixture(html` | ||
const el = /** @type {Focusable} */ ( | ||
await fixture(html` | ||
<${tag}><input slot="input"></${tag}> | ||
`)); | ||
`) | ||
); | ||
// @ts-ignore [allow-protected] in test | ||
@@ -213,5 +227,7 @@ const { _focusableNode } = el; | ||
it('has an attribute focused-visible when focusedVisible is true', async () => { | ||
const el = /** @type {Focusable} */ (await fixture(html` | ||
const el = /** @type {Focusable} */ ( | ||
await fixture(html` | ||
<${tag}><input slot="input"></${tag}> | ||
`)); | ||
`) | ||
); | ||
// @ts-ignore [allow-protected] in test | ||
@@ -261,5 +277,7 @@ const { _focusableNode } = el; | ||
it('sets focusedVisible to true when focusable element if :focus-visible polyfill is loaded', async () => { | ||
const el = /** @type {Focusable} */ (await fixture(html` | ||
const el = /** @type {Focusable} */ ( | ||
await fixture(html` | ||
<${tag}><input slot="input"></${tag}> | ||
`)); | ||
`) | ||
); | ||
@@ -266,0 +284,0 @@ // @ts-ignore [allow-protected] in test |
@@ -1,2 +0,3 @@ | ||
import { expect, html, defineCE, unsafeStatic, fixture } from '@open-wc/testing'; | ||
import { expect, defineCE, fixture } from '@open-wc/testing'; | ||
import { html, unsafeStatic } from 'lit/static-html.js'; | ||
import { LitElement } from '@lion/core'; | ||
@@ -33,20 +34,26 @@ import { getFormControlMembers } from '@lion/form-core/test-helpers'; | ||
it('has a label', async () => { | ||
const elAttr = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const elAttr = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag} label="Email address">${inputSlot}</${tag}> | ||
`)); | ||
`) | ||
); | ||
expect(elAttr.label).to.equal('Email address', 'as an attribute'); | ||
const elProp = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const elProp = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag} | ||
.label=${'Email address'} | ||
>${inputSlot} | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(elProp.label).to.equal('Email address', 'as a property'); | ||
const elElem = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const elElem = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag}> | ||
<label slot="label">Email address</label> | ||
${inputSlot} | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(elElem.label).to.equal('Email address', 'as an element'); | ||
@@ -56,7 +63,9 @@ }); | ||
it('has a label that supports inner html', async () => { | ||
const el = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const el = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag}> | ||
<label slot="label">Email <span>address</span></label> | ||
${inputSlot} | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(el.label).to.equal('Email address'); | ||
@@ -66,3 +75,4 @@ }); | ||
it('only takes label of direct child', async () => { | ||
const el = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const el = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag}> | ||
@@ -72,3 +82,4 @@ <${tag} label="Email address"> | ||
</${tag}> | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(el.label).to.equal(''); | ||
@@ -78,19 +89,25 @@ }); | ||
it('can have a help-text', async () => { | ||
const elAttr = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const elAttr = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag} help-text="We will not send you any spam">${inputSlot}</${tag}> | ||
`)); | ||
`) | ||
); | ||
expect(elAttr.helpText).to.equal('We will not send you any spam', 'as an attribute'); | ||
const elProp = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const elProp = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag} | ||
.helpText=${'We will not send you any spam'} | ||
>${inputSlot} | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(elProp.helpText).to.equal('We will not send you any spam', 'as a property'); | ||
const elElem = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const elElem = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag}> | ||
<div slot="help-text">We will not send you any spam</div> | ||
${inputSlot} | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element'); | ||
@@ -100,7 +117,9 @@ }); | ||
it('can have a help-text that supports inner html', async () => { | ||
const el = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const el = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag}> | ||
<div slot="help-text">We will not send you any <span>spam</span></div> | ||
${inputSlot} | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(el.helpText).to.equal('We will not send you any spam'); | ||
@@ -110,3 +129,4 @@ }); | ||
it('only takes help-text of direct child', async () => { | ||
const el = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const el = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag}> | ||
@@ -116,3 +136,4 @@ <${tag} help-text="We will not send you any spam"> | ||
</${tag}> | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(el.helpText).to.equal(''); | ||
@@ -124,7 +145,9 @@ }); | ||
it('does not duplicate aria-describedby and aria-labelledby ids on reconnect', async () => { | ||
const wrapper = /** @type {HTMLElement} */ (await fixture(html` | ||
const wrapper = /** @type {HTMLElement} */ ( | ||
await fixture(html` | ||
<div id="wrapper"> | ||
<${tag} help-text="This element will be disconnected/reconnected">${inputSlot}</${tag}> | ||
</div> | ||
`)); | ||
`) | ||
); | ||
const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString)); | ||
@@ -134,5 +157,5 @@ const { _inputNode } = getFormControlMembers(el); | ||
const labelIdsBefore = /** @type {string} */ (_inputNode.getAttribute('aria-labelledby')); | ||
const descriptionIdsBefore = /** @type {string} */ (_inputNode.getAttribute( | ||
'aria-describedby', | ||
)); | ||
const descriptionIdsBefore = /** @type {string} */ ( | ||
_inputNode.getAttribute('aria-describedby') | ||
); | ||
// Reconnect | ||
@@ -142,5 +165,5 @@ wrapper.removeChild(el); | ||
const labelIdsAfter = /** @type {string} */ (_inputNode.getAttribute('aria-labelledby')); | ||
const descriptionIdsAfter = /** @type {string} */ (_inputNode.getAttribute( | ||
'aria-describedby', | ||
)); | ||
const descriptionIdsAfter = /** @type {string} */ ( | ||
_inputNode.getAttribute('aria-describedby') | ||
); | ||
@@ -153,7 +176,9 @@ expect(labelIdsBefore).to.equal(labelIdsAfter); | ||
const spy = sinon.spy(); | ||
const el = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const el = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${tag} ._onLabelClick="${spy}"> | ||
${inputSlot} | ||
</${tag}> | ||
`)); | ||
`) | ||
); | ||
const { _labelNode } = getFormControlMembers(el); | ||
@@ -247,3 +272,4 @@ | ||
removeFromAriaLabelledBy() / addToAriaDescribedBy() / removeFromAriaDescribedBy()`, async () => { | ||
const wrapper = /** @type {HTMLElement} */ (await fixture(html` | ||
const wrapper = /** @type {HTMLElement} */ ( | ||
await fixture(html` | ||
<div id="wrapper"> | ||
@@ -257,3 +283,4 @@ <${tag}> | ||
<div id="additionalDescription"> Same for this </div> | ||
</div>`)); | ||
</div>`) | ||
); | ||
const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString)); | ||
@@ -274,5 +301,5 @@ const { _inputNode } = getFormControlMembers(el); | ||
); | ||
const additionalLabel = /** @type {HTMLElement} */ (wrapper.querySelector( | ||
'#additionalLabel', | ||
)); | ||
const additionalLabel = /** @type {HTMLElement} */ ( | ||
wrapper.querySelector('#additionalLabel') | ||
); | ||
el.addToAriaLabelledBy(additionalLabel); | ||
@@ -410,3 +437,4 @@ await el.updateComplete; | ||
const fieldsetSpy = sinon.spy(); | ||
const formEl = /** @type {FormControlMixinClass} */ (await fixture(html` | ||
const formEl = /** @type {FormControlMixinClass} */ ( | ||
await fixture(html` | ||
<${groupTag} name="form" ._repropagationRole=${'form-group'} @model-value-changed=${formSpy}> | ||
@@ -417,3 +445,4 @@ <${groupTag} name="fieldset" ._repropagationRole=${'form-group'} @model-value-changed=${fieldsetSpy}> | ||
</${groupTag}> | ||
`)); | ||
`) | ||
); | ||
const fieldsetEl = formEl.querySelector('[name=fieldset]'); | ||
@@ -420,0 +449,0 @@ |
import { LitElement } from '@lion/core'; | ||
import { html } from '@open-wc/testing'; | ||
import { html } from 'lit/static-html.js'; | ||
import { runRegistrationSuite } from '../test-suites/FormRegistrationMixins.suite.js'; | ||
@@ -4,0 +4,0 @@ |
@@ -5,10 +5,4 @@ import { unsafeHTML } from '@lion/core'; | ||
import { Required, Validator } from '@lion/form-core'; | ||
import { | ||
expect, | ||
fixture, | ||
html, | ||
triggerBlurFor, | ||
triggerFocusFor, | ||
unsafeStatic, | ||
} from '@open-wc/testing'; | ||
import { expect, fixture, triggerBlurFor, triggerFocusFor } from '@open-wc/testing'; | ||
import { html, unsafeStatic } from 'lit/static-html.js'; | ||
import { getFormControlMembers } from '@lion/form-core/test-helpers'; | ||
@@ -64,5 +58,5 @@ import sinon from 'sinon'; | ||
it(`has a fieldName based on the label`, async () => { | ||
const el1 = /** @type {LionField} */ (await fixture( | ||
html`<${tag} label="foo">${inputSlot}</${tag}>`, | ||
)); | ||
const el1 = /** @type {LionField} */ ( | ||
await fixture(html`<${tag} label="foo">${inputSlot}</${tag}>`) | ||
); | ||
const { _labelNode: _labelNode1 } = getFormControlMembers(el1); | ||
@@ -72,5 +66,5 @@ | ||
const el2 = /** @type {LionField} */ (await fixture( | ||
html`<${tag}><label slot="label">bar</label>${inputSlot}</${tag}>`, | ||
)); | ||
const el2 = /** @type {LionField} */ ( | ||
await fixture(html`<${tag}><label slot="label">bar</label>${inputSlot}</${tag}>`) | ||
); | ||
const { _labelNode: _labelNode2 } = getFormControlMembers(el2); | ||
@@ -81,5 +75,5 @@ expect(el2.fieldName).to.equal(_labelNode2.textContent); | ||
it(`has a fieldName based on the name if no label exists`, async () => { | ||
const el = /** @type {LionField} */ (await fixture( | ||
html`<${tag} name="foo">${inputSlot}</${tag}>`, | ||
)); | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html`<${tag} name="foo">${inputSlot}</${tag}>`) | ||
); | ||
expect(el.fieldName).to.equal(el.name); | ||
@@ -89,5 +83,5 @@ }); | ||
it(`can override fieldName`, async () => { | ||
const el = /** @type {LionField} */ (await fixture( | ||
html`<${tag} label="foo" .fieldName="${'bar'}">${inputSlot}</${tag}>`, | ||
)); | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html`<${tag} label="foo" .fieldName="${'bar'}">${inputSlot}</${tag}>`) | ||
); | ||
// @ts-ignore [allow-protected] in test | ||
@@ -142,5 +136,5 @@ expect(el.__fieldName).to.equal(el.fieldName); | ||
it('can be cleared which erases value, validation and interaction states', async () => { | ||
const el = /** @type {LionField} */ (await fixture( | ||
html`<${tag} value="Some value from attribute">${inputSlot}</${tag}>`, | ||
)); | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html`<${tag} value="Some value from attribute">${inputSlot}</${tag}>`) | ||
); | ||
el.clear(); | ||
@@ -155,6 +149,8 @@ expect(el.modelValue).to.equal(''); | ||
it('can be reset which restores original modelValue', async () => { | ||
const el = /** @type {LionField} */ (await fixture(html` | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html` | ||
<${tag} .modelValue="${'foo'}"> | ||
${inputSlot} | ||
</${tag}>`)); | ||
</${tag}>`) | ||
); | ||
expect(el._initialModelValue).to.equal('foo'); | ||
@@ -181,3 +177,4 @@ el.modelValue = 'bar'; | ||
~~~`, async () => { | ||
const el = /** @type {LionField} */ (await fixture(html`<${tag}> | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html`<${tag}> | ||
<label slot="label">My Name</label> | ||
@@ -188,3 +185,4 @@ ${inputSlot} | ||
</${tag}> | ||
`)); | ||
`) | ||
); | ||
const nativeInput = getSlot(el, 'input'); | ||
@@ -200,3 +198,4 @@ // @ts-ignore allow protected accessors in tests | ||
(via attribute data-label) and in describedby (via attribute data-description)`, async () => { | ||
const el = /** @type {LionField} */ (await fixture(html`<${tag}> | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html`<${tag}> | ||
${inputSlot} | ||
@@ -208,3 +207,4 @@ <span slot="before" data-label>[before]</span> | ||
</${tag}> | ||
`)); | ||
`) | ||
); | ||
@@ -248,3 +248,4 @@ const nativeInput = getSlot(el, 'input'); | ||
}; | ||
const el = /** @type {LionField} */ (await fixture(html` | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html` | ||
<${tag} | ||
@@ -256,3 +257,4 @@ .validators=${[new HasX()]} | ||
</${tag}> | ||
`)); | ||
`) | ||
); | ||
@@ -319,3 +321,4 @@ /** | ||
}; | ||
const disabledEl = /** @type {LionField} */ (await fixture(html` | ||
const disabledEl = /** @type {LionField} */ ( | ||
await fixture(html` | ||
<${tag} | ||
@@ -328,4 +331,6 @@ disabled | ||
</${tag}> | ||
`)); | ||
const el = /** @type {LionField} */ (await fixture(html` | ||
`) | ||
); | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html` | ||
<${tag} | ||
@@ -337,3 +342,4 @@ .validators=${[new HasX()]} | ||
</${tag}> | ||
`)); | ||
`) | ||
); | ||
@@ -348,7 +354,9 @@ expect(el.hasFeedbackFor).to.deep.equal(['error']); | ||
it('can be required', async () => { | ||
const el = /** @type {LionField} */ (await fixture(html` | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html` | ||
<${tag} | ||
.validators=${[new Required()]} | ||
>${inputSlot}</${tag}> | ||
`)); | ||
`) | ||
); | ||
expect(el.hasFeedbackFor).to.deep.equal(['error']); | ||
@@ -376,3 +384,4 @@ expect(el.validationStates.error.Required).to.exist; | ||
}; | ||
const el = /** @type {LionField} */ (await fixture(html` | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html` | ||
<${tag} | ||
@@ -383,3 +392,4 @@ .modelValue=${'init-string'} | ||
>${inputSlot}</${tag}> | ||
`)); | ||
`) | ||
); | ||
@@ -401,3 +411,4 @@ expect(formatterSpy.callCount).to.equal(0); | ||
it('renders correctly all slot elements in light DOM', async () => { | ||
const el = /** @type {LionField} */ (await fixture(html` | ||
const el = /** @type {LionField} */ ( | ||
await fixture(html` | ||
<${tag}> | ||
@@ -413,3 +424,4 @@ <label slot="label">[label]</label> | ||
</${tag}> | ||
`)); | ||
`) | ||
); | ||
@@ -429,6 +441,5 @@ const names = [ | ||
slotLight.setAttribute('test-me', 'ok'); | ||
// @ts-expect-error | ||
const slot = /** @type {ShadowHTMLElement} */ (el.shadowRoot.querySelector( | ||
`slot[name="${slotName}"]`, | ||
)); | ||
const slot = /** @type {ShadowHTMLElement} */ ( | ||
/** @type {ShadowRoot} */ (el.shadowRoot).querySelector(`slot[name="${slotName}"]`) | ||
); | ||
const assignedNodes = slot.assignedNodes(); | ||
@@ -435,0 +446,0 @@ expect(assignedNodes.length).to.equal(1); |
@@ -1,2 +0,3 @@ | ||
import { expect, fixture, html } from '@open-wc/testing'; | ||
import { expect, fixture } from '@open-wc/testing'; | ||
import { html } from 'lit/static-html.js'; | ||
import sinon from 'sinon'; | ||
@@ -3,0 +4,0 @@ import { browserDetection } from '@lion/core'; |
import { LitElement } from '@lion/core'; | ||
import { defineCE, expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing'; | ||
import { defineCE, expect, fixture, fixtureSync } from '@open-wc/testing'; | ||
import { html, unsafeStatic } from 'lit/static-html.js'; | ||
import sinon from 'sinon'; | ||
@@ -46,5 +47,5 @@ import { SyncUpdatableMixin } from '../../src/utils/SyncUpdatableMixin.js'; | ||
const tag = unsafeStatic(tagString); | ||
const el = /** @type {UpdatableImplementation} */ (fixtureSync( | ||
html`<${tag} prop-b="b"></${tag}>`, | ||
)); | ||
const el = /** @type {UpdatableImplementation} */ ( | ||
fixtureSync(html`<${tag} prop-b="b"></${tag}>`) | ||
); | ||
@@ -106,5 +107,5 @@ // Getters setters work as expected, without running property effects | ||
const tag = unsafeStatic(tagString); | ||
const el = /** @type {UpdatableImplementation} */ (fixtureSync( | ||
html`<${tag} prop-b="b" .propA="${'a'}"></${tag}>`, | ||
)); | ||
const el = /** @type {UpdatableImplementation} */ ( | ||
fixtureSync(html`<${tag} prop-b="b" .propA="${'a'}"></${tag}>`) | ||
); | ||
@@ -119,15 +120,15 @@ // Derived | ||
const el2 = /** @type {UpdatableImplementation} */ (await fixture( | ||
html`<${tag} .propA="${'a'}"></${tag}>`, | ||
)); | ||
const el2 = /** @type {UpdatableImplementation} */ ( | ||
await fixture(html`<${tag} .propA="${'a'}"></${tag}>`) | ||
); | ||
expect(el2.derived).to.equal('ainit-b'); | ||
const el3 = /** @type {UpdatableImplementation} */ (await fixture( | ||
html`<${tag} .propB="${'b'}"></${tag}>`, | ||
)); | ||
const el3 = /** @type {UpdatableImplementation} */ ( | ||
await fixture(html`<${tag} .propB="${'b'}"></${tag}>`) | ||
); | ||
expect(el3.derived).to.equal('init-ab'); | ||
const el4 = /** @type {UpdatableImplementation} */ (await fixture( | ||
html`<${tag} .propA=${'a'} .propB="${'b'}"></${tag}>`, | ||
)); | ||
const el4 = /** @type {UpdatableImplementation} */ ( | ||
await fixture(html`<${tag} .propA=${'a'} .propB="${'b'}"></${tag}>`) | ||
); | ||
expect(el4.derived).to.equal('ab'); | ||
@@ -156,4 +157,4 @@ }); | ||
*/ | ||
requestUpdateInternal(name, oldValue) { | ||
super.requestUpdateInternal(name, oldValue); | ||
requestUpdate(name, oldValue) { | ||
super.requestUpdate(name, oldValue); | ||
if (name === 'prop') { | ||
@@ -230,5 +231,5 @@ propChangedCount += 1; | ||
const tag = unsafeStatic(tagString); | ||
const el = /** @type {UpdatableImplementation} */ (fixtureSync( | ||
html`<${tag} prop-b="b" .propA="${'a'}"></${tag}>`, | ||
)); | ||
const el = /** @type {UpdatableImplementation} */ ( | ||
fixtureSync(html`<${tag} prop-b="b" .propA="${'a'}"></${tag}>`) | ||
); | ||
const spy = sinon.spy(el, '_runPropertyEffect'); | ||
@@ -235,0 +236,0 @@ expect(spy.callCount).to.equal(0); |
/* eslint-disable no-unused-vars, no-param-reassign */ | ||
import { expect, fixture, html } from '@open-wc/testing'; | ||
import { expect, fixture } from '@open-wc/testing'; | ||
import { html } from 'lit/static-html.js'; | ||
import sinon from 'sinon'; | ||
@@ -13,5 +14,5 @@ import '@lion/form-core/define-validation-feedback'; | ||
it('renders a validation message', async () => { | ||
const el = /** @type {LionValidationFeedback} */ (await fixture( | ||
html`<lion-validation-feedback></lion-validation-feedback>`, | ||
)); | ||
const el = /** @type {LionValidationFeedback} */ ( | ||
await fixture(html`<lion-validation-feedback></lion-validation-feedback>`) | ||
); | ||
expect(el).shadowDom.to.equal(''); | ||
@@ -24,5 +25,5 @@ el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }]; | ||
it('renders the validation type attribute', async () => { | ||
const el = /** @type {LionValidationFeedback} */ (await fixture( | ||
html`<lion-validation-feedback></lion-validation-feedback>`, | ||
)); | ||
const el = /** @type {LionValidationFeedback} */ ( | ||
await fixture(html`<lion-validation-feedback></lion-validation-feedback>`) | ||
); | ||
el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }]; | ||
@@ -38,5 +39,5 @@ await el.updateComplete; | ||
it('success message clears after 3s', async () => { | ||
const el = /** @type {LionValidationFeedback} */ (await fixture( | ||
html`<lion-validation-feedback></lion-validation-feedback>`, | ||
)); | ||
const el = /** @type {LionValidationFeedback} */ ( | ||
await fixture(html`<lion-validation-feedback></lion-validation-feedback>`) | ||
); | ||
@@ -61,5 +62,5 @@ const clock = sinon.useFakeTimers(); | ||
it('does not clear error messages', async () => { | ||
const el = /** @type {LionValidationFeedback} */ (await fixture( | ||
html`<lion-validation-feedback></lion-validation-feedback>`, | ||
)); | ||
const el = /** @type {LionValidationFeedback} */ ( | ||
await fixture(html`<lion-validation-feedback></lion-validation-feedback>`) | ||
); | ||
@@ -66,0 +67,0 @@ const clock = sinon.useFakeTimers(); |
@@ -1,2 +0,3 @@ | ||
import { expect, fixture, html, unsafeStatic, defineCE } from '@open-wc/testing'; | ||
import { expect, fixture, defineCE } from '@open-wc/testing'; | ||
import { html, unsafeStatic } from 'lit/static-html.js'; | ||
import { LionField } from '@lion/form-core'; | ||
@@ -34,5 +35,5 @@ import { getFormControlMembers } from '@lion/form-core/test-helpers'; | ||
it('get aria-required attribute if element is part of the right tag names', async () => { | ||
const el = /** @type {FormControlHost & HTMLElement} */ (await fixture( | ||
html`<${tag}></${tag}>`, | ||
)); | ||
const el = /** @type {FormControlHost & HTMLElement} */ ( | ||
await fixture(html`<${tag}></${tag}>`) | ||
); | ||
@@ -57,5 +58,5 @@ Required._compatibleTags.forEach(tagName => { | ||
it('get aria-required attribute if element is part of the right roles', async () => { | ||
const el = /** @type {FormControlHost & HTMLElement} */ (await fixture( | ||
html`<${tag}></${tag}>`, | ||
)); | ||
const el = /** @type {FormControlHost & HTMLElement} */ ( | ||
await fixture(html`<${tag}></${tag}>`) | ||
); | ||
@@ -62,0 +63,0 @@ Required._compatibleRoles.forEach(role => { |
import { LitElement } from '@lion/core'; | ||
import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing'; | ||
import { defineCE, expect, fixture } from '@open-wc/testing'; | ||
import { html, unsafeStatic } from 'lit/static-html.js'; | ||
import sinon from 'sinon'; | ||
@@ -174,5 +175,7 @@ import { ValidateMixin } from '../../src/validate/ValidateMixin.js'; | ||
const el = /** @type {ValidateElement} */ (await fixture(html` | ||
const el = /** @type {ValidateElement} */ ( | ||
await fixture(html` | ||
<${tag} .validators=${[myVal]}>${lightDom}</${tag}> | ||
`)); | ||
`) | ||
); | ||
@@ -179,0 +182,0 @@ expect(connectSpy.callCount).to.equal(1); |
@@ -37,3 +37,3 @@ import { Constructor } from '@open-wc/dedupe-mixin'; | ||
protected _proxyInputEvent(): void; | ||
protected requestUpdateInternal(name: string, oldValue: any): void; | ||
protected requestUpdate(name: string, oldValue: any): void; | ||
protected _choiceGraphicTemplate(): TemplateResult; | ||
@@ -40,0 +40,0 @@ protected _afterTemplate(): TemplateResult; |
import { Constructor } from '@open-wc/dedupe-mixin'; | ||
import { BooleanAttributePart, LitElement } from '@lion/core'; | ||
import { LitElement } from '@lion/core'; | ||
import { FormatNumberOptions } from '@lion/localize/types/LocalizeMixinTypes'; | ||
@@ -4,0 +4,0 @@ import { ValidateHost } from './validate/ValidateMixinTypes'; |
@@ -13,3 +13,3 @@ import { LitElement } from '@lion/core'; | ||
/** | ||
* An abstraction that has the exact same api as `requestUpdateInternal`, but taking | ||
* An abstraction that has the exact same api as `requestUpdate`, but taking | ||
* into account: | ||
@@ -22,3 +22,3 @@ * - [member order independence](https://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence) | ||
* effects when values didn't change | ||
* All code previously present in requestUpdateInternal can be placed in this method. | ||
* All code previously present in requestUpdate can be placed in this method. | ||
* @param {string} name | ||
@@ -25,0 +25,0 @@ * @param {*} oldValue |
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
706063
20545
+ Added@lion/core@0.18.0(transitive)
+ Added@lion/localize@0.20.0(transitive)
+ Added@lit-labs/ssr-dom-shim@1.2.1(transitive)
+ Added@lit/reactive-element@1.6.32.0.4(transitive)
+ Added@open-wc/scoped-elements@2.2.4(transitive)
+ Added@types/trusted-types@2.0.7(transitive)
+ Addedlit@2.8.0(transitive)
+ Addedlit-element@3.3.3(transitive)
+ Addedlit-html@2.8.0(transitive)
- Removed@lion/core@0.17.0(transitive)
- Removed@lion/localize@0.19.0(transitive)
- Removed@open-wc/scoped-elements@1.3.7(transitive)
- Removedlit-element@2.4.0(transitive)
- Removedlit-html@1.4.1(transitive)
Updated@lion/core@0.18.0
Updated@lion/localize@0.20.0