@libs-ui/components-inputs-input

Universal input component hỗ trợ text, number, textarea với validation và customization đầy đủ

Version: 0.2.355-14

Giới thiệu

LibsUiComponentsInputsInputComponent là một standalone Angular component đa năng cho việc nhập liệu. Component hỗ trợ nhiều loại dữ liệu (string, int, float, bigint), nhiều tag (input, textarea, iframe-textarea), và có khả năng tùy biến cao với validation, icons, templates, và external controls.

Tính năng

• ✅ Hỗ trợ nhiều data types: string, int, float, bigint
• ✅ Hỗ trợ nhiều tag types: input, textarea, iframe-textarea
• ✅ Auto-resize cho textarea
• ✅ Number formatting theo ngôn ngữ (VI/EN)
• ✅ Min/Max value validation cho number
• ✅ Character count display
• ✅ Icon left/right với popover
• ✅ Template slots (left/right bottom)
• ✅ Up/Down buttons cho number input
• ✅ Drag & drop file support
• ✅ External control via FunctionsControl
• ✅ OnPush Change Detection
• ✅ Angular Signals

Khi nào sử dụng

• Cần input field cơ bản cho text hoặc number
• Cần textarea với auto-resize
• Cần format number theo locale (VI/EN)
• Cần validation min/max cho number input
• Cần hiển thị character count
• Cần custom icons với popover
• Cần control input từ component cha
• Cần drag & drop file vào input

Important Notes

⚠️ Data Type Handling: Component tự động format number theo ngôn ngữ hiện tại (VI dùng dấu . cho thousands, EN dùng ,).

⚠️ Textarea Auto-resize: Khi dùng tagInput="textarea", component tự động điều chỉnh height dựa trên content.

⚠️ Number Precision:

• int: max 16-17 digits
• float: max 15 digits (font) + decimals
• bigint: configurable via maxLengthNumberCount và fixedFloat

⚠️ Value Model: value là model (two-way binding), component tự động parse và emit theo dataType.

Cài đặt

npm install @libs-ui/components-inputs-input

Import

import { LibsUiComponentsInputsInputComponent } from '@libs-ui/components-inputs-input';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsInputComponent],
})
export class YourComponent {}

Ví dụ

Basic Text Input

<libs_ui-components-inputs-input
  [(value)]="textValue"
  [placeholder]="'Enter text'"
  (outChange)="onTextChange($event)" />

Number Input với Min/Max

<libs_ui-components-inputs-input
  [dataType]="'int'"
  [(value)]="numberValue"
  [minValueNumber]="0"
  [maxValueNumber]="100"
  [placeholder]="'0-100'" />

Textarea với Auto-resize

<libs_ui-components-inputs-input
  [tagInput]="'textarea'"
  [(value)]="textareaValue"
  [minHeightTextArea]="100"
  [maxHeightTextArea]="300"
  [showCount]="true"
  [maxLength]="500" />

Float Input với Fixed Decimal

<libs_ui-components-inputs-input
  [dataType]="'float'"
  [(value)]="floatValue"
  [fixedFloat]="2"
  [acceptNegativeValue]="true" />

Input với Icons

<libs_ui-components-inputs-input
  [(value)]="searchValue"
  [iconLeftClass]="'libs-ui-icon-search'"
  [iconRightClass]="'libs-ui-icon-close'"
  [popoverContentIconLeft]="'Search for items'"
  (outIconLeft)="onSearchClick()"
  (outIconRight)="onClearClick()" />

External Control

<libs_ui-components-inputs-input
  [(value)]="controlledValue"
  (outFunctionsControl)="onFunctionsControl($event)" />

<button (click)="focusInput()">Focus</button>
<button (click)="insertText('Hello')">Insert Text</button>

functionControl = signal<IInputFunctionControlEvent | null>(null);

onFunctionsControl(control: IInputFunctionControlEvent) {
  this.functionControl.set(control);
}

async focusInput() {
  await this.functionControl()?.focus();
}

async insertText(text: string) {
  await this.functionControl()?.insertContent(text);
}

API

Inputs (Most Common)

