@geoit/ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,74 @@
+# geo-map-legend
+
+> Complete usage reference for **GeoMapLegendComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Map legend popover / panel with color swatches.
+
+## Import
+
+```ts
+import { GeoMapLegendComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapLegendComponent]
+```
+
+## Selector
+`geo-map-legend`
+
+## Category
+`map`
+
+## When to use
+Show thematic legend; geo-map-shell includes this.
+
+## Do not use when
+Non-map legends in dashboards — use static markup / geo-status-tag.
+
+
+## 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` | `'Chú giải'` | — |
+| `items` | `GeoMapLegendItem[]` | `[]` | — |
+| `open` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `closed` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-legend [(open)]="legendOpen" [items]="legendItems"></geo-map-legend>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-legend.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-legend/geo-map-legend.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-locate.md

@@ -0,0 +1,75 @@
+# geo-map-locate
+
+> Complete usage reference for **GeoMapLocateComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Geolocation button (browser GPS) for the map view.
+
+## Import
+
+```ts
+import { GeoMapLocateComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapLocateComponent]
+```
+
+## Selector
+`geo-map-locate`
+
+## Category
+`map`
+
+## When to use
+Locate-me control on custom map chrome.
+
+## Do not use when
+Inside geo-map-shell (already wired) unless building a custom 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` | — |
+| `label` | `string` | `'Vị trí của tôi'` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `located` | `OutputEmitterRef<[number, number]>` | — |
+| `denied` | `OutputEmitterRef<void>` | — |
+| `locateError` | `OutputEmitterRef<{ reason: GeoMapLocateErrorReason; message?: string; }>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-locate [controller]="ctrl" (denied)="onDenied()"></geo-map-locate>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-locate.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-locate/geo-map-locate.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-location-chip.md

@@ -0,0 +1,71 @@
+# geo-map-location-chip
+
+> Complete usage reference for **GeoMapLocationChipComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Location breadcrumb chip shown on the map (ward / province).
+
+## Import
+
+```ts
+import { GeoMapLocationChipComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapLocationChipComponent]
+```
+
+## Selector
+`geo-map-location-chip`
+
+## Category
+`map`
+
+## When to use
+Show current admin context on map chrome.
+
+## Do not use when
+Page breadcrumb — use geo-breadcrumb.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `label` | `string` | `''` | — |
+| `icon` | `string` | `'environment'` | — |
+
+## Outputs
+
+_None_
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-location-chip label="Phường 1 — TP Đà Lạt, Lâm Đồng"></geo-map-location-chip>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-location-chip.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-location-chip/geo-map-location-chip.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-measure.md

@@ -0,0 +1,74 @@
+# geo-map-measure
+
+> Complete usage reference for **GeoMapMeasureComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Distance / area measure interaction on the map.
+
+## Import
+
+```ts
+import { GeoMapMeasureComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapMeasureComponent]
+```
+
+## Selector
+`geo-map-measure`
+
+## Category
+`map`
+
+## When to use
+Measure tool mode; usually driven by toolbar via geo-map-shell.
+
+## Do not use when
+Static length labels without interaction.
+
+
+## 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` | — |
+| `mode` | `GeoMapMeasureMode` | `'none'` | Two-way `model()` (supports banana binding). |
+| `showResult` | `boolean` | `true` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `measureChange` | `OutputEmitterRef<GeoMapMeasureResult \| null>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-measure [controller]="ctrl" [(mode)]="measureMode"></geo-map-measure>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-measure.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-measure/geo-map-measure.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-opacity.md

@@ -0,0 +1,75 @@
+# geo-map-opacity
+
+> Complete usage reference for **GeoMapOpacityComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Layer opacity slider bound to a map layer id.
+
+## Import
+
+```ts
+import { GeoMapOpacityComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapOpacityComponent]
+```
+
+## Selector
+`geo-map-opacity`
+
+## Category
+`map`
+
+## When to use
+Adjust overlay transparency in custom layer UI.
+
+## Do not use when
+Full layer list — use geo-map-layer-panel / layers drawer.
+
+
+## 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` | `'Độ trong suốt'` | — |
+| `layerId` | `string \| null` | `null` | Two-way `model()` (supports banana binding). |
+| `opacity` | `number` | `100` | Opacity percent 0–100. — Two-way `model()` (supports banana binding). |
+| `variant` | `'panel' \| 'compact'` | `'panel'` | — |
+| `applyToFirstLayer` | `boolean` | `true` | When compact and no layerId, apply to first non-basemap overlay. |
+
+## Outputs
+
+_None_
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-opacity [controller]="ctrl" layerId="demo-qhsdd-2020" [(opacity)]="opacity"></geo-map-opacity>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-opacity.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-opacity/geo-map-opacity.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-parcel-popup.md

@@ -0,0 +1,84 @@
+# geo-map-parcel-popup
+
+> Complete usage reference for **GeoMapParcelPopupComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Parcel detail popup (citizen / specialist audience).
+
+## Import
+
+```ts
+import { GeoMapParcelPopupComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapParcelPopupComponent]
+```
+
+## Selector
+`geo-map-parcel-popup`
+
+## Category
+`map`
+
+## When to use
+Show thửa detail after search or map click.
+
+## Do not use when
+Full detail page — navigate to a route instead.
+
+
+## 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` | `'Thông tin thửa đất'` | — |
+| `parcel` | `GeoMapParcelDetail \| null` | `null` | — |
+| `audience` | `GeoMapParcelAudience` | `'citizen'` | — |
+| `showExport` | `boolean` | `false` | Giữ tương thích API cũ; footer xuất file không còn trong layout thiết kế. |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `closed` | `OutputEmitterRef<void>` | — |
+| `back` | `OutputEmitterRef<void>` | — |
+| `exportClick` | `OutputEmitterRef<GeoMapParcelDetail>` | — |
+| `diagramClick` | `OutputEmitterRef<GeoMapParcelDetail>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-parcel-popup
+  [(open)]="parcelOpen"
+  [parcel]="selected"
+  audience="citizen"
+  (exportClick)="exportPdf($event)"
+></geo-map-parcel-popup>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-parcel-popup.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-parcel-popup/geo-map-parcel-popup.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-search.md

@@ -0,0 +1,89 @@
+# geo-map-search
+
+> Complete usage reference for **GeoMapSearchComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Map search panel (owner / certificate / parcel / address / coordinates).
+
+## Import
+
+```ts
+import { GeoMapSearchComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapSearchComponent]
+```
+
+## Selector
+`geo-map-search`
+
+## Category
+`map`
+
+## When to use
+Tra cứu thửa on portal; prefer via geo-map-shell.
+
+## Do not use when
+Global app search unrelated to 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 |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `title` | `string` | `'Tra cứu thông tin quy hoạch theo'` | — |
+| `mode` | `GeoMapSearchMode` | `'parcel'` | Two-way `model()` (supports banana binding). |
+| `results` | `GeoMapSearchResultItem[]` | `[]` | — |
+| `loading` | `boolean` | `false` | — |
+| `pageIndex` | `number` | `1` | Two-way `model()` (supports banana binding). |
+| `pageSize` | `number` | `5` | Two-way `model()` (supports banana binding). |
+| `total` | `number` | `0` | — |
+| `emptyText` | `string` | `'Chưa có kết quả tra cứu.'` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `search` | `OutputEmitterRef<GeoMapSearchQuery>` | — |
+| `reset` | `OutputEmitterRef<void>` | — |
+| `resultSelect` | `OutputEmitterRef<GeoMapSearchResultItem>` | — |
+| `closed` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-map-search
+  [(open)]="searchOpen"
+  mode="parcel"
+  [results]="results"
+  (search)="runSearch($event)"
+  (resultSelect)="onSelect($event)"
+></geo-map-search>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-search.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-search/geo-map-search.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-shell.md

@@ -0,0 +1,146 @@
+# geo-map-shell
+
+> Complete usage reference for **GeoMapShellComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Full map portal chrome: search, ĐVHC, layers, legend, measure, basemap, parcel popup.
+
+## Import
+
+```ts
+import { GeoMapShellComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapShellComponent]
+```
+
+## Selector
+`geo-map-shell`
+
+## Category
+`map`
+
+## When to use
+Public / specialist map portal pages (tra cứu quy hoạch). Prefer this over composing chrome by hand.
+
+## Do not use when
+Bare map embed without UI chrome — use geo-map only.
+
+## How to use
+
+Shell portal tra cứu: gắn height + layers API; tắt demoSearch trên production. Lắng nghe (search)/(resultSelect)/(parcelExport). Models [(searchOpen)], [(layersOpen)], … để điều khiển panel từ ngoài.
+
+## 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]` | — |
+| `zoom` | — | `GEO_MAP_DEFAULT_ZOOM` | — |
+| `height` | `string` | `'560px'` | — |
+| `showMousePosition` | `boolean` | `false` | — |
+| `basemapOptions` | `GeoMapBasemapOption[]` | `GEO_MAP_DEFAULT_BASEMAP_OPTIONS` | — |
+| `toolbarActions` | `GeoMapToolbarAction[]` | `GEO_MAP_DEFAULT_TOOLBAR_ACTIONS` | — |
+| `layers` | `GeoMapLayerConfig[]` | `[]` | Extra overlays merged after demo thematic + traffic. |
+| `legendItems` | `GeoMapLegendItem[]` | `GEO_MAP_DEMO_LEGEND_ITEMS` | — |
+| `showNav` | `boolean` | `true` | — |
+| `includeDemoLayers` | `boolean` | `true` | — |
+| `adminNodes` | `GeoTreeNode[]` | `GEO_MAP_DEMO_ADMIN_NODES` | — |
+| `locationLabel` | `string` | `'Phường 1 — TP Đà Lạt, Lâm Đồng'` | — |
+| `parcelAudience` | `GeoMapParcelAudience` | `'citizen'` | — |
+| `provinceExtent` | `readonly [number, number, number, number]` | `GEO_MAP_DEFAULT_PROVINCE_EXTENT_4326` | — |
+| `demoSearch` | `boolean` | `true` | When true, shell seeds mock search results (Storybook / demos). |
+| `homeMode` | `'location' \| 'emit'` | `'location'` | `location` — Home opens ĐVHC filter (default). `emit` — Home only emits `actionClick` (e.g. portal navigates to login/dashboard). |
+| `basemapId` | `string` | `'osm'` | Two-way `model()` (supports banana binding). |
+| `measureMode` | `GeoMapMeasureMode` | `'none'` | Two-way `model()` (supports banana binding). |
+| `checkedMap` | `Record<string, boolean>` | — | Two-way `model()` (supports banana binding). |
+| `layersOpen` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `legendOpen` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `helpOpen` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `swipeActive` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `searchOpen` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `adminFilterOpen` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `parcelOpen` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `managedLayers` | `GeoMapLayerConfig[]` | `[]` | Two-way `model()` (supports banana binding). |
+| `searchResults` | `GeoMapSearchResultItem[]` | `[]` | Two-way `model()` (supports banana binding). |
+| `selectedParcel` | `GeoMapParcelDetail \| null` | `null` | Two-way `model()` (supports banana binding). |
+| `adminCheckedKeys` | `Array<string \| number>` | `[]` | Two-way `model()` (supports banana binding). |
+| `adminExpandedKeys` | `Array<string \| number>` | `['lam-dong']` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `mapReady` | `OutputEmitterRef<GeoMapController>` | — |
+| `mapClick` | `OutputEmitterRef<GeoMapClickEvent>` | — |
+| `locateDenied` | `OutputEmitterRef<void>` | — |
+| `actionClick` | `OutputEmitterRef<GeoMapToolbarAction>` | — |
+| `search` | `OutputEmitterRef<GeoMapSearchQuery>` | — |
+| `searchReset` | `OutputEmitterRef<void>` | — |
+| `resultSelect` | `OutputEmitterRef<GeoMapSearchResultItem>` | — |
+| `parcelExport` | `OutputEmitterRef<GeoMapParcelDetail>` | — |
+| `adminApply` | `OutputEmitterRef<Array<string \| number>>` | — |
+
+
+## Examples
+
+### Basic portal
+
+```html
+<geo-map-shell
+  height="640px"
+  [demoSearch]="false"
+  parcelAudience="citizen"
+  [layers]="layers"
+  (mapReady)="ctrl = $event"
+  (search)="onSearch($event)"
+></geo-map-shell>
+```
+
+### Open search panel
+
+```html
+<geo-map-shell
+  height="640px"
+  [demoSearch]="false"
+  [(searchOpen)]="searchOpen"
+  [(searchResults)]="results"
+  (search)="runQuery($event)"
+  (resultSelect)="onResult($event)"
+></geo-map-shell>
+```
+
+## Tips
+
+- Ưu tiên geo-map-shell thay vì tự ghép chrome.
+- Peers bắt buộc: ol, proj4.
+- demoSearch=true chỉ cho Storybook/demo — production phải false + API thật.
+- parcelAudience: citizen | specialist.
+- Đọc geo-map.md cho layer types / projections.
+## Related components
+
+- [`geo-map`](./geo-map.md)
+- [`geo-map-search`](./geo-map-search.md)
+- [`geo-map-toolbar`](./geo-map-toolbar.md)
+- [`geo-map-layers-drawer`](./geo-map-layers-drawer.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-map-shell.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-map/chrome/geo-map-shell/geo-map-shell.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.