import { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynClampEvent } from '@synergy-design-system/components'; import { default as SynInput } from '@synergy-design-system/components/components/input/input.component.js'; export type { SynBlurEvent } from '@synergy-design-system/components'; export type { SynChangeEvent } from '@synergy-design-system/components'; export type { SynClearEvent } from '@synergy-design-system/components'; export type { SynFocusEvent } from '@synergy-design-system/components'; export type { SynInputEvent } from '@synergy-design-system/components'; export type { SynInvalidEvent } from '@synergy-design-system/components'; export type { SynClampEvent } from '@synergy-design-system/components'; declare const _default: __VLS_WithTemplateSlots` element, but only a subset of types are supported. * Defaults to `text`. */ type?: SynInput["type"]; /** * The name of the input, submitted as a name/value pair with form data. */ name?: SynInput["name"]; /** * The current value of the input, submitted as a name/value pair with form data. */ value?: SynInput["value"]; /** * The input's size. */ size?: SynInput["size"]; /** * The input's label. * If you need to display HTML, use the `label` slot instead. */ label?: SynInput["label"]; /** * The input's help text. * If you need to display HTML, use the `help-text` slot instead. */ helpText?: SynInput["helpText"]; /** * Adds a clear button when the input is not empty. */ clearable?: SynInput["clearable"]; /** * Disables the input. */ disabled?: SynInput["disabled"]; /** * Placeholder text to show as a hint when the input is empty. */ placeholder?: SynInput["placeholder"]; /** * Makes the input readonly. */ readonly?: SynInput["readonly"]; /** * Adds a button to toggle the password's visibility. * Only applies to password types. */ passwordToggle?: SynInput["passwordToggle"]; /** * Determines whether or not the password is currently visible. * Only applies to password input types. */ passwordVisible?: SynInput["passwordVisible"]; /** * Hides the increment/decrement spin buttons for number inputs. */ noSpinButtons?: SynInput["noSpinButtons"]; /** * By default, form controls are associated with the nearest containing `
` element. * This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. * The form must be in the same document or shadow root for this to work. */ form?: SynInput["form"]; /** * Makes the input a required field. */ required?: SynInput["required"]; /** * A regular expression pattern to validate input against. */ pattern?: SynInput["pattern"]; /** * The minimum length of input that will be considered valid. */ minlength?: SynInput["minlength"]; /** * The maximum length of input that will be considered valid. */ maxlength?: SynInput["maxlength"]; /** * The input's minimum value. * Only applies to date and number input types. */ min?: SynInput["min"]; /** * The input's maximum value. * Only applies to date and number input types. */ max?: SynInput["max"]; /** * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. * Only applies to date and number input types. */ step?: SynInput["step"]; /** * Controls whether and how text input is automatically capitalized as it is entered by the user. */ autocapitalize?: SynInput["autocapitalize"]; /** * Indicates whether the browser's autocorrect feature is on or off. */ autocorrect?: SynInput["autocorrect"]; /** * Specifies what permission the browser has to provide assistance in filling out form field values. * Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */ autocomplete?: SynInput["autocomplete"]; /** * Indicates that the input should receive focus on page load. */ autofocus?: SynInput["autofocus"]; /** * Used to customize the label or icon of the Enter key on virtual keyboards. */ enterkeyhint?: SynInput["enterkeyhint"]; /** * Enables spell checking on the input. */ spellcheck?: SynInput["spellcheck"]; /** * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. */ inputmode?: SynInput["inputmode"]; /** * The minimal amount of fraction digits to use for numeric values. Used to format the number when the input type is `number`. */ minFractionDigits?: SynInput["minFractionDigits"]; /** * The maximal amount of fraction digits to use for numeric values. Used to format the number when the input type is `number`. */ maxFractionDigits?: SynInput["maxFractionDigits"]; /** * Defines the strategy for handling numbers in the numeric input. This is used to determine how the input behaves when the user interacts with it. Includes the following configuration options: - **autoClamp**: If true, the input will clamp the value to the min and max attributes. - **noStepAlign**: If true, the input will not align the value to the step attribute. - **noStepValidation**: If true, the input will not validate the value against the step attribute. You may provide this as one of the following values: - 'native': Uses the native browser implementation. - 'modern': Uses a more intuitive implementation: - Values are clamped to the nearest min or max value. - Stepping is inclusive to the provided min and max values. - Provided stepping is no longer used in validation. - An object that matches the `NumericStrategy` type. * Note this can only be set via `property`, not as an `attribute`! */ numericStrategy?: SynInput["numericStrategy"]; /** * Optional options that should be passed to the `NumberFormatter` when formatting the value. This is used to format the number when the input type is `number`. Note this can only be set via `property`, not as an `attribute`! */ numberFormatterOptions?: SynInput["numberFormatterOptions"]; /** * Support for two way data binding */ modelValue?: SynInput["value"]; }, { nativeElement: import('vue').Ref; }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { "syn-blur": (e: SynBlurEvent) => any; "syn-focus": (e: SynFocusEvent) => any; "syn-invalid": (e: SynInvalidEvent) => any; "syn-change": (e: SynChangeEvent) => any; "syn-input": (e: SynInputEvent) => any; "update:modelValue": (newValue: string) => any; "syn-clear": (e: SynClearEvent) => any; "syn-clamp": (e: SynClampEvent) => any; }, string, import('vue').PublicProps, Readonly<{ title?: SynInput["title"]; /** * The type of input. * Works the same as a native `` element, but only a subset of types are supported. * Defaults to `text`. */ type?: SynInput["type"]; /** * The name of the input, submitted as a name/value pair with form data. */ name?: SynInput["name"]; /** * The current value of the input, submitted as a name/value pair with form data. */ value?: SynInput["value"]; /** * The input's size. */ size?: SynInput["size"]; /** * The input's label. * If you need to display HTML, use the `label` slot instead. */ label?: SynInput["label"]; /** * The input's help text. * If you need to display HTML, use the `help-text` slot instead. */ helpText?: SynInput["helpText"]; /** * Adds a clear button when the input is not empty. */ clearable?: SynInput["clearable"]; /** * Disables the input. */ disabled?: SynInput["disabled"]; /** * Placeholder text to show as a hint when the input is empty. */ placeholder?: SynInput["placeholder"]; /** * Makes the input readonly. */ readonly?: SynInput["readonly"]; /** * Adds a button to toggle the password's visibility. * Only applies to password types. */ passwordToggle?: SynInput["passwordToggle"]; /** * Determines whether or not the password is currently visible. * Only applies to password input types. */ passwordVisible?: SynInput["passwordVisible"]; /** * Hides the increment/decrement spin buttons for number inputs. */ noSpinButtons?: SynInput["noSpinButtons"]; /** * By default, form controls are associated with the nearest containing `` element. * This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. * The form must be in the same document or shadow root for this to work. */ form?: SynInput["form"]; /** * Makes the input a required field. */ required?: SynInput["required"]; /** * A regular expression pattern to validate input against. */ pattern?: SynInput["pattern"]; /** * The minimum length of input that will be considered valid. */ minlength?: SynInput["minlength"]; /** * The maximum length of input that will be considered valid. */ maxlength?: SynInput["maxlength"]; /** * The input's minimum value. * Only applies to date and number input types. */ min?: SynInput["min"]; /** * The input's maximum value. * Only applies to date and number input types. */ max?: SynInput["max"]; /** * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. * Only applies to date and number input types. */ step?: SynInput["step"]; /** * Controls whether and how text input is automatically capitalized as it is entered by the user. */ autocapitalize?: SynInput["autocapitalize"]; /** * Indicates whether the browser's autocorrect feature is on or off. */ autocorrect?: SynInput["autocorrect"]; /** * Specifies what permission the browser has to provide assistance in filling out form field values. * Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */ autocomplete?: SynInput["autocomplete"]; /** * Indicates that the input should receive focus on page load. */ autofocus?: SynInput["autofocus"]; /** * Used to customize the label or icon of the Enter key on virtual keyboards. */ enterkeyhint?: SynInput["enterkeyhint"]; /** * Enables spell checking on the input. */ spellcheck?: SynInput["spellcheck"]; /** * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. */ inputmode?: SynInput["inputmode"]; /** * The minimal amount of fraction digits to use for numeric values. Used to format the number when the input type is `number`. */ minFractionDigits?: SynInput["minFractionDigits"]; /** * The maximal amount of fraction digits to use for numeric values. Used to format the number when the input type is `number`. */ maxFractionDigits?: SynInput["maxFractionDigits"]; /** * Defines the strategy for handling numbers in the numeric input. This is used to determine how the input behaves when the user interacts with it. Includes the following configuration options: - **autoClamp**: If true, the input will clamp the value to the min and max attributes. - **noStepAlign**: If true, the input will not align the value to the step attribute. - **noStepValidation**: If true, the input will not validate the value against the step attribute. You may provide this as one of the following values: - 'native': Uses the native browser implementation. - 'modern': Uses a more intuitive implementation: - Values are clamped to the nearest min or max value. - Stepping is inclusive to the provided min and max values. - Provided stepping is no longer used in validation. - An object that matches the `NumericStrategy` type. * Note this can only be set via `property`, not as an `attribute`! */ numericStrategy?: SynInput["numericStrategy"]; /** * Optional options that should be passed to the `NumberFormatter` when formatting the value. This is used to format the number when the input type is `number`. Note this can only be set via `property`, not as an `attribute`! */ numberFormatterOptions?: SynInput["numberFormatterOptions"]; /** * Support for two way data binding */ modelValue?: SynInput["value"]; }> & Readonly<{ "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined; "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined; "onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined; "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined; "onSyn-input"?: ((e: SynInputEvent) => any) | undefined; "onUpdate:modelValue"?: ((newValue: string) => any) | undefined; "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined; "onSyn-clamp"?: ((e: SynClampEvent) => any) | undefined; }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, { nativeElement: unknown; }, any>, { default?(_: {}): any; }>; export default _default; type __VLS_WithTemplateSlots = T & { new (): { $slots: S; }; };