@geoit/ui 0.0.4 → 0.0.6

package/ai/components/geo-map-snapshot.md

@@ -0,0 +1,75 @@
+# geo-map-snapshot
+
+> Complete usage reference for **GeoMapSnapshotComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Capture current map canvas to image / download.
+
+## Import
+
+```ts
+import { GeoMapSnapshotComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapSnapshotComponent]
+```
+
+## Selector
+`geo-map-snapshot`
+
+## Category
+`map`
+
+## When to use
+Export screenshot control on map chrome.
+
+## Do not use when
+Server-side tile export pipelines.
+
+
+## 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` | — |
+| `label` | `string` | `'Chụp ảnh bản đồ'` | — |
+| `filename` | `string` | `'ban-do.png'` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `captured` | `OutputEmitterRef<void>` | — |
+| `captureError` | `OutputEmitterRef<unknown>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-snapshot [controller]="ctrl" (captured)="onShot($event)"></geo-map-snapshot>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-snapshot.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-snapshot/geo-map-snapshot.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-swipe.md

@@ -0,0 +1,73 @@
+# geo-map-swipe
+
+> Complete usage reference for **GeoMapSwipeComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Swipe compare control between two map layers.
+
+## Import
+
+```ts
+import { GeoMapSwipeComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapSwipeComponent]
+```
+
+## Selector
+`geo-map-swipe`
+
+## Category
+`map`
+
+## When to use
+Before/after planning vs current-use comparison.
+
+## Do not use when
+Simple opacity blend — 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` | — |
+| `active` | `boolean` | `false` | When true, swipe mode is on. — Two-way `model()` (supports banana binding). |
+| `position` | `number` | `50` | 0–100, left portion shows clipped overlay. — Two-way `model()` (supports banana binding). |
+| `layerId` | `string \| null` | `null` | Optional explicit overlay layer id; defaults to top visible non-basemap. |
+
+## Outputs
+
+_None_
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-swipe [controller]="ctrl" [(active)]="swipeOn" layerId="demo-qhsdd-2020"></geo-map-swipe>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-swipe.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-swipe/geo-map-swipe.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-toolbar.md

@@ -0,0 +1,81 @@
+# geo-map-toolbar
+
+> Complete usage reference for **GeoMapToolbarComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Vertical map tool strip (search, pan, measure, layers, …).
+
+## Import
+
+```ts
+import { GeoMapToolbarComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapToolbarComponent]
+```
+
+## Selector
+`geo-map-toolbar`
+
+## Category
+`map`
+
+## When to use
+Custom map layouts; usually included inside geo-map-shell.
+
+## Do not use when
+Full portal — use geo-map-shell.
+
+
+## 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` | — |
+| `actions` | `GeoMapToolbarAction[]` | `[]` | When empty, uses built-in portal action set. |
+| `compact` | `boolean` | `false` | — |
+| `checkedMap` | `Record<string, boolean>` | — | Two-way checked map keyed by action id (for checkbox-style actions). — Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `actionClick` | `OutputEmitterRef<GeoMapToolbarAction>` | — |
+| `actionToggle` | `OutputEmitterRef<{ action: GeoMapToolbarAction; checked: boolean; }>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-toolbar
+  [controller]="ctrl"
+  [actions]="actions"
+  [(checkedMap)]="checked"
+  (actionClick)="onTool($event)"
+></geo-map-toolbar>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-toolbar.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-toolbar/geo-map-toolbar.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-zoom.md

@@ -0,0 +1,74 @@
+# geo-map-zoom
+
+> Complete usage reference for **GeoMapZoomComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Zoom +/- and optional province / home navigation control.
+
+## Import
+
+```ts
+import { GeoMapZoomComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapZoomComponent]
+```
+
+## Selector
+`geo-map-zoom`
+
+## Category
+`map`
+
+## When to use
+Custom map chrome; geo-map-shell embeds this.
+
+## Do not use when
+Relying on OpenLayers built-in zoom alone is fine for bare geo-map.
+
+
+## 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` | — |
+| `showNav` | `boolean` | `true` | Show prev / next zoom + fullscreen + box zoom (UC-15). |
+| `showFitProvince` | `boolean` | `true` | Show “xem toàn tỉnh” (TCQH.14 GD5) — fit province extent, not fullscreen. |
+| `provinceExtent` | `readonly [number, number, number, number] \| null` | `null` | Province extent in EPSG:4326. Defaults to Lâm Đồng placeholder when omitted. |
+| `fullscreenTarget` | `HTMLElement \| null` | `null` | Element to put in Fullscreen API. Defaults to closest `.geo-map-shell`, then the OL map target. |
+
+## Outputs
+
+_None_
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-zoom [controller]="ctrl" [showNav]="true"></geo-map-zoom>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-zoom.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-zoom/geo-map-zoom.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.md

@@ -0,0 +1,212 @@
+# geo-map
+
+> Complete usage reference for **GeoMapComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+OpenLayers map host with basemap, typed layers, and GeoMapController.
+
+## Import
+
+```ts
+import { GeoMapComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapComponent]
+```
+
+## Selector
+`geo-map`
+
+## Category
+`map`
+
+## When to use
+Any map viewport (portal quy hoạch, tra cứu thửa). Peers: ol, proj4.
+
+## Do not use when
+Full portal chrome — prefer geo-map-shell; non-map charts — use geo-chart.
+
+## How to use
+
+Host OpenLayers thuần. (mapReady) nhận GeoMapController để zoom/fit/addLayer. Layers typed (osm/xyz/wms/wmts/geojson). Projections tùy chỉnh qua [projections] — không invent VN-2000.
+
+## 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 |
+|-------|------|---------|-------------|
+| `center` | `number[]` | `[...GEO_MAP_DEFAULT_CENTER]` | Map center in view projection (default Web Mercator Đà Lạt area). |
+| `zoom` | — | `GEO_MAP_DEFAULT_ZOOM` | — |
+| `minZoom` | — | `GEO_MAP_DEFAULT_MIN_ZOOM` | — |
+| `maxZoom` | — | `GEO_MAP_DEFAULT_MAX_ZOOM` | — |
+| `viewProjection` | — | `GEO_MAP_DEFAULT_VIEW_PROJECTION` | — |
+| `basemap` | `'osm' \| { type: 'xyz'` | `'osm'` | — |
+| `layers` | `(\| GeoMapOsmLayerConfig \| GeoMapXyzLayerConfig \| GeoMapWmsLayerConfig \| GeoMapWmtsLayerConfig \| G…` | `[]` | — |
+| `height` | — | `GEO_MAP_DEFAULT_HEIGHT` | — |
+| `registerProjections` | `boolean` | `true` | When true, custom projections listed in `projections` are registered before map create. Built-in EPSG:4326 / EPSG:3857 never need registration. VN-2000 definitions must be supplied via `projections` — never invented. |
+| `projections` | `ProjectionConfig[]` | `[]` | Custom CRS definitions (e.g. local VN-2000 from environment). |
+| `showMousePosition` | `boolean` | `false` | — |
+| `mousePositionProjection` | `string` | `'EPSG:4326'` | — |
+| `showZoomControl` | `boolean` | `true` | When false, hide built-in OL zoom control (prefer `geo-map-zoom`). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `mapReady` | `OutputEmitterRef<GeoMapController>` | — |
+| `mapClick` | `OutputEmitterRef<GeoMapClickEvent>` | — |
+| `viewChange` | `OutputEmitterRef<GeoMapViewChangeEvent>` | — |
+| `initError` | `OutputEmitterRef<string>` | — |
+
+## Related types
+
+From `figma/geo-map/geo-map.types.ts`:
+
+```ts
+export interface ProjectionConfig {
+  code: string;
+  /** Full proj4 definition string. Must be supplied by env/API — never invent VN-2000 params. */
+  definition: string;
+  extent?: [number, number, number, number];
+  units?: string;
+}
+
+export interface GeoMapLayerBase {
+  id: string;
+  title: string;
+  visible?: boolean;
+  /** 0–1 */
+  opacity?: number;
+  zIndex?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  /** Treat as basemap (only one active at a time). */
+  basemap?: boolean;
+  /** Group key for layer panel sections (`base-map`, `qhsdd`, …). */
+  group?: string;
+  /** Display title for the group accordion (falls back to group key). */
+  groupLabel?: string;
+  /** Selection UX within the group: radio (`single`) or checkbox (`multi`). */
+  groupSelection?: 'single' | 'multi';
+  /** Eligible for identify / GetFeatureInfo. */
+  queryable?: boolean;
+  legendUrl?: string;
+  projection?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface GeoMapOsmLayerConfig extends GeoMapLayerBase {
+  type: 'osm';
+}
+
+export interface GeoMapXyzLayerConfig extends GeoMapLayerBase {
+  type: 'xyz';
+  url: string;
+  attributions?: string | string[];
+  maxZoom?: number;
+  crossOrigin?: string | null;
+}
+
+export interface GeoMapWmsLayerConfig extends GeoMapLayerBase {
+  type: 'wms';
+  url: string;
+  params: Record<string, string | number | boolean>;
+  serverType?: 'geoserver' | 'mapserver' | 'qgis' | 'carmentaserver';
+  crossOrigin?: string | null;
+  /** Optional WMS layer name when not only in `params.LAYERS`. */
+  layerName?: string;
+}
+
+export interface GeoMapWmtsLayerConfig extends GeoMapLayerBase {
+  type: 'wmts';
+  url: string;
+  layer: string;
+  matrixSet: string;
+  format?: string;
+  style?: string;
+  projection?: string;
+  crossOrigin?: string | null;
+}
+
+export interface GeoMapGeoJsonLayerConfig extends GeoMapLayerBase {
+  type: 'geojson';
+  /** Inline GeoJSON object or URL string. */
+  data: object | string;
+  dataProjection?: string;
+  featureProjection?: string;
+}
+
+export interface GeoMapVectorLayerConfig extends GeoMapLayerBase {
+  type: 'vector';
+  /** Pre-built OL features (app-owned). */
+  features?: Feature<Geometry>[];
+}
+
+export interface GeoMapBasemapOption {
+  id: string;
+  label: string;
+  basemap: GeoMapBasemap;
+  previewUrl?: string;
+}
+
+export interface GeoMapClickEvent {
+  /** Coordinate in view projection. */
+  coordinate: number[];
+  /** Lon/lat (EPSG:4326) as [longitude, latitude]. */
+  lonLat: [number, number];
+  pixel: [number, number];
+  originalEvent: UIEvent;
+}
+
+export interface GeoMapViewChangeEvent {
+  center: number[];
+  zoom: number;
+  resolution: number;
+  rotation: number;
+}
+
+export interface GeoMapLayerVisibilityChange {
+  layerId: string;
+  visible: boolean;
+}
+```
+
+## Examples
+
+### Basic
+
+```html
+<geo-map height="480px" basemap="osm" [center]="[108.45, 11.94]" [zoom]="12" (mapReady)="ctrl = $event"></geo-map>
+```
+
+## Tips
+
+- Portal đầy đủ → geo-map-shell.
+- showZoomControl=false khi dùng geo-map-zoom riêng.
+- Peers: ol, proj4.
+## Related components
+
+- [`geo-map-shell`](./geo-map-shell.md)
+- [`geo-map-zoom`](./geo-map-zoom.md)
+- [`geo-map-toolbar`](./geo-map-toolbar.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/geo-map.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-overlap-result.md

@@ -0,0 +1,88 @@
+# geo-overlap-result
+
+> Complete usage reference for **GeoOverlapResultComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Overlap analysis result list (planning type, area, percent).
+
+## Import
+
+```ts
+import { GeoOverlapResultComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoOverlapResultComponent]
+```
+
+## Selector
+`geo-overlap-result`
+
+## Category
+`data`
+
+## When to use
+Show giao cắt quy hoạch vs hiện trạng results.
+
+## Do not use when
+Generic tables — use geo-table.
+
+
+## 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` | `'Kết quả phân tích chồng lấn'` | — |
+| `rows` | `GeoOverlapResultRow[]` | `[]` | — |
+| `areaUnit` | `string` | `'m²'` | — |
+| `emptyText` | `string` | `'Chưa có kết quả phân tích.'` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `rowClick` | `OutputEmitterRef<GeoOverlapResultRow>` | — |
+
+## Related types
+
+From `figma/geo-overlap-result/geo-overlap-result.types.ts`:
+
+```ts
+export interface GeoOverlapResultRow {
+  id: string;
+  planningType: string;
+  intersectionArea: number | string;
+  percent: number | string;
+  color?: string;
+}
+```
+
+## Examples
+
+### Example
+
+```html
+<geo-overlap-result [rows]="rows" (rowClick)="focus($event)"></geo-overlap-result>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-overlap-result.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-overlap-result/geo-overlap-result.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-page-header.md

@@ -0,0 +1,72 @@
+# geo-page-header
+
+> Complete usage reference for **GeoPageHeaderComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Compact page header block (title + optional actions slot).
+
+## Import
+
+```ts
+import { GeoPageHeaderComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoPageHeaderComponent]
+```
+
+## Selector
+`geo-page-header`
+
+## Category
+`display`
+
+## When to use
+Section headers on dashboard / list pages.
+
+## Do not use when
+Full page title under breadcrumb — prefer geo-page-title.
+
+
+## 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-page-header title="Thống kê nhanh"></geo-page-header>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-page-header.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-page-header/geo-page-header.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-page-title.md

@@ -37,7 +37,7 @@ Tiêu đề trang chữ hoa + gạch nhấn primary. title + level 1–4; accent
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs