addToAriaDescribedBy | public | Allows to add element references to aria-describedby attribute. | element: HTMLElement, { idPrefix = '', reorder = true }, customConfig: {idPrefix?:string; reorder?: boolean} | | LionField |
addToAriaLabelledBy | public | Allows to add extra element references to aria-labelledby attribute. | element: HTMLElement, { idPrefix = '', reorder = true }, customConfig: {idPrefix?:string; reorder?: boolean} | | LionField |
attachShadow | public | | options: ShadowRootInit | ShadowRoot | LionField |
blur | public | Calls `blur()` on focusable element within | | | LionField |
clear | public | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) | | | LionField |
click | public | | | | LionField |
createScopedElement | public | | tagName | | LionField |
defineScopedElement | public | Defines a scoped element. | tagName: string, classToBeRegistered: typeof HTMLElement | | LionField |
deserializer | public | Converts `.serializedValue` to `.modelValue`
For instance, an iso formatted date string to a Date object | v: ? | ? | LionField |
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 | LionField |
focus | public | Calls `focus()` on focusable element within | | | LionField |
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 | LionField |
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. | | | LionField |
makeRequestToBeDisabled | public | | | | LionField |
parser | public | Converts viewValue to modelValue
For instance, a localized date to a Date Object | v: string, opts: FormatOptions | * | LionField |
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 | LionField |
removeFromAriaDescribedBy | public | Allows to remove element references from aria-describedby attribute. | element: HTMLElement | | LionField |
removeFromAriaLabelledBy | public | Allows to remove element references from aria-labelledby attribute. | element: HTMLElement | | LionField |
reset | public | Resets modelValue to initial value.
Interaction states are cleared | | | LionField |
resetInteractionState | public | Resets touched and dirty, and recomputes prefilled | | | LionField |
retractRequestToBeDisabled | public | | | | LionField |
serializer | public | Converts `.modelValue` to `.serializedValue`
For instance, a Date object to an iso formatted date string | v: ? | string | LionField |
updateSync | public | An abstraction that has the exact same api as `requestUpdate`, but taking
into account:
- [member order independence](https://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence)
- property effects start when all (light) dom has initialized (on firstUpdated)
- property effects don't interrupt the first meaningful paint
- compatible with propertyAccessor.`hasChanged`: no manual checks needed or accidentally
run property effects / events when no change happened
effects when values didn't change
All code previously present in requestUpdate can be placed in this method. | name: string, oldValue: ? | | LionField |
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 } | | LionField |
_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} | | LionField |
_connectSlotMixin | protected | | | | LionField |
_dispatchInitialModelValueChangedEvent | protected | | | | LionField |
_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; }[] | | LionField |
_enhanceLightDomA11y | protected | | | | LionField |
_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[] | | LionField |
_enhanceLightDomClasses | protected | | | | LionField |
_feedbackTemplate | protected | | | TemplateResult | LionField |
_getAriaDescriptionElements | protected | This function exposes descripion elements that a FormGroup should expose to its
children. See FormGroupMixin.__getAllDescriptionElementsInParentChain() | | Array.<HTMLElement> | LionField |
_groupOneTemplate | protected | | | TemplateResult | LionField |
_groupTwoTemplate | protected | | | TemplateResult | LionField |
_hasFeedbackVisibleFor | protected | Used to translate `.hasFeedbackFor` and `.shouldShowFeedbackFor` to `.showsFeedbackFor` | type: string | | LionField |
_helpTextTemplate | protected | | | TemplateResult | LionField |
_inputGroupAfterTemplate | protected | | | TemplateResult | LionField |
_inputGroupBeforeTemplate | protected | | | TemplateResult | LionField |
_inputGroupInputTemplate | protected | | | TemplateResult | LionField |
_inputGroupPrefixTemplate | protected | | | TemplateResult | nothing | LionField |
_inputGroupSuffixTemplate | protected | | | TemplateResult | nothing | LionField |
_inputGroupTemplate | protected | | | TemplateResult | LionField |
_isEmpty | protected | Used for Required validation and computation of interaction states | modelValue: any | boolean | LionField |
_isPrivateSlot | protected | | slotName: string | boolean | LionField |
_iStateOnLeave | protected | Sets touched value to true and reevaluates prefilled state.
When false, on next interaction, user will start with a clean state. | | | LionField |
_iStateOnValueChange | protected | Sets dirty value and validates when already touched or invalid | | | LionField |
_labelTemplate | protected | | | TemplateResult | LionField |
_onBeforeRepropagateChildrenValues | protected | Hook for Subclassers to add logic before repropagation | ev: CustomEvent | | LionField |
_onChange | protected | Dispatches custom bubble event | ev: Event= | | LionField |
_onDirtyChanged | protected | Dispatches event on touched state change | | | LionField |
_onLabelClick | protected | | | | LionField |
_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; }[] | | LionField |
_onTouchedChanged | protected | Dispatches event on touched state change | | | LionField |
_onUserInputChanged | protected | | | | LionField |
_onValidatorUpdated | protected | | e: Event|CustomEvent | | LionField |
_prioritizeAndFilterFeedback | protected | Orders all active validators in this.__validationResult.
Can also filter out occurrences (based on interaction states) | { validationResult }, opts: { validationResult: Validator[] } | Validator[] | LionField |
_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)) | | | LionField |
_reflectBackFormattedValueToUser | protected | Note: Overrides the implementation from FormatMixin | | | LionField |
_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 | LionField |
_repropagationCondition | protected | Based on provided target, this condition determines whether received model-value-changed
event should be repropagated | target: FormControlHost | | LionField |
_setValueAndPreserveCaret | protected | Restores the cursor to its original position after updating the value. | newValue: string | | NativeTextFieldMixin |
_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 | | LionField |
_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. | | | LionField |
_triggerInitialModelValueChangedEvent | protected | | | | LionField |
_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 | | | LionField |
_updateShouldShowFeedbackFor | protected | | | | LionField |