sdk-textbox

Description:

The sdk-textbox is a simple to use text field for controlling input while typing. You can prevent unwanted characters and force desired formats.

Angular Compatibility Chart

| Version | Compatibility |
|---------|---------------|
| >= 16 | ✔ |

INSTALLATION:

Using NPM:

``bash
npm install --save sdk-textbox
`

CONFIGURATION:


To configure the `sdk-textbox` for your application, add the following lines to your app.module.ts file:

`typescript
import { SDKTextboxModule } from 'sdk-textbox';

@NgModule({
imports: [
SDKTextboxModule
]
})
export class AppModule { }
`

PROPERTIES:


- `validCharacters (string | null)`: Specify the type of input.
- `alpha`: Letters (upper/lower) only.
- `numeric`: Numbers only.
- `alphanumeric`: All letters (upper/lower) and numbers.
- `decimal`: Numbers only with 1 decimal (.) anywhere and 1 dash (-) at the beginning only.
- `currency`: Numbers ONLY with 1 decimal (.) anywhere and 1 dash (-) at the beginning only.
- `email`: Email address with `onblur` (exiting field) formatting.
- `calendar`: Calendar with available popup (component) selector.
- Default pattern is `YYYY-MM-DD`.
- Use `nocomponent` attribute to prevent popup.
- `latitude`: -90 to 90.
- `longitude`: -180 to 180.
- `custom`: "Custom" set of characters based on provided pattern.
- See the `validCharacters="custom"` section for more information.
- `value (string | null)`: Specify the current value.
- `hint (string | null)`: Specify the placeholder.
- `pattern (string | null)`: Specify a particular format to apply.
- `locale (string)`: Specify the locale to use for formatting (default 'en-US').
- `multiLine (boolean)`: Allows for multiple lines of text (default: false).
- `border (string)`: Specify the color of the border.
- `padding (string)`: Specify the padding inside the box.
- `margin (string)`: Specify the margin outside the box.
- `height (string)`: Specify the height.
- `width (string)`: Specify the width.
- `style (string)`: Specify a style to be applied.
- `class (string)`: Specify a class to be applied.
- `disableSuggestions (boolean)`: Turns text suggestions on/off (default: false).
- `showCalendarIcon (boolean)`: Shows the calendar icon (default: true).
- `calHeight (string)`: Specify the height of the calendar control.
- `calWidth (string)`: Specify the width of the calendar control.
- `calFontSize (string)`: Specify a font size for calendar control.
- `focus (boolean)`: Sets focus on the object (default: false).
- `blurCallBackEvent`: Specify a callback method when the text looses focus.
- `changeCallBackEvent`: Specify a callback method when the text changes.
- `enterCallBackEvent`: Specify a callback method when the 'ENTER' key is pressed.

USAGE:

`html
Examples:

Alpha

Numeric

AlphaNumeric

Decimal (with commas and 5 decimal positions)

Currency (with commas and $)

Email Address

Calendar (without popup component)

Calendar

Latitude

Longitude

Custom Inputs:

SSN

Phone # with extension

Custom ([abc123])

Custom ([a-zA-Z0-9])

Custom ([^0-9])

`

#### `validCharacters="custom"`
Specific characters:
- For specific character input, you MUST wrap your pattern in brackets []. This is similar to a RegEx pattern.
- [abc123] only allows the characters "abc123".
- [0-9] or [\d] only allows numbers.
- [a-zA-Z0-9] only allows alphanumeric characters.
- [^0-9] allows any character EXCEPT numbers.

- Other RegEx patterns are handled as-is but copy/paste is disabled:
- ^[0-9]{1,5}$

Pattern-based:
- For pattern-based input, you MUST use the # character to represent numbers (0-9).
- Segements are created by using one of the following characters:
- space ( )
- dash (-)
- underscore (_)
- forward slash (/)
- period (.)
- Segment characters cannot be used consecutively.
- Each segment must contain at least one # character.

NOTE: The `sdk-textbox`` also captures and formats text that is pasted in from the clipboard.