pull/5323/head
Cagatay Civici 2024-02-22 12:35:29 +03:00
commit 9d8e2cfd65
11 changed files with 307 additions and 259 deletions

View File

@ -1,9 +1,9 @@
const InputSwitchProps = [
const InputOtpProps = [
{
name: 'modelValue',
type: 'boolean',
default: 'null',
description: 'Specifies whether a inputswitch should be checked or not.'
description: 'Specifies whether a inputOtp should be checked or not.'
},
{
name: 'trueValue',
@ -55,7 +55,7 @@ const InputSwitchProps = [
}
];
const InputSwitchEvents = [
const InputOtpEvents = [
{
name: 'click',
description: 'Callback to invoke on click.'
@ -71,10 +71,10 @@ const InputSwitchEvents = [
];
module.exports = {
inputswitch: {
name: 'InputSwitch',
description: 'InputSwitch is used to select a boolean value.',
props: InputSwitchProps,
events: InputSwitchEvents
inputotp: {
name: 'InputOtp',
description: 'InputOtp is used to enter one time passwords.',
props: InputOtpProps,
events: InputOtpEvents
}
};

View File

@ -193,10 +193,11 @@ import InlineMessage from 'primevue/inlinemessage';
import Inplace from 'primevue/inplace';
import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';
import InputSwitch from 'primevue/inputswitch';
import InputText from 'primevue/inputtext';
import InputMask from 'primevue/inputmask';
import InputNumber from 'primevue/inputnumber';
import InputOtp from 'primevue/inputotp';
import InputSwitch from 'primevue/inputswitch';
import InputText from 'primevue/inputtext';
import Knob from 'primevue/knob';
import Listbox from 'primevue/listbox';
import MegaMenu from 'primevue/megamenu';
@ -313,6 +314,7 @@ app.component('InputGroupAddon', InputGroupAddon);
app.component('InputIcon', InputIcon);
app.component('InputMask', InputMask);
app.component('InputNumber', InputNumber);
app.component('InputOtp', InputOtp);
app.component('InputSwitch', InputSwitch);
app.component('InputText', InputText);
app.component('Knob', Knob);

View File

@ -1,22 +1,24 @@
/**
*
* InputSwitch is used to select a boolean value.
* InputOtp is used to enter one time passwords.
*
* [Live Demo](https://www.primevue.org/inputswitch/)
* [Live Demo](https://www.primevue.org/inputotp/)
*
* @module inputotp
*
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent/BaseComponent';
import { InputTextPassThroughOptions } from '../inputtext';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined;
export declare type InputOtpPassThroughOptionType = InputOtpPassThroughAttributes | ((options: InputOtpPassThroughMethodOptions) => InputOtpPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface InputSwitchPassThroughMethodOptions {
export interface InputOtpPassThroughMethodOptions {
/**
* Defines instance.
*/
@ -24,23 +26,15 @@ export interface InputSwitchPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: InputSwitchProps;
props: InputOtpProps;
/**
* Defines current inline state.
*/
state: InputSwitchState;
/**
* Defines current options.
*/
context: InputSwitchContext;
state: InputOtpState;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
@ -48,22 +42,33 @@ export interface InputSwitchPassThroughMethodOptions {
}
/**
* Custom passthrough(pt) options.
* @see {@link InputSwitchProps.pt}
* Custom shared passthrough(pt) option method.
*/
export interface InputSwitchPassThroughOptions {
export interface InputOtpSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: InputOtpProps;
/**
* Defines current inline state.
*/
state: InputOtpState;
}
/**
* Custom passthrough(pt) options.
* @see {@link InputOtpProps.pt}
*/
export interface InputOtpPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: InputSwitchPassThroughOptionType;
root?: InputOtpPassThroughOptionType;
/**
* Used to pass attributes to the input's DOM element.
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: InputSwitchPassThroughOptionType;
/**
* Used to pass attributes to the slider's DOM element.
*/
slider?: InputSwitchPassThroughOptionType;
input?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -74,36 +79,70 @@ export interface InputSwitchPassThroughOptions {
/**
* Custom passthrough attributes for each DOM elements
*/
export interface InputSwitchPassThroughAttributes {
export interface InputOtpPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in InputSwitch component.
* Defines current inline state in InputOtp component.
*/
export interface InputSwitchState {
[key: string]: any;
}
/**
* Defines valid properties in InputSwitch component.
*/
export interface InputSwitchProps {
export interface InputOtpState {
/**
* Specifies whether a inputswitch should be checked or not.
* Array of input tokens
*/
tokens: string[] | number[];
}
/**
* InputOtp attr options
*/
export interface InputOtpTemplateAttrsOptions {
/**
* Input token value
*/
value: string;
}
/**
* InputOtp templating events
*/
export interface InputOtpTemplateEvents {
/**
* Input event
* @param {Event} event - Browser event
*/
input: (event: Event) => void;
/**
* Keydown event
* @param {Event} event - Browser event
*/
keydown: (event: Event) => void;
/**
* Focus event
* @param {Event} event - Browser event
*/
focus: (event: Event) => void;
/**
* Blur event
* @param {Event} event - Browser event
*/
blur: (event: Event) => void;
/**
* Paste event
* @param {Event} event - Browser event
*/
paste: (event: Event) => void;
}
/**
* Defines valid properties in InputOtp component.
*/
export interface InputOtpProps {
/**
* Specifies whether a inputotp should be checked or not.
* @defaultValue false
*/
modelValue?: boolean | string | undefined;
/**
* Value in checked state.
* @defaultValue true
*/
trueValue?: any;
/**
* Value in unchecked state.
* @defaultValue false
*/
falseValue?: any;
/**
* When present, it specifies that the component should have invalid state style.
* @defaultValue false
@ -116,38 +155,38 @@ export interface InputSwitchProps {
disabled?: boolean | undefined;
/**
* When present, it specifies that an input field is read-only.
* @default false
* @defaultValue false
*/
readonly?: boolean | undefined;
/**
* Specifies the input variant of the component.
* @defaultValue outlined
*/
variant?: 'outlined' | 'filled' | undefined;
/**
* Index of the element in tabbing order.
*/
tabindex?: number | undefined;
/**
* Identifier of the underlying input element.
* Number of characters to initiate.
* @defaultValue 4
*/
inputId?: string | undefined;
length?: number | undefined;
/**
* Style class of the input field.
* Mask pattern.
* @defaultValue false
*/
inputClass?: string | object | undefined;
mask?: boolean | undefined;
/**
* Inline style of the input field.
* When present, it specifies that an input field is integer-only.
* @defaultValue false
*/
inputStyle?: object | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
ariaLabelledby?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
ariaLabel?: string | undefined;
integerOnly?: boolean | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {InputSwitchPassThroughOptions}
* @type {InputOtpPassThroughOptions}
*/
pt?: PassThrough<InputSwitchPassThroughOptions>;
pt?: PassThrough<InputOtpPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
@ -161,27 +200,36 @@ export interface InputSwitchProps {
}
/**
* Defines current options in InputSwitch component.
*
*/
export interface InputSwitchContext {
export interface InputOtpSlots {
/**
* Current checked state of the item as a boolean.
* @defaultValue false
* Default content slot.
*/
checked: boolean;
/**
* Current disabled state of the item as a boolean.
* @defaultValue false
*/
disabled: boolean;
default(scope: {
/**
* Events of the component
* @param {number} index - Index of the input field
* @return {InputOtpTemplateEvents}
*/
events: (index: number) => InputOtpTemplateEvents;
/**
* Attributes of the component
* @param {number} index - Index of the input field
* @return {InputOtpTemplateAttrsOptions}
*/
attrs: (index: number) => InputOtpTemplateAttrsOptions;
/**
* Index of the input field
*/
index: number;
}): VNode[];
}
export interface InputSwitchSlots {}
/**
* Defines valid emits in InputSwitch component.
* Defines valid emits in InputOtp component.
*/
export interface InputSwitchEmits {
export interface InputOtpEmits {
/**
* Emitted when the value changes.
* @param {boolean} value - New value.
@ -205,23 +253,23 @@ export interface InputSwitchEmits {
}
/**
* **PrimeVue - InputSwitch**
* **PrimeVue - InputOtp**
*
* _InputSwitch is used to select a boolean value._
* _InputOtp is used to enter one time passwords._
*
* [Live Demo](https://www.primevue.org/inputswitch/)
* [Live Demo](https://www.primevue.org/inputotp/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*
*/
declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> {}
declare class InputOtp extends ClassComponent<InputOtpProps, InputOtpSlots, InputOtpEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
InputSwitch: GlobalComponentConstructor<InputSwitch>;
InputOtp: GlobalComponentConstructor<InputOtp>;
}
}
export default InputSwitch;
export default InputOtp;

View File

@ -12,6 +12,7 @@
:disabled="disabled"
:invalid="invalid"
:tabindex="tabindex"
:unstyled="unstyled"
@input="onInput($event, i - 1)"
@focus="onFocus($event)"
@blur="onBlur($event)"
@ -91,7 +92,7 @@ export default {
});
},
moveToPrev(event) {
var prevInput = this.findPrevInput(event.target);
let prevInput = this.findPrevInput(event.target);
if (prevInput) {
prevInput.focus();
@ -99,7 +100,7 @@ export default {
}
},
moveToNext(event) {
var nextInput = this.findNextInput(event.target);
let nextInput = this.findNextInput(event.target);
if (nextInput) {
nextInput.focus();
@ -107,12 +108,16 @@ export default {
}
},
findNextInput(element) {
var nextElement = element.nextElementSibling;
let nextElement = element.nextElementSibling;
if (!nextElement) return;
return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
},
findPrevInput(element) {
var prevElement = element.previousElementSibling;
let prevElement = element.previousElementSibling;
if (!prevElement) return;
return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
},

View File

@ -1,7 +1,7 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: ({ props }) => ['p-inputotp p-component'],
root: 'p-inputotp p-component',
input: 'p-inputotp-input'
};

View File

@ -25,10 +25,6 @@ export interface InputSwitchPassThroughMethodOptions {
* Defines valid properties.
*/
props: InputSwitchProps;
/**
* Defines current inline state.
*/
state: InputSwitchState;
/**
* Defines current options.
*/
@ -78,13 +74,6 @@ export interface InputSwitchPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in InputSwitch component.
*/
export interface InputSwitchState {
[key: string]: any;
}
/**
* Defines valid properties in InputSwitch component.
*/

View File

@ -31975,10 +31975,10 @@
}
},
"inputotp": {
"description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
"description": "InputOtp is used to enter one time passwords.\n\n[Live Demo](https://www.primevue.org/inputotp/)",
"components": {
"default": {
"description": "InputSwitch is used to select a boolean value.",
"description": "InputOtp is used to enter one time passwords.",
"methods": {
"description": "Defines methods that can be accessed by the component's reference.",
"values": []
@ -31991,7 +31991,7 @@
"methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.",
"values": {
"InputSwitchPassThroughMethodOptions": {
"InputOtpPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
@ -32007,7 +32007,7 @@
"name": "props",
"optional": false,
"readonly": false,
"type": "InputSwitchProps",
"type": "InputOtpProps",
"default": "",
"description": "Defines valid properties."
},
@ -32015,18 +32015,10 @@
"name": "state",
"optional": false,
"readonly": false,
"type": "InputSwitchState",
"type": "InputOtpState",
"default": "",
"description": "Defines current inline state."
},
{
"name": "context",
"optional": false,
"readonly": false,
"type": "InputSwitchContext",
"default": "",
"description": "Defines current options."
},
{
"name": "attrs",
"optional": false,
@ -32035,14 +32027,6 @@
"default": "",
"description": "Defines valid attributes."
},
{
"name": "parent",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Defines parent options."
},
{
"name": "global",
"optional": false,
@ -32054,15 +32038,38 @@
],
"methods": []
},
"InputSwitchPassThroughOptions": {
"InputOtpSharedPassThroughMethodOptions": {
"description": "Custom shared passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "InputOtpProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "InputOtpState",
"default": "",
"description": "Defines current inline state."
}
],
"methods": []
},
"InputOtpPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "InputSwitchProps.pt",
"relatedProp": "InputOtpProps.pt",
"props": [
{
"name": "root",
"optional": true,
"readonly": false,
"type": "InputSwitchPassThroughOptionType",
"type": "InputOtpPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the root's DOM element."
},
@ -32070,17 +32077,9 @@
"name": "input",
"optional": true,
"readonly": false,
"type": "InputSwitchPassThroughOptionType",
"type": "InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the input's DOM element."
},
{
"name": "slider",
"optional": true,
"readonly": false,
"type": "InputSwitchPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the slider's DOM element."
"description": "Used to pass attributes to the InputText component."
},
{
"name": "hooks",
@ -32093,7 +32092,7 @@
],
"methods": []
},
"InputSwitchPassThroughAttributes": {
"InputOtpPassThroughAttributes": {
"description": "Custom passthrough attributes for each DOM elements",
"relatedProp": "",
"props": [
@ -32106,21 +32105,80 @@
],
"methods": []
},
"InputSwitchState": {
"description": "Defines current inline state in InputSwitch component.",
"InputOtpState": {
"description": "Defines current inline state in InputOtp component.",
"relatedProp": "",
"props": [
{
"name": "[key: string]",
"name": "tokens",
"optional": false,
"readonly": false,
"type": "any"
"type": "string[] | number[]",
"default": "",
"description": "Array of input tokens"
}
],
"methods": []
},
"InputSwitchProps": {
"description": "Defines valid properties in InputSwitch component.",
"InputOtpTemplateAttrsOptions": {
"description": "InputOtp attr options",
"relatedProp": "",
"props": [
{
"name": "value",
"optional": false,
"readonly": false,
"type": "string",
"default": "",
"description": "Input token value"
}
],
"methods": []
},
"InputOtpTemplateEvents": {
"description": "InputOtp templating events",
"relatedProp": "",
"props": [
{
"name": "input",
"optional": false,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "keydown",
"optional": false,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "focus",
"optional": false,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "blur",
"optional": false,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "paste",
"optional": false,
"readonly": false,
"type": "Function",
"default": ""
}
],
"methods": []
},
"InputOtpProps": {
"description": "Defines valid properties in InputOtp component.",
"relatedProp": "",
"props": [
{
@ -32129,23 +32187,7 @@
"readonly": false,
"type": "string | boolean",
"default": "false",
"description": "Specifies whether a inputswitch should be checked or not."
},
{
"name": "trueValue",
"optional": true,
"readonly": false,
"type": "any",
"default": "true",
"description": "Value in checked state."
},
{
"name": "falseValue",
"optional": true,
"readonly": false,
"type": "any",
"default": "false",
"description": "Value in unchecked state."
"description": "Specifies whether a inputotp should be checked or not."
},
{
"name": "invalid",
@ -32168,9 +32210,17 @@
"optional": true,
"readonly": false,
"type": "boolean",
"default": "",
"default": "false",
"description": "When present, it specifies that an input field is read-only."
},
{
"name": "variant",
"optional": true,
"readonly": false,
"type": "\"filled\" | \"outlined\"",
"default": "outlined",
"description": "Specifies the input variant of the component."
},
{
"name": "tabindex",
"optional": true,
@ -32180,50 +32230,34 @@
"description": "Index of the element in tabbing order."
},
{
"name": "inputId",
"name": "length",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Identifier of the underlying input element."
"type": "number",
"default": "4",
"description": "Number of characters to initiate."
},
{
"name": "inputClass",
"name": "mask",
"optional": true,
"readonly": false,
"type": "string | object",
"default": "",
"description": "Style class of the input field."
"type": "boolean",
"default": "false",
"description": "Mask pattern."
},
{
"name": "inputStyle",
"name": "integerOnly",
"optional": true,
"readonly": false,
"type": "object",
"default": "",
"description": "Inline style of the input field."
},
{
"name": "ariaLabelledby",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
},
{
"name": "ariaLabel",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Establishes a string value that labels the component."
"type": "boolean",
"default": "false",
"description": "When present, it specifies that an input field is integer-only."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "PassThrough<InputSwitchPassThroughOptions>",
"type": "PassThrough<InputOtpPassThroughOptions>",
"default": "",
"description": "Used to pass attributes to DOM elements inside the component."
},
@ -32246,36 +32280,27 @@
],
"methods": []
},
"InputSwitchContext": {
"description": "Defines current options in InputSwitch component.",
"relatedProp": "",
"props": [
{
"name": "checked",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Current checked state of the item as a boolean."
},
{
"name": "disabled",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Current disabled state of the item as a boolean."
}
],
"methods": []
},
"InputSwitchSlots": {
"InputOtpSlots": {
"description": "",
"relatedProp": "",
"props": [],
"methods": []
"methods": [
{
"name": "default",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">events</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; InputOtpTemplateEvents</span>, <span class=\"doc-option-parameter-type\">// Events of the component</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">attrs</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; InputOtpTemplateAttrsOptions</span>, <span class=\"doc-option-parameter-type\">// Attributes of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the input field</span>\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Default content slot."
}
]
},
"InputSwitchEmits": {
"description": "Defines valid emits in InputSwitch component.",
"InputOtpEmits": {
"description": "Defines valid emits in InputOtp component.",
"relatedProp": "",
"props": [],
"methods": [
@ -32338,8 +32363,8 @@
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"InputSwitchPassThroughOptionType": {
"values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => undefined | string | null | undefined"
"InputOtpPassThroughOptionType": {
"values": "InputOtpPassThroughAttributes | (options: InputOtpPassThroughMethodOptions) => undefined | string | null | undefined"
}
}
}
@ -32440,14 +32465,6 @@
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "InputSwitchState",
"default": "",
"description": "Defines current inline state."
},
{
"name": "context",
"optional": false,
@ -32535,19 +32552,6 @@
],
"methods": []
},
"InputSwitchState": {
"description": "Defines current inline state in InputSwitch component.",
"relatedProp": "",
"props": [
{
"name": "[key: string]",
"optional": false,
"readonly": false,
"type": "any"
}
],
"methods": []
},
"InputSwitchProps": {
"description": "Defines valid properties in InputSwitch component.",
"relatedProp": "",

View File

@ -23,7 +23,11 @@
</tr>
<tr>
<td><i>left arrow</i></td>
<td>Moves focus to the next previous element.</td>
<td>Moves focus to the previous input element.</td>
</tr>
<tr>
<td><i>backspace</i></td>
<td>Deletes the input and moves focus to the previous input element.</td>
</tr>
</tbody>
</table>

View File

@ -3,6 +3,6 @@
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputswitch.jpg" />
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

View File

@ -1,7 +1,7 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>InputSwitch Pass Through</h1>
<h1>InputOtp Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
@ -23,10 +23,10 @@ export default {
component: PTImage
},
{
id: 'pt.doc.inputswitch',
label: 'InputSwitch PT Options',
id: 'pt.doc.inputotp',
label: 'InputOtp PT Options',
component: DocApiTable,
data: getPTOption('InputSwitch')
data: getPTOption('InputOtp')
}
]
};

View File

@ -12,16 +12,12 @@
</thead>
<tbody>
<tr>
<td>p-inputswitch</td>
<td>p-inputotp</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-inputswitch-checked</td>
<td>Container element in active state.</td>
</tr>
<tr>
<td>p-inputswitch-slider</td>
<td>Slider element behind the handle.</td>
<td>p-inputotp-input</td>
<td>Input element of the component.</td>
</tr>
</tbody>
</table>