import { EventEmitter } from "../../stencil-public-runtime"; import { A11yComponent, InputComponent, ThemeableComponent } from "../../common"; import { DuetLanguage, DuetMargin, DuetTextFontWeight, DuetTheme, DuetTooltipDirection } from "../../common-types"; export type DuetTextareaEvent = { originalEvent?: Event; component: "duet-textarea"; value: string; }; /** * @slot tooltip - Use to place a tooltip alongside the label. */ export declare class DuetTextarea implements ThemeableComponent, InputComponent, A11yComponent { /** * Own Properties */ private textareaId; private proxyId; private topCaptionId; private topCaptionPlaceholderId; private labelId; private errorId; private characterCountId; private visuallyHiddenCounterDebounceMS; private nativeInput; private isCaptionVisible; private disallowPatternRegex; private charactersRemainingLabel; language: DuetLanguage; visuallyHiddenCounterText: string; /** * Reference to host HTML element. */ element: HTMLElement; /** * Controls the margin of the component. */ margin: DuetMargin; /** * Indicates the id of a related component’s visually focused element. */ accessibleActiveDescendant: string; /** * Indicates what kind of user input completion suggestions are provided. */ accessibleAutocomplete: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to * indicate the id of a component controlled by this component. */ accessibleControls: string; /** * Aria Details of the component */ accessibleDetails: string; /** * String of id's that indicate alternative labels elements */ accessibleLabelledBy: string; /** * Aria description the button */ accessibleDescription: string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message * unread by screen readers. */ accessibleLiveError: "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the textarea. */ accessibleOwns: string; /** * Indicates the id of a component that describes the input. */ accessibleDescribedBy: string; /** * Theme of the textarea. */ theme: DuetTheme; /** * Expands the textarea to fill 100% of the container width. */ expand: boolean; /** * Makes the textarea component disabled. This prevents users from being able * to interact with the textarea, and conveys its inactive state to assistive * technologies. */ disabled: boolean; /** * Adds a unique identifier for the textarea. */ identifier: string; /** * Set whether the textarea is required or not. Please note that this is required for * accessible inputs when the user is required to fill them. When using this property * you need to also set “novalidate” attribute to your form element to prevent * browser from displaying its own validation errors. */ required: boolean; /** * Label for the textarea. */ label: string; /** * Color of the label. */ labelColor: string; /** * Font weight of the label. */ labelWeight: DuetTextFontWeight; /** * Visually hide the label, but still show it to screen readers. */ labelHidden: boolean; /** * Name of the textarea. */ name: string; /** * Hint text to display. */ placeholder: string; /** * Caption (underneath label) that can be set as a way of adding extra information */ caption: string; /** * If form input field has a placeholder text, and user types anything (causing the text to dissapear), * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) */ echoPlaceholder: boolean; /** * Rows attribute for the contained native textarea element. If set, overrides the default style's minheight. */ rows: number; /** * Use maxlength to specify the maximum length of the value that can be entered. */ maxlength: number; /** * Use minlength to specify the minimum length of the value that can be entered. */ minlength: number; /** * Display the textarea in error state along with an error message. */ error: string; /** * This is a proxy for the enclosed native textarea's validity */ get validity(): ValidityState; /** * Defines a specific role attribute for the input. */ role: string | null; /** * Tooltip to display next to the label of the input. */ tooltip: string; /** * With direction setting you can force the tooltip to always open towards left * or right instead of automatically determining the direction. */ tooltipDirection: DuetTooltipDirection; /** * Value of the textarea. */ value: string; valueChange(newValue: string, oldValue: string): void; /** * A regular expression that matches any characters which should be *disallowed*. * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression. * e.g. the following will disallow any non-numeric characters `[^0-9]` */ disallowPattern: string; disallowedPatternChange(): void; /** * Display character counter. Must be used in conjunction with **maxlength** property. */ counter: boolean; /** * @deprecated, the visually hidden counter label is no longer changeable */ counterLabel: string; /** * Emitted when a keyboard input ocurred. */ duetInput: EventEmitter; /** * Emitted when the value has changed. */ duetChange: EventEmitter; /** * Emitted when the input loses focus. */ duetBlur: EventEmitter; /** * Emitted when the input has focus. */ duetFocus: EventEmitter; /** * Component lifecycle events. */ componentWillLoad(): void; private updateVisuallyHiddenCounterText; componentDidRender(): void; /** * Component event handling. */ private handleInput; private handleChange; private handleBlur; private handleFocus; /** * When the character limit has been reached and key is pressed, switch the * visually hidden label temprorily to empty so it is re-read. */ private handleKeyDown; private getDescribedBy; /** * Sets focus on the specified `duet-textarea`. Use this method instead of the global * `textarea.focus()`. */ setFocus(options?: FocusOptions): Promise; /** * render() function * Always the last one in the class. */ render(): any; }