@geoit/ui 0.0.4 → 0.0.5

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
+GeoMapSwipeComponent
+
+## Import
+
+```ts
+import { GeoMapSwipeComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapSwipeComponent]
+```
+
+## Selector
+`geo-map-swipe`
+
+## 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 |
+|-------|------|---------|-------------|
+| `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></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,76 @@
+# 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
+GeoMapToolbarComponent
+
+## Import
+
+```ts
+import { GeoMapToolbarComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapToolbarComponent]
+```
+
+## Selector
+`geo-map-toolbar`
+
+## 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 |
+|-------|------|---------|-------------|
+| `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></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
+GeoMapZoomComponent
+
+## Import
+
+```ts
+import { GeoMapZoomComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapZoomComponent]
+```
+
+## Selector
+`geo-map-zoom`
+
+## 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 |
+|-------|------|---------|-------------|
+| `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></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,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

@@ -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
 

package/ai/components/geo-pagination.md

@@ -37,7 +37,7 @@ Phân trang độc lập ngoài bảng. [pageIndex]/[pageSize]/[total]; (pageInd
 
 ## 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
 
@@ -45,8 +45,8 @@ Every supported Input (do not invent others):
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `pageIndex` | `number` | `1` | — |
-| `pageSize` | `number` | `10` | — |
+| `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` | — |
@@ -56,10 +56,7 @@ Every supported Input (do not invent others):
 
 ## Outputs
 
-| Output | Payload | Description |
-|--------|---------|-------------|
-| `pageIndexChange` | `EventEmitter<number>` | — |
-| `pageSizeChange` | `EventEmitter<number>` | — |
+_None_
 
 
 ## Examples

package/ai/components/geo-radio.md

@@ -48,6 +48,8 @@ Supports **ControlValueAccessor**.
 
 Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
 
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
 
 Every supported Input (do not invent others):
@@ -70,7 +72,7 @@ Every supported Input (do not invent others):
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `valueChange` | `EventEmitter<string \| number \| null>` | — |
+| `valueChange` | `OutputEmitterRef<string \| number \| null>` | — |
 
 ## Related types
 

package/ai/components/geo-row-actions.md

@@ -37,7 +37,7 @@ Cụm thao tác dòng bảng. [actions] GeoRowAction[]; (actionClick) theo key.
 
 ## 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
 
@@ -52,8 +52,8 @@ Every supported Input (do not invent others):
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `edit` | `EventEmitter<void>` | Action ưu tiên hiển thị khi có > 2 thao tác (mặc định: edit) */   @Input() primaryActionKey = 'edit';   @Output() actionClick = new EventEmitter<string>();   /** @deprecated Dùng `actionClick` với key `edit` |
-| `more` | `EventEmitter<void>` | @deprecated Dùng `actionClick` với key `more` |
+| `edit` | `OutputEmitterRef<void>` | Action ưu tiên hiển thị khi có > 2 thao tác (mặc định: edit) */   readonly primaryActionKey = input('edit');   readonly actionClick = output<string>();   /** @deprecated Dùng `actionClick` với key `edit` |
+| `more` | `OutputEmitterRef<void>` | @deprecated Dùng `actionClick` với key `more` |
 
 ## Related types
 

package/ai/components/geo-select.md

@@ -48,6 +48,8 @@ Supports **ControlValueAccessor**.
 
 Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
 
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
 
 Every supported Input (do not invent others):
@@ -66,13 +68,13 @@ Every supported Input (do not invent others):
 | `allowClear` | `boolean` | `true` | — |
 | `showSearch` | `boolean` | `false` | — |
 | `block` | `boolean` | `false` | — |
-| `width` | `number \| string` | — | — |
+| `width` | `number \| string \| undefined` | `undefined` | — |
 
 ## Outputs
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `valueChange` | `EventEmitter<string \| number \| Array<string \| number> \| null>` | — |
+| `valueChange` | `OutputEmitterRef<string \| number \| Array<string \| number> \| null>` | — |
 
 ## Related types