| Property | Type | Default | Description | | --------------------------------------------- | -------------------------------- | -------------------------- | -------------------------------------------- | | Property | Type | Default | Description | | -------------------------------------------- | -------------------------------- | -------------------------- | -------------------------------------------- | | [acceptNegativeValue] | boolean | false | Cho phép giá trị âm | | [acceptOnlyClickIcon] | boolean | false | Chỉ cho phép click vào icon | | [autoAddZeroLessThan10InTypeInt] | boolean | false | Tự động thêm số 0 nếu < 10 (int) | | [autoRemoveEmoji] | boolean | false | Tự động loại bỏ emoji | | [backgroundNone] | boolean | false | Trong suốt background | | [blurTimeOut] | number | 32 | Delay time cho blur event | | [borderError] | boolean | false | Hiển thị border error | | [classContainerBottomInput] | string | ' ' | Class cho container dưới input | | [classContainerInput] | string | 'w-full' | Class cho container input | | [classInclude] | string | ' w-full ' | Class bao ngoài component | | [dataType] | TYPE_DATA_TYPE_INPUT | 'string' | Data type: string, int, float, bigint | | [defaultHeight] | number | 32 | Chiều cao mặc định | | [disable] | boolean | false | Disable mode | | [emitEmptyInDataTypeNumber] | boolean | false | Emit empty string khi xoá hết number | | [fixedFloat] | number | undefined | Số chữ số thập phân | | [focusInput] | boolean | false | Auto focus input | | [focusTimeOut] | number | 600 | Delay time cho focus method | | [iconLeftClass] | string | '' | Class cho icon trái | | [iconRightClass] | string | undefined | Class cho icon phải | | [iframeTextareaCustomStyle] | IIframeTextareaCustomStyle | undefined | Custom style cho iframe textarea | | [ignoreBlockInputMaxValue] | boolean | undefined | Không chặn nhập quá max value | | [ignoreStopPropagationEvent] | boolean | undefined | Không chặn propagation event | | [ignoreWidthInput100] | boolean | undefined | Không set width 100% | | [keepPlaceholderOnly] | boolean | false | Chỉ giữ placeholder (ẩn value) | | [keepZeroInTypeInt] | boolean | false | Giữ số 0 ở đầu (int) | | [maxHeightTextArea] | number | 250 | Max height cho textarea | | [maxLength] | number | undefined | Max character length | | [maxLengthNumberCount] | number | undefined | Max length cho phần số (bigint) | | [minHeightTextArea] | number | undefined | Min height cho textarea | | [minValueNumber] | number | undefined | Min value cho number input | | [maxValueNumber] | number | undefined | Max value cho number input | | [noBorder] | boolean | false | Ẩn border | | [onlyAcceptNegativeValue] | boolean | false | Chỉ chấp nhận số âm | | [placeholder] | string | ' ' | Placeholder text | | [popoverContentIconLeft] | string | '' | Popover content icon trái | | [popoverContentIconRight] | string | '' | Popover content icon phải | | [readonly] | boolean | false | Readonly mode | | [resetAutoCompletePassword] | boolean | false | Reset autocomplete cho password | | [resize] | TYPE_INPUT_RESIZE_MODE | 'vertical' | Resize mode | | [selectAllTimeOut] | number | 600 | Delay time cho selectAll | | [setIconRightColorSameColorDisableReadOnly] | boolean | false | Icon phải cùng màu disable text | | [showCount] | boolean | false | Hiển thị character count | | [tabInsertContentTagInput] | boolean | false | Cho phép dùng Tab để insert | | [tagInput] | TYPE_TAG_INPUT | 'input' | Tag type: input, textarea, iframe-textarea | | [templateLeftBottomInput] | TemplateRef<TYPE_TEMPLATE_REF> | undefined | Template custom dưới trái | | [templateRightBottomInput] | TemplateRef<TYPE_TEMPLATE_REF> | undefined | Template custom dưới phải | | [textAreaEnterNotNewLine] | boolean | false | Enter không xuống dòng trong textarea | | [typeInput] | TYPE_INPUT | 'text' | Input type: text, number, password | | [useColorModeExist] | boolean | false | Sử dụng màu sắc theo mode của hệ thống | | [value] | string \| number | '' | Input value (model binding) | | [valueUpDownNumber] | number | undefined | Bước nhảy cho nút tăng giảm | | [zIndexPopoverContent] | number | 10 | Z-index cho popover content |

Note: Component có 50+ inputs. Xem demo tại /inputs/input để biết chi tiết.

Outputs

| Property | Type | Description | | -------------------------------- | ------------------------------------------ | --------------------------------------------- | | Property | Type | Description | | -------------------------------- | ------------------------------------------ | -------------------------------------------- | | (outChange) | any | Emit khi value thay đổi (two-way binding) | | (outChangeValueByButtonUpDown) | void | Emit khi click button up/down | | (outEnterEvent) | IEvent | Emit khi nhấn Enter | | (outFileDrop) | File | Emit khi drop single file | | (outFilesDrop) | Array<File> | Emit khi drop multiple files | | (outFocusAndBlurEvent) | IFocusAndBlurEvent | Emit khi focus/blur | | (outFunctionsControl) | IInputFunctionControlEvent | Emit function controls instance | | (outHeightAreaChange) | { isChange: boolean; height: number; } | Emit khi height textarea thay đổi auto-resize | | (outIconLeft) | string | Emit khi click icon left | | (outIconRight) | string | Emit khi click icon right | | (outInputEvent) | IEvent | Emit pure input event (native) |

FunctionsControl Methods

| Method | Description | | ---------------------------- | ------------------------- | | focus(emitEvent?: boolean) | Focus vào input | | blur(emitEvent?: boolean) | Blur khỏi input | | insertContent(data) | Insert content vào cursor | | resetValue() | Reset value về empty | | getElementValue() | Lấy value từ element | | selectAllContent() | Select all content |

Types

type TYPE_INPUT = 'text' | 'number' | 'password';
type TYPE_DATA_TYPE_INPUT = 'string' | 'int' | 'float' | 'bigint';
type TYPE_TAG_INPUT = 'input' | 'textarea' | 'iframe-textarea';
type TYPE_INPUT_RESIZE_MODE = 'auto' | 'vertical' | 'horizontal' | 'none';

interface IInputFunctionControlEvent {
  focus: (emitEvent?: boolean) => Promise<void>;
  blur: (emitEvent?: boolean) => Promise<void>;
  insertContent: (data: string | number) => Promise<void>;
  resetValue: () => Promise<void>;
  getElementValue: () => Promise<any> | undefined;
  selectAllContent: () => Promise<void>;
}

interface IIframeTextareaCustomStyle {
  borderRadius?: string;
  borderColor?: string;
  padding?: string;
  lineHeight?: string;
  fontSize?: string;
  height?: string;
  color?: string;
  backgroundColor?: string;
}

Demo

npx nx serve core-ui

Truy cập: http://localhost:4500/inputs/input

License

MIT