@synergy-design-system/angular/components/input/index.d.ts

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynInput, SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynClampEvent } from '@synergy-design-system/components';
export { SynBlurEvent, SynChangeEvent, SynClampEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';

/**
 * @summary Inputs collect data from the user.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
 * @status stable
 * @since 2.0
 *
 * @dependency syn-icon
 * @dependency syn-divider
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the input.
 * @slot suffix - Used to append a presentational icon or similar element to the input.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot show-password-icon - An icon to use in lieu of the default show password icon.
 * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.
 * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.
 *
 * @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-clear - Emitted when the clear button is activated.
 * @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.
 * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
 *
 * @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 input - The internal `<input>` control.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart clear-button - The clear button.
 * @csspart password-toggle-button - The password toggle button.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart stepper - The container that wraps the number stepper.
 * @csspart decrement-number-stepper - The decrement number stepper button.
 * @csspart increment-number-stepper - The increment number stepper button.
 * @csspart divider - The divider between the increment and decrement number stepper buttons.
 *
 * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
 * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
 * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
 * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
 */
declare class SynInputComponent {
    nativeElement: SynInput;
    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: SynInput['title']);
    get title(): SynInput['title'];
    /**
  * The type of input.
  * Works the same as a native `<input>` element, but only a subset of types are supported.
  * Defaults
  to `text`.
   */
    set type(v: SynInput['type']);
    get type(): SynInput['type'];
    /**
     * The name of the input, submitted as a name/value pair with form data.
     */
    set name(v: SynInput['name']);
    get name(): SynInput['name'];
    /**
     * The current value of the input, submitted as a name/value pair with form data.
     */
    set value(v: SynInput['value']);
    get value(): SynInput['value'];
    /**
     * The input's size.
     */
    set size(v: SynInput['size']);
    get size(): SynInput['size'];
    /**
     * The input's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    set label(v: SynInput['label']);
    get label(): SynInput['label'];
    /**
     * The input's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    set helpText(v: SynInput['helpText']);
    get helpText(): SynInput['helpText'];
    /**
     * Adds a clear button when the input is not empty.
     */
    set clearable(v: '' | SynInput['clearable']);
    get clearable(): SynInput['clearable'];
    /**
     * Disables the input.
     */
    set disabled(v: '' | SynInput['disabled']);
    get disabled(): SynInput['disabled'];
    /**
     * Placeholder text to show as a hint when the input is empty.
     */
    set placeholder(v: SynInput['placeholder']);
    get placeholder(): SynInput['placeholder'];
    /**
     * Makes the input readonly.
     */
    set readonly(v: '' | SynInput['readonly']);
    get readonly(): SynInput['readonly'];
    /**
     * Adds a button to toggle the password's visibility.
     * Only applies to password types.
     */
    set passwordToggle(v: '' | SynInput['passwordToggle']);
    get passwordToggle(): SynInput['passwordToggle'];
    /**
     * Determines whether or not the password is currently visible.
     * Only applies to password input types.
     */
    set passwordVisible(v: '' | SynInput['passwordVisible']);
    get passwordVisible(): SynInput['passwordVisible'];
    /**
     * Hides the increment/decrement spin buttons for number inputs.
     */
    set noSpinButtons(v: '' | SynInput['noSpinButtons']);
    get noSpinButtons(): SynInput['noSpinButtons'];
    /**
  * 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: SynInput['form']);
    get form(): SynInput['form'];
    /**
     * Makes the input a required field.
     */
    set required(v: '' | SynInput['required']);
    get required(): SynInput['required'];
    /**
     * A regular expression pattern to validate input against.
     */
    set pattern(v: SynInput['pattern']);
    get pattern(): SynInput['pattern'];
    /**
     * The minimum length of input that will be considered valid.
     */
    set minlength(v: SynInput['minlength']);
    get minlength(): SynInput['minlength'];
    /**
     * The maximum length of input that will be considered valid.
     */
    set maxlength(v: SynInput['maxlength']);
    get maxlength(): SynInput['maxlength'];
    /**
     * The input's minimum value.
     * Only applies to date and number input types.
     */
    set min(v: SynInput['min']);
    get min(): SynInput['min'];
    /**
     * The input's maximum value.
     * Only applies to date and number input types.
     */
    set max(v: SynInput['max']);
    get 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.
   */
    set step(v: SynInput['step']);
    get step(): SynInput['step'];
    /**
     * Controls whether and how text input is automatically capitalized as it is entered by the user.
     */
    set autocapitalize(v: SynInput['autocapitalize']);
    get autocapitalize(): SynInput['autocapitalize'];
    /**
     * Indicates whether the browser's autocorrect feature is on or off.
     */
    set autocorrect(v: SynInput['autocorrect']);
    get 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.
   */
    set autocomplete(v: SynInput['autocomplete']);
    get autocomplete(): SynInput['autocomplete'];
    /**
     * Indicates that the input should receive focus on page load.
     */
    set autofocus(v: '' | SynInput['autofocus']);
    get autofocus(): SynInput['autofocus'];
    /**
     * Used to customize the label or icon of the Enter key on virtual keyboards.
     */
    set enterkeyhint(v: SynInput['enterkeyhint']);
    get enterkeyhint(): SynInput['enterkeyhint'];
    /**
     * Enables spell checking on the input.
     */
    set spellcheck(v: '' | SynInput['spellcheck']);
    get 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.
   */
    set inputmode(v: SynInput['inputmode']);
    get 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`.
   */
    set minFractionDigits(v: SynInput['minFractionDigits']);
    get 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`.
   */
    set maxFractionDigits(v: SynInput['maxFractionDigits']);
    get 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`!
   */
    set numericStrategy(v: SynInput['numericStrategy']);
    get 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`!
   */
    set numberFormatterOptions(v: SynInput['numberFormatterOptions']);
    get numberFormatterOptions(): SynInput['numberFormatterOptions'];
    /**
     * 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 clear button is activated.
     */
    synClearEvent: EventEmitter<SynClearEvent>;
    /**
     * 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>;
    /**
     * Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
     */
    synClampEvent: EventEmitter<SynClampEvent>;
    /**
     * Support for two way data binding
     */
    valueChange: EventEmitter<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynInputComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynInputComponent, "syn-input", never, { "ngModelUpdateOn": { "alias": "ngModelUpdateOn"; "required": false; }; "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "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; }; "clearable": { "alias": "clearable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "passwordToggle": { "alias": "passwordToggle"; "required": false; }; "passwordVisible": { "alias": "passwordVisible"; "required": false; }; "noSpinButtons": { "alias": "noSpinButtons"; "required": false; }; "form": { "alias": "form"; "required": false; }; "required": { "alias": "required"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "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; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; }; "numericStrategy": { "alias": "numericStrategy"; "required": false; }; "numberFormatterOptions": { "alias": "numberFormatterOptions"; "required": false; }; }, { "synBlurEvent": "synBlurEvent"; "synChangeEvent": "synChangeEvent"; "synClearEvent": "synClearEvent"; "synFocusEvent": "synFocusEvent"; "synInputEvent": "synInputEvent"; "synInvalidEvent": "synInvalidEvent"; "synClampEvent": "synClampEvent"; "valueChange": "valueChange"; }, never, ["*"], true, never>;
}

export { SynInputComponent };