package.web-types.lit.json Maven / Gradle / Ivy
The newest version!
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/number-field",
"version": "24.6.0",
"description-markup": "markdown",
"framework": "lit",
"framework-config": {
"enable-when": {
"node-packages": [
"lit"
]
}
},
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-number-field",
"description": "`` is an input field web component that only accepts numeric input.\n\n```html\n` provides the same set of shadow DOM parts and state attributes as ``.\nSee [``](https://cdn.vaadin.com/vaadin-web-components/24.6.0/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `` parts, the following parts are available for theming:\n\nPart name | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
"extension": true,
"attributes": [
{
"name": "?disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"kind": "expression"
}
},
{
"name": "?autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"kind": "expression"
}
},
{
"name": "?invalid",
"description": "Set to true when the field is invalid.",
"value": {
"kind": "expression"
}
},
{
"name": "?manualValidation",
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
"value": {
"kind": "expression"
}
},
{
"name": "?required",
"description": "Specifies that the user must fill in a value.",
"value": {
"kind": "expression"
}
},
{
"name": "?clearButtonVisible",
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
"value": {
"kind": "expression"
}
},
{
"name": "?autoselect",
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
"value": {
"kind": "expression"
}
},
{
"name": "?readonly",
"description": "When present, it specifies that the field is read-only.",
"value": {
"kind": "expression"
}
},
{
"name": "?stepButtonsVisible",
"description": "Set to true to show increase/decrease buttons.",
"value": {
"kind": "expression"
}
},
{
"name": ".label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"kind": "expression"
}
},
{
"name": ".errorMessage",
"description": "Error to show when the field is invalid.",
"value": {
"kind": "expression"
}
},
{
"name": ".helperText",
"description": "String used for the helper text.",
"value": {
"kind": "expression"
}
},
{
"name": ".accessibleName",
"description": "String used to label the component to screen reader users.",
"value": {
"kind": "expression"
}
},
{
"name": ".accessibleNameRef",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"kind": "expression"
}
},
{
"name": ".value",
"description": "The value of the field.",
"value": {
"kind": "expression"
}
},
{
"name": ".allowedCharPattern",
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
"value": {
"kind": "expression"
}
},
{
"name": ".name",
"description": "The name of this field.",
"value": {
"kind": "expression"
}
},
{
"name": ".placeholder",
"description": "A hint to the user of what can be entered in the field.",
"value": {
"kind": "expression"
}
},
{
"name": ".title",
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
"value": {
"kind": "expression"
}
},
{
"name": ".autocomplete",
"description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
"value": {
"kind": "expression"
}
},
{
"name": ".autocorrect",
"description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
"value": {
"kind": "expression"
}
},
{
"name": ".autocapitalize",
"description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
"value": {
"kind": "expression"
}
},
{
"name": ".min",
"description": "The minimum value of the field.",
"value": {
"kind": "expression"
}
},
{
"name": ".max",
"description": "The maximum value of the field.",
"value": {
"kind": "expression"
}
},
{
"name": ".step",
"description": "Specifies the allowed number intervals of the field.",
"value": {
"kind": "expression"
}
},
{
"name": "@validated",
"description": "Fired whenever the field is validated.",
"value": {
"kind": "expression"
}
},
{
"name": "@change",
"description": "Fired when the user commits a value change.",
"value": {
"kind": "expression"
}
},
{
"name": "@input",
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button.",
"value": {
"kind": "expression"
}
},
{
"name": "@invalid-changed",
"description": "Fired when the `invalid` property changes.",
"value": {
"kind": "expression"
}
},
{
"name": "@value-changed",
"description": "Fired when the `value` property changes.",
"value": {
"kind": "expression"
}
}
]
}
]
}
}
} © 2015 - 2024 Weber Informatics LLC | Privacy Policy