diff --git a/.changeset/fast-years-search.md b/.changeset/fast-years-search.md new file mode 100644 index 000000000..cdbe6f16c --- /dev/null +++ b/.changeset/fast-years-search.md @@ -0,0 +1,7 @@ +--- +'@lion/form-integrations': patch +'@lion/localize': patch +--- + +Improved localize DX by making it clear from source code structure what are main (exported) functions and what are util/helper functions consumed by those main functions. +Added Chrome Intl corrections for Philippine currency names and en-GB short month names. diff --git a/.changeset/slow-forks-speak.md b/.changeset/slow-forks-speak.md new file mode 100644 index 000000000..701cbe1e7 --- /dev/null +++ b/.changeset/slow-forks-speak.md @@ -0,0 +1,9 @@ +--- +'@lion/form-core': minor +'@lion/listbox': minor +--- + +Added `isTriggeredByUser` meta data in `model-value-changed` event + +Sometimes it can be helpful to detect whether a value change was caused by a user or via a programmatical change. +This feature acts as a normalization layer: since we use `model-value-changed` as a single source of truth event for all FormControls, there should be no use cases for (inconsistently implemented (cross browser)) events like `input`/`change`/`user-input-changed` etc. diff --git a/packages/form-core/types/FormControlMixinTypes.d.ts b/packages/form-core/types/FormControlMixinTypes.d.ts index 581186cdc..c0b01c739 100644 --- a/packages/form-core/types/FormControlMixinTypes.d.ts +++ b/packages/form-core/types/FormControlMixinTypes.d.ts @@ -6,7 +6,7 @@ import { DisabledHost } from '@lion/core/types/DisabledMixinTypes'; import { LionValidationFeedback } from '../src/validate/LionValidationFeedback'; import { FormRegisteringHost } from './registration/FormRegisteringMixinTypes'; -export type ModelValueEventDetails { +export type ModelValueEventDetails = { /** * A list that represents the path of FormControls the model-value-changed event * 'traveled through'. @@ -15,10 +15,12 @@ export type ModelValueEventDetails { */ formPath: HTMLElement[]; /** - * Whether the model-value-changed event is triggered via user interaction. This information - * can be helpful for both Application Developers and Subclassers. - * This concept is related to the native isTrusted property: - * https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted + * Sometimes it can be helpful to detect whether a value change was caused by a user or + * via a programmatical change. + * This feature acts as a normalization layer: since we use `model-value-changed` as a single + * source of truth event for all FormControls, there should be no use cases for + * (inconsistently implemented (cross browser)) events + * like 'input'/'change'/'user-input-changed' etc.) */ isTriggeredByUser: boolean; /** @@ -27,7 +29,7 @@ export type ModelValueEventDetails { * case `isTriggeredByUser` is true)) */ initialize?: boolean; -} +}; declare interface HTMLElementWithValue extends HTMLElement { value: string; diff --git a/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts b/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts index 622a58e3a..00326c14d 100644 --- a/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts +++ b/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts @@ -35,6 +35,7 @@ export declare class ChoiceInputHost { render(): TemplateResult; _choiceGraphicTemplate(): TemplateResult; + _afterTemplate(): TemplateResult; connectedCallback(): void; disconnectedCallback(): void; @@ -47,6 +48,8 @@ export declare class ChoiceInputHost { __syncCheckedToInputElement(): void; + __isHandlingUserInput: boolean; + _proxyInputEvent(): void; _onModelValueChanged( diff --git a/packages/form-integrations/docs/17-validation-examples.md b/packages/form-integrations/docs/17-validation-examples.md index 1401d614d..92b22ace3 100644 --- a/packages/form-integrations/docs/17-validation-examples.md +++ b/packages/form-integrations/docs/17-validation-examples.md @@ -58,7 +58,11 @@ Useful on input elements it allows to define how many characters can be entered. ```js preview-story export const stringValidators = () => html` - + { * - false: when .modelValue (or checked) set programmatically * * ChoiceGroupField (listbox, select-rich, combobox, radio-group, checkbox-group): - * - true: when child formElement condition for Choice Field is met - * - false: when child formElement condition for Choice Field is not met + * - true: when child formElement condition for ChoiceField(Option) is met + * - false: when child formElement condition for ChoiceField(Option) is not met * * FormOrFieldset (fieldset, form): - * - true: when child formElement condition for Field is met - * - false: when child formElement condition for Field is not met + * - true: when child formElement condition for RegularField is met + * - false: when child formElement condition for RegularField is not met */ const featureDetectChoiceField = el => 'checked' in el && 'choiceValue' in el;