Package Exports

@dreamworld/dw-input/dw-input
@dreamworld/dw-input/dw-input.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@dreamworld/dw-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

dw-input

A material input element made with lit-html. For more detail visit https://material.io/develop/web/components/input-controls/text-field/.

Installation

  npm install @dreamworld/dw-input

Usage

  @import '@dreamworld/dw-input/dw-input';

Demo

Features

It follows material design outlines input style and provides all features of it. know more
It auto select's text if autoSelect property is true
Provides a validator property to add custom validations
Set multiline to true to show input as text area
Set prefixSvgIcon and suffixSvgIcon to show prefix and suffix icon
Performs validation on blur. It also performs validation on User type if input is invalid.

Events

Triggers value-changed event on value change.

Methods

focus - Focuses the input
selectText - Selected input's text
validate - Call this to validate input. Returns false if value is invalid.
formattedValueGetter - Use to auto-format value on blur. It provides value in argument. It must be return a string.
focusedValueGetter - Use to set value on focus. It provides value in argument. It must be return a string.

Theme

Configure color of the icon using --dw-icon-color css variable.

Example css to change icon color

dw-input{
--dw-icon-color: green;
}

Custom input

Override dwInput class to create a custom input

class CustomInput extends DwInput {
  static get styles() {
  return [
    DwInput.styles,
    css`
      .mdc-text-field{
        border-radius: 8px;
      }`
    ];
  }
}
customElements.define('custom-input', CustomInput);

<custom-input></custom-input>

Examples

<dw-input label="Name" validator="<VALIDATION_FN>" placeholder="Enter name here" autoSelect required hint="Hint text"></dw-input>

<dw-input label="Number" disabled allowedPattern="[0-9]" value="12"></dw-input>

<dw-input label="Number" readOnly prefixSvgIcon='<SVG_PATH>'  suffixSvgIcon='<SVG_PATH>'></dw-input>

<dw-input noLabel multiline></dw-input>

<dw-input value="12" originalValue="12" highLightOnChanged></dw-input>