time-pickerpackage.web-types.json Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/time-picker",
"version": "24.4.7",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-time-picker",
"description": "`` is a Web Component providing a time-selection field.\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.4.7/#/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`toggle-button` | The toggle button\n\nIn addition to `` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `` itself, the following internal\ncomponents are themable:\n\n- `` - has the same API as [``](https://cdn.vaadin.com/vaadin-web-components/24.4.7/#/elements/vaadin-combo-box-light).\n- `` - has the same API as [``](https://cdn.vaadin.com/vaadin-web-components/24.4.7/#/elements/vaadin-overlay).\n- `` - has the same API as [``](https://cdn.vaadin.com/vaadin-web-components/24.4.7/#/elements/vaadin-item).\n- [``](https://cdn.vaadin.com/vaadin-web-components/24.4.7/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `` is\npropagated to the internal components listed above.\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 | unparsable-change",
"attributes": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "error-message",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helper-text",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name-ref",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The time value for this element.\n\nSupported time formats are in ISO 8601:\n- `hh:mm` (default)\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
"value": {
"type": [
"string"
]
}
},
{
"name": "clear-button-visible",
"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": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "allowed-char-pattern",
"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": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autoselect",
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "name",
"description": "The name of this field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "placeholder",
"description": "A hint to the user of what can be entered in the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "readonly",
"description": "When present, it specifies that the field is read-only.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "title",
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "pattern",
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "opened",
"description": "True if the dropdown is open, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "min",
"description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
"value": {
"type": [
"string"
]
}
},
{
"name": "max",
"description": "Maximum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
"value": {
"type": [
"string"
]
}
},
{
"name": "step",
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the value string. By default\nthe component formats values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX experience.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "auto-open-disabled",
"description": "Set true to prevent the overlay from opening automatically.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "overlay-class",
"description": "A space-delimited list of CSS class names to set on the overlay element.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "theme",
"description": "The theme variants to apply to the component.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "errorMessage",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helperText",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleName",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleNameRef",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The time value for this element.\n\nSupported time formats are in ISO 8601:\n- `hh:mm` (default)\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
"value": {
"type": [
"string"
]
}
},
{
"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": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"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": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autoselect",
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "name",
"description": "The name of this field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "placeholder",
"description": "A hint to the user of what can be entered in the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "readonly",
"description": "When present, it specifies that the field is read-only.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "title",
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "pattern",
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "opened",
"description": "True if the dropdown is open, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "min",
"description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
"value": {
"type": [
"string"
]
}
},
{
"name": "max",
"description": "Maximum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
"value": {
"type": [
"string"
]
}
},
{
"name": "step",
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the value string. By default\nthe component formats values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX experience.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "autoOpenDisabled",
"description": "Set true to prevent the overlay from opening automatically.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "overlayClass",
"description": "A space-delimited list of CSS class names to set on the overlay element.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "i18n",
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nBoth `formatTime` and `parseTime` need to be implemented\nto ensure the component works properly.",
"value": {
"type": [
"TimePickerI18n"
]
}
}
],
"events": [
{
"name": "validated",
"description": "Fired whenever the field is validated."
},
{
"name": "change",
"description": "Fired when the user commits a value change."
},
{
"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."
},
{
"name": "value-changed",
"description": "Fired when the `value` property changes."
},
{
"name": "opened-changed",
"description": "Fired when the `opened` property changes."
},
{
"name": "invalid-changed",
"description": "Fired when the `invalid` property changes."
}
]
}
}
]
}
}
}