resetInteractionState | public | Resets touched and dirty, and recomputes prefilled | | | InteractionStateMixin |
reset | public | Resets modelValue to initial value.
Interaction states are cleared | | | |
clear | public | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) | | | |
_onChange | protected | Dispatches custom bubble event | ev: Event= | | |
_triggerInitialModelValueChangedEvent | protected | | | | FormControlMixin |
_enhanceLightDomClasses | protected | | | | FormControlMixin |
_enhanceLightDomA11y | protected | | | | FormControlMixin |
_enhanceLightDomA11yForAdditionalSlots | protected | Enhances additional slots(prefix, suffix, before, after) defined by developer.
When boolean attribute data-label or data-description is found,
the slot element will be connected to the input via aria-labelledby or aria-describedby | additionalSlots: string[] | | FormControlMixin |
__reflectAriaAttr | protected | Will handle help text, validation feedback and character counter,
prefix/suffix/before/after (if they contain data-description flag attr).
Also, contents of id references that will be put in the <lion-field>._ariaDescribedby property
from an external context, will be read by a screen reader. | attrName: string, nodes: Element[], reorder: boolean|undefined | | FormControlMixin |
_groupOneTemplate | protected | | | TemplateResult | FormControlMixin |
_groupTwoTemplate | protected | | | TemplateResult | FormControlMixin |
_labelTemplate | protected | | | TemplateResult | FormControlMixin |
_helpTextTemplate | protected | | | TemplateResult | FormControlMixin |
_inputGroupTemplate | protected | | | TemplateResult | FormControlMixin |
_inputGroupBeforeTemplate | protected | | | TemplateResult | FormControlMixin |
_inputGroupPrefixTemplate | protected | | | TemplateResult | nothing | FormControlMixin |
_inputGroupInputTemplate | protected | | | TemplateResult | FormControlMixin |
_inputGroupSuffixTemplate | protected | | | TemplateResult | nothing | FormControlMixin |
_inputGroupAfterTemplate | protected | | | TemplateResult | FormControlMixin |
_feedbackTemplate | protected | | | TemplateResult | FormControlMixin |
_isEmpty | protected | Used for Required validation and computation of interaction states | modelValue: any | boolean | FormControlMixin |
_getAriaDescriptionElements | protected | This function exposes descripion elements that a FormGroup should expose to its
children. See FormGroupMixin.__getAllDescriptionElementsInParentChain() | | Array.<HTMLElement> | FormControlMixin |
addToAriaLabelledBy | public | Allows to add extra element references to aria-labelledby attribute. | element: HTMLElement, { idPrefix = '', reorder = true }, customConfig: {idPrefix?:string; reorder?: boolean} | | FormControlMixin |
removeFromAriaLabelledBy | public | Allows to remove element references from aria-labelledby attribute. | element: HTMLElement | | FormControlMixin |
addToAriaDescribedBy | public | Allows to add element references to aria-describedby attribute. | element: HTMLElement, { idPrefix = '', reorder = true }, customConfig: {idPrefix?:string; reorder?: boolean} | | FormControlMixin |
removeFromAriaDescribedBy | public | Allows to remove element references from aria-describedby attribute. | element: HTMLElement | | FormControlMixin |
__getDirectSlotChild | protected | | slotName: string | HTMLElement | undefined | FormControlMixin |
_dispatchInitialModelValueChangedEvent | protected | | | | FormControlMixin |
_onBeforeRepropagateChildrenValues | protected | Hook for Subclassers to add logic before repropagation | ev: CustomEvent | | FormControlMixin |
__repropagateChildrenValues | protected | | ev: CustomEvent | | FormControlMixin |
_repropagationCondition | protected | Based on provided target, this condition determines whether received model-value-changed
event should be repropagated | target: FormControlHost | | FormControlMixin |
_onLabelClick | protected | | | | FormControlMixin |
makeRequestToBeDisabled | public | | | | DisabledMixin |
retractRequestToBeDisabled | public | | | | DisabledMixin |
click | public | | | | DisabledMixin |
initInteractionState | public | Evaluations performed on connectedCallback.
This method is public, so it can be called at a later moment (when we need to wait for
registering children for instance) as well.
Since this method will be called twice in last mentioned scenario, it must stay idempotent. | | | InteractionStateMixin |
_iStateOnLeave | protected | Sets touched value to true and reevaluates prefilled state.
When false, on next interaction, user will start with a clean state. | | | InteractionStateMixin |
_iStateOnValueChange | protected | Sets dirty value and validates when already touched or invalid | | | InteractionStateMixin |
_onTouchedChanged | protected | Dispatches event on touched state change | | | InteractionStateMixin |
_onDirtyChanged | protected | Dispatches event on touched state change | | | InteractionStateMixin |
_showFeedbackConditionFor | protected | Default feedbackCondition condition, used by Subclassers, that will be used when
`feedbackCondition()` is not overridden by Application Developer.
Show the validity feedback when returning true, don't show when false | type: string, meta: InteractionStates | | ValidateMixin |
focus | public | Calls `focus()` on focusable element within | | | FocusMixin |
blur | public | Calls `blur()` on focusable element within | | | FocusMixin |
preprocessor | public | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessro that smartly
updates the viewValue and caret position for best UX. | v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number } | { viewValue:string; caretIndex:number; }|string|undefined | FormatMixin |
parser | public | Converts viewValue to modelValue
For instance, a localized date to a Date Object | v: string, opts: FormatOptions | * | FormatMixin |
formatter | public | Converts modelValue to formattedValue (formattedValue will be synced with
`._inputNode.value`)
For instance, a Date object to a localized date. | v: *, opts: FormatOptions | string | FormatMixin |
serializer | public | Converts `.modelValue` to `.serializedValue`
For instance, a Date object to an iso formatted date string | v: ? | string | FormatMixin |
deserializer | public | Converts `.serializedValue` to `.modelValue`
For instance, an iso formatted date string to a Date object | v: ? | ? | FormatMixin |
_calculateValues | protected | Responsible for storing all representations(modelValue, serializedValue, formattedValue
and value) of the input value. Prevents infinite loops, so all value observers can be
treated like they will only be called once, without indirectly calling other observers.
(in fact, some are called twice, but the __preventRecursiveTrigger lock prevents the
second call from having effect). | { source }, config: {source:'model'|'serialized'|'formatted'|null} | | FormatMixin |
_onModelValueChanged | protected | Responds to modelValue changes in the synchronous cycle (most subclassers should listen to
the asynchronous cycle ('modelValue' in the .updated lifecycle)) | args: { modelValue: unknown; }[] | | FormatMixin |
_dispatchModelValueChangedEvent | protected | This is wrapped in a distinct method, so that parents can control when the changed event
is fired. For objects, a deep comparison might be needed. | args: { modelValue: unknown; }[] | | FormatMixin |
_syncValueUpwards | protected | Synchronization from `._inputNode.value` to `LionField` (flow [2])
Downwards syncing should only happen for `LionField`.value changes from 'above'.
This triggers _onModelValueChanged and connects user input
to the parsing/formatting/serializing loop. | | | FormatMixin |
_reflectBackFormattedValueToUser | protected | Synchronization from `LionField.value` to `._inputNode.value`
- flow [1] will always be reflected back
- flow [2] will not be reflected back when this flow was triggered via
`@user-input-changed` (this will happen later, when `formatOn` condition is met) | | | FormatMixin |
_reflectBackOn | protected | Every time .formattedValue is attempted to sync to the view value (on change/blur and on
modelValue change), this condition is checked. When enhancing it, it's recommended to
call via `return this._myExtraCondition && super._reflectBackOn()` | | boolean | FormatMixin |
_proxyInputEvent | protected | This can be called whenever the view value should be updated. Dependent on component type
("input" for <input> or "change" for <select>(mainly for IE)) a different event should be
used as source for the "user-input-changed" event (which can be seen as an abstraction
layer on top of other events (input, change, whatever)) | | | FormatMixin |
_onUserInputChanged | protected | | | | FormatMixin |
__onCompositionEvent | protected | | { type }, event: Event | | FormatMixin |
validate | public | Triggered by:
- modelValue change
- change in the 'validators' array
- change in the config of an individual Validator
Three situations are handled:
- a1) the FormControl is empty: further execution is halted. When the Required Validator
(being mutually exclusive to the other Validators) is applied, it will end up in the
validation result (as the only Validator, since further execution was halted).
- a2) there are synchronous Validators: this is the most common flow. When modelValue hasn't
changed since last async results were generated, 'sync results' are merged with the
'async results'.
- a3) there are asynchronous Validators: for instance when server side evaluation is needed.
Executions are scheduled and awaited and the 'async results' are merged with the
'sync results'.
- b) there are MetaValidators. After steps a1, a2, or a3 are finished, the holistic
MetaValidators (evaluating the total result of the 'regular' (a1, a2 and a3) validators)
will be run...
Situations a2 and a3 are not mutually exclusive and can be triggered within one `validate()`
call. Situation b will occur after every call. | { clearCurrentResult = false }, opts: { clearCurrentResult?: boolean } | | ValidateMixin |
__executeValidators | protected | | | | ValidateMixin |
_onValidatorUpdated | protected | | e: Event|CustomEvent | | ValidateMixin |
_updateFeedbackComponent | protected | Responsible for retrieving messages from Validators and
(delegation of) rendering them.
For `._feedbackNode` (extension of LionValidationFeedback):
- retrieve messages from highest prio Validators
- provide the result to custom feedback node and let the
custom node decide on their renderings
In both cases:
- we compute the 'show' flag (like 'hasErrorVisible') for all types
- we set the customValidity message of the highest prio Validator
- we set aria-invalid="true" in case hasErrorVisible is true | | | ValidateMixin |
feedbackCondition | public | Allows the Application Developer to specify when a feedback message should be shown | type: string, meta: object, currentCondition: ((type: string, meta: object) => boolean) | boolean | ValidateMixin |
_hasFeedbackVisibleFor | protected | Used to translate `.hasFeedbackFor` and `.shouldShowFeedbackFor` to `.showsFeedbackFor` | type: string | | ValidateMixin |
_updateShouldShowFeedbackFor | protected | | | | ValidateMixin |
_prioritizeAndFilterFeedback | protected | Orders all active validators in this.__validationResult.
Can also filter out occurrences (based on interaction states) | { validationResult }, opts: { validationResult: Validator[] } | Validator[] | ValidateMixin |
