@geoit/ui 0.0.4 → 0.0.6

package/ai/components/geo-list-page.md

@@ -0,0 +1,75 @@
+# geo-list-page
+
+> Complete usage reference for **GeoListPageComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+List page chrome: title + breadcrumb shell for admin CRUD screens.
+
+## Import
+
+```ts
+import { GeoListPageComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoListPageComponent]
+```
+
+## Selector
+`geo-list-page`
+
+## Category
+`layout`
+
+## When to use
+Wrap table toolbars on admin list pages.
+
+## Do not use when
+Map portals — use geo-map-shell; dashboards — use geo-dashboard.
+
+
+## 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` | `''` | — |
+| `breadcrumb` | `GeoBreadcrumbItem[]` | `[]` | — |
+| `uppercase` | `boolean` | `true` | — |
+
+## Outputs
+
+_None_
+
+
+## Examples
+
+### Example
+
+```html
+<geo-list-page title="Quản lý người dùng" [breadcrumb]="crumbs">
+  <geo-table-toolbar ...></geo-table-toolbar>
+  <geo-table ...></geo-table>
+</geo-list-page>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-list-page.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-list-page/geo-list-page.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-login.md

@@ -0,0 +1,106 @@
+# geo-login
+
+> Complete usage reference for **GeoLoginComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Login form (username, password, captcha, remember).
+
+## Import
+
+```ts
+import { GeoLoginComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLoginComponent]
+```
+
+## Selector
+`geo-login`
+
+## Category
+`forms`
+
+## When to use
+Specialist / admin login page.
+
+## Do not use when
+SSO-only flows without local credentials.
+
+## How to use
+
+Form đăng nhập: username/password/captcha/remember. (submitLogin) payload; (forgotPassword) điều hướng quên mật khẩu.
+
+## 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` | `'Đăng nhập hệ thống'` | — |
+| `subtitle` | `string` | `'Cổng tra cứu thông tin đất đai'` | — |
+| `captchaHint` | `string` | `'Nhập mã kiểm tra hiển thị bên cạnh'` | — |
+| `loading` | `boolean` | `false` | — |
+| `errorMessage` | `string` | `''` | — |
+| `showForgotPassword` | `boolean` | `true` | — |
+| `username` | `string` | `''` | Two-way `model()` (supports banana binding). |
+| `password` | `string` | `''` | Two-way `model()` (supports banana binding). |
+| `captcha` | `string` | `''` | Two-way `model()` (supports banana binding). |
+| `remember` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `submitLogin` | `OutputEmitterRef<GeoLoginPayload>` | — |
+| `forgotPassword` | `OutputEmitterRef<void>` | — |
+
+## Related types
+
+From `figma/geo-login/geo-login.types.ts`:
+
+```ts
+export interface GeoLoginPayload {
+  username: string;
+  password: string;
+  captcha: string;
+  remember: boolean;
+}
+```
+
+## Examples
+
+### Basic
+
+```html
+<geo-login (submitLogin)="login($event)" (forgotPassword)="goForgot()"></geo-login>
+```
+
+## Tips
+
+- Cần FormsModule + styles tokens.
+- Ghép geo-forgot-password trên route riêng.
+## Related components
+
+- [`geo-forgot-password`](./geo-forgot-password.md)
+- [`geo-input`](./geo-input.md)
+- [`geo-button`](./geo-button.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-login.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-login/geo-login.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-map-admin-filter.md

@@ -0,0 +1,85 @@
+# geo-map-admin-filter
+
+> Complete usage reference for **GeoMapAdminFilterComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Administrative unit tree filter (ĐVHC) for map extent.
+
+## Import
+
+```ts
+import { GeoMapAdminFilterComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapAdminFilterComponent]
+```
+
+## Selector
+`geo-map-admin-filter`
+
+## Category
+`map`
+
+## When to use
+Filter map by tỉnh/huyện/xã; included in geo-map-shell.
+
+## Do not use when
+Generic trees outside map — use geo-tree.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `title` | `string` | `'Đơn vị hành chính'` | — |
+| `nodes` | `GeoTreeNode[]` | `[]` | — |
+| `checkedKeys` | `Array<string \| number>` | `[]` | Two-way `model()` (supports banana binding). |
+| `expandedKeys` | `Array<string \| number>` | `[]` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `apply` | `OutputEmitterRef<Array<string \| number>>` | — |
+| `reset` | `OutputEmitterRef<void>` | — |
+| `fitProvince` | `OutputEmitterRef<void>` | — |
+| `closed` | `OutputEmitterRef<void>` | — |
+| `selectionChange` | `OutputEmitterRef<Array<string \| number>>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-admin-filter
+  [(open)]="adminOpen"
+  [nodes]="adminNodes"
+  [(checkedKeys)]="checked"
+  (apply)="applyAdmin($event)"
+></geo-map-admin-filter>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-admin-filter.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-admin-filter/geo-map-admin-filter.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-map-basemap-switcher.md

@@ -0,0 +1,79 @@
+# geo-map-basemap-switcher
+
+> Complete usage reference for **GeoMapBasemapSwitcherComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Basemap preview chip (e.g. street ↔ satellite).
+
+## Import
+
+```ts
+import { GeoMapBasemapSwitcherComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapBasemapSwitcherComponent]
+```
+
+## Selector
+`geo-map-basemap-switcher`
+
+## Category
+`map`
+
+## When to use
+Bottom-right basemap toggle; included in geo-map-shell.
+
+## Do not use when
+Programmatic basemap only — set geo-map [basemap] / shell basemapId.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `options` | `GeoMapBasemapOption[]` | `GEO_MAP_DEFAULT_BASEMAP_OPTIONS` | Exactly two options (street + satellite). Extra items are ignored. |
+| `selectedId` | `string` | `'osm'` | Two-way `model()` (supports banana binding). |
+| `label` | `string` | `'Lớp bản đồ'` | Caption on the thumbnail card (design: «Lớp bản đồ»). |
+| `tooltip` | `string` | `'Đổi lớp bản đồ nền'` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `basemapChange` | `OutputEmitterRef<GeoMapBasemap>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-basemap-switcher
+  [options]="basemapOptions"
+  [(selectedId)]="basemapId"
+  (basemapChange)="onBasemap($event)"
+></geo-map-basemap-switcher>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-basemap-switcher.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-basemap-switcher/geo-map-basemap-switcher.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-map-help.md

@@ -0,0 +1,72 @@
+# geo-map-help
+
+> Complete usage reference for **GeoMapHelpComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Map help / hướng dẫn popover with sections.
+
+## Import
+
+```ts
+import { GeoMapHelpComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapHelpComponent]
+```
+
+## Selector
+`geo-map-help`
+
+## Category
+`map`
+
+## When to use
+Help affordance on map chrome.
+
+## Do not use when
+App-wide help pages — use normal content pages.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `title` | `string` | `'Hướng dẫn sử dụng'` | — |
+| `sections` | `GeoMapHelpSection[]` | `GEO_MAP_DEFAULT_HELP_SECTIONS` | — |
+
+## Outputs
+
+_None_
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-help [(open)]="helpOpen" [sections]="helpSections"></geo-map-help>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-help.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-help/geo-map-help.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-map-layer-card.md

@@ -0,0 +1,73 @@
+# geo-map-layer-card
+
+> Complete usage reference for **GeoMapLayerCardComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Basemap / layer preview card (thumbnail + title).
+
+## Import
+
+```ts
+import { GeoMapLayerCardComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapLayerCardComponent]
+```
+
+## Selector
+`geo-map-layer-card`
+
+## Category
+`map`
+
+## When to use
+Layer pickers and basemap grids.
+
+## Do not use when
+Full layer management — use geo-map-layer-panel.
+
+
+## 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` | `'Lớp bản đồ'` | — |
+| `previewUrl` | `string \| undefined` | `undefined` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `clicked` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-layer-card title="Đường phố" [previewUrl]="url" (clicked)="select()"></geo-map-layer-card>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-layer-card.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-layer-card/geo-map-layer-card.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-map-layer-panel.md

@@ -0,0 +1,75 @@
+# geo-map-layer-panel
+
+> Complete usage reference for **GeoMapLayerPanelComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Layer list with visibility / opacity / group selection.
+
+## Import
+
+```ts
+import { GeoMapLayerPanelComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapLayerPanelComponent]
+```
+
+## Selector
+`geo-map-layer-panel`
+
+## Category
+`map`
+
+## When to use
+Standalone layer manager or inside geo-map-layers-drawer.
+
+## Do not use when
+Single opacity control — use geo-map-opacity.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `controller` | `GeoMapController \| null` | `null` | — |
+| `title` | `string` | `'Lớp bản đồ'` | — |
+| `embedded` | `boolean` | `false` | When true, hide the panel's own header (host popover provides title). |
+| `layers` | `GeoMapLayerConfig[]` | `[]` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `layersChange` | `OutputEmitterRef<GeoMapLayerConfig[]>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-layer-panel [layers]="layers" [controller]="ctrl" [embedded]="true"></geo-map-layer-panel>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-layer-panel.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-layer-panel/geo-map-layer-panel.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-map-layers-drawer.md

@@ -0,0 +1,78 @@
+# geo-map-layers-drawer
+
+> Complete usage reference for **GeoMapLayersDrawerComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Popover/drawer hosting the layer panel (“Lớp bản đồ”).
+
+## Import
+
+```ts
+import { GeoMapLayersDrawerComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapLayersDrawerComponent]
+```
+
+## Selector
+`geo-map-layers-drawer`
+
+## Category
+`map`
+
+## When to use
+Portal layer UI; included in geo-map-shell.
+
+## Do not use when
+Always-visible side panel — embed geo-map-layer-panel directly.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `controller` | `GeoMapController \| null` | `null` | — |
+| `open` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `title` | `string` | `'Lớp bản đồ'` | — |
+| `legendItems` | `GeoMapLegendItem[]` | `[]` | — |
+| `showOpacity` | `boolean` | `false` | Kept for API compat — opacity is per-layer in the new panel. |
+| `showLegend` | `boolean` | `false` | Kept for API compat — legend lives outside this popover. |
+| `layers` | `GeoMapLayerConfig[]` | `[]` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `closed` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-layers-drawer [(open)]="layersOpen" [layers]="layers" [controller]="ctrl"></geo-map-layers-drawer>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-layers-drawer.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-layers-drawer/geo-map-layers-drawer.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.