gradum-kit - v0.1.0
    Preparing search index...

    Class GradumInput<InputTag, ValueType, ViewType, DataType, ModelType, EmitterType>

    Type Parameters

    Hierarchy (View Summary)

    Index
    constructor
    properties defaultProperties locked selectTextOnFocus dynamicVerticalResize inputRegexCheck blurRegexCheck onFocus onBlur onInput defaultId labelElement content childrenOrder elementTag onAttach onDetach onAdopt tagName initialized defaultFeedforwardProperties view model emitter data dataId dataIndex dataSize operators handlers interactors tools constrainers unsetDefaultClasses shadowDOM defaultClasses
    input element type placeholder pattern size value rawValue label leftCustomElements leftIcon prefixEntry text suffixEntry rightIcon rightCustomElements
    create customCreate setupChangedCallbacks setupUIListeners setValueSilently processInputValue setupUIElements setupUILayout connectedCallback disconnectedCallback adoptedCallback destroy initialize feedforward clone
    properties: GradumInputProperties<
        InputTag,
        ValueType,
        ViewType,
        DataType,
        ModelType,
        EmitterType,
    >
    defaultProperties: GradumInputProperties = ...

    Default properties assigned to a new input: an <input> element, wired to the interactor that keeps its value and size in step with what the user types.

    locked: boolean = false

    Whether the input rejects focus, so clicking it does nothing.

    selectTextOnFocus: boolean = false

    Whether the input's whole text is selected when it gains focus.

    dynamicVerticalResize: boolean = false

    Whether the input grows and shrinks vertically to fit its content, for <textarea> elements that should not scroll.

    inputRegexCheck: string | RegExp

    A pattern the value must match while typing. Input that fails it is sanitized if possible, and otherwise reverted to the last value that passed.

    blurRegexCheck: string | RegExp

    A pattern the value must match once editing ends. Stricter than GradumInput.inputRegexCheck, so partial input is allowed mid-typing but not left behind.

    onFocus: Delegate<() => void> = ...

    Fired when the input gains focus.

    onBlur: Delegate<() => void> = ...

    Fired when the input loses focus.

    onInput: Delegate<() => void> = ...

    Fired on every accepted change to the input's value.

    defaultId: string = ...
    labelElement: HTMLLabelElement

    content

    content: HTMLElement

    The wrapper holding everything except the label. It becomes the element's child handler, so children added later land inside it rather than beside the label.

    childrenOrder: readonly [
        "leftCustomElements",
        "leftIcon",
        "prefixEntry",
        "element",
        "suffixEntry",
        "rightIcon",
        "rightCustomElements",
    ] = ...

    The order the rich element's parts are laid out in, from left to right. Assigning a part inserts it at its place in this order rather than at the end.

    elementTag: InputTag

    The tag used for this rich element's text element

    onAttach: Delegate<() => void> = ...

    Delegate fired when the element is attached to DOM.

    onDetach: Delegate<() => void> = ...

    Delegate fired when the element is detached from the DOM.

    onAdopt: Delegate<() => void> = ...

    Delegate fired when the element is adopted by a new parent in the DOM.

    tagName: string
    initialized: boolean

    Whether the element was initialized already or not.

    defaultFeedforwardProperties: GradumElementProperties

    The properties passed on to children created through feedforward, letting a parent seed its descendants with shared defaults.

    view: ViewType

    The view (if any) of the element.

    model: ModelType

    The model (if any) of the element.

    emitter: GradumEmitter

    The emitter (if any) of the element.

    data: DataType

    The main data block (if any) attached to the element, taken from its model (if any).

    dataId: string

    The ID of the main data block (if any) of the element, taken from its model (if any).

    dataIndex: number

    The numerical index of the main data block (if any) of the element, taken from its model (if any).

    dataSize: number

    The size (number) of the main data block (if any) of the element, taken from its model (if any).

    operators: GradumOperator<
        object,
        GradumView<
            any,
            any,
            GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
        >,
        GradumModel<any, any, any, any, any>,
        GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
    >[]

    The operators (if any) attached to the element's MVC structure.

    handlers: GradumHandler<GradumModel<any, any, any, any, any>>[]

    The handlers (if any) attached to the element's model. Returns an empty array if no model is set.

    interactors: GradumInteractor<
        object,
        GradumView<
            any,
            any,
            GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
        >,
        GradumModel<any, any, any, any, any>,
        GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
    >[]

    The interactors (if any) attached to the element's MVC structure.

    tools: GradumTool<
        object,
        GradumView<
            any,
            any,
            GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
        >,
        GradumModel<any, any, any, any, any>,
        GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
    >[]

    The tools (if any) attached to the element's MVC structure.

    constrainers: GradumConstrainer<
        object,
        GradumView<
            any,
            any,
            GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
        >,
        GradumModel<any, any, any, any, any>,
        GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
    >[]

    The constrainers (if any) attached to the element's MVC structure.

    unsetDefaultClasses: boolean

    Whether to set the default CSS classes defined in the static config on the element or not. Setting it will accordingly add/remove the CSS classes from the element.

    shadowDOM: boolean

    Whether the element renders its children into a shadow root. Assigning true attaches one if the element does not already have it.

    defaultClasses: string | string[]

    The CSS classes applied to every instance of this element class. Assigning a new value swaps the previous classes out for the new ones, unless unsetDefaultClasses is set.

    • get element(): ValidElement<InputTag>

      Returns ValidElement<InputTag>

      The text element. Can be set to a new element by a simple assignment. Setting the value to a new string will update the text's textContent with the given string.

    • set element(value: ValidElement<InputTag> | GradumProperties<InputTag>): void

      Parameters

      Returns void

      The text element. Can be set to a new element by a simple assignment. Setting the value to a new string will update the text's textContent with the given string.

    type: string
    placeholder: string
    pattern: string
    size: string
    • get value(): ValueType

      Returns ValueType

      The input's value, parsed from its text. Numbers and JSON are converted automatically, and a current value exposing fromString is used to parse the text into its own type. Assigning writes the value's string form back to the element.

    • set value(value: ValueType): void

      Parameters

      Returns void

    • get rawValue(): string

      Returns string

      The input's text exactly as it appears in the element, with no parsing. Assigning checks it against GradumInput.blurRegexCheck and reverts to the last valid text if it fails.

    • set rawValue(value: string): void

      Parameters

      • value: string

      Returns void

    • get label(): string

      Returns string

    • set label(value: string): void

      Parameters

      • value: string

      Returns void

      The label's text. Assigning a non-empty string creates the <label> and places it before the content; assigning an empty value removes it. The label is linked to the inner element's id, so clicking it focuses that element.

    • set leftCustomElements(value: Element | Element[]): void

      Parameters

      Returns void

      The custom element(s) on the left. Can be set to new element(s) by a simple assignment.

    • get leftIcon(): GradumIcon

      Returns GradumIcon

    • set leftIcon(
          value:
              | string
              | GradumIcon<
                  GradumView<
                      any,
                      any,
                      GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
                  >,
                  object,
                  GradumModel<any, any, any, any, any>,
                  GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
              >,
      ): void

      Parameters

      Returns void

      The left icon element. Can be set with a new icon by a simple assignment (the name/path of the icon, or a Gradum/HTML element).

    • get prefixEntry(): HTMLElement

      Returns HTMLElement

    • set prefixEntry(value: string | HTMLElement): void

      Parameters

      Returns void

      The element shown before the text. Assigning a string sets its text content; assigning an element replaces it outright.

    text

    • get text(): string

      Returns string

      The text element. Can be set to a new element by a simple assignment. Setting the value to a new string will update the text's textContent with the given string.

    • set text(value: string): void

      Parameters

      • value: string

      Returns void

    • get suffixEntry(): HTMLElement

      Returns HTMLElement

    • set suffixEntry(value: string | HTMLElement): void

      Parameters

      Returns void

      The element shown after the text. Assigning a string sets its text content; assigning an element replaces it outright.

    • get rightIcon(): GradumIcon

      Returns GradumIcon

    • set rightIcon(
          value:
              | string
              | GradumIcon<
                  GradumView<
                      any,
                      any,
                      GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
                  >,
                  object,
                  GradumModel<any, any, any, any, any>,
                  GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
              >,
      ): void

      Parameters

      Returns void

      The right icon element. Can be set with a new icon by a simple assignment (the name/path of the icon, or a Gradum/HTML element).

    • set rightCustomElements(value: Element | Element[]): void

      Parameters

      Returns void

      The custom element(s) on the right. Can be set to new element(s) by a simple assignment.

    • Protected Function

      customCreate

      Parameters

      Returns object

      The created input.

      Build an input, deferring the initial value until the underlying element exists so it is not lost during construction.

    • Function

      setupChangedCallbacks

      Returns void

      Setup method intended to initialize change listeners and callbacks. Called on initialize().

    • Function

      setupUIListeners

      Returns void

      Setup method to initialize and define all input/DOM event listeners of the element. Called on initialize().

    • Function

      setValueSilently

      Parameters

      Returns void

      Write a value into the element without running the regex checks or announcing the change. Use it to sync the input from an external source without echoing an update back out.

    • Protected Function

      processInputValue

      Parameters

      • Optionalvalue: string = ...

        The text to validate. Defaults to the element's.

      Returns void

      Validate the element's current text against the configured patterns, sanitizing or reverting it as needed, and record it as the last known-good value.

    • Function

      setupUIElements

      Returns void

      Setup method intended to initialize all direct sub-elements attached to this element, and store them in fields. Called on initialize().

    • Function

      setupUILayout

      Returns void

      Setup method to create the layout structure of the element by adding all created sub-elements to this element's child tree. Called on initialize().

    • Function

      connectedCallback

      Returns void

      function called when the element is attached to the DOM.

    • Function

      disconnectedCallback

      Returns void

      function called when the element is detached from the DOM.

    • Function

      adoptedCallback

      Returns void

      function called when the element is adopted by a new parent in the DOM.

    • Function

      destroy

      Returns this

      Itself, allowing for method chaining.

      Destroys the node by removing it from the document and removing all its bound listeners.

    • Function

      initialize

      Returns void

      Initializes the element. It sets up the UI by calling the methods setupUIElements, setupUILayout, setupUIListeners, and setupChangedCallbacks (in this order, if they are defined). This function is called automatically in .setProperties() and when instantiating an element via element(). It is called only once per element (as it checks with the reflected initialized flag).

    • Function

      feedforward

      Parameters

      • Optionalproperties: FeedforwardProperties

        Properties to feed forward. Defaults to defaultFeedforwardProperties.

      Returns this

      Itself, allowing for method chaining.

      Push this element's feedforward properties down to its children, so newly added descendants pick up the same defaults.

    • Function

      clone

      Parameters

      Returns this

      The cloned element.

      Create a copy of this element. By default the copy carries the same properties and children but none of the bound listeners.

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods