@geoit/ui 0.0.2 → 0.0.5

package/ai/components/geo-map.md

@@ -0,0 +1,205 @@
+# 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
+Non-map charting — use dashboard libs.
+
+
+## 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
+
+### Example
+
+```html
+<geo-map
+  [center]="center"
+  [zoom]="12"
+  [layers]="layers"
+  height="480px"
+  (mapReady)="ctrl = $event"
+></geo-map>
+```
+
+## 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
+GeoOverlapResultComponent
+
+## Import
+
+```ts
+import { GeoOverlapResultComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoOverlapResultComponent]
+```
+
+## Selector
+`geo-overlap-result`
+
+## 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` | `'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></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
+GeoPageHeaderComponent
+
+## Import
+
+```ts
+import { GeoPageHeaderComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoPageHeaderComponent]
+```
+
+## Selector
+`geo-page-header`
+
+## 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` | `''` | — |
+| `breadcrumb` | `GeoBreadcrumbItem[]` | `[]` | — |
+| `uppercase` | `boolean` | `true` | — |
+
+## Outputs
+
+_None_
+
+
+## Examples
+
+### Example
+
+```html
+<geo-page-header></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

@@ -1,16 +1,23 @@
 # geo-page-title
 
-> AI quick reference for **GeoPageTitleComponent**
+> Complete usage reference for **GeoPageTitleComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Page title (uppercase) with short primary accent underline; uses geo-typography.
 
 ## Import
+
 ```ts
 import { GeoPageTitleComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoPageTitleComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoPageTitleComponent]
+```
 
 ## Selector
 `geo-page-title`
@@ -24,30 +31,69 @@ Top of detail/list pages, often under breadcrumb.
 ## Do not use when
 Modal titles — geo-form-modal has its own title.
 
+## How to use
+
+Tiêu đề trang chữ hoa + gạch nhấn primary. title + level 1–4; accentWidth/accentHeight tùy chỉnh gạch.
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `title` | See component TS / Storybook Controls |
-| `uppercase` | See component TS / Storybook Controls |
-| `accentWidth` | See component TS / Storybook Controls |
-| `accentHeight` | See component TS / Storybook Controls |
-| `level` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `''` | Nội dung tiêu đề. |
+| `uppercase` | `boolean` | `true` | Tự chuyển uppercase. Default `true`. |
+| `accentWidth` | `number \| string` | `56` | Chiều rộng gạch chân (px hoặc CSS size). Default `56px`. |
+| `accentHeight` | `number \| string` | `4` | Độ dày gạch chân. Default `4px`. |
+| `level` | `1 \| 2 \| 3 \| 4` | `3` | Heading level → geo-typography variant. |
 
 ## Outputs
+
 _None_
 
-## Example
+
+## Examples
+
+### Basic
+
 ```html
 <geo-page-title title="Thông tin chi tiết hồ sơ" [level]="3"></geo-page-title>
 ```
 
+### Full options
+
+```html
+<geo-page-title
+  title="Danh sách hồ sơ khai thác"
+  [uppercase]="true"
+  [level]="3"
+  [accentWidth]="56"
+  [accentHeight]="4"
+></geo-page-title>
+```
+
+## Tips
+
+- Thường dưới geo-breadcrumb.
+- Tiêu đề modal → geo-form-modal title, không dùng page-title.
+- uppercase mặc định true.
+## Related components
+
+- [`geo-breadcrumb`](./geo-breadcrumb.md)
+- [`geo-typography`](./geo-typography.md)
+- [`geo-back-button`](./geo-back-button.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-page-title.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-page-title/geo-page-title.component.ts`
 
-## Storybook
-GEO / related story for `geo-page-title`
-
-## 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-pagination.md

@@ -1,16 +1,23 @@
 # geo-pagination
 
-> AI quick reference for **GeoPaginationComponent**
+> Complete usage reference for **GeoPaginationComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Standalone pagination control.
 
 ## Import
+
 ```ts
 import { GeoPaginationComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoPaginationComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoPaginationComponent]
+```
 
 ## Selector
 `geo-pagination`
@@ -24,36 +31,81 @@ Paging outside geo-table.
 ## Do not use when
 Inside tables prefer geo-table / geo-table-pagination.
 
+## How to use
+
+Phân trang độc lập ngoài bảng. [pageIndex]/[pageSize]/[total]; (pageIndexChange)/(pageSizeChange).
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `pageIndex` | See component TS / Storybook Controls |
-| `pageSize` | See component TS / Storybook Controls |
-| `total` | See component TS / Storybook Controls |
-| `size` | See component TS / Storybook Controls |
-| `simple` | See component TS / Storybook Controls |
-| `hideOnSinglePage` | See component TS / Storybook Controls |
-| `showSizeChanger` | See component TS / Storybook Controls |
-| `pageSizeOptions` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `pageIndex` | `number` | `1` | Two-way `model()` (supports banana binding). |
+| `pageSize` | `number` | `10` | Two-way `model()` (supports banana binding). |
+| `total` | `number` | `0` | — |
+| `size` | `'default' \| 'small'` | `'default'` | — |
+| `simple` | `boolean` | `false` | — |
+| `hideOnSinglePage` | `boolean` | `false` | — |
+| `showSizeChanger` | `boolean` | `false` | — |
+| `pageSizeOptions` | `number[]` | `[5, 10, 20, 50]` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `pageIndexChange` | EventEmitter |
-| `pageSizeChange` | EventEmitter |
 
-## Example
+_None_
+
+
+## Examples
+
+### Basic
+
 ```html
-<geo-pagination [pageIndex]="1" [pageSize]="10" [total]="100" (pageIndexChange)="onPage($event)"></geo-pagination>
+<geo-pagination
+  [pageIndex]="1"
+  [pageSize]="10"
+  [total]="100"
+  (pageIndexChange)="onPage($event)"
+></geo-pagination>
 ```
 
+### Full options
+
+```html
+<geo-pagination
+  [pageIndex]="pageIndex"
+  [pageSize]="pageSize"
+  [total]="total"
+  size="default"
+  [simple]="false"
+  [hideOnSinglePage]="false"
+  [showSizeChanger]="true"
+  [pageSizeOptions]="[5, 10, 20, 50]"
+  (pageIndexChange)="pageIndex = $event; load()"
+  (pageSizeChange)="pageSize = $event; load()"
+></geo-pagination>
+```
+
+## Tips
+
+- Trong geo-table ưu tiên phân trang tích hợp / geo-table-pagination.
+- showSizeChanger + pageSizeOptions khi cần đổi số dòng.
+- hideOnSinglePage khi chỉ 1 trang.
+## Related components
+
+- [`geo-table`](./geo-table.md)
+- [`geo-table-pagination`](./geo-table-pagination.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-pagination.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-pagination/geo-pagination.component.ts`
 
-## Storybook
-GEO / related story for `geo-pagination`
-
-## 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.