UNPKG

@lion/ui

Version:

A package of extendable web components

github.com/ing-bank/lion/

ing-bank/lion

76 lines (70 loc) • 123 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
--- parts: - API Table - Fieldset title: 'Fieldset: API Table' eleventyNavigation: key: API Table >> Fieldset title: API Table order: 90 parent: Fieldset --- # Fieldset: API Table ## class: `LionFieldset`, `lion-fieldset` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | -------------------------- | --------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | `defaultValidators` | public | `Validator[]` | `[new FormElementsHaveNoError()]` | Used by Subclassers to add default Validators to a particular FormControl.&#xA;A date input for instance, always needs the isDate validator. | ValidateMixin | | `dirty` | public | `boolean` | `false` | True when any of the children is dirty (see InteractionStateMixin for more details.) | FormGroupMixin | | `disabled` | public | `boolean` | `false` | Disables all formElements in group | DisabledMixin | | `done` | public | `boolean` | `false` | | FormRegistrarMixin | | `fieldName` | public | `string` | | Will be used in validation messages to refer to the current field | FormControlMixin | | `focused` | public | `boolean` | `false` | True when any of the children is focused. | FormGroupMixin | | `formattedValue` | public | | | Object keyed by formElements names, containing formElements' formattedValues | FormGroupMixin | | `formElements` | public | `FormControlsCollection` | `new FormControlsCollection()` | Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed&#xA;both like an array and an object (based on control/element names). | FormRegistrarMixin | | `hasFeedbackFor` | public | `ValidationType[]` | `[]` | As soon as validation happens (after modelValue/validators/validator param change), this&#xA;array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).&#xA;Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on&#xA;\`.feedbackCondition()\`.&#xA;&#xA;For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can&#xA;be useful for subtle visual feedback on keyup, like a red/green border around an input. | ValidateMixin | | `helpText` | public | `string` | | The helpt text for the input node.&#xA;When no light dom defined via \[slot=help-text], this value will be used | FormControlMixin | | `initComplete` | public | `Promise<any>` | `new Promise((resolve, reject) => { this.__resolveInitComplete = resolve; this.__rejectInitComplete = reject; })` | initComplete resolves after all pending initialization logic&#xA;(for instance \`\<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>\`)&#xA;is executed | FormRegistrarMixin | | `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.&#xA;Creates attribute \[is-pending] as a styling hook | ValidateMixin | | `label` | public | `string` | | The label text for the input node.&#xA;When no light dom defined via \[slot=label], this value will be used. | FormControlMixin | | `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | FormControlMixin | | `modelValue` | public | | | Object keyed by formElements names, containing formElements' modelValues | FormControlMixin | | `operationMode` | public | `OperationMode` | | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload') | ValidateMixin | | `prefilled` | public | `boolean` | | True when all of the children are prefilled (see InteractionStateMixin for more details.) | FormGroupMixin | | `readOnly` | public | `boolean` | `false` | A Boolean attribute which, if present, indicates that the user should not be able to edit&#xA;the value of the input. The difference between disabled and readonly is that read-only&#xA;controls can still function, whereas disabled controls generally do not function as&#xA;controls until they are enabled.&#xA;(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | FormControlMixin | | `registrationComplete` | public | `Promise<any> & {done?:boolean}` | `new Promise((resolve, reject) => { this.__resolveRegistrationComplete = resolve; this.__rejectRegistrationComplete = reject; })` | registrationComplete waits for all children formElements to have registered | FormRegistrarMixin | | `serializedValue` | public | | | Object keyed by formElements names, containing formElements' serializedValues | FormGroupMixin | | `showsFeedbackFor` | public | `ValidationType[]` | `[]` | Based on outcome of feedbackCondition, this array decides what ValidationTypes should be&#xA;shown in validationFeedback, based on meta data like interaction states.&#xA;&#xA;For styling purposes, it reflects it \`\[shows-feedback-for="error warning"]\` | ValidateMixin | | `submitted` | public | `boolean` | `false` | True when parent form is submitted | FormGroupMixin | | `touched` | public | `boolean` | `false` | True when the group as a whole is blurred (see InteractionStateMixin for more details.) | FormGroupMixin | | `validationStates` | public | `ValidationStates` | `{}` | The outcome of a validation 'round'. Keyed by ValidationType and Validator name | ValidateMixin | | `validators` | public | `Validator[]` | `[]` | Used by Application Developers to add Validators to a FormControl. | ValidateMixin | | `value` | public | `string` | `''` | | FormGroupMixin | | `_allValidators` | protected | `(Validator \| MetaValidator)[]` | | Combination of validators provided by Application Developer and the default validators | ValidateMixin | | `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-describedby of \`.\_inputNode\` | FormControlMixin | | `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\` | FormControlMixin | | `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | ValidateMixin | | `_feedbackNode` | protected | | | Element where validation feedback will be rendered to | FormControlMixin | | `_helpTextNode` | protected | | | Element where help text will be rendered to | FormControlMixin | | `_initialModelValue` | protected | | | Gathers initial model values of all children. Used when resetGroup() is called. | FormGroupMixin | | `_inputId` | protected | `string` | | Unique id that can be used in all light dom | FormControlMixin | | `_inputNode` | protected | | | The host element with role group (or radio-group or form) containing necessary aria attributes | FormControlMixin | | `_isFormOrFieldset` | protected | `boolean` | `true` | Flag that determines how ".formElements" should behave.&#xA;For a regular fieldset (see LionFieldset) we expect ".formElements"&#xA;to be accessible as an object.&#xA;In case of a radio-group, a checkbox-group or a select/listbox,&#xA;it should act like an array (see ChoiceGroupMixin).&#xA;Usually, when false, we deal with a choice-group (radio-group, checkbox-group,&#xA;(multi)select) | FormRegistrarMixin | | `_isRepropagationEndpoint` | public | `boolean` | `false` | By default, a field with \_repropagationRole 'choice-group' will act as an&#xA;'endpoint'. This means it will be considered as an individual field: for&#xA;a select, individual options will not be part of the formPath. They&#xA;will.&#xA;Similarly, components that (a11y wise) need to be fieldsets, but 'interaction wise'&#xA;(from Application Developer perspective) need to be more like fields&#xA;(think of an amount-input with a currency select box next to it), can set this&#xA;to true to hide private internals in the formPath. | FormControlMixin | | `_labelNode` | protected | | | Element where label will be rendered to | FormControlMixin | | `_repropagationRole` | public | `'child'\|'choice-group'\|'fieldset'` | `'fieldset'` | Based on the role, details of handling model-value-changed repropagation differ. | FormControlMixin | | `_requestedToBeDisabled` | protected | `boolean` | `false` | | DisabledMixin | | `_visibleMessagesAmount` | protected | `number` | `1` | The amount of feedback messages that will visible in LionValidationFeedback | ValidateMixin | ### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ---------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------------- | ------------------ | | `addFormElement` | public | | `child: FormControl & {serializedValue:string\|object}, indexToInsertAt: number` | | FormRegistrarMixin | | `addToAriaDescribedBy` | public | Allows to add element references to aria-describedby attribute. | `element: HTMLElement, { idPrefix = '', reorder = true }, customConfig: {idPrefix?:string; reorder?: boolean}` | | FormControlMixin | | `addToAriaLabelledBy` | public | Allows to add extra element references to aria-labelledby attribute. | `element: HTMLElement, { idPrefix = '', reorder = true }, customConfig: {idPrefix?:string; reorder?: boolean}` | | FormControlMixin | | `clearGroup` | public | Clears all values and resets all interaction states of all FormControls in group, | | | FormGroupMixin | | `click` | public | | | | DisabledMixin | | `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 | | `isRegisteredFormElement` | public | | `el: ElementWithParentFormGroup` | | FormRegistrarMixin | | `makeRequestToBeDisabled` | public | | | | DisabledMixin | | `removeFormElement` | public | | `el: FormRegisteringHost & FormControl` | | FormRegistrarMixin | | `removeFromAriaDescribedBy` | public | Allows to remove element references from aria-describedby attribute.