dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
110 lines (109 loc) • 6.34 kB
TypeScript
import { GenericFormElement } from '../../internal/mixin/genericFormElement';
import { default as DapDSFeedback } from '../feedback/feedback.component';
import { default as DapDSTypography } from '../typography/typography.component';
/**
* `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))
*/
export default class DapDSTextarea extends GenericFormElement {
static tagName: string;
static dependencies: {
'dap-ds-typography': typeof DapDSTypography;
'dap-ds-feedback': typeof DapDSFeedback;
};
private static nextId;
private readonly inputId;
private readonly labelId;
private readonly descriptionId;
private readonly counterId;
/**@ignore */
input: HTMLTextAreaElement;
/** Hide character counter. */
hideCounter: boolean;
/** The minimum length of the textarea. */
minlength?: number;
/** The maximum length of the textarea. */
maxlength?: number;
/** The number of rows in the textarea. */
rows?: number;
/** The number of columns in the textarea. */
cols?: number;
/** The placeholder of the textarea. */
placeholder: string;
/** Indicates how the control should wrap the value for form submission. */
wrap: 'hard' | 'soft';
/**@ignore */
count: number;
static readonly styles: import('lit').CSSResult;
constructor();
get focusElement(): HTMLTextAreaElement;
private _handleSlotChange;
connectedCallback(): Promise<void>;
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
onInput(): void;
onChange(): void;
onSelect(e: Event): void;
formResetCallback(): void;
handleInvalid(event: Event): void;
private _renderFooter;
render(): unknown;
private _renderFeedback;
}