dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
83 lines (82 loc) • 5.68 kB
TypeScript
import { EventName } from '@lit/react';
import { default as Component } from '../../components/textarea/textarea.js';
import { DdsCountChangeEvent, DdsChangeEvent, DdsInputEvent, DdsKeydownEvent, DdsBlurEvent, DdsFocusEvent, DdsSelectEvent } from '../../events/events';
export type { DdsCountChangeEvent } from '../../events/events';
export type { DdsChangeEvent } from '../../events/events';
export type { DdsInputEvent } from '../../events/events';
export type { DdsKeydownEvent } from '../../events/events';
export type { DdsBlurEvent } from '../../events/events';
export type { DdsFocusEvent } from '../../events/events';
export type { DdsSelectEvent } from '../../events/events';
/**
* `dap-ds-textarea`
* @summary A textarea is a multi-line text input field.
* @element dap-ds-textarea
* @title - Textarea
*
* @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.
* @property {boolean} disabled - The disabled state of the textarea.
* @property {number} minlength - The minimum length of the textarea.
* @property {string} value - The value of the textarea.
* @property {string} tooltip - The tooltip of the textarea.
* @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.
* @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.
* @property {boolean} readonly - The readonly state of the textarea.
* @property {boolean} required - The required state of the textarea.
* @property {string} label - The label of the textarea.
* @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
* @property {string} description - The description of the textarea.
* @property {string} feedback - The feedback of the textarea.
* @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.
* @property {boolean} optional - The optional state of the textarea.
* @property {string} optionalLabel - The optional label of the textarea.
* @property {string} requiredLabel - The required indicator of the textarea. (default: '*')
* @property {boolean} subtle - The weight of the label. Default is `false`
* @property {boolean} autofocus - The autofocus state of the textarea.
*
* @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.
* @event {{ value: string }} dds-change - Fired when the textarea value changes.
* @event {{ value: string }} dds-input - Fired when the textarea value changes.
* @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.
* @event {{ void }} dds-blur - Fired when the textarea loses focus.
* @event {{ void }} dds-focus - Emitted when the textarea gains focus.
* @event {{ value: string }} dds-select - Emitted when select text in textarea.
*
* @slot feedback-icon - The custom icon of the feedback.
*
* @csspart base - The main textarea container.
* @csspart input - The native input of the textarea.
* @csspart counter - The counter of the textarea.
* @csspart counter-base - The base of the counter.
* @csspart feedback - The feedback of the textarea.
* @csspart feedback-base - The base of the feedback.
* @csspart feedback-text - The text of the feedback.
* @csspart feedback-icon - The icon of the feedback.
*
* @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)
* @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))
* @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))
* @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))
* @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))
* @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))
* @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))
* @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))
* @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))
* @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))
* @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))
* @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))
* @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))
* @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))
* @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))
* @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
onDdsCountChange: EventName<DdsCountChangeEvent>;
onDdsChange: EventName<DdsChangeEvent>;
onDdsInput: EventName<DdsInputEvent>;
onDdsKeydown: EventName<DdsKeydownEvent>;
onDdsBlur: EventName<DdsBlurEvent>;
onDdsFocus: EventName<DdsFocusEvent>;
onDdsSelect: EventName<DdsSelectEvent>;
}>;
export default reactWrapper;