@synergy-design-system/angular
Version:
Angular wrappers for the Synergy Design System
184 lines (181 loc) • 8.69 kB
TypeScript
import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynTextarea, SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
export { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
/**
* @summary Textareas collect data from the user and allow multiple lines of text.
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
* @status stable
* @since 2.0
*
* @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
*
* @event syn-blur - Emitted when the control loses focus.
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
* @event syn-focus - Emitted when the control gains focus.
* @event syn-input - Emitted when the control receives input.
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and help text.
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The input's wrapper.
* @csspart form-control-help-text - The help text's wrapper.
* @csspart base - The component's base wrapper.
* @csspart textarea - The internal `<textarea>` control.
*/
declare class SynTextareaComponent {
nativeElement: SynTextarea;
private _ngZone;
private modelSignal;
constructor(e: ElementRef, ngZone: NgZone);
/**
* The event that will trigger the ngModel update.
* By default, this is set to "syn-input".
*/
set ngModelUpdateOn(v: keyof HTMLElementEventMap);
get ngModelUpdateOn(): keyof HTMLElementEventMap;
set title(v: SynTextarea['title']);
get title(): SynTextarea['title'];
/**
* The name of the textarea, submitted as a name/value pair with form data.
*/
set name(v: SynTextarea['name']);
get name(): SynTextarea['name'];
/**
* The current value of the textarea, submitted as a name/value pair with form data.
*/
set value(v: SynTextarea['value']);
get value(): SynTextarea['value'];
/**
* The textarea's size.
*/
set size(v: SynTextarea['size']);
get size(): SynTextarea['size'];
/**
* The textarea's label.
* If you need to display HTML, use the `label` slot instead.
*/
set label(v: SynTextarea['label']);
get label(): SynTextarea['label'];
/**
* The textarea's help text.
* If you need to display HTML, use the `help-text` slot instead.
*/
set helpText(v: SynTextarea['helpText']);
get helpText(): SynTextarea['helpText'];
/**
* Placeholder text to show as a hint when the input is empty.
*/
set placeholder(v: SynTextarea['placeholder']);
get placeholder(): SynTextarea['placeholder'];
/**
* The number of rows to display by default.
*/
set rows(v: SynTextarea['rows']);
get rows(): SynTextarea['rows'];
/**
* Controls how the textarea can be resized.
*/
set resize(v: SynTextarea['resize']);
get resize(): SynTextarea['resize'];
/**
* Disables the textarea.
*/
set disabled(v: '' | SynTextarea['disabled']);
get disabled(): SynTextarea['disabled'];
/**
* Makes the textarea readonly.
*/
set readonly(v: '' | SynTextarea['readonly']);
get readonly(): SynTextarea['readonly'];
/**
* By default, form controls are associated with the nearest containing `<form>` 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.
*/
set form(v: SynTextarea['form']);
get form(): SynTextarea['form'];
/**
* Makes the textarea a required field.
*/
set required(v: '' | SynTextarea['required']);
get required(): SynTextarea['required'];
/**
* The minimum length of input that will be considered valid.
*/
set minlength(v: SynTextarea['minlength']);
get minlength(): SynTextarea['minlength'];
/**
* The maximum length of input that will be considered valid.
*/
set maxlength(v: SynTextarea['maxlength']);
get maxlength(): SynTextarea['maxlength'];
/**
* Controls whether and how text input is automatically capitalized as it is entered by the user.
*/
set autocapitalize(v: SynTextarea['autocapitalize']);
get autocapitalize(): SynTextarea['autocapitalize'];
/**
* Indicates whether the browser's autocorrect feature is on or off.
*/
set autocorrect(v: SynTextarea['autocorrect']);
get autocorrect(): SynTextarea['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.
*/
set autocomplete(v: SynTextarea['autocomplete']);
get autocomplete(): SynTextarea['autocomplete'];
/**
* Indicates that the input should receive focus on page load.
*/
set autofocus(v: '' | SynTextarea['autofocus']);
get autofocus(): SynTextarea['autofocus'];
/**
* Used to customize the label or icon of the Enter key on virtual keyboards.
*/
set enterkeyhint(v: SynTextarea['enterkeyhint']);
get enterkeyhint(): SynTextarea['enterkeyhint'];
/**
* Enables spell checking on the textarea.
*/
set spellcheck(v: '' | SynTextarea['spellcheck']);
get spellcheck(): SynTextarea['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.
*/
set inputmode(v: SynTextarea['inputmode']);
get inputmode(): SynTextarea['inputmode'];
/**
* Emitted when the control loses focus.
*/
synBlurEvent: EventEmitter<SynBlurEvent>;
/**
* Emitted when an alteration to the control's value is committed by the user.
*/
synChangeEvent: EventEmitter<SynChangeEvent>;
/**
* Emitted when the control gains focus.
*/
synFocusEvent: EventEmitter<SynFocusEvent>;
/**
* Emitted when the control receives input.
*/
synInputEvent: EventEmitter<SynInputEvent>;
/**
* Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*/
synInvalidEvent: EventEmitter<SynInvalidEvent>;
/**
* Support for two way data binding
*/
valueChange: EventEmitter<string>;
static ɵfac: i0.ɵɵFactoryDeclaration<SynTextareaComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SynTextareaComponent, "syn-textarea", never, { "ngModelUpdateOn": { "alias": "ngModelUpdateOn"; "required": false; }; "title": { "alias": "title"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "resize": { "alias": "resize"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "form": { "alias": "form"; "required": false; }; "required": { "alias": "required"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "autocapitalize": { "alias": "autocapitalize"; "required": false; }; "autocorrect": { "alias": "autocorrect"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "enterkeyhint": { "alias": "enterkeyhint"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; }, { "synBlurEvent": "synBlurEvent"; "synChangeEvent": "synChangeEvent"; "synFocusEvent": "synFocusEvent"; "synInputEvent": "synInputEvent"; "synInvalidEvent": "synInvalidEvent"; "valueChange": "valueChange"; }, never, ["*"], true, never>;
}
export { SynTextareaComponent };