@instawork/design-system/lib/nested-input/nested-input.component.d.ts

The design system for Instawork's web apps

import { CustomInputComponent } from '../custom-input';
import './nested-input.component.scss';
export interface NestedInputHTMLElement extends HTMLElement {
    max: string;
    maxLength: number;
    min: string;
    minLength: number;
    placeholder: string;
    value: string;
    disabled: boolean;
    required: boolean;
    validity: ValidityState;
    checkValidity(): boolean;
    reportValidity(): boolean;
}
declare global {
    interface HTMLElementTagNameMap {
        'iw-nested-input': NestedInputHTMLElement;
    }
    interface JQuery {
        iwNestedInput(): JQuery<NestedInputHTMLElement>;
    }
}
export declare type HTMLAnyInputElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
/**
 * A custom component that supports adding extra content inside a .form-control styled input.
 *
 * Optional attributes:
 *   data-disabled-placeholder: If set, hides the input value and uses the specified placeholder when the input is
 *                              disabled.
 *
 * Usage:
 *   <iw-nested-input [data-disabled-placeholder]="-">
 *     <input type="text" name="..." />
 *     <span>Extra content here</span>
 *   </iw-nested-input>
 */
export declare class NestedInputComponent<TElement extends HTMLElement = NestedInputHTMLElement, TValue = string> extends CustomInputComponent<TElement> {
    #private;
    static COMPONENT_SELECTOR: string;
    static loadPlugin(): void;
    get disabled(): boolean;
    set disabled(disabled: boolean);
    protected _placeholder: string;
    get placeholder(): string;
    set placeholder(placeholder: string);
    get disabledPlaceholder(): string | boolean;
    get value(): string;
    set value(value: string);
    get max(): any;
    set max(value: any);
    get maxLength(): number;
    set maxLength(value: number);
    get min(): any;
    set min(value: any);
    get minLength(): number;
    set minLength(value: number);
    get required(): boolean;
    set required(value: boolean);
    get showDisabledValue(): boolean;
    set showDisabledValue(value: boolean);
    /**
     * Returns the value set at the time of initialization, if any
     */
    get originalValue(): any;
    /**
     * Gets the current value, regardless of disabled state.
     */
    get currentValue(): any;
    get isModified(): boolean;
    readonly $value: JQuery<HTMLAnyInputElement>;
    readonly valueEl: HTMLAnyInputElement;
    readonly $display: JQuery;
    readonly $displayPlaceholder: JQuery;
    constructor($el: JQuery<TElement>);
    /**
     * Returns a {@link JQuery} object representing the input element(s) that the user will be able see and interact with
     */
    protected getDisplayInput(): JQuery;
    /**
     * Returns a {@link JQuery} object representing the input element(s) that the will be used to display the placeholder
     * value. This may be the same as {@link getDisplayInput}.
     */
    protected getDisplayPlaceholder(): JQuery;
    /**
     * Returns a {@link JQuery} object representing the input element(s) that the will be used to represent the value of
     * the input component. This may be the same as {@link getDisplayInput}.
     */
    protected getValueInput(): JQuery<HTMLAnyInputElement>;
    /**
     * Encapsulates all initialization logic that can be customized by subclasses
     */
    protected init(): void;
    /**
     * Hook for subclasses to find and initialize references to child elements created by the template
     */
    protected initDomRefs(): void;
    /**
     * Copies the "value" attribute from the host element to the value element, saves the original value in a data
     * property
     */
    protected initValue(): void;
    /**
     * Hook for subclasses to make any additional updates to the DOM
     */
    protected initDom(): void;
    /**
     * Syncs attribute values from the host element to corresponding attributes on the value element
     */
    protected initAttrProps(): void;
    /**
     * Hook for subclasses to validate parsed values from attributes
     */
    protected validateHostAttributes(): void;
    /**
     * Set up event handlers
     */
    protected initEvents(): void;
    /**
     * Returns the string representation of the original value as defined in the initial rendering of the document
     */
    protected findOriginalValue(): string;
    /**
     * Sets the representation of the value that is shown in the UI
     */
    protected setDisplay(value: string): void;
    /**
     * Optionally convert the string representation of a value to a parsed value
     */
    protected importValue(value: string): TValue;
    /**
     * Updates the value element's value property with a new value
     */
    protected setValue(value: string): void;
    /**
     * Convert a parsed value to its string representation for storing in the value element's value property
     */
    protected formatValue(value: TValue): string;
    protected onDisabledChange(disabled: boolean): void;
    protected syncPlaceholder(disabled: boolean): void;
    protected updatePlaceholderState(disabled: boolean): void;
    protected getAttrProp(name: string): any;
    protected setAttrProp(name: string, value: any): void;
}