@geoit/ui 0.0.2 → 0.0.5

package/ai/components/geo-layout-header.md

@@ -0,0 +1,89 @@
+# geo-layout-header
+
+> Complete usage reference for **GeoLayoutHeaderComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Soft top bar: toggle + breadcrumb + user/notification actions.
+
+## Import
+
+```ts
+import { GeoLayoutHeaderComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLayoutHeaderComponent]
+```
+
+## Selector
+`geo-layout-header`
+
+## Category
+`layout`
+
+## When to use
+Standalone top bar, or inside geo-layout.
+
+## Do not use when
+Full app chrome — use geo-layout.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `breadcrumbs` | `GeoBreadcrumbItem[]` | `[]` | — |
+| `fallbackBreadcrumb` | `string` | `'Hệ thống thông tin đất đai - VNPT iLIS'` | — |
+| `expanded` | `boolean` | `true` | — |
+| `isMobile` | `boolean` | `false` | — |
+| `mobileMenuOpen` | `boolean` | `false` | — |
+| `showDefaultActions` | `boolean` | `true` | — |
+| `user` | `GeoLayoutUserInfo` | `GEO_LAYOUT_DEFAULT_USER` | — |
+| `notifications` | `GeoLayoutNotificationItem[]` | `GEO_LAYOUT_DEFAULT_NOTIFICATIONS` | — |
+| `subsystems` | `GeoLayoutSubsystemItem[]` | `GEO_LAYOUT_DEFAULT_SUBSYSTEMS` | — |
+| `userMenuItems` | `GeoLayoutUserMenuItem[]` | `GEO_LAYOUT_DEFAULT_USER_MENU` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `sidebarToggle` | `OutputEmitterRef<void>` | — |
+| `notificationClick` | `OutputEmitterRef<GeoLayoutNotificationItem>` | — |
+| `subsystemClick` | `OutputEmitterRef<GeoLayoutSubsystemItem>` | — |
+| `userMenuClick` | `OutputEmitterRef<GeoLayoutUserMenuItem>` | — |
+| `logout` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-layout-header
+  [breadcrumbs]="crumbs"
+  [user]="{ name: 'vnpt', email: 'vnpt@vnpt.vn' }"
+  (sidebarToggle)="toggle()"
+></geo-layout-header>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-layout-header.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-layout/header/geo-layout-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-layout-sidebar.md

@@ -0,0 +1,86 @@
+# geo-layout-sidebar
+
+> Complete usage reference for **GeoLayoutSidebarComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+White sidebar: brand + recursive menu (collapse / mobile drawer).
+
+## Import
+
+```ts
+import { GeoLayoutSidebarComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLayoutSidebarComponent]
+```
+
+## Selector
+`geo-layout-sidebar`
+
+## Category
+`layout`
+
+## When to use
+Standalone nav rail, or inside geo-layout.
+
+## Do not use when
+Full app chrome — use geo-layout.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `menuItems` | `GeoLayoutMenuItem[]` | `[]` | — |
+| `brandTitle` | `string` | `'iLIS'` | — |
+| `logoSrc` | `string` | `''` | — |
+| `logoAlt` | `string` | `'Logo'` | — |
+| `sidebarBackgroundSrc` | `string` | `''` | — |
+| `selectedKey` | `string \| null` | `null` | Two-way `model()` (supports banana binding). |
+| `collapsed` | `boolean` | `false` | — |
+| `isMobile` | `boolean` | `false` | — |
+| `mobileOpen` | `boolean` | `false` | — |
+| `width` | `GeoLayoutSiderWidth` | `280` | — |
+| `collapsedWidth` | `GeoLayoutSiderWidth` | `80` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `menuSelect` | `OutputEmitterRef<GeoLayoutMenuItem>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-layout-sidebar
+  [menuItems]="menu"
+  [(selectedKey)]="active"
+  [collapsed]="false"
+></geo-layout-sidebar>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-layout-sidebar.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-layout/sidebar/geo-layout-sidebar.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-layout.md

@@ -0,0 +1,155 @@
+# geo-layout
+
+> Complete usage reference for **GeoLayoutComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+App shell composing sidebar + header + content + footer.
+
+## Import
+
+```ts
+import { GeoLayoutComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLayoutComponent]
+```
+
+## Selector
+`geo-layout`
+
+## Category
+`layout`
+
+## When to use
+Host application chrome mirroring layout/feature MainLayout.
+
+## Do not use when
+In-page wizards — use geo-step-form-layout; dialogs — use geo-form-modal.
+
+
+## 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 |
+|-------|------|---------|-------------|
+| `menuItems` | `GeoLayoutMenuItem[]` | `[]` | — |
+| `brandTitle` | `string` | `'iLIS'` | — |
+| `logoSrc` | `string` | `''` | — |
+| `logoAlt` | `string` | `'Logo'` | — |
+| `sidebarBackgroundSrc` | `string` | `''` | — |
+| `breadcrumbs` | `GeoBreadcrumbItem[]` | `[]` | — |
+| `fallbackBreadcrumb` | `string` | `'Hệ thống thông tin đất đai - VNPT iLIS'` | — |
+| `expanded` | `boolean` | `true` | Two-way `model()` (supports banana binding). |
+| `isMobile` | `boolean` | `false` | — |
+| `mobileMenuOpen` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `selectedKey` | `string \| null` | `null` | Two-way `model()` (supports banana binding). |
+| `siderWidth` | `number \| string` | `280` | — |
+| `siderCollapsedWidth` | `number \| string` | `80` | — |
+| `showDefaultActions` | `boolean` | `true` | — |
+| `showFooter` | `boolean` | `true` | — |
+| `footerText` | `string` | `'© VNPT \| Hệ thống thông tin đất đai iLIS'` | — |
+| `user` | `GeoLayoutUserInfo` | `GEO_LAYOUT_DEFAULT_USER` | — |
+| `notifications` | `GeoLayoutNotificationItem[]` | `GEO_LAYOUT_DEFAULT_NOTIFICATIONS` | — |
+| `subsystems` | `GeoLayoutSubsystemItem[]` | `GEO_LAYOUT_DEFAULT_SUBSYSTEMS` | — |
+| `userMenuItems` | `GeoLayoutUserMenuItem[]` | `GEO_LAYOUT_DEFAULT_USER_MENU` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `menuSelect` | `OutputEmitterRef<GeoLayoutMenuItem>` | — |
+| `sidebarToggle` | `OutputEmitterRef<void>` | — |
+| `notificationClick` | `OutputEmitterRef<GeoLayoutNotificationItem>` | — |
+| `subsystemClick` | `OutputEmitterRef<GeoLayoutSubsystemItem>` | — |
+| `userMenuClick` | `OutputEmitterRef<GeoLayoutUserMenuItem>` | — |
+| `logout` | `OutputEmitterRef<void>` | — |
+
+## Related types
+
+From `figma/geo-layout/geo-layout.types.ts`:
+
+```ts
+export interface GeoLayoutMenuItem {
+  /** Stable id used for selection / open state. */
+  key: string;
+  /** Display label. */
+  title: string;
+  /** Optional `geo-icon` / Ant Design icon type. */
+  icon?: string;
+  /** Optional route / href hint for consumers (Storybook clicks use `menuSelect`). */
+  link?: string;
+  children?: GeoLayoutMenuItem[];
+}
+
+export interface GeoLayoutUserInfo {
+  name: string;
+  email?: string;
+  /** Optional avatar URL; initials used when empty. */
+  avatarUrl?: string;
+  role?: string;
+}
+
+export interface GeoLayoutNotificationItem {
+  id: string;
+  message: string;
+  time: string;
+  read?: boolean;
+  icon?: string;
+}
+
+export interface GeoLayoutSubsystemItem {
+  id: string;
+  label: string;
+  initials: string;
+  url?: string;
+}
+
+export interface GeoLayoutUserMenuItem {
+  key: string;
+  label: string;
+  icon: string;
+  danger?: boolean;
+}
+
+export type GeoLayoutSiderWidth = number | string;
+```
+
+## Examples
+
+### Example
+
+```html
+<geo-layout
+  [menuItems]="menu"
+  [(expanded)]="expanded"
+  [breadcrumbs]="crumbs"
+  [(selectedKey)]="active"
+  [user]="{ name: 'vnpt', email: 'vnpt@vnpt.vn' }"
+  (menuSelect)="onNav($event)"
+  (logout)="onLogout()"
+>
+  <router-outlet />
+</geo-layout>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-layout.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-layout/geo-layout.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-list-page.md

@@ -0,0 +1,72 @@
+# 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
+GeoListPageComponent
+
+## Import
+
+```ts
+import { GeoListPageComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoListPageComponent]
+```
+
+## Selector
+`geo-list-page`
+
+## 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-list-page></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,94 @@
+# geo-login
+
+> Complete usage reference for **GeoLoginComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+GeoLoginComponent
+
+## Import
+
+```ts
+import { GeoLoginComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLoginComponent]
+```
+
+## Selector
+`geo-login`
+
+## 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` | `'Đă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
+
+### Example
+
+```html
+<geo-login></geo-login>
+```
+
+## 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,80 @@
+# 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
+GeoMapAdminFilterComponent
+
+## Import
+
+```ts
+import { GeoMapAdminFilterComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapAdminFilterComponent]
+```
+
+## Selector
+`geo-map-admin-filter`
+
+## 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 |
+|-------|------|---------|-------------|
+| `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></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,75 @@
+# 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
+GeoMapBasemapSwitcherComponent
+
+## Import
+
+```ts
+import { GeoMapBasemapSwitcherComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoMapBasemapSwitcherComponent]
+```
+
+## Selector
+`geo-map-basemap-switcher`
+
+## 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 |
+|-------|------|---------|-------------|
+| `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></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.