@geoit/ui 0.0.2 → 0.0.5

package/ai/components/geo-date-range-picker.md

@@ -1,16 +1,24 @@
 # geo-date-range-picker
 
-> AI quick reference for **GeoDateRangePickerComponent**
+> Complete usage reference for **GeoDateRangePickerComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Start–end date range picker.
 
 ## Import
+
 ```ts
 import { GeoDateRangePickerComponent } from '@geoit/ui';
+import { FormsModule } from '@angular/forms'; // when using [(ngModel)]
 ```
 
-Standalone component — add to `imports: [GeoDateRangePickerComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoDateRangePickerComponent, FormsModule]
+```
 
 ## Selector
 `geo-date-range-picker`
@@ -24,41 +32,106 @@ Filters and period selection.
 ## Do not use when
 Single date — use geo-date-picker.
 
+## How to use
+
+Chọn khoảng từ–đến (CVA). [(ngModel)] nhận [Date, Date] | null; placeholder mặc định ['Từ ngày','Đến ngày'].
+
+## Binding
+
+Supports **ControlValueAccessor**.
+
+```html
+<geo-date-range-picker [(ngModel)]="value"></geo-date-range-picker>
+<!-- or -->
+<geo-date-range-picker formControlName="field"></geo-date-range-picker>
+```
+
+Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
+
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `label` | See component TS / Storybook Controls |
-| `placeholder` | See component TS / Storybook Controls |
-| `format` | See component TS / Storybook Controls |
-| `size` | See component TS / Storybook Controls |
-| `disabled` | See component TS / Storybook Controls |
-| `required` | See component TS / Storybook Controls |
-| `error` | See component TS / Storybook Controls |
-| `errorMessage` | See component TS / Storybook Controls |
-| `allowClear` | See component TS / Storybook Controls |
-| `showTime` | See component TS / Storybook Controls |
-| `block` | See component TS / Storybook Controls |
-| `width` | See component TS / Storybook Controls |
-| `disabledDate` | See component TS / Storybook Controls |
-| `separator` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `label` | `string` | `''` | — |
+| `placeholder` | `[string, string]` | `['Từ ngày', 'Đến ngày']` | — |
+| `format` | `string` | `'dd/MM/yyyy'` | — |
+| `size` | `'default' \| 'small'` | `'default'` | — |
+| `disabled` | `boolean` | `false` | — |
+| `required` | `boolean` | `false` | — |
+| `error` | `boolean` | `false` | — |
+| `errorMessage` | `string` | `''` | — |
+| `allowClear` | `boolean` | `true` | — |
+| `showTime` | `boolean` | `false` | — |
+| `block` | `boolean` | `false` | — |
+| `width` | `number \| string \| undefined` | `undefined` | — |
+| `disabledDate` | `((current: Date) => boolean) \| undefined` | `undefined` | — |
+| `separator` | `string` | `'→'` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `valueChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `valueChange` | `OutputEmitterRef<[Date, Date] \| null>` | — |
+
+## Related types
+
+From `figma/geo-date-range-picker/geo-date-range-picker.types.ts`:
+
+```ts
+export type GeoDateRangeValue = [Date, Date] | null;
+
+export type GeoDateRangeSize = 'default' | 'small';
+```
+
+## Examples
+
+### Basic
+
 ```html
 <geo-date-range-picker label="Khoảng thời gian" [(ngModel)]="range" [block]="true"></geo-date-range-picker>
 ```
 
+### Full options
+
+```html
+<geo-date-range-picker
+  label="Thời gian lọc"
+  [placeholder]="['Từ ngày', 'Đến ngày']"
+  format="dd/MM/yyyy"
+  size="default"
+  separator="→"
+  [allowClear]="true"
+  [showTime]="false"
+  [block]="true"
+  [required]="true"
+  [error]="rangeError"
+  errorMessage="Vui lòng chọn khoảng thời gian"
+  [(ngModel)]="dateRange"
+  (valueChange)="onRange($event)"
+></geo-date-range-picker>
+```
+
+## Tips
+
+- Một ngày đơn → geo-date-picker.
+- Dùng trong bộ lọc bảng / báo cáo.
+- separator mặc định '→'.
+## Related components
+
+- [`geo-date-picker`](./geo-date-picker.md)
+- [`geo-table-filter`](./geo-table-filter.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-date-range-picker.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-date-range-picker/geo-date-range-picker.component.ts`
 
-## Storybook
-GEO / related story for `geo-date-range-picker`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
 - Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
-- Match props to Storybook Controls / this doc; do not invent unsupported inputs.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-empty-state.md

@@ -0,0 +1,75 @@
+# geo-empty-state
+
+> Complete usage reference for **GeoEmptyStateComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+GeoEmptyStateComponent
+
+## Import
+
+```ts
+import { GeoEmptyStateComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoEmptyStateComponent]
+```
+
+## Selector
+`geo-empty-state`
+
+## Category
+`other`
+
+## When to use
+—
+
+## Do not use when
+—
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `'Không có dữ liệu'` | — |
+| `description` | `string` | `''` | — |
+| `icon` | `string` | `'inbox'` | — |
+| `actionLabel` | `string` | `''` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `actionClick` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-empty-state></geo-empty-state>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-empty-state.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-empty-state/geo-empty-state.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-feedback-form.md

@@ -0,0 +1,97 @@
+# geo-feedback-form
+
+> Complete usage reference for **GeoFeedbackFormComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+GeoFeedbackFormComponent
+
+## Import
+
+```ts
+import { GeoFeedbackFormComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoFeedbackFormComponent]
+```
+
+## Selector
+`geo-feedback-form`
+
+## Category
+`other`
+
+## When to use
+—
+
+## Do not use when
+—
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `'Gửi phản ánh, kiến nghị'` | — |
+| `description` | `string` | `'Nội dung sẽ được chuyển tới cán bộ xử lý. Vui lòng mô tả rõ vấn đề và vị trí (nếu có).'` | Mô tả ngắn dưới tiêu đề — giúp người dân hiểu quy trình xử lý. |
+| `maxLength` | `number` | `1000` | — |
+| `loading` | `boolean` | `false` | — |
+| `showCancel` | `boolean` | `true` | Ẩn nút Hủy khi form dùng trên trang riêng (không phải dialog). |
+| `fill` | `boolean` | `false` | Form chiếm hết chiều rộng/cao vùng chứa (trang full content). |
+| `submitLabel` | `string` | `'Gửi phản ánh'` | — |
+| `cancelLabel` | `string` | `'Hủy'` | — |
+| `senderName` | `string` | `''` | Two-way `model()` (supports banana binding). |
+| `content` | `string` | `''` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `submittedFeedback` | `OutputEmitterRef<GeoFeedbackPayload>` | — |
+| `cancelled` | `OutputEmitterRef<void>` | — |
+
+## Related types
+
+From `figma/geo-feedback-form/geo-feedback-form.types.ts`:
+
+```ts
+export interface GeoFeedbackPayload {
+  senderName: string;
+  content: string;
+}
+
+export interface GeoFeedbackReplyPayload {
+  id: string;
+  reply: string;
+}
+```
+
+## Examples
+
+### Example
+
+```html
+<geo-feedback-form></geo-feedback-form>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-feedback-form.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-feedback-form/geo-feedback-form.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-file-picker.md

@@ -1,16 +1,24 @@
 # geo-file-picker
 
-> AI quick reference for **GeoFilePickerComponent**
+> Complete usage reference for **GeoFilePickerComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Compact file input for forms (button + filename).
 
 ## Import
+
 ```ts
 import { GeoFilePickerComponent } from '@geoit/ui';
+import { FormsModule } from '@angular/forms'; // when using [(ngModel)]
 ```
 
-Standalone component — add to `imports: [GeoFilePickerComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoFilePickerComponent, FormsModule]
+```
 
 ## Selector
 `geo-file-picker`
@@ -24,39 +32,104 @@ Single/small file field inside a form row.
 ## Do not use when
 Drag-drop multi upload with progress — use geo-upload.
 
+## How to use
+
+Ô chọn file gọn trong form (nút + tên file). CVA; (fileChange) nhận File | FileList; accept để giới hạn loại.
+
+## Binding
+
+Supports **ControlValueAccessor**.
+
+```html
+<geo-file-picker [(ngModel)]="value"></geo-file-picker>
+<!-- or -->
+<geo-file-picker formControlName="field"></geo-file-picker>
+```
+
+Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
+
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `label` | See component TS / Storybook Controls |
-| `placeholder` | See component TS / Storybook Controls |
-| `buttonText` | See component TS / Storybook Controls |
-| `required` | See component TS / Storybook Controls |
-| `disabled` | See component TS / Storybook Controls |
-| `accept` | See component TS / Storybook Controls |
-| `multiple` | See component TS / Storybook Controls |
-| `error` | See component TS / Storybook Controls |
-| `errorMessage` | See component TS / Storybook Controls |
-| `block` | See component TS / Storybook Controls |
-| `width` | See component TS / Storybook Controls |
-| `selectedName` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `label` | `string` | `'Tải file'` | — |
+| `placeholder` | `string` | `'Chọn giá trị'` | — |
+| `buttonText` | `string` | `'Chọn file'` | — |
+| `required` | `boolean` | `false` | — |
+| `disabled` | `boolean` | `false` | — |
+| `accept` | `string` | `''` | — |
+| `multiple` | `boolean` | `false` | — |
+| `error` | `boolean` | `false` | — |
+| `errorMessage` | `string` | `''` | — |
+| `block` | `boolean` | `false` | — |
+| `width` | `number \| string \| undefined` | `undefined` | — |
+| `selectedName` | `string` | `''` | Tên file đã upload (server) — hiện khi chưa có File local trong CVA. Dùng cho flow: chọn file → upload → giữ tên từ API. |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `fileChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `fileChange` | `OutputEmitterRef<File \| File[] \| null>` | — |
+
+## Related types
+
+From `figma/geo-file-picker/geo-file-picker.types.ts`:
+
+```ts
+export interface GeoFilePickerValue {
+  file: File;
+  name: string;
+}
+```
+
+## Examples
+
+### Basic
+
 ```html
 <geo-file-picker label="Đính kèm" accept=".pdf,.png" (fileChange)="onFile($event)" [block]="true"></geo-file-picker>
 ```
 
+### Full options
+
+```html
+<geo-file-picker
+  label="Tải file"
+  placeholder="Chọn giá trị"
+  buttonText="Chọn file"
+  accept=".pdf,.doc,.docx"
+  [multiple]="false"
+  [required]="true"
+  [block]="true"
+  [error]="fileError"
+  errorMessage="Vui lòng chọn file"
+  [(ngModel)]="file"
+  (fileChange)="onFile($event)"
+></geo-file-picker>
+```
+
+## Tips
+
+- Upload kéo-thả nhiều file + progress → geo-upload.
+- selectedName hiển thị tên đã chọn khi không bind CVA file object.
+- [block]="true" trong modal form.
+## Related components
+
+- [`geo-upload`](./geo-upload.md)
+- [`geo-form-modal`](./geo-form-modal.md)
+- [`geo-input`](./geo-input.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-file-picker.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-file-picker/geo-file-picker.component.ts`
 
-## Storybook
-GEO / related story for `geo-file-picker`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
 - Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
-- Match props to Storybook Controls / this doc; do not invent unsupported inputs.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-forgot-password.md

@@ -0,0 +1,78 @@
+# geo-forgot-password
+
+> Complete usage reference for **GeoForgotPasswordComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+GeoForgotPasswordComponent
+
+## Import
+
+```ts
+import { GeoForgotPasswordComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoForgotPasswordComponent]
+```
+
+## Selector
+`geo-forgot-password`
+
+## Category
+`other`
+
+## When to use
+—
+
+## Do not use when
+—
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `'Quên mật khẩu'` | — |
+| `subtitle` | `string` | `'Nhập email đã đăng ký để nhận mật khẩu mới.'` | — |
+| `loading` | `boolean` | `false` | — |
+| `errorMessage` | `string` | `''` | — |
+| `successMessage` | `string` | `''` | — |
+| `email` | `string` | `''` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `submitEmail` | `OutputEmitterRef<string>` | — |
+| `backToLogin` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-forgot-password></geo-forgot-password>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-forgot-password.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-forgot-password/geo-forgot-password.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.