Float Input Component

float-input is an Angular component that provides a flexible and customizable input field with floating labels. It supports various input types such as text, telephone numbers with country code selection, RUT formatting, and more.

Prerequisites

Float Input requires Bootstrap 5.

Ensure that Bootstrap 5 is installed and properly configured in your Angular project. You can install Bootstrap via npm:

npm install bootstrap

Then, import Bootstrap in your styles.scss or angular.json:

@import "~bootstrap/scss/bootstrap";

Installation

To install the library, run the following command:

npm install @modscl/float-input

Usage

Importing the Module

You can import the component into your Angular module as follows:

import { FloatInputComponent } from "@modscl/float-input";

@NgModule({
  declarations: [
    // other components
  ],
  imports: [
    // other modules
    FloatInputComponent,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example Implementations

Telephone Input with Country Code

<lib-float-input [type]="'tel'" [title]="'Phone Number'" [control]="phoneControl" [requiredText]="'Phone number is required'" [hint]="'Enter your phone number'"></lib-float-input>

RUT Input

<lib-float-input [type]="'rut'" [title]="'RUT'" [control]="rutControl" [requiredText]="'RUT is required'" [hint]="'Enter your RUT'"></lib-float-input>

Select Input

<lib-float-input [type]="'select'" [title]="'Country'" [control]="countryControl" [requiredText]="'Please select a country'" [options]="countryOptions"></lib-float-input>

Text Suggest Input

<lib-float-input [type]="'textSuggest'" [title]="'Search'" [control]="searchControl" [requiredText]="'Search is required'" [hint]="'Start typing to see suggestions'" [options]="searchOptions"></lib-float-input>

Input Types Supported

The float-input component supports a variety of input types:

• Text: Basic text input.
• Telephone: Input with a country code dropdown.
• RUT: Chilean ID number input with automatic formatting.
• Password: Secure password input.
• Email: Email address input.
• Select: Dropdown with type-ahead functionality.
• Text Suggest: Input with a suggestion dropdown.
• Radio: Group of radio buttons.
• Checkbox: Single or multiple checkbox inputs.
• Textarea: Multi-line text area.

API Documentation

Input Properties

| Property | Type | Description | | -------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | type | string | The type of input. Supported values: 'text', 'tel', 'rut', 'password', 'email', 'select', 'textSuggest', 'radio', 'checkbox', 'textarea'. | | title | string | Label for the input. | | control | FormControl | The FormControl instance managing the input's value. | | requiredText | string | Error message displayed when the input is invalid. | | hint | string | Hint message displayed when the input is empty. | | options | Array<{ value: string, label: string }> | Array of options for select or textSuggest inputs. Each option should be an object with value and label properties. | | radioName | string | Name for the radio input group. | | mb | string | Class for managing the margin-bottom of the input container. |

Methods

• formatPhone(): Formats the phone number input.
• formatRut(): Formats the RUT input.
• formatUsername(): Formats the username input.
• selectCountry(country: any): Selects the country for the telephone input.
• filterOptions(): Filters the options for select or textSuggest inputs.

Contributions

Contributions are welcome! Please submit a pull request or open an issue to discuss your changes.

License

This project is licensed under the MIT License.