@libs-ui/components-datetime-input 0.2.355-14 → 0.2.355-15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +215 -2
  2. package/package.json +8 -8
package/README.md CHANGED
@@ -1,3 +1,216 @@
1
- # datetime-input
1
+ # Datetime Input Component
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ Component nhập giờ phút với hỗ trợ single time và time range, tự động format và validation.
4
+
5
+ ## Tính năng
6
+
7
+ - ✅ **Single Time Input**: Nhập giờ phút đơn giản (HH:mm)
8
+ - ✅ **Time Range Input**: Nhập khoảng thời gian (From - To)
9
+ - ✅ **Auto Format**: Tự động format thành HH:mm
10
+ - ✅ **Auto Focus**: Tự động chuyển focus giữa hours và minutes
11
+ - ✅ **Validation**: Hỗ trợ validation required và compare time
12
+ - ✅ **Real-time Emit**: Emit data real-time khi nhập
13
+ - ✅ **Keyboard Support**: Hỗ trợ đầy đủ keyboard navigation
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install @libs-ui/components-datetime-input
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ### Basic Single Time
24
+
25
+ ```typescript
26
+ import { Component } from '@angular/core';
27
+ import { LibsUiComponentsDatetimeInputComponent, ISelectedTimeInput } from '@libs-ui/components-datetime-input';
28
+
29
+ @Component({
30
+ selector: 'app-example',
31
+ standalone: true,
32
+ imports: [LibsUiComponentsDatetimeInputComponent],
33
+ template: `
34
+ <libs_ui-components-datetime-input
35
+ [labelConfig]="{ labelLeft: 'Chọn giờ' }"
36
+ (outEmitSingleTime)="onTimeSelected($event)" />
37
+ `,
38
+ })
39
+ export class ExampleComponent {
40
+ onTimeSelected(event: ISelectedTimeInput) {
41
+ console.log('Time:', event); // { hours: 9, minute: 30 }
42
+ }
43
+ }
44
+ ```
45
+
46
+ ### Time Range
47
+
48
+ ```typescript
49
+ import { Component } from '@angular/core';
50
+ import { LibsUiComponentsDatetimeInputComponent, ISelectedMultiTime } from '@libs-ui/components-datetime-input';
51
+
52
+ @Component({
53
+ selector: 'app-example',
54
+ standalone: true,
55
+ imports: [LibsUiComponentsDatetimeInputComponent],
56
+ template: `
57
+ <libs_ui-components-datetime-input
58
+ [multiTime]="true"
59
+ [labelConfig]="{ labelLeft: 'Khoảng giờ' }"
60
+ (outEmitMultiTime)="onTimeRangeSelected($event)" />
61
+ `,
62
+ })
63
+ export class ExampleComponent {
64
+ onTimeRangeSelected(event: ISelectedMultiTime) {
65
+ console.log('From:', event.from?.());
66
+ console.log('To:', event.to?.());
67
+ }
68
+ }
69
+ ```
70
+
71
+ ### With Preset Value
72
+
73
+ ```typescript
74
+ import { Component, signal } from '@angular/core';
75
+ import { ISelectedMultiTime } from '@libs-ui/components-datetime-input';
76
+
77
+ @Component({
78
+ // ...
79
+ template: `
80
+ <libs_ui-components-datetime-input
81
+ [multiTime]="true"
82
+ [selectedTime]="selectedTime()"
83
+ [labelConfig]="{ labelLeft: 'Giờ làm việc' }"
84
+ (outEmitMultiTime)="onTimeRangeSelected($event)" />
85
+ `,
86
+ })
87
+ export class ExampleComponent {
88
+ readonly selectedTime = signal<ISelectedMultiTime>({
89
+ from: signal({ hours: 9, minute: 30 }),
90
+ to: signal({ hours: 17, minute: 0 }),
91
+ });
92
+
93
+ onTimeRangeSelected(event: ISelectedMultiTime) {
94
+ console.log('Time range:', event);
95
+ }
96
+ }
97
+ ```
98
+
99
+ ### With Validation
100
+
101
+ ```typescript
102
+ import { Component } from '@angular/core';
103
+
104
+ @Component({
105
+ // ...
106
+ template: `
107
+ <libs_ui-components-datetime-input
108
+ [multiTime]="true"
109
+ [validRequired]="{ message: 'Vui lòng nhập giờ' }"
110
+ [validCompareTime]="{
111
+ message: 'Giờ kết thúc phải lớn hơn giờ bắt đầu',
112
+ isCheckErrorTimeEndGreaterTimeStart: true,
113
+ }"
114
+ (outEmitMultiTime)="onTimeRangeSelected($event)"
115
+ (outEmitValid)="onValidChange($event)" />
116
+ `,
117
+ })
118
+ export class ExampleComponent {
119
+ onTimeRangeSelected(event: ISelectedMultiTime) {
120
+ console.log('Time range:', event);
121
+ }
122
+
123
+ onValidChange(valid: { validRequired: boolean; validCompare: boolean }) {
124
+ console.log('Validation:', valid);
125
+ }
126
+ }
127
+ ```
128
+
129
+ ## API
130
+
131
+ ### Inputs
132
+
133
+ | Property | Type | Default | Description |
134
+ | ------------------------ | -------------------------------- | ----------- | ---------------------------------- |
135
+ | `[multiTime]` | `boolean` | `false` | Chế độ chọn time range (From - To) |
136
+ | `[selectedTime]` | `ISelectedMultiTime` | `undefined` | Giá trị time được set sẵn |
137
+ | `[disable]` | `boolean` | `false` | Disable input |
138
+ | `[readonly]` | `boolean` | `false` | Readonly mode |
139
+ | `[labelConfig]` | `ILabel` | `undefined` | Cấu hình label |
140
+ | `[validRequired]` | `IMessageTranslate` | `undefined` | Validation required |
141
+ | `[validCompareTime]` | `IValidCompare` | `undefined` | Validation so sánh time |
142
+ | `[fromAndToDateLabel]` | `{ from?: string; to?: string }` | `undefined` | Label cho From và To |
143
+ | `[isEmitRealTime]` | `boolean` | `false` | Emit data real-time khi nhập |
144
+ | `[ignoreAllowEqualTime]` | `boolean` | `true` | Cho phép From và To bằng nhau |
145
+ | `[defaultHeight]` | `number` | `28` | Chiều cao mặc định của input |
146
+
147
+ ### Outputs
148
+
149
+ | Property | Type | Description |
150
+ | ----------------------- | --------------------------------------------------- | ----------------------------- |
151
+ | `(outEmitSingleTime)` | `ISelectedTimeInput` | Event khi chọn single time |
152
+ | `(outEmitMultiTime)` | `ISelectedMultiTime` | Event khi chọn time range |
153
+ | `(outEmitValid)` | `{ validRequired: boolean; validCompare: boolean }` | Event validation |
154
+ | `(outResetTime)` | `ISelectedMultiTime \| undefined` | Event khi reset time |
155
+ | `(outEmitRealTime)` | `ISelectedMultiTime` | Event emit real-time khi nhập |
156
+ | `(outFunctionsControl)` | `IDateTimeInputFunctionControlEvent` | Function control event |
157
+
158
+ ## Types
159
+
160
+ ### ISelectedTimeInput
161
+
162
+ ```typescript
163
+ export interface ISelectedTimeInput {
164
+ hours: number;
165
+ minute: number;
166
+ }
167
+ ```
168
+
169
+ ### ISelectedMultiTime
170
+
171
+ ```typescript
172
+ export interface ISelectedMultiTime {
173
+ from?: WritableSignal<{ hours?: number; minute?: number }>;
174
+ to?: WritableSignal<{ hours?: number; minute?: number }>;
175
+ }
176
+ ```
177
+
178
+ ### IValidCompare
179
+
180
+ ```typescript
181
+ export interface IValidCompare {
182
+ message?: string;
183
+ isCheckErrorTimeEndGreaterTimeStart?: boolean;
184
+ isCheckErrorTimeDuplicate?: boolean;
185
+ }
186
+ ```
187
+
188
+ ### IDateTimeInputFunctionControlEvent
189
+
190
+ ```typescript
191
+ export interface IDateTimeInputFunctionControlEvent {
192
+ checkIsValid?: () => Promise<boolean>;
193
+ setMessageError?: (message: string | undefined) => Promise<void>;
194
+ resetError?: () => Promise<void>;
195
+ }
196
+ ```
197
+
198
+ ## Important Notes
199
+
200
+ ⚠️ **Time Format**: Component tự động format thành HH:mm
201
+
202
+ ⚠️ **Single vs Range**: Sử dụng `[multiTime]="true"` để chuyển sang time range mode
203
+
204
+ ⚠️ **Auto Focus**: Tự động chuyển focus giữa hours và minutes khi nhập đủ ký tự
205
+
206
+ ⚠️ **Validation**: Hỗ trợ validation required và compare time
207
+
208
+ ⚠️ **Real-time Emit**: Có thể emit data real-time khi nhập với `[isEmitRealTime]="true"`
209
+
210
+ ## Demo
211
+
212
+ Xem demo đầy đủ tại: [http://localhost:4500/datetime/input](http://localhost:4500/datetime/input)
213
+
214
+ ## License
215
+
216
+ MIT
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@libs-ui/components-datetime-input",
3
- "version": "0.2.355-14",
3
+ "version": "0.2.355-15",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-buttons-button": "0.2.355-14",
7
- "@libs-ui/components-inputs-input": "0.2.355-14",
8
- "@libs-ui/components-inputs-valid": "0.2.355-14",
9
- "@libs-ui/components-label": "0.2.355-14",
10
- "@libs-ui/components-switch": "0.2.355-14",
11
- "@libs-ui/interfaces-types": "0.2.355-14",
12
- "@libs-ui/utils": "0.2.355-14",
6
+ "@libs-ui/components-buttons-button": "0.2.355-15",
7
+ "@libs-ui/components-inputs-input": "0.2.355-15",
8
+ "@libs-ui/components-inputs-valid": "0.2.355-15",
9
+ "@libs-ui/components-label": "0.2.355-15",
10
+ "@libs-ui/components-switch": "0.2.355-15",
11
+ "@libs-ui/interfaces-types": "0.2.355-15",
12
+ "@libs-ui/utils": "0.2.355-15",
13
13
  "@ngx-translate/core": "^15.0.0",
14
14
  "rxjs": "~7.8.0"
15
15
  },