npm - @geoit/ui - Versions diffs - 0.0.6 → 0.0.7 - Mend

@geoit/ui 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/fesm2022/geoit-ui.mjs CHANGED Viewed

@@ -3229,17 +3229,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class GeoTreeComponent {
     nodes = input([]);
     checkable = input(false);
+    /** `single` — click chọn đúng 1 node (BR-06-03); `multi` — giữ hành vi checkbox hiện có. */
+    selectionMode = input('multi');
     checkedKeys = model([]);
+    selectedKeys = model([]);
     expandedKeys = model([]);
     showLine = input(false);
     blockNode = input(false);
     nodeClick = output();
+    onNodeClick(event) {
+        this.nodeClick.emit(event);
+        if (this.selectionMode() !== 'single') {
+            return;
+        }
+        const key = event.node?.key;
+        if (key == null) {
+            return;
+        }
+        this.selectedKeys.set([key]);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GeoTreeComponent, isStandalone: true, selector: "geo-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkedKeys: { classPropertyName: "checkedKeys", publicName: "checkedKeys", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null }, showLine: { classPropertyName: "showLine", publicName: "showLine", isSignal: true, isRequired: false, transformFunction: null }, blockNode: { classPropertyName: "blockNode", publicName: "blockNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedKeys: "checkedKeysChange", expandedKeys: "expandedKeysChange", nodeClick: "nodeClick" }, host: { classAttribute: "geo-tree-host" }, ngImport: i0, template: "<div class=\"geo-tree\">\n  <nz-tree\n    [nzData]=\"nodes()\"\n    [nzCheckable]=\"checkable()\"\n    [nzCheckedKeys]=\"checkedKeys()\"\n    [nzExpandedKeys]=\"expandedKeys()\"\n    [nzShowLine]=\"showLine()\"\n    [nzBlockNode]=\"blockNode()\"\n    (nzCheckedKeysChange)=\"checkedKeys.set($event)\"\n    (nzExpandedKeysChange)=\"expandedKeys.set($event)\"\n    (nzClick)=\"nodeClick.emit($event)\"\n  ></nz-tree>\n</div>\n", styles: [".geo-tree-host{display:block;width:100%}.geo-tree{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i1$a.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckBoxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GeoTreeComponent, isStandalone: true, selector: "geo-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, checkedKeys: { classPropertyName: "checkedKeys", publicName: "checkedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null }, showLine: { classPropertyName: "showLine", publicName: "showLine", isSignal: true, isRequired: false, transformFunction: null }, blockNode: { classPropertyName: "blockNode", publicName: "blockNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedKeys: "checkedKeysChange", selectedKeys: "selectedKeysChange", expandedKeys: "expandedKeysChange", nodeClick: "nodeClick" }, host: { classAttribute: "geo-tree-host" }, ngImport: i0, template: "<div class=\"geo-tree\">\n  <nz-tree\n    [nzData]=\"nodes()\"\n    [nzCheckable]=\"checkable()\"\n    [nzCheckedKeys]=\"checkedKeys()\"\n    [nzSelectedKeys]=\"selectedKeys()\"\n    [nzMultiple]=\"false\"\n    [nzExpandedKeys]=\"expandedKeys()\"\n    [nzShowLine]=\"showLine()\"\n    [nzBlockNode]=\"blockNode()\"\n    (nzCheckedKeysChange)=\"checkedKeys.set($event)\"\n    (nzExpandedKeysChange)=\"expandedKeys.set($event)\"\n    (nzClick)=\"onNodeClick($event)\"\n  ></nz-tree>\n</div>\n", styles: [".geo-tree-host{display:block;width:100%}.geo-tree{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i1$a.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckBoxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'geo-tree', standalone: true, imports: [NzTreeModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'geo-tree-host' }, template: "<div class=\"geo-tree\">\n  <nz-tree\n    [nzData]=\"nodes()\"\n    [nzCheckable]=\"checkable()\"\n    [nzCheckedKeys]=\"checkedKeys()\"\n    [nzExpandedKeys]=\"expandedKeys()\"\n    [nzShowLine]=\"showLine()\"\n    [nzBlockNode]=\"blockNode()\"\n    (nzCheckedKeysChange)=\"checkedKeys.set($event)\"\n    (nzExpandedKeysChange)=\"expandedKeys.set($event)\"\n    (nzClick)=\"nodeClick.emit($event)\"\n  ></nz-tree>\n</div>\n", styles: [".geo-tree-host{display:block;width:100%}.geo-tree{width:100%}\n"] }]
+            args: [{ selector: 'geo-tree', standalone: true, imports: [NzTreeModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'geo-tree-host' }, template: "<div class=\"geo-tree\">\n  <nz-tree\n    [nzData]=\"nodes()\"\n    [nzCheckable]=\"checkable()\"\n    [nzCheckedKeys]=\"checkedKeys()\"\n    [nzSelectedKeys]=\"selectedKeys()\"\n    [nzMultiple]=\"false\"\n    [nzExpandedKeys]=\"expandedKeys()\"\n    [nzShowLine]=\"showLine()\"\n    [nzBlockNode]=\"blockNode()\"\n    (nzCheckedKeysChange)=\"checkedKeys.set($event)\"\n    (nzExpandedKeysChange)=\"expandedKeys.set($event)\"\n    (nzClick)=\"onNodeClick($event)\"\n  ></nz-tree>\n</div>\n", styles: [".geo-tree-host{display:block;width:100%}.geo-tree{width:100%}\n"] }]
         }] });
 const STORAGE_PREFIX = 'geo-column-picker:';
@@ -3597,6 +3611,17 @@ class GeoChartComponent {
     colorOf(item, index) {
         return item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length];
     }
+    /**
+     * `@for` track dùng qua method thay vì `item.id ?? item.label` trực tiếp trong template —
+     * Angular linker (18.2.14) sinh sai scope biến tạm cho track expression chứa `??` khi bị
+     * hoist lên module scope, gây `ReferenceError: tmp_x_0 is not defined` lúc chạy.
+     */
+    trackDatum(item) {
+        return item.id ?? item.label;
+    }
+    trackSegment(seg) {
+        return seg.datum.id ?? seg.datum.label;
+    }
     barWidth(value) {
         const max = this.maxValue() || 1;
         return `${Math.max(2, (value / max) * 100)}%`;
@@ -3609,11 +3634,11 @@ class GeoChartComponent {
         this.segmentClick.emit({ datum, index });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoChartComponent, isStandalone: true, selector: "geo-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showSort: { classPropertyName: "showSort", publicName: "showSort", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", segmentClick: "segmentClick", sortChange: "sortChange" }, host: { classAttribute: "geo-chart-host" }, ngImport: i0, template: "<div class=\"geo-chart\" [style.--geo-chart-height.px]=\"height()\">\n  <header class=\"geo-chart__header\">\n    @if (title()) {\n      <h3 class=\"geo-chart__title\">{{ title() }}</h3>\n    }\n    @if (showSort() && type() === 'bar') {\n      <div class=\"geo-chart__sort\" role=\"group\" aria-label=\"S\u1EAFp x\u1EBFp\">\n        <geo-button\n          appearance=\"tertiary\"\n          [active]=\"sort() === 'desc'\"\n          (clicked)=\"setSort('desc')\"\n        >\n          Gi\u1EA3m d\u1EA7n\n        </geo-button>\n        <geo-button\n          appearance=\"tertiary\"\n          [active]=\"sort() === 'asc'\"\n          (clicked)=\"setSort('asc')\"\n        >\n          T\u0103ng d\u1EA7n\n        </geo-button>\n      </div>\n    }\n  </header>\n\n  @if (!sortedData().length) {\n    <geo-empty-state [title]=\"emptyText()\" icon=\"bar-chart\" />\n  } @else if (type() === 'bar') {\n    <div class=\"geo-chart__bars\" role=\"img\" [attr.aria-label]=\"title() || 'Bi\u1EC3u \u0111\u1ED3 c\u1ED9t'\">\n      @for (item of sortedData(); track item.id ?? item.label; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"geo-chart__bar-row\"\n          (click)=\"onSegment(item, i)\"\n        >\n          <span class=\"geo-chart__bar-label\" [title]=\"item.label\">{{ item.label }}</span>\n          <span class=\"geo-chart__bar-track\">\n            <span\n              class=\"geo-chart__bar-fill\"\n              [style.width]=\"barWidth(item.value)\"\n              [style.background]=\"colorOf(item, i)\"\n            ></span>\n          </span>\n          <span class=\"geo-chart__bar-value\">\n            {{ item.value }}{{ unit() ? ' ' + unit() : '' }}\n          </span>\n        </button>\n      }\n    </div>\n  } @else {\n    <div class=\"geo-chart__donut-wrap\">\n      <svg\n        class=\"geo-chart__donut\"\n        viewBox=\"0 0 140 140\"\n        role=\"img\"\n        [attr.aria-label]=\"title() || 'Bi\u1EC3u \u0111\u1ED3 donut'\"\n      >\n        <circle\n          class=\"geo-chart__donut-track\"\n          cx=\"70\"\n          cy=\"70\"\n          r=\"56\"\n          fill=\"none\"\n          stroke-width=\"18\"\n        />\n        @for (seg of donutSegments(); track seg.datum.id ?? seg.datum.label) {\n          <circle\n            class=\"geo-chart__donut-seg\"\n            cx=\"70\"\n            cy=\"70\"\n            r=\"56\"\n            fill=\"none\"\n            stroke-width=\"18\"\n            [attr.stroke]=\"seg.color\"\n            [attr.stroke-dasharray]=\"seg.dasharray\"\n            [attr.stroke-dashoffset]=\"seg.dashoffset\"\n            transform=\"rotate(-90 70 70)\"\n            (click)=\"onSegment(seg.datum, seg.index)\"\n          />\n        }\n        <text x=\"70\" y=\"66\" text-anchor=\"middle\" class=\"geo-chart__donut-center-label\">\n          T\u1ED5ng\n        </text>\n        <text x=\"70\" y=\"84\" text-anchor=\"middle\" class=\"geo-chart__donut-center-value\">\n          {{ total() }}\n        </text>\n      </svg>\n\n      @if (showLegend()) {\n        <ul class=\"geo-chart__legend\">\n          @for (seg of donutSegments(); track seg.datum.id ?? seg.datum.label) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"geo-chart__legend-item\"\n                (click)=\"onSegment(seg.datum, seg.index)\"\n              >\n                <span\n                  class=\"geo-chart__swatch\"\n                  [style.background]=\"seg.color\"\n                ></span>\n                <span class=\"geo-chart__legend-label\">{{ seg.datum.label }}</span>\n                <span class=\"geo-chart__legend-value\">{{ seg.percent }}%</span>\n              </button>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n</div>\n", styles: [".geo-chart-host{display:block}.geo-chart{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);min-height:var(--geo-chart-height, 260px)}.geo-chart__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.geo-chart__title{margin:0;font-size:var(--geo-font-size-body);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-900)}.geo-chart__sort{display:inline-flex;gap:4px}.geo-chart__bars{display:flex;flex-direction:column;gap:10px;max-height:calc(var(--geo-chart-height, 260px) - 48px);overflow:auto;padding-right:4px}.geo-chart__bar-row{display:grid;grid-template-columns:minmax(88px,140px) 1fr auto;align-items:center;gap:10px;margin:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.geo-chart__bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-700)}.geo-chart__bar-track{height:12px;border-radius:var(--geo-radius-sm);background:var(--geo-color-neutral-100);overflow:hidden}.geo-chart__bar-fill{display:block;height:100%;border-radius:inherit;transition:width .2s ease}.geo-chart__bar-value{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-800);white-space:nowrap}.geo-chart__donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.geo-chart__donut{width:180px;height:180px;flex-shrink:0}.geo-chart__donut-track{stroke:var(--geo-color-neutral-100)}.geo-chart__donut-seg{cursor:pointer;transition:opacity .15s ease}.geo-chart__donut-seg:hover{opacity:.85}.geo-chart__donut-center-label{fill:var(--geo-color-neutral-500);font-size:11px}.geo-chart__donut-center-value{fill:var(--geo-color-neutral-900);font-size:16px;font-weight:600}.geo-chart__legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;min-width:160px}.geo-chart__legend-item{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;width:100%;margin:0;padding:4px 0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.geo-chart__swatch{width:12px;height:12px;border-radius:2px}.geo-chart__legend-label{font-size:var(--geo-font-size-body-small);color:var(--geo-color-neutral-800)}.geo-chart__legend-value{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-600)}\n"], dependencies: [{ kind: "component", type: GeoButtonComponent, selector: "geo-button", inputs: ["appearance", "color", "icon", "iconTheme", "iconPlacement", "iconOnly", "type", "disabled", "tooltip", "tooltipPlacement", "active", "title"], outputs: ["clicked"] }, { kind: "component", type: GeoEmptyStateComponent, selector: "geo-empty-state", inputs: ["title", "description", "icon", "actionLabel"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoChartComponent, isStandalone: true, selector: "geo-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showSort: { classPropertyName: "showSort", publicName: "showSort", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", segmentClick: "segmentClick", sortChange: "sortChange" }, host: { classAttribute: "geo-chart-host" }, ngImport: i0, template: "<div class=\"geo-chart\" [style.--geo-chart-height.px]=\"height()\">\n  <header class=\"geo-chart__header\">\n    @if (title()) {\n      <h3 class=\"geo-chart__title\">{{ title() }}</h3>\n    }\n    @if (showSort() && type() === 'bar') {\n      <div class=\"geo-chart__sort\" role=\"group\" aria-label=\"S\u1EAFp x\u1EBFp\">\n        <geo-button\n          appearance=\"tertiary\"\n          [active]=\"sort() === 'desc'\"\n          (clicked)=\"setSort('desc')\"\n        >\n          Gi\u1EA3m d\u1EA7n\n        </geo-button>\n        <geo-button\n          appearance=\"tertiary\"\n          [active]=\"sort() === 'asc'\"\n          (clicked)=\"setSort('asc')\"\n        >\n          T\u0103ng d\u1EA7n\n        </geo-button>\n      </div>\n    }\n  </header>\n\n  @if (!sortedData().length) {\n    <geo-empty-state [title]=\"emptyText()\" icon=\"bar-chart\" />\n  } @else if (type() === 'bar') {\n    <div class=\"geo-chart__bars\" role=\"img\" [attr.aria-label]=\"title() || 'Bi\u1EC3u \u0111\u1ED3 c\u1ED9t'\">\n      @for (item of sortedData(); track trackDatum(item); let i = $index) {\n        <button\n          type=\"button\"\n          class=\"geo-chart__bar-row\"\n          (click)=\"onSegment(item, i)\"\n        >\n          <span class=\"geo-chart__bar-label\" [title]=\"item.label\">{{ item.label }}</span>\n          <span class=\"geo-chart__bar-track\">\n            <span\n              class=\"geo-chart__bar-fill\"\n              [style.width]=\"barWidth(item.value)\"\n              [style.background]=\"colorOf(item, i)\"\n            ></span>\n          </span>\n          <span class=\"geo-chart__bar-value\">\n            {{ item.value }}{{ unit() ? ' ' + unit() : '' }}\n          </span>\n        </button>\n      }\n    </div>\n  } @else {\n    <div class=\"geo-chart__donut-wrap\">\n      <svg\n        class=\"geo-chart__donut\"\n        viewBox=\"0 0 140 140\"\n        role=\"img\"\n        [attr.aria-label]=\"title() || 'Bi\u1EC3u \u0111\u1ED3 donut'\"\n      >\n        <circle\n          class=\"geo-chart__donut-track\"\n          cx=\"70\"\n          cy=\"70\"\n          r=\"56\"\n          fill=\"none\"\n          stroke-width=\"18\"\n        />\n        @for (seg of donutSegments(); track trackSegment(seg)) {\n          <circle\n            class=\"geo-chart__donut-seg\"\n            cx=\"70\"\n            cy=\"70\"\n            r=\"56\"\n            fill=\"none\"\n            stroke-width=\"18\"\n            [attr.stroke]=\"seg.color\"\n            [attr.stroke-dasharray]=\"seg.dasharray\"\n            [attr.stroke-dashoffset]=\"seg.dashoffset\"\n            transform=\"rotate(-90 70 70)\"\n            (click)=\"onSegment(seg.datum, seg.index)\"\n          />\n        }\n        <text x=\"70\" y=\"66\" text-anchor=\"middle\" class=\"geo-chart__donut-center-label\">\n          T\u1ED5ng\n        </text>\n        <text x=\"70\" y=\"84\" text-anchor=\"middle\" class=\"geo-chart__donut-center-value\">\n          {{ total() }}\n        </text>\n      </svg>\n\n      @if (showLegend()) {\n        <ul class=\"geo-chart__legend\">\n          @for (seg of donutSegments(); track trackSegment(seg)) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"geo-chart__legend-item\"\n                (click)=\"onSegment(seg.datum, seg.index)\"\n              >\n                <span\n                  class=\"geo-chart__swatch\"\n                  [style.background]=\"seg.color\"\n                ></span>\n                <span class=\"geo-chart__legend-label\">{{ seg.datum.label }}</span>\n                <span class=\"geo-chart__legend-value\">{{ seg.percent }}%</span>\n              </button>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n</div>\n", styles: [".geo-chart-host{display:block}.geo-chart{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);min-height:var(--geo-chart-height, 260px)}.geo-chart__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.geo-chart__title{margin:0;font-size:var(--geo-font-size-body);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-900)}.geo-chart__sort{display:inline-flex;gap:4px}.geo-chart__bars{display:flex;flex-direction:column;gap:10px;max-height:calc(var(--geo-chart-height, 260px) - 48px);overflow:auto;padding-right:4px}.geo-chart__bar-row{display:grid;grid-template-columns:minmax(88px,140px) 1fr auto;align-items:center;gap:10px;margin:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.geo-chart__bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-700)}.geo-chart__bar-track{height:12px;border-radius:var(--geo-radius-sm);background:var(--geo-color-neutral-100);overflow:hidden}.geo-chart__bar-fill{display:block;height:100%;border-radius:inherit;transition:width .2s ease}.geo-chart__bar-value{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-800);white-space:nowrap}.geo-chart__donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.geo-chart__donut{width:180px;height:180px;flex-shrink:0}.geo-chart__donut-track{stroke:var(--geo-color-neutral-100)}.geo-chart__donut-seg{cursor:pointer;transition:opacity .15s ease}.geo-chart__donut-seg:hover{opacity:.85}.geo-chart__donut-center-label{fill:var(--geo-color-neutral-500);font-size:11px}.geo-chart__donut-center-value{fill:var(--geo-color-neutral-900);font-size:16px;font-weight:600}.geo-chart__legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;min-width:160px}.geo-chart__legend-item{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;width:100%;margin:0;padding:4px 0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.geo-chart__swatch{width:12px;height:12px;border-radius:2px}.geo-chart__legend-label{font-size:var(--geo-font-size-body-small);color:var(--geo-color-neutral-800)}.geo-chart__legend-value{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-600)}\n"], dependencies: [{ kind: "component", type: GeoButtonComponent, selector: "geo-button", inputs: ["appearance", "color", "icon", "iconTheme", "iconPlacement", "iconOnly", "type", "disabled", "tooltip", "tooltipPlacement", "active", "title"], outputs: ["clicked"] }, { kind: "component", type: GeoEmptyStateComponent, selector: "geo-empty-state", inputs: ["title", "description", "icon", "actionLabel"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'geo-chart', standalone: true, imports: [GeoButtonComponent, GeoEmptyStateComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'geo-chart-host' }, template: "<div class=\"geo-chart\" [style.--geo-chart-height.px]=\"height()\">\n  <header class=\"geo-chart__header\">\n    @if (title()) {\n      <h3 class=\"geo-chart__title\">{{ title() }}</h3>\n    }\n    @if (showSort() && type() === 'bar') {\n      <div class=\"geo-chart__sort\" role=\"group\" aria-label=\"S\u1EAFp x\u1EBFp\">\n        <geo-button\n          appearance=\"tertiary\"\n          [active]=\"sort() === 'desc'\"\n          (clicked)=\"setSort('desc')\"\n        >\n          Gi\u1EA3m d\u1EA7n\n        </geo-button>\n        <geo-button\n          appearance=\"tertiary\"\n          [active]=\"sort() === 'asc'\"\n          (clicked)=\"setSort('asc')\"\n        >\n          T\u0103ng d\u1EA7n\n        </geo-button>\n      </div>\n    }\n  </header>\n\n  @if (!sortedData().length) {\n    <geo-empty-state [title]=\"emptyText()\" icon=\"bar-chart\" />\n  } @else if (type() === 'bar') {\n    <div class=\"geo-chart__bars\" role=\"img\" [attr.aria-label]=\"title() || 'Bi\u1EC3u \u0111\u1ED3 c\u1ED9t'\">\n      @for (item of sortedData(); track item.id ?? item.label; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"geo-chart__bar-row\"\n          (click)=\"onSegment(item, i)\"\n        >\n          <span class=\"geo-chart__bar-label\" [title]=\"item.label\">{{ item.label }}</span>\n          <span class=\"geo-chart__bar-track\">\n            <span\n              class=\"geo-chart__bar-fill\"\n              [style.width]=\"barWidth(item.value)\"\n              [style.background]=\"colorOf(item, i)\"\n            ></span>\n          </span>\n          <span class=\"geo-chart__bar-value\">\n            {{ item.value }}{{ unit() ? ' ' + unit() : '' }}\n          </span>\n        </button>\n      }\n    </div>\n  } @else {\n    <div class=\"geo-chart__donut-wrap\">\n      <svg\n        class=\"geo-chart__donut\"\n        viewBox=\"0 0 140 140\"\n        role=\"img\"\n        [attr.aria-label]=\"title() || 'Bi\u1EC3u \u0111\u1ED3 donut'\"\n      >\n        <circle\n          class=\"geo-chart__donut-track\"\n          cx=\"70\"\n          cy=\"70\"\n          r=\"56\"\n          fill=\"none\"\n          stroke-width=\"18\"\n        />\n        @for (seg of donutSegments(); track seg.datum.id ?? seg.datum.label) {\n          <circle\n            class=\"geo-chart__donut-seg\"\n            cx=\"70\"\n            cy=\"70\"\n            r=\"56\"\n            fill=\"none\"\n            stroke-width=\"18\"\n            [attr.stroke]=\"seg.color\"\n            [attr.stroke-dasharray]=\"seg.dasharray\"\n            [attr.stroke-dashoffset]=\"seg.dashoffset\"\n            transform=\"rotate(-90 70 70)\"\n            (click)=\"onSegment(seg.datum, seg.index)\"\n          />\n        }\n        <text x=\"70\" y=\"66\" text-anchor=\"middle\" class=\"geo-chart__donut-center-label\">\n          T\u1ED5ng\n        </text>\n        <text x=\"70\" y=\"84\" text-anchor=\"middle\" class=\"geo-chart__donut-center-value\">\n          {{ total() }}\n        </text>\n      </svg>\n\n      @if (showLegend()) {\n        <ul class=\"geo-chart__legend\">\n          @for (seg of donutSegments(); track seg.datum.id ?? seg.datum.label) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"geo-chart__legend-item\"\n                (click)=\"onSegment(seg.datum, seg.index)\"\n              >\n                <span\n                  class=\"geo-chart__swatch\"\n                  [style.background]=\"seg.color\"\n                ></span>\n                <span class=\"geo-chart__legend-label\">{{ seg.datum.label }}</span>\n                <span class=\"geo-chart__legend-value\">{{ seg.percent }}%</span>\n              </button>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n</div>\n", styles: [".geo-chart-host{display:block}.geo-chart{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);min-height:var(--geo-chart-height, 260px)}.geo-chart__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.geo-chart__title{margin:0;font-size:var(--geo-font-size-body);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-900)}.geo-chart__sort{display:inline-flex;gap:4px}.geo-chart__bars{display:flex;flex-direction:column;gap:10px;max-height:calc(var(--geo-chart-height, 260px) - 48px);overflow:auto;padding-right:4px}.geo-chart__bar-row{display:grid;grid-template-columns:minmax(88px,140px) 1fr auto;align-items:center;gap:10px;margin:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.geo-chart__bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-700)}.geo-chart__bar-track{height:12px;border-radius:var(--geo-radius-sm);background:var(--geo-color-neutral-100);overflow:hidden}.geo-chart__bar-fill{display:block;height:100%;border-radius:inherit;transition:width .2s ease}.geo-chart__bar-value{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-800);white-space:nowrap}.geo-chart__donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.geo-chart__donut{width:180px;height:180px;flex-shrink:0}.geo-chart__donut-track{stroke:var(--geo-color-neutral-100)}.geo-chart__donut-seg{cursor:pointer;transition:opacity .15s ease}.geo-chart__donut-seg:hover{opacity:.85}.geo-chart__donut-center-label{fill:var(--geo-color-neutral-500);font-size:11px}.geo-chart__donut-center-value{fill:var(--geo-color-neutral-900);font-size:16px;font-weight:600}.geo-chart__legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;min-width:160px}.geo-chart__legend-item{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;width:100%;margin:0;padding:4px 0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.geo-chart__swatch{width:12px;height:12px;border-radius:2px}.geo-chart__legend-label{font-size:var(--geo-font-size-body-small);color:var(--geo-color-neutral-800)}.geo-chart__legend-value{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-600)}\n"] }]
+            args: [{ selector: 'geo-chart', standalone: true, imports: [GeoButtonComponent, GeoEmptyStateComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'geo-chart-host' }, template: "<div class=\"geo-chart\" [style.--geo-chart-height.px]=\"height()\">\n  <header class=\"geo-chart__header\">\n    @if (title()) {\n      <h3 class=\"geo-chart__title\">{{ title() }}</h3>\n    }\n    @if (showSort() && type() === 'bar') {\n      <div class=\"geo-chart__sort\" role=\"group\" aria-label=\"S\u1EAFp x\u1EBFp\">\n        <geo-button\n          appearance=\"tertiary\"\n          [active]=\"sort() === 'desc'\"\n          (clicked)=\"setSort('desc')\"\n        >\n          Gi\u1EA3m d\u1EA7n\n        </geo-button>\n        <geo-button\n          appearance=\"tertiary\"\n          [active]=\"sort() === 'asc'\"\n          (clicked)=\"setSort('asc')\"\n        >\n          T\u0103ng d\u1EA7n\n        </geo-button>\n      </div>\n    }\n  </header>\n\n  @if (!sortedData().length) {\n    <geo-empty-state [title]=\"emptyText()\" icon=\"bar-chart\" />\n  } @else if (type() === 'bar') {\n    <div class=\"geo-chart__bars\" role=\"img\" [attr.aria-label]=\"title() || 'Bi\u1EC3u \u0111\u1ED3 c\u1ED9t'\">\n      @for (item of sortedData(); track trackDatum(item); let i = $index) {\n        <button\n          type=\"button\"\n          class=\"geo-chart__bar-row\"\n          (click)=\"onSegment(item, i)\"\n        >\n          <span class=\"geo-chart__bar-label\" [title]=\"item.label\">{{ item.label }}</span>\n          <span class=\"geo-chart__bar-track\">\n            <span\n              class=\"geo-chart__bar-fill\"\n              [style.width]=\"barWidth(item.value)\"\n              [style.background]=\"colorOf(item, i)\"\n            ></span>\n          </span>\n          <span class=\"geo-chart__bar-value\">\n            {{ item.value }}{{ unit() ? ' ' + unit() : '' }}\n          </span>\n        </button>\n      }\n    </div>\n  } @else {\n    <div class=\"geo-chart__donut-wrap\">\n      <svg\n        class=\"geo-chart__donut\"\n        viewBox=\"0 0 140 140\"\n        role=\"img\"\n        [attr.aria-label]=\"title() || 'Bi\u1EC3u \u0111\u1ED3 donut'\"\n      >\n        <circle\n          class=\"geo-chart__donut-track\"\n          cx=\"70\"\n          cy=\"70\"\n          r=\"56\"\n          fill=\"none\"\n          stroke-width=\"18\"\n        />\n        @for (seg of donutSegments(); track trackSegment(seg)) {\n          <circle\n            class=\"geo-chart__donut-seg\"\n            cx=\"70\"\n            cy=\"70\"\n            r=\"56\"\n            fill=\"none\"\n            stroke-width=\"18\"\n            [attr.stroke]=\"seg.color\"\n            [attr.stroke-dasharray]=\"seg.dasharray\"\n            [attr.stroke-dashoffset]=\"seg.dashoffset\"\n            transform=\"rotate(-90 70 70)\"\n            (click)=\"onSegment(seg.datum, seg.index)\"\n          />\n        }\n        <text x=\"70\" y=\"66\" text-anchor=\"middle\" class=\"geo-chart__donut-center-label\">\n          T\u1ED5ng\n        </text>\n        <text x=\"70\" y=\"84\" text-anchor=\"middle\" class=\"geo-chart__donut-center-value\">\n          {{ total() }}\n        </text>\n      </svg>\n\n      @if (showLegend()) {\n        <ul class=\"geo-chart__legend\">\n          @for (seg of donutSegments(); track trackSegment(seg)) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"geo-chart__legend-item\"\n                (click)=\"onSegment(seg.datum, seg.index)\"\n              >\n                <span\n                  class=\"geo-chart__swatch\"\n                  [style.background]=\"seg.color\"\n                ></span>\n                <span class=\"geo-chart__legend-label\">{{ seg.datum.label }}</span>\n                <span class=\"geo-chart__legend-value\">{{ seg.percent }}%</span>\n              </button>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n</div>\n", styles: [".geo-chart-host{display:block}.geo-chart{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);min-height:var(--geo-chart-height, 260px)}.geo-chart__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.geo-chart__title{margin:0;font-size:var(--geo-font-size-body);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-900)}.geo-chart__sort{display:inline-flex;gap:4px}.geo-chart__bars{display:flex;flex-direction:column;gap:10px;max-height:calc(var(--geo-chart-height, 260px) - 48px);overflow:auto;padding-right:4px}.geo-chart__bar-row{display:grid;grid-template-columns:minmax(88px,140px) 1fr auto;align-items:center;gap:10px;margin:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.geo-chart__bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-700)}.geo-chart__bar-track{height:12px;border-radius:var(--geo-radius-sm);background:var(--geo-color-neutral-100);overflow:hidden}.geo-chart__bar-fill{display:block;height:100%;border-radius:inherit;transition:width .2s ease}.geo-chart__bar-value{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-800);white-space:nowrap}.geo-chart__donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.geo-chart__donut{width:180px;height:180px;flex-shrink:0}.geo-chart__donut-track{stroke:var(--geo-color-neutral-100)}.geo-chart__donut-seg{cursor:pointer;transition:opacity .15s ease}.geo-chart__donut-seg:hover{opacity:.85}.geo-chart__donut-center-label{fill:var(--geo-color-neutral-500);font-size:11px}.geo-chart__donut-center-value{fill:var(--geo-color-neutral-900);font-size:16px;font-weight:600}.geo-chart__legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;min-width:160px}.geo-chart__legend-item{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;width:100%;margin:0;padding:4px 0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.geo-chart__swatch{width:12px;height:12px;border-radius:2px}.geo-chart__legend-label{font-size:var(--geo-font-size-body-small);color:var(--geo-color-neutral-800)}.geo-chart__legend-value{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-600)}\n"] }]
         }] });
 /**
@@ -3868,11 +3893,11 @@ class GeoListPageComponent {
     breadcrumb = input([]);
     uppercase = input(true);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GeoListPageComponent, isStandalone: true, selector: "geo-list-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, breadcrumb: { classPropertyName: "breadcrumb", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "geo-list-page-host" }, ngImport: i0, template: "<div class=\"geo-list-page\">\n  <geo-page-header\n    [title]=\"title()\"\n    [breadcrumb]=\"breadcrumb()\"\n    [uppercase]=\"uppercase()\"\n  >\n    <div geoPageActions>\n      <ng-content select=\"[geoListActions]\" />\n    </div>\n    <div geoPageFilters>\n      <ng-content select=\"[geoListFilters]\" />\n    </div>\n  </geo-page-header>\n\n  <div class=\"geo-list-page__filter\">\n    <ng-content select=\"geo-table-filter,[geoListFilter]\" />\n  </div>\n\n  <div class=\"geo-list-page__table-panel\">\n    <div class=\"geo-list-page__toolbar\">\n      <ng-content select=\"geo-table-toolbar,[geoListToolbar]\" />\n    </div>\n    <div class=\"geo-list-page__body\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [".geo-list-page-host{display:block}.geo-list-page{display:flex;flex-direction:column;gap:16px}.geo-list-page__filter:empty,.geo-list-page__toolbar:empty{display:none}.geo-list-page__table-panel{display:flex;flex-direction:column;min-width:0;gap:0}.geo-list-page__body{min-width:0}\n"], dependencies: [{ kind: "component", type: GeoPageHeaderComponent, selector: "geo-page-header", inputs: ["title", "breadcrumb", "uppercase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GeoListPageComponent, isStandalone: true, selector: "geo-list-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, breadcrumb: { classPropertyName: "breadcrumb", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "geo-list-page-host" }, ngImport: i0, template: "<div class=\"geo-list-page\">\n  <geo-page-header\n    [title]=\"title()\"\n    [breadcrumb]=\"breadcrumb()\"\n    [uppercase]=\"uppercase()\"\n  >\n    <div geoPageActions>\n      <ng-content select=\"[geoListActions]\" />\n    </div>\n    <div geoPageFilters>\n      <ng-content select=\"[geoListFilters]\" />\n    </div>\n  </geo-page-header>\n\n  <div class=\"geo-list-page__filter\">\n    <ng-content select=\"geo-table-filter,[geoListFilter]\" />\n  </div>\n\n  <div class=\"geo-list-page__table-panel\">\n    <div class=\"geo-list-page__toolbar\">\n      <ng-content select=\"geo-table-toolbar,[geoListToolbar]\" />\n    </div>\n    <div class=\"geo-list-page__body\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.geo-list-page-host{display:block}.geo-list-page{display:flex;flex-direction:column;gap:16px}.geo-list-page__filter:empty,.geo-list-page__toolbar:empty{display:none}.geo-list-page__filter:not(:empty){padding:16px;background:var(--geo-color-neutral-white);border:1px solid var(--geo-color-primary-border);border-radius:var(--geo-radius)}.geo-list-page__table-panel{display:flex;flex-direction:column;min-width:0;gap:0}.geo-list-page__body{min-width:0}\n"], dependencies: [{ kind: "component", type: GeoPageHeaderComponent, selector: "geo-page-header", inputs: ["title", "breadcrumb", "uppercase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoListPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'geo-list-page', standalone: true, imports: [GeoPageHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'geo-list-page-host' }, template: "<div class=\"geo-list-page\">\n  <geo-page-header\n    [title]=\"title()\"\n    [breadcrumb]=\"breadcrumb()\"\n    [uppercase]=\"uppercase()\"\n  >\n    <div geoPageActions>\n      <ng-content select=\"[geoListActions]\" />\n    </div>\n    <div geoPageFilters>\n      <ng-content select=\"[geoListFilters]\" />\n    </div>\n  </geo-page-header>\n\n  <div class=\"geo-list-page__filter\">\n    <ng-content select=\"geo-table-filter,[geoListFilter]\" />\n  </div>\n\n  <div class=\"geo-list-page__table-panel\">\n    <div class=\"geo-list-page__toolbar\">\n      <ng-content select=\"geo-table-toolbar,[geoListToolbar]\" />\n    </div>\n    <div class=\"geo-list-page__body\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [".geo-list-page-host{display:block}.geo-list-page{display:flex;flex-direction:column;gap:16px}.geo-list-page__filter:empty,.geo-list-page__toolbar:empty{display:none}.geo-list-page__table-panel{display:flex;flex-direction:column;min-width:0;gap:0}.geo-list-page__body{min-width:0}\n"] }]
+            args: [{ selector: 'geo-list-page', standalone: true, imports: [GeoPageHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'geo-list-page-host' }, template: "<div class=\"geo-list-page\">\n  <geo-page-header\n    [title]=\"title()\"\n    [breadcrumb]=\"breadcrumb()\"\n    [uppercase]=\"uppercase()\"\n  >\n    <div geoPageActions>\n      <ng-content select=\"[geoListActions]\" />\n    </div>\n    <div geoPageFilters>\n      <ng-content select=\"[geoListFilters]\" />\n    </div>\n  </geo-page-header>\n\n  <div class=\"geo-list-page__filter\">\n    <ng-content select=\"geo-table-filter,[geoListFilter]\" />\n  </div>\n\n  <div class=\"geo-list-page__table-panel\">\n    <div class=\"geo-list-page__toolbar\">\n      <ng-content select=\"geo-table-toolbar,[geoListToolbar]\" />\n    </div>\n    <div class=\"geo-list-page__body\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.geo-list-page-host{display:block}.geo-list-page{display:flex;flex-direction:column;gap:16px}.geo-list-page__filter:empty,.geo-list-page__toolbar:empty{display:none}.geo-list-page__filter:not(:empty){padding:16px;background:var(--geo-color-neutral-white);border:1px solid var(--geo-color-primary-border);border-radius:var(--geo-radius)}.geo-list-page__table-panel{display:flex;flex-direction:column;min-width:0;gap:0}.geo-list-page__body{min-width:0}\n"] }]
         }] });
 /**
@@ -4044,6 +4069,18 @@ const GEO_MAP_DEFAULT_TOOLBAR_ACTIONS = [
         tooltip: 'Chụp ảnh bản đồ',
     },
 ];
+/**
+ * Toolbar action cho định vị (UC-14) — KHÔNG có trong `GEO_MAP_DEFAULT_TOOLBAR_ACTIONS` để
+ * không đổi giao diện các consumer hiện có (M02/M07). Ghép thêm khi cần:
+ * `toolbarActions: [...GEO_MAP_DEFAULT_TOOLBAR_ACTIONS, GEO_MAP_LOCATE_TOOLBAR_ACTION]`.
+ */
+const GEO_MAP_LOCATE_TOOLBAR_ACTION = {
+    id: 'locate',
+    label: 'Vị trí của tôi',
+    icon: 'aim',
+    iconOnly: true,
+    tooltip: 'Định vị vị trí của tôi',
+};
 /**
  * Demo thematic overlays for Storybook (offline-friendly GeoJSON).
  * Groups match portal layers popover: QHSDD · địa chính · hiện trạng.
@@ -6661,6 +6698,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class GeoMapLegendComponent {
     title = input('Chú giải');
     items = input([]);
+    /** True khi danh mục chú giải không tải được (`ERR_MAP_LEGEND_CATALOG_MISSING`). */
+    catalogMissing = input(false);
     open = model(false);
     closed = output();
     onClose() {
@@ -6668,14 +6707,14 @@ class GeoMapLegendComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoMapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoMapLegendComponent, isStandalone: true, selector: "geo-map-legend", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "class.geo-map-legend-host--open": "open()" }, classAttribute: "geo-map-legend-host" }, ngImport: i0, template: "@if (open()) {\n  <aside class=\"geo-map-legend\" role=\"dialog\" [attr.aria-label]=\"title()\">\n    <header class=\"geo-map-legend__header\">\n      <h3 class=\"geo-map-legend__title\">{{ title() }}</h3>\n      <button\n        type=\"button\"\n        class=\"geo-map-legend__close\"\n        aria-label=\"\u0110\u00F3ng ch\u00FA gi\u1EA3i\"\n        (click)=\"onClose()\"\n      >\n        <geo-icon type=\"close\" size=\"sm\" />\n      </button>\n    </header>\n\n    <ul class=\"geo-map-legend__list\">\n      @for (item of items(); track item.code || item.label) {\n        <li class=\"geo-map-legend__item\">\n          @if (item.swatchUrl) {\n            <img class=\"geo-map-legend__swatch\" [src]=\"item.swatchUrl\" alt=\"\" />\n          } @else {\n            <span\n              class=\"geo-map-legend__swatch geo-map-legend__swatch--color\"\n              [style.background]=\"item.color || 'var(--geo-color-neutral-300)'\"\n            ></span>\n          }\n          <span class=\"geo-map-legend__text\">\n            @if (item.code) {\n              <span class=\"geo-map-legend__code\">{{ item.code }}</span>\n            }\n            <span class=\"geo-map-legend__label\">{{ item.label }}</span>\n          </span>\n        </li>\n      } @empty {\n        <li class=\"geo-map-legend__empty\">Ch\u01B0a c\u00F3 m\u1EE5c ch\u00FA gi\u1EA3i.</li>\n      }\n    </ul>\n  </aside>\n}\n", styles: ["@charset \"UTF-8\";.geo-map-legend-host{display:none;max-width:min(320px,100%)}.geo-map-legend-host--open{display:block}.geo-map-legend{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);display:flex;flex-direction:column;width:min(320px,100vw - 32px);max-height:min(640px,100dvh - 100px);overflow:hidden}.geo-map-legend__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--geo-color-neutral-100)}.geo-map-legend__title{margin:0;text-transform:uppercase;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-semibold);letter-spacing:.02em;color:var(--geo-color-neutral-900)}.geo-map-legend__close{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;border:0;border-radius:var(--geo-radius);background:transparent;color:var(--geo-color-neutral-700);font:inherit;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-medium);line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;width:32px;min-width:32px;min-height:32px;padding:0}.geo-map-legend__close:hover:not(:disabled){background:var(--geo-color-primary-soft-hover);color:var(--geo-color-primary-default)}.geo-map-legend__close:active:not(:disabled){transform:scale(.98)}.geo-map-legend__close:disabled{opacity:.45;cursor:not-allowed}.geo-map-legend__close--active,.geo-map-legend__close--checked{background:var(--geo-color-primary-soft-active);color:var(--geo-color-primary-default)}.geo-map-legend__close--icon-only{width:40px;padding:0}.geo-map-legend__list{margin:0;padding:8px 12px 12px;list-style:none;overflow:auto}.geo-map-legend__item{display:flex;align-items:center;gap:10px;padding:6px 4px}.geo-map-legend__swatch{flex-shrink:0;width:20px;height:20px;border-radius:var(--geo-radius-sm);border:1px solid var(--geo-color-neutral-200);object-fit:cover}.geo-map-legend__swatch--color{display:inline-block}.geo-map-legend__text{display:flex;flex-direction:column;gap:1px;min-width:0}.geo-map-legend__code{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-500)}.geo-map-legend__label{font-size:var(--geo-font-size-body-small);color:var(--geo-color-neutral-800)}.geo-map-legend__empty{padding:8px 4px;font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-500)}\n"], dependencies: [{ kind: "component", type: GeoIconComponent, selector: "geo-icon", inputs: ["type", "theme", "spin", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoMapLegendComponent, isStandalone: true, selector: "geo-map-legend", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, catalogMissing: { classPropertyName: "catalogMissing", publicName: "catalogMissing", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "class.geo-map-legend-host--open": "open()" }, classAttribute: "geo-map-legend-host" }, ngImport: i0, template: "@if (open()) {\n  <aside class=\"geo-map-legend\" role=\"dialog\" [attr.aria-label]=\"title()\">\n    <header class=\"geo-map-legend__header\">\n      <h3 class=\"geo-map-legend__title\">{{ title() }}</h3>\n      <button\n        type=\"button\"\n        class=\"geo-map-legend__close\"\n        aria-label=\"\u0110\u00F3ng ch\u00FA gi\u1EA3i\"\n        (click)=\"onClose()\"\n      >\n        <geo-icon type=\"close\" size=\"sm\" />\n      </button>\n    </header>\n\n    @if (catalogMissing()) {\n      <p class=\"geo-map-legend__notice\">\n        Kh\u00F4ng t\u1EA3i \u0111\u01B0\u1EE3c danh m\u1EE5c ch\u00FA gi\u1EA3i. Vui l\u00F2ng th\u1EED l\u1EA1i sau.\n      </p>\n    } @else {\n      <ul class=\"geo-map-legend__list\">\n        @for (item of items(); track item.code || item.label) {\n          <li class=\"geo-map-legend__item\">\n            @if (item.swatchUrl) {\n              <img class=\"geo-map-legend__swatch\" [src]=\"item.swatchUrl\" alt=\"\" />\n            } @else {\n              <span\n                class=\"geo-map-legend__swatch geo-map-legend__swatch--color\"\n                [style.background]=\"item.color || 'var(--geo-color-neutral-300)'\"\n              ></span>\n            }\n            <span class=\"geo-map-legend__text\">\n              @if (item.code) {\n                <span class=\"geo-map-legend__code\">{{ item.code }}</span>\n              }\n              <span class=\"geo-map-legend__label\">{{ item.label }}</span>\n            </span>\n          </li>\n        } @empty {\n          <li class=\"geo-map-legend__empty\">Ch\u01B0a c\u00F3 m\u1EE5c ch\u00FA gi\u1EA3i.</li>\n        }\n      </ul>\n    }\n  </aside>\n}\n", styles: ["@charset \"UTF-8\";.geo-map-legend-host{display:none;max-width:min(320px,100%)}.geo-map-legend-host--open{display:block}.geo-map-legend{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);display:flex;flex-direction:column;width:min(320px,100vw - 32px);max-height:min(640px,100dvh - 100px);overflow:hidden}.geo-map-legend__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--geo-color-neutral-100)}.geo-map-legend__title{margin:0;text-transform:uppercase;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-semibold);letter-spacing:.02em;color:var(--geo-color-neutral-900)}.geo-map-legend__close{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;border:0;border-radius:var(--geo-radius);background:transparent;color:var(--geo-color-neutral-700);font:inherit;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-medium);line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;width:32px;min-width:32px;min-height:32px;padding:0}.geo-map-legend__close:hover:not(:disabled){background:var(--geo-color-primary-soft-hover);color:var(--geo-color-primary-default)}.geo-map-legend__close:active:not(:disabled){transform:scale(.98)}.geo-map-legend__close:disabled{opacity:.45;cursor:not-allowed}.geo-map-legend__close--active,.geo-map-legend__close--checked{background:var(--geo-color-primary-soft-active);color:var(--geo-color-primary-default)}.geo-map-legend__close--icon-only{width:40px;padding:0}.geo-map-legend__list{margin:0;padding:8px 12px 12px;list-style:none;overflow:auto}.geo-map-legend__item{display:flex;align-items:center;gap:10px;padding:6px 4px}.geo-map-legend__swatch{flex-shrink:0;width:20px;height:20px;border-radius:var(--geo-radius-sm);border:1px solid var(--geo-color-neutral-200);object-fit:cover}.geo-map-legend__swatch--color{display:inline-block}.geo-map-legend__text{display:flex;flex-direction:column;gap:1px;min-width:0}.geo-map-legend__code{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-500)}.geo-map-legend__label{font-size:var(--geo-font-size-body-small);color:var(--geo-color-neutral-800)}.geo-map-legend__empty{padding:8px 4px;font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-500)}.geo-map-legend__notice{margin:0;padding:12px 16px 14px;font-size:var(--geo-font-size-body-small);color:var(--geo-color-error-default)}\n"], dependencies: [{ kind: "component", type: GeoIconComponent, selector: "geo-icon", inputs: ["type", "theme", "spin", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoMapLegendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'geo-map-legend', standalone: true, imports: [GeoIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'geo-map-legend-host',
                         '[class.geo-map-legend-host--open]': 'open()',
-                    }, template: "@if (open()) {\n  <aside class=\"geo-map-legend\" role=\"dialog\" [attr.aria-label]=\"title()\">\n    <header class=\"geo-map-legend__header\">\n      <h3 class=\"geo-map-legend__title\">{{ title() }}</h3>\n      <button\n        type=\"button\"\n        class=\"geo-map-legend__close\"\n        aria-label=\"\u0110\u00F3ng ch\u00FA gi\u1EA3i\"\n        (click)=\"onClose()\"\n      >\n        <geo-icon type=\"close\" size=\"sm\" />\n      </button>\n    </header>\n\n    <ul class=\"geo-map-legend__list\">\n      @for (item of items(); track item.code || item.label) {\n        <li class=\"geo-map-legend__item\">\n          @if (item.swatchUrl) {\n            <img class=\"geo-map-legend__swatch\" [src]=\"item.swatchUrl\" alt=\"\" />\n          } @else {\n            <span\n              class=\"geo-map-legend__swatch geo-map-legend__swatch--color\"\n              [style.background]=\"item.color || 'var(--geo-color-neutral-300)'\"\n            ></span>\n          }\n          <span class=\"geo-map-legend__text\">\n            @if (item.code) {\n              <span class=\"geo-map-legend__code\">{{ item.code }}</span>\n            }\n            <span class=\"geo-map-legend__label\">{{ item.label }}</span>\n          </span>\n        </li>\n      } @empty {\n        <li class=\"geo-map-legend__empty\">Ch\u01B0a c\u00F3 m\u1EE5c ch\u00FA gi\u1EA3i.</li>\n      }\n    </ul>\n  </aside>\n}\n", styles: ["@charset \"UTF-8\";.geo-map-legend-host{display:none;max-width:min(320px,100%)}.geo-map-legend-host--open{display:block}.geo-map-legend{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);display:flex;flex-direction:column;width:min(320px,100vw - 32px);max-height:min(640px,100dvh - 100px);overflow:hidden}.geo-map-legend__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--geo-color-neutral-100)}.geo-map-legend__title{margin:0;text-transform:uppercase;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-semibold);letter-spacing:.02em;color:var(--geo-color-neutral-900)}.geo-map-legend__close{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;border:0;border-radius:var(--geo-radius);background:transparent;color:var(--geo-color-neutral-700);font:inherit;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-medium);line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;width:32px;min-width:32px;min-height:32px;padding:0}.geo-map-legend__close:hover:not(:disabled){background:var(--geo-color-primary-soft-hover);color:var(--geo-color-primary-default)}.geo-map-legend__close:active:not(:disabled){transform:scale(.98)}.geo-map-legend__close:disabled{opacity:.45;cursor:not-allowed}.geo-map-legend__close--active,.geo-map-legend__close--checked{background:var(--geo-color-primary-soft-active);color:var(--geo-color-primary-default)}.geo-map-legend__close--icon-only{width:40px;padding:0}.geo-map-legend__list{margin:0;padding:8px 12px 12px;list-style:none;overflow:auto}.geo-map-legend__item{display:flex;align-items:center;gap:10px;padding:6px 4px}.geo-map-legend__swatch{flex-shrink:0;width:20px;height:20px;border-radius:var(--geo-radius-sm);border:1px solid var(--geo-color-neutral-200);object-fit:cover}.geo-map-legend__swatch--color{display:inline-block}.geo-map-legend__text{display:flex;flex-direction:column;gap:1px;min-width:0}.geo-map-legend__code{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-500)}.geo-map-legend__label{font-size:var(--geo-font-size-body-small);color:var(--geo-color-neutral-800)}.geo-map-legend__empty{padding:8px 4px;font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-500)}\n"] }]
+                    }, template: "@if (open()) {\n  <aside class=\"geo-map-legend\" role=\"dialog\" [attr.aria-label]=\"title()\">\n    <header class=\"geo-map-legend__header\">\n      <h3 class=\"geo-map-legend__title\">{{ title() }}</h3>\n      <button\n        type=\"button\"\n        class=\"geo-map-legend__close\"\n        aria-label=\"\u0110\u00F3ng ch\u00FA gi\u1EA3i\"\n        (click)=\"onClose()\"\n      >\n        <geo-icon type=\"close\" size=\"sm\" />\n      </button>\n    </header>\n\n    @if (catalogMissing()) {\n      <p class=\"geo-map-legend__notice\">\n        Kh\u00F4ng t\u1EA3i \u0111\u01B0\u1EE3c danh m\u1EE5c ch\u00FA gi\u1EA3i. Vui l\u00F2ng th\u1EED l\u1EA1i sau.\n      </p>\n    } @else {\n      <ul class=\"geo-map-legend__list\">\n        @for (item of items(); track item.code || item.label) {\n          <li class=\"geo-map-legend__item\">\n            @if (item.swatchUrl) {\n              <img class=\"geo-map-legend__swatch\" [src]=\"item.swatchUrl\" alt=\"\" />\n            } @else {\n              <span\n                class=\"geo-map-legend__swatch geo-map-legend__swatch--color\"\n                [style.background]=\"item.color || 'var(--geo-color-neutral-300)'\"\n              ></span>\n            }\n            <span class=\"geo-map-legend__text\">\n              @if (item.code) {\n                <span class=\"geo-map-legend__code\">{{ item.code }}</span>\n              }\n              <span class=\"geo-map-legend__label\">{{ item.label }}</span>\n            </span>\n          </li>\n        } @empty {\n          <li class=\"geo-map-legend__empty\">Ch\u01B0a c\u00F3 m\u1EE5c ch\u00FA gi\u1EA3i.</li>\n        }\n      </ul>\n    }\n  </aside>\n}\n", styles: ["@charset \"UTF-8\";.geo-map-legend-host{display:none;max-width:min(320px,100%)}.geo-map-legend-host--open{display:block}.geo-map-legend{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);display:flex;flex-direction:column;width:min(320px,100vw - 32px);max-height:min(640px,100dvh - 100px);overflow:hidden}.geo-map-legend__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--geo-color-neutral-100)}.geo-map-legend__title{margin:0;text-transform:uppercase;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-semibold);letter-spacing:.02em;color:var(--geo-color-neutral-900)}.geo-map-legend__close{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;border:0;border-radius:var(--geo-radius);background:transparent;color:var(--geo-color-neutral-700);font:inherit;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-medium);line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;width:32px;min-width:32px;min-height:32px;padding:0}.geo-map-legend__close:hover:not(:disabled){background:var(--geo-color-primary-soft-hover);color:var(--geo-color-primary-default)}.geo-map-legend__close:active:not(:disabled){transform:scale(.98)}.geo-map-legend__close:disabled{opacity:.45;cursor:not-allowed}.geo-map-legend__close--active,.geo-map-legend__close--checked{background:var(--geo-color-primary-soft-active);color:var(--geo-color-primary-default)}.geo-map-legend__close--icon-only{width:40px;padding:0}.geo-map-legend__list{margin:0;padding:8px 12px 12px;list-style:none;overflow:auto}.geo-map-legend__item{display:flex;align-items:center;gap:10px;padding:6px 4px}.geo-map-legend__swatch{flex-shrink:0;width:20px;height:20px;border-radius:var(--geo-radius-sm);border:1px solid var(--geo-color-neutral-200);object-fit:cover}.geo-map-legend__swatch--color{display:inline-block}.geo-map-legend__text{display:flex;flex-direction:column;gap:1px;min-width:0}.geo-map-legend__code{font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-500)}.geo-map-legend__label{font-size:var(--geo-font-size-body-small);color:var(--geo-color-neutral-800)}.geo-map-legend__empty{padding:8px 4px;font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-500)}.geo-map-legend__notice{margin:0;padding:12px 16px 14px;font-size:var(--geo-font-size-body-small);color:var(--geo-color-error-default)}\n"] }]
         }] });
 const GROUP_META = {
@@ -7028,6 +7067,8 @@ class GeoMapAdminFilterComponent {
     open = model(false);
     title = input('Đơn vị hành chính');
     nodes = input([]);
+    /** `single` — chọn đúng 1 xã/phường (BR-06-03); `multi` — checkbox nhiều cấp (mặc định). */
+    selectionMode = input('multi');
     checkedKeys = model([]);
     expandedKeys = model([]);
     apply = output();
@@ -7054,14 +7095,14 @@ class GeoMapAdminFilterComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoMapAdminFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoMapAdminFilterComponent, isStandalone: true, selector: "geo-map-admin-filter", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, checkedKeys: { classPropertyName: "checkedKeys", publicName: "checkedKeys", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", checkedKeys: "checkedKeysChange", expandedKeys: "expandedKeysChange", apply: "apply", reset: "reset", fitProvince: "fitProvince", closed: "closed", selectionChange: "selectionChange" }, host: { properties: { "class.geo-map-admin-filter-host--open": "open()" }, classAttribute: "geo-map-admin-filter-host" }, ngImport: i0, template: "@if (open()) {\n  <section class=\"geo-map-admin-filter\" aria-label=\"L\u1ECDc \u0111\u01A1n v\u1ECB h\u00E0nh ch\u00EDnh\">\n    <header class=\"geo-map-admin-filter__header\">\n      <h3 class=\"geo-map-admin-filter__title\">{{ title() }}</h3>\n      <button\n        type=\"button\"\n        class=\"geo-map-admin-filter__icon-btn\"\n        aria-label=\"\u0110\u00F3ng b\u1ED9 l\u1ECDc\"\n        (click)=\"close()\"\n      >\n        <geo-icon type=\"close\" size=\"sm\" />\n      </button>\n    </header>\n\n    <div class=\"geo-map-admin-filter__body\">\n      <geo-tree\n        [nodes]=\"nodes()\"\n        [checkable]=\"true\"\n        [checkedKeys]=\"checkedKeys()\"\n        [expandedKeys]=\"expandedKeys()\"\n        (checkedKeysChange)=\"onCheckedChange($event)\"\n        (expandedKeysChange)=\"expandedKeys.set($event)\"\n      />\n    </div>\n\n    <footer class=\"geo-map-admin-filter__footer\">\n      <geo-button appearance=\"secondary\" (clicked)=\"onFitProvince()\">\n        Xem to\u00E0n t\u1EC9nh\n      </geo-button>\n      <div class=\"geo-map-admin-filter__footer-end\">\n        <geo-button appearance=\"secondary\" (clicked)=\"onReset()\">\n          \u0110\u1EB7t l\u1EA1i\n        </geo-button>\n        <geo-button appearance=\"primary\" (clicked)=\"onApply()\">\n          \u00C1p d\u1EE5ng\n        </geo-button>\n      </div>\n    </footer>\n  </section>\n}\n", styles: ["@charset \"UTF-8\";.geo-map-admin-filter-host{display:none}.geo-map-admin-filter-host--open{display:block}.geo-map-admin-filter{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);width:min(320px,100vw - 32px);max-height:min(520px,75vh);display:flex;flex-direction:column;overflow:hidden}.geo-map-admin-filter__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--geo-color-neutral-100)}.geo-map-admin-filter__title{margin:0;font-size:var(--geo-font-size-body);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-900)}.geo-map-admin-filter__icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;border:0;border-radius:var(--geo-radius);background:transparent;color:var(--geo-color-neutral-700);font:inherit;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-medium);line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;width:32px;min-width:32px;min-height:32px;padding:0}.geo-map-admin-filter__icon-btn:hover:not(:disabled){background:var(--geo-color-primary-soft-hover);color:var(--geo-color-primary-default)}.geo-map-admin-filter__icon-btn:active:not(:disabled){transform:scale(.98)}.geo-map-admin-filter__icon-btn:disabled{opacity:.45;cursor:not-allowed}.geo-map-admin-filter__icon-btn--active,.geo-map-admin-filter__icon-btn--checked{background:var(--geo-color-primary-soft-active);color:var(--geo-color-primary-default)}.geo-map-admin-filter__icon-btn--icon-only{width:40px;padding:0}.geo-map-admin-filter__body{padding:8px 10px;overflow:auto;flex:1;min-height:160px}.geo-map-admin-filter__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-top:1px solid var(--geo-color-neutral-100)}.geo-map-admin-filter__footer-end{display:flex;gap:8px;margin-left:auto}\n"], dependencies: [{ kind: "component", type: GeoButtonComponent, selector: "geo-button", inputs: ["appearance", "color", "icon", "iconTheme", "iconPlacement", "iconOnly", "type", "disabled", "tooltip", "tooltipPlacement", "active", "title"], outputs: ["clicked"] }, { kind: "component", type: GeoIconComponent, selector: "geo-icon", inputs: ["type", "theme", "spin", "size", "color"] }, { kind: "component", type: GeoTreeComponent, selector: "geo-tree", inputs: ["nodes", "checkable", "checkedKeys", "expandedKeys", "showLine", "blockNode"], outputs: ["checkedKeysChange", "expandedKeysChange", "nodeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoMapAdminFilterComponent, isStandalone: true, selector: "geo-map-admin-filter", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, checkedKeys: { classPropertyName: "checkedKeys", publicName: "checkedKeys", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", checkedKeys: "checkedKeysChange", expandedKeys: "expandedKeysChange", apply: "apply", reset: "reset", fitProvince: "fitProvince", closed: "closed", selectionChange: "selectionChange" }, host: { properties: { "class.geo-map-admin-filter-host--open": "open()" }, classAttribute: "geo-map-admin-filter-host" }, ngImport: i0, template: "@if (open()) {\n  <section class=\"geo-map-admin-filter\" aria-label=\"L\u1ECDc \u0111\u01A1n v\u1ECB h\u00E0nh ch\u00EDnh\">\n    <header class=\"geo-map-admin-filter__header\">\n      <h3 class=\"geo-map-admin-filter__title\">{{ title() }}</h3>\n      <button\n        type=\"button\"\n        class=\"geo-map-admin-filter__icon-btn\"\n        aria-label=\"\u0110\u00F3ng b\u1ED9 l\u1ECDc\"\n        (click)=\"close()\"\n      >\n        <geo-icon type=\"close\" size=\"sm\" />\n      </button>\n    </header>\n\n    <div class=\"geo-map-admin-filter__body\">\n      <geo-tree\n        [nodes]=\"nodes()\"\n        [selectionMode]=\"selectionMode()\"\n        [checkable]=\"selectionMode() === 'multi'\"\n        [checkedKeys]=\"checkedKeys()\"\n        [selectedKeys]=\"checkedKeys()\"\n        [expandedKeys]=\"expandedKeys()\"\n        (checkedKeysChange)=\"onCheckedChange($event)\"\n        (selectedKeysChange)=\"onCheckedChange($event)\"\n        (expandedKeysChange)=\"expandedKeys.set($event)\"\n      />\n    </div>\n\n    <footer class=\"geo-map-admin-filter__footer\">\n      <geo-button appearance=\"secondary\" (clicked)=\"onFitProvince()\">\n        Xem to\u00E0n t\u1EC9nh\n      </geo-button>\n      <div class=\"geo-map-admin-filter__footer-end\">\n        <geo-button appearance=\"secondary\" (clicked)=\"onReset()\">\n          \u0110\u1EB7t l\u1EA1i\n        </geo-button>\n        <geo-button appearance=\"primary\" (clicked)=\"onApply()\">\n          \u00C1p d\u1EE5ng\n        </geo-button>\n      </div>\n    </footer>\n  </section>\n}\n", styles: ["@charset \"UTF-8\";.geo-map-admin-filter-host{display:none}.geo-map-admin-filter-host--open{display:block}.geo-map-admin-filter{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);width:min(320px,100vw - 32px);max-height:min(520px,75vh);display:flex;flex-direction:column;overflow:hidden}.geo-map-admin-filter__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--geo-color-neutral-100)}.geo-map-admin-filter__title{margin:0;font-size:var(--geo-font-size-body);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-900)}.geo-map-admin-filter__icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;border:0;border-radius:var(--geo-radius);background:transparent;color:var(--geo-color-neutral-700);font:inherit;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-medium);line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;width:32px;min-width:32px;min-height:32px;padding:0}.geo-map-admin-filter__icon-btn:hover:not(:disabled){background:var(--geo-color-primary-soft-hover);color:var(--geo-color-primary-default)}.geo-map-admin-filter__icon-btn:active:not(:disabled){transform:scale(.98)}.geo-map-admin-filter__icon-btn:disabled{opacity:.45;cursor:not-allowed}.geo-map-admin-filter__icon-btn--active,.geo-map-admin-filter__icon-btn--checked{background:var(--geo-color-primary-soft-active);color:var(--geo-color-primary-default)}.geo-map-admin-filter__icon-btn--icon-only{width:40px;padding:0}.geo-map-admin-filter__body{padding:8px 10px;overflow:auto;flex:1;min-height:160px}.geo-map-admin-filter__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-top:1px solid var(--geo-color-neutral-100)}.geo-map-admin-filter__footer-end{display:flex;gap:8px;margin-left:auto}\n"], dependencies: [{ kind: "component", type: GeoButtonComponent, selector: "geo-button", inputs: ["appearance", "color", "icon", "iconTheme", "iconPlacement", "iconOnly", "type", "disabled", "tooltip", "tooltipPlacement", "active", "title"], outputs: ["clicked"] }, { kind: "component", type: GeoIconComponent, selector: "geo-icon", inputs: ["type", "theme", "spin", "size", "color"] }, { kind: "component", type: GeoTreeComponent, selector: "geo-tree", inputs: ["nodes", "checkable", "selectionMode", "checkedKeys", "selectedKeys", "expandedKeys", "showLine", "blockNode"], outputs: ["checkedKeysChange", "selectedKeysChange", "expandedKeysChange", "nodeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoMapAdminFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'geo-map-admin-filter', standalone: true, imports: [GeoButtonComponent, GeoIconComponent, GeoTreeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'geo-map-admin-filter-host',
                         '[class.geo-map-admin-filter-host--open]': 'open()',
-                    }, template: "@if (open()) {\n  <section class=\"geo-map-admin-filter\" aria-label=\"L\u1ECDc \u0111\u01A1n v\u1ECB h\u00E0nh ch\u00EDnh\">\n    <header class=\"geo-map-admin-filter__header\">\n      <h3 class=\"geo-map-admin-filter__title\">{{ title() }}</h3>\n      <button\n        type=\"button\"\n        class=\"geo-map-admin-filter__icon-btn\"\n        aria-label=\"\u0110\u00F3ng b\u1ED9 l\u1ECDc\"\n        (click)=\"close()\"\n      >\n        <geo-icon type=\"close\" size=\"sm\" />\n      </button>\n    </header>\n\n    <div class=\"geo-map-admin-filter__body\">\n      <geo-tree\n        [nodes]=\"nodes()\"\n        [checkable]=\"true\"\n        [checkedKeys]=\"checkedKeys()\"\n        [expandedKeys]=\"expandedKeys()\"\n        (checkedKeysChange)=\"onCheckedChange($event)\"\n        (expandedKeysChange)=\"expandedKeys.set($event)\"\n      />\n    </div>\n\n    <footer class=\"geo-map-admin-filter__footer\">\n      <geo-button appearance=\"secondary\" (clicked)=\"onFitProvince()\">\n        Xem to\u00E0n t\u1EC9nh\n      </geo-button>\n      <div class=\"geo-map-admin-filter__footer-end\">\n        <geo-button appearance=\"secondary\" (clicked)=\"onReset()\">\n          \u0110\u1EB7t l\u1EA1i\n        </geo-button>\n        <geo-button appearance=\"primary\" (clicked)=\"onApply()\">\n          \u00C1p d\u1EE5ng\n        </geo-button>\n      </div>\n    </footer>\n  </section>\n}\n", styles: ["@charset \"UTF-8\";.geo-map-admin-filter-host{display:none}.geo-map-admin-filter-host--open{display:block}.geo-map-admin-filter{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);width:min(320px,100vw - 32px);max-height:min(520px,75vh);display:flex;flex-direction:column;overflow:hidden}.geo-map-admin-filter__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--geo-color-neutral-100)}.geo-map-admin-filter__title{margin:0;font-size:var(--geo-font-size-body);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-900)}.geo-map-admin-filter__icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;border:0;border-radius:var(--geo-radius);background:transparent;color:var(--geo-color-neutral-700);font:inherit;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-medium);line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;width:32px;min-width:32px;min-height:32px;padding:0}.geo-map-admin-filter__icon-btn:hover:not(:disabled){background:var(--geo-color-primary-soft-hover);color:var(--geo-color-primary-default)}.geo-map-admin-filter__icon-btn:active:not(:disabled){transform:scale(.98)}.geo-map-admin-filter__icon-btn:disabled{opacity:.45;cursor:not-allowed}.geo-map-admin-filter__icon-btn--active,.geo-map-admin-filter__icon-btn--checked{background:var(--geo-color-primary-soft-active);color:var(--geo-color-primary-default)}.geo-map-admin-filter__icon-btn--icon-only{width:40px;padding:0}.geo-map-admin-filter__body{padding:8px 10px;overflow:auto;flex:1;min-height:160px}.geo-map-admin-filter__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-top:1px solid var(--geo-color-neutral-100)}.geo-map-admin-filter__footer-end{display:flex;gap:8px;margin-left:auto}\n"] }]
+                    }, template: "@if (open()) {\n  <section class=\"geo-map-admin-filter\" aria-label=\"L\u1ECDc \u0111\u01A1n v\u1ECB h\u00E0nh ch\u00EDnh\">\n    <header class=\"geo-map-admin-filter__header\">\n      <h3 class=\"geo-map-admin-filter__title\">{{ title() }}</h3>\n      <button\n        type=\"button\"\n        class=\"geo-map-admin-filter__icon-btn\"\n        aria-label=\"\u0110\u00F3ng b\u1ED9 l\u1ECDc\"\n        (click)=\"close()\"\n      >\n        <geo-icon type=\"close\" size=\"sm\" />\n      </button>\n    </header>\n\n    <div class=\"geo-map-admin-filter__body\">\n      <geo-tree\n        [nodes]=\"nodes()\"\n        [selectionMode]=\"selectionMode()\"\n        [checkable]=\"selectionMode() === 'multi'\"\n        [checkedKeys]=\"checkedKeys()\"\n        [selectedKeys]=\"checkedKeys()\"\n        [expandedKeys]=\"expandedKeys()\"\n        (checkedKeysChange)=\"onCheckedChange($event)\"\n        (selectedKeysChange)=\"onCheckedChange($event)\"\n        (expandedKeysChange)=\"expandedKeys.set($event)\"\n      />\n    </div>\n\n    <footer class=\"geo-map-admin-filter__footer\">\n      <geo-button appearance=\"secondary\" (clicked)=\"onFitProvince()\">\n        Xem to\u00E0n t\u1EC9nh\n      </geo-button>\n      <div class=\"geo-map-admin-filter__footer-end\">\n        <geo-button appearance=\"secondary\" (clicked)=\"onReset()\">\n          \u0110\u1EB7t l\u1EA1i\n        </geo-button>\n        <geo-button appearance=\"primary\" (clicked)=\"onApply()\">\n          \u00C1p d\u1EE5ng\n        </geo-button>\n      </div>\n    </footer>\n  </section>\n}\n", styles: ["@charset \"UTF-8\";.geo-map-admin-filter-host{display:none}.geo-map-admin-filter-host--open{display:block}.geo-map-admin-filter{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);width:min(320px,100vw - 32px);max-height:min(520px,75vh);display:flex;flex-direction:column;overflow:hidden}.geo-map-admin-filter__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--geo-color-neutral-100)}.geo-map-admin-filter__title{margin:0;font-size:var(--geo-font-size-body);font-weight:var(--geo-font-weight-semibold);color:var(--geo-color-neutral-900)}.geo-map-admin-filter__icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;border:0;border-radius:var(--geo-radius);background:transparent;color:var(--geo-color-neutral-700);font:inherit;font-size:var(--geo-font-size-body-small);font-weight:var(--geo-font-weight-medium);line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;width:32px;min-width:32px;min-height:32px;padding:0}.geo-map-admin-filter__icon-btn:hover:not(:disabled){background:var(--geo-color-primary-soft-hover);color:var(--geo-color-primary-default)}.geo-map-admin-filter__icon-btn:active:not(:disabled){transform:scale(.98)}.geo-map-admin-filter__icon-btn:disabled{opacity:.45;cursor:not-allowed}.geo-map-admin-filter__icon-btn--active,.geo-map-admin-filter__icon-btn--checked{background:var(--geo-color-primary-soft-active);color:var(--geo-color-primary-default)}.geo-map-admin-filter__icon-btn--icon-only{width:40px;padding:0}.geo-map-admin-filter__body{padding:8px 10px;overflow:auto;flex:1;min-height:160px}.geo-map-admin-filter__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-top:1px solid var(--geo-color-neutral-100)}.geo-map-admin-filter__footer-end{display:flex;gap:8px;margin-left:auto}\n"] }]
         }] });
 /**
@@ -7400,6 +7441,7 @@ class GeoMapShellComponent {
     destroyRef = inject(DestroyRef);
     snapshotRef = viewChild(GeoMapSnapshotComponent);
     zoomRef = viewChild(GeoMapZoomComponent);
+    locateRef = viewChild(GeoMapLocateComponent);
     center = input([...GEO_MAP_DEFAULT_CENTER]);
     zoom = input(GEO_MAP_DEFAULT_ZOOM);
     height = input('560px');
@@ -7412,7 +7454,16 @@ class GeoMapShellComponent {
     showNav = input(true);
     includeDemoLayers = input(true);
     adminNodes = input(GEO_MAP_DEMO_ADMIN_NODES);
+    /** `single` — chọn đúng 1 xã/phường (BR-06-03); `multi` — checkbox nhiều cấp (mặc định). */
+    adminSelectionMode = input('multi');
     locationLabel = input('Phường 1 — TP Đà Lạt, Lâm Đồng');
+    /**
+     * Ghi chú pháp lý hiển thị khi đang đo (BR-10-03). `null` ẩn ghi chú —
+     * mặc định giữ nguyên câu chữ đã dùng ở `qh-map-shell`.
+     */
+    measureDisclaimer = input('Giá trị tham khảo trên bản đồ, không có giá trị pháp lý. Diện tích pháp lý của thửa đất lấy theo hồ sơ địa chính.');
+    /** True khi danh mục chú giải không tải được (`ERR_MAP_LEGEND_CATALOG_MISSING`). */
+    legendCatalogMissing = input(false);
     parcelAudience = input('citizen');
     provinceExtent = input(GEO_MAP_DEFAULT_PROVINCE_EXTENT_4326);
     /** When true, shell seeds mock search results (Storybook / demos). */
@@ -7439,13 +7490,17 @@ class GeoMapShellComponent {
     adminExpandedKeys = model(['lam-dong']);
     mapReady = output();
     mapClick = output();
+    located = output();
     locateDenied = output();
+    locateError = output();
     actionClick = output();
     search = output();
     searchReset = output();
     resultSelect = output();
     parcelExport = output();
     adminApply = output();
+    snapshotCaptured = output();
+    snapshotError = output();
     controller = signal(null);
     /** Active map pointer tool (`none` = default arrow cursor). */
     toolMode = signal('none');
@@ -7712,6 +7767,9 @@ class GeoMapShellComponent {
             case 'snapshot':
                 this.snapshotRef()?.capture();
                 break;
+            case 'locate':
+                this.locateRef()?.locate();
+                break;
             default:
                 break;
         }
@@ -7924,7 +7982,7 @@ class GeoMapShellComponent {
         this.managedLayers.set(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoMapShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoMapShellComponent, isStandalone: true, selector: "geo-map-shell", inputs: { center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showMousePosition: { classPropertyName: "showMousePosition", publicName: "showMousePosition", isSignal: true, isRequired: false, transformFunction: null }, basemapOptions: { classPropertyName: "basemapOptions", publicName: "basemapOptions", isSignal: true, isRequired: false, transformFunction: null }, toolbarActions: { classPropertyName: "toolbarActions", publicName: "toolbarActions", isSignal: true, isRequired: false, transformFunction: null }, layers: { classPropertyName: "layers", publicName: "layers", isSignal: true, isRequired: false, transformFunction: null }, legendItems: { classPropertyName: "legendItems", publicName: "legendItems", isSignal: true, isRequired: false, transformFunction: null }, showNav: { classPropertyName: "showNav", publicName: "showNav", isSignal: true, isRequired: false, transformFunction: null }, includeDemoLayers: { classPropertyName: "includeDemoLayers", publicName: "includeDemoLayers", isSignal: true, isRequired: false, transformFunction: null }, adminNodes: { classPropertyName: "adminNodes", publicName: "adminNodes", isSignal: true, isRequired: false, transformFunction: null }, locationLabel: { classPropertyName: "locationLabel", publicName: "locationLabel", isSignal: true, isRequired: false, transformFunction: null }, parcelAudience: { classPropertyName: "parcelAudience", publicName: "parcelAudience", isSignal: true, isRequired: false, transformFunction: null }, provinceExtent: { classPropertyName: "provinceExtent", publicName: "provinceExtent", isSignal: true, isRequired: false, transformFunction: null }, demoSearch: { classPropertyName: "demoSearch", publicName: "demoSearch", isSignal: true, isRequired: false, transformFunction: null }, homeMode: { classPropertyName: "homeMode", publicName: "homeMode", isSignal: true, isRequired: false, transformFunction: null }, basemapId: { classPropertyName: "basemapId", publicName: "basemapId", isSignal: true, isRequired: false, transformFunction: null }, measureMode: { classPropertyName: "measureMode", publicName: "measureMode", isSignal: true, isRequired: false, transformFunction: null }, checkedMap: { classPropertyName: "checkedMap", publicName: "checkedMap", isSignal: true, isRequired: false, transformFunction: null }, layersOpen: { classPropertyName: "layersOpen", publicName: "layersOpen", isSignal: true, isRequired: false, transformFunction: null }, legendOpen: { classPropertyName: "legendOpen", publicName: "legendOpen", isSignal: true, isRequired: false, transformFunction: null }, helpOpen: { classPropertyName: "helpOpen", publicName: "helpOpen", isSignal: true, isRequired: false, transformFunction: null }, swipeActive: { classPropertyName: "swipeActive", publicName: "swipeActive", isSignal: true, isRequired: false, transformFunction: null }, searchOpen: { classPropertyName: "searchOpen", publicName: "searchOpen", isSignal: true, isRequired: false, transformFunction: null }, adminFilterOpen: { classPropertyName: "adminFilterOpen", publicName: "adminFilterOpen", isSignal: true, isRequired: false, transformFunction: null }, parcelOpen: { classPropertyName: "parcelOpen", publicName: "parcelOpen", isSignal: true, isRequired: false, transformFunction: null }, managedLayers: { classPropertyName: "managedLayers", publicName: "managedLayers", isSignal: true, isRequired: false, transformFunction: null }, searchResults: { classPropertyName: "searchResults", publicName: "searchResults", isSignal: true, isRequired: false, transformFunction: null }, selectedParcel: { classPropertyName: "selectedParcel", publicName: "selectedParcel", isSignal: true, isRequired: false, transformFunction: null }, adminCheckedKeys: { classPropertyName: "adminCheckedKeys", publicName: "adminCheckedKeys", isSignal: true, isRequired: false, transformFunction: null }, adminExpandedKeys: { classPropertyName: "adminExpandedKeys", publicName: "adminExpandedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { basemapId: "basemapIdChange", measureMode: "measureModeChange", checkedMap: "checkedMapChange", layersOpen: "layersOpenChange", legendOpen: "legendOpenChange", helpOpen: "helpOpenChange", swipeActive: "swipeActiveChange", searchOpen: "searchOpenChange", adminFilterOpen: "adminFilterOpenChange", parcelOpen: "parcelOpenChange", managedLayers: "managedLayersChange", searchResults: "searchResultsChange", selectedParcel: "selectedParcelChange", adminCheckedKeys: "adminCheckedKeysChange", adminExpandedKeys: "adminExpandedKeysChange", mapReady: "mapReady", mapClick: "mapClick", locateDenied: "locateDenied", actionClick: "actionClick", search: "search", searchReset: "searchReset", resultSelect: "resultSelect", parcelExport: "parcelExport", adminApply: "adminApply" }, host: { properties: { "style.height": "height()" }, classAttribute: "geo-map-shell-host" }, viewQueries: [{ propertyName: "snapshotRef", first: true, predicate: GeoMapSnapshotComponent, descendants: true, isSignal: true }, { propertyName: "zoomRef", first: true, predicate: GeoMapZoomComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"geo-map-shell\">\n  <geo-map\n    class=\"geo-map-shell__map\"\n    [center]=\"center()\"\n    [zoom]=\"zoom()\"\n    [height]=\"'100%'\"\n    [basemap]=\"basemap()\"\n    [layers]=\"resolvedLayers()\"\n    [showMousePosition]=\"showMousePosition()\"\n    [showZoomControl]=\"false\"\n    (mapReady)=\"onMapReady($event)\"\n    (mapClick)=\"onMapClick($event)\"\n  />\n\n  <div class=\"geo-map-shell__chrome-left\">\n    <geo-map-toolbar\n      class=\"geo-map-shell__toolbar\"\n      [controller]=\"controller()\"\n      [actions]=\"resolvedToolbarActions()\"\n      [(checkedMap)]=\"checkedMap\"\n      (actionClick)=\"onToolbarAction($event)\"\n      (actionToggle)=\"onToolbarToggle($event)\"\n    />\n\n    <div class=\"geo-map-shell__panels\">\n      <geo-map-search\n        [(open)]=\"searchOpen\"\n        [results]=\"searchResults()\"\n        (search)=\"onSearch($event)\"\n        (reset)=\"onSearchReset()\"\n        (resultSelect)=\"onResultSelect($event)\"\n      />\n      <geo-map-admin-filter\n        [(open)]=\"adminFilterOpen\"\n        title=\"Chuy\u1EC3n v\u1ECB tr\u00ED\"\n        [nodes]=\"adminNodes()\"\n        [(checkedKeys)]=\"adminCheckedKeys\"\n        [(expandedKeys)]=\"adminExpandedKeys\"\n        (apply)=\"onAdminApply($event)\"\n        (reset)=\"adminCheckedKeys.set([])\"\n        (fitProvince)=\"onFitProvince()\"\n        (closed)=\"onAdminClosed()\"\n      />\n      <geo-map-parcel-popup\n        [(open)]=\"parcelOpen\"\n        [parcel]=\"selectedParcel()\"\n        [audience]=\"parcelAudience()\"\n        (exportClick)=\"parcelExport.emit($event)\"\n        (back)=\"onParcelBack()\"\n        (closed)=\"onParcelClosed()\"\n      />\n      <geo-map-layers-drawer\n        [controller]=\"controller()\"\n        [(open)]=\"layersOpen\"\n        [(layers)]=\"managedLayers\"\n      />\n      <geo-map-legend\n        [(open)]=\"legendOpen\"\n        [items]=\"legendItems()\"\n      />\n    </div>\n  </div>\n\n  <!-- Headless bridges: zoom/fullscreen + snapshot (driven by toolbar actions). -->\n  <geo-map-zoom\n    class=\"geo-map-shell__zoom-bridge\"\n    [controller]=\"controller()\"\n    [showNav]=\"showNav()\"\n    [provinceExtent]=\"provinceExtent()\"\n  />\n  <geo-map-snapshot\n    class=\"geo-map-shell__snapshot-bridge\"\n    [controller]=\"controller()\"\n  />\n\n  <div class=\"geo-map-shell__top-right\">\n    <ng-content select=\"[geoMapShellTopRight]\" />\n  </div>\n\n  <div class=\"geo-map-shell__bottom-right\">\n    <geo-map-basemap-switcher\n      [options]=\"basemapOptions()\"\n      [(selectedId)]=\"basemapId\"\n      (basemapChange)=\"onBasemapChange($event)\"\n    />\n  </div>\n\n  <div class=\"geo-map-shell__status\">\n    @if (locationLabel()) {\n      <geo-map-location-chip [label]=\"locationLabel()\" />\n    }\n    <geo-map-measure\n      [controller]=\"controller()\"\n      [(mode)]=\"measureMode\"\n    />\n  </div>\n\n  <geo-map-swipe\n    [controller]=\"controller()\"\n    [(active)]=\"swipeActive\"\n  />\n\n  <geo-map-help [(open)]=\"helpOpen\" />\n</div>\n", styles: [".geo-map-shell-host{display:block;min-height:360px}.geo-map-shell{position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden;border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-neutral-100)}.geo-map-shell:fullscreen,.geo-map-shell:-webkit-full-screen{width:100%;height:100%;min-height:100%;border:0;border-radius:0;background:var(--geo-color-neutral-100)}.geo-map-shell:fullscreen>.cdk-overlay-container,.geo-map-shell:-webkit-full-screen>.cdk-overlay-container{z-index:1200}.geo-map-shell__map{display:block;width:100%;height:100%}.geo-map-shell__chrome-left{position:absolute;top:16px;left:16px;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 32px);max-height:calc(100% - 172px);overflow:visible;pointer-events:none}.geo-map-shell__chrome-left>*{pointer-events:auto}.geo-map-shell__toolbar{flex-shrink:0}.geo-map-shell__panels{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:min(420px,100%);min-height:0;overflow:visible;pointer-events:none}.geo-map-shell__panels>*{pointer-events:auto}.geo-map-shell__panels .geo-map-search,.geo-map-shell__panels .geo-map-admin-filter,.geo-map-shell__panels .geo-map-parcel-popup,.geo-map-shell__panels .geo-map-layers-drawer,.geo-map-shell__panels .geo-map-legend{max-height:min(640px,100dvh - 100px);overflow:auto}.geo-map-shell__snapshot-bridge,.geo-map-shell__zoom-bridge{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;opacity:0}.geo-map-shell__bottom-left{position:absolute;left:16px;bottom:72px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:min(300px,100% - 120px);pointer-events:none}.geo-map-shell__bottom-left>*{pointer-events:auto}.geo-map-shell__top-right{position:absolute;top:16px;right:16px;z-index:7;display:flex;align-items:center;justify-content:flex-end;height:64px;max-width:min(360px,100% - 32px);pointer-events:none}.geo-map-shell__top-right>*{pointer-events:auto}.geo-map-shell__bottom-right{position:absolute;right:16px;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}.geo-map-shell__bottom-right>*{pointer-events:auto}.geo-map-shell__status{position:absolute;left:50%;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(480px,100% - 32px);transform:translate(-50%);pointer-events:none}.geo-map-shell__status>*{pointer-events:auto}.geo-map-shell .geo-map__mouse-position,.geo-map-shell .ol-scale-line{display:none!important}.geo-map-shell .ol-attribution{display:none}\n"], dependencies: [{ kind: "component", type: GeoMapComponent, selector: "geo-map", inputs: ["center", "zoom", "minZoom", "maxZoom", "viewProjection", "basemap", "layers", "height", "registerProjections", "projections", "showMousePosition", "mousePositionProjection", "showZoomControl"], outputs: ["mapReady", "mapClick", "viewChange", "initError"] }, { kind: "component", type: GeoMapToolbarComponent, selector: "geo-map-toolbar", inputs: ["controller", "actions", "compact", "checkedMap"], outputs: ["checkedMapChange", "actionClick", "actionToggle"] }, { kind: "component", type: GeoMapZoomComponent, selector: "geo-map-zoom", inputs: ["controller", "showNav", "showFitProvince", "provinceExtent", "fullscreenTarget"] }, { kind: "component", type: GeoMapSnapshotComponent, selector: "geo-map-snapshot", inputs: ["controller", "label", "filename"], outputs: ["captured", "captureError"] }, { kind: "component", type: GeoMapMeasureComponent, selector: "geo-map-measure", inputs: ["controller", "mode", "showResult"], outputs: ["modeChange", "measureChange"] }, { kind: "component", type: GeoMapLayersDrawerComponent, selector: "geo-map-layers-drawer", inputs: ["controller", "open", "title", "legendItems", "showOpacity", "showLegend", "layers"], outputs: ["openChange", "layersChange", "closed"] }, { kind: "component", type: GeoMapLegendComponent, selector: "geo-map-legend", inputs: ["title", "items", "open"], outputs: ["openChange", "closed"] }, { kind: "component", type: GeoMapHelpComponent, selector: "geo-map-help", inputs: ["open", "title", "sections"], outputs: ["openChange"] }, { kind: "component", type: GeoMapSwipeComponent, selector: "geo-map-swipe", inputs: ["controller", "active", "position", "layerId"], outputs: ["activeChange", "positionChange"] }, { kind: "component", type: GeoMapSearchComponent, selector: "geo-map-search", inputs: ["open", "title", "mode", "results", "loading", "pageIndex", "pageSize", "total", "emptyText"], outputs: ["openChange", "modeChange", "pageIndexChange", "pageSizeChange", "search", "reset", "resultSelect", "closed"] }, { kind: "component", type: GeoMapAdminFilterComponent, selector: "geo-map-admin-filter", inputs: ["open", "title", "nodes", "checkedKeys", "expandedKeys"], outputs: ["openChange", "checkedKeysChange", "expandedKeysChange", "apply", "reset", "fitProvince", "closed", "selectionChange"] }, { kind: "component", type: GeoMapParcelPopupComponent, selector: "geo-map-parcel-popup", inputs: ["open", "title", "parcel", "audience", "showExport"], outputs: ["openChange", "closed", "back", "exportClick", "diagramClick"] }, { kind: "component", type: GeoMapLocationChipComponent, selector: "geo-map-location-chip", inputs: ["label", "icon"] }, { kind: "component", type: GeoMapBasemapSwitcherComponent, selector: "geo-map-basemap-switcher", inputs: ["options", "selectedId", "label", "tooltip"], outputs: ["selectedIdChange", "basemapChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoMapShellComponent, isStandalone: true, selector: "geo-map-shell", inputs: { center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showMousePosition: { classPropertyName: "showMousePosition", publicName: "showMousePosition", isSignal: true, isRequired: false, transformFunction: null }, basemapOptions: { classPropertyName: "basemapOptions", publicName: "basemapOptions", isSignal: true, isRequired: false, transformFunction: null }, toolbarActions: { classPropertyName: "toolbarActions", publicName: "toolbarActions", isSignal: true, isRequired: false, transformFunction: null }, layers: { classPropertyName: "layers", publicName: "layers", isSignal: true, isRequired: false, transformFunction: null }, legendItems: { classPropertyName: "legendItems", publicName: "legendItems", isSignal: true, isRequired: false, transformFunction: null }, showNav: { classPropertyName: "showNav", publicName: "showNav", isSignal: true, isRequired: false, transformFunction: null }, includeDemoLayers: { classPropertyName: "includeDemoLayers", publicName: "includeDemoLayers", isSignal: true, isRequired: false, transformFunction: null }, adminNodes: { classPropertyName: "adminNodes", publicName: "adminNodes", isSignal: true, isRequired: false, transformFunction: null }, adminSelectionMode: { classPropertyName: "adminSelectionMode", publicName: "adminSelectionMode", isSignal: true, isRequired: false, transformFunction: null }, locationLabel: { classPropertyName: "locationLabel", publicName: "locationLabel", isSignal: true, isRequired: false, transformFunction: null }, measureDisclaimer: { classPropertyName: "measureDisclaimer", publicName: "measureDisclaimer", isSignal: true, isRequired: false, transformFunction: null }, legendCatalogMissing: { classPropertyName: "legendCatalogMissing", publicName: "legendCatalogMissing", isSignal: true, isRequired: false, transformFunction: null }, parcelAudience: { classPropertyName: "parcelAudience", publicName: "parcelAudience", isSignal: true, isRequired: false, transformFunction: null }, provinceExtent: { classPropertyName: "provinceExtent", publicName: "provinceExtent", isSignal: true, isRequired: false, transformFunction: null }, demoSearch: { classPropertyName: "demoSearch", publicName: "demoSearch", isSignal: true, isRequired: false, transformFunction: null }, homeMode: { classPropertyName: "homeMode", publicName: "homeMode", isSignal: true, isRequired: false, transformFunction: null }, basemapId: { classPropertyName: "basemapId", publicName: "basemapId", isSignal: true, isRequired: false, transformFunction: null }, measureMode: { classPropertyName: "measureMode", publicName: "measureMode", isSignal: true, isRequired: false, transformFunction: null }, checkedMap: { classPropertyName: "checkedMap", publicName: "checkedMap", isSignal: true, isRequired: false, transformFunction: null }, layersOpen: { classPropertyName: "layersOpen", publicName: "layersOpen", isSignal: true, isRequired: false, transformFunction: null }, legendOpen: { classPropertyName: "legendOpen", publicName: "legendOpen", isSignal: true, isRequired: false, transformFunction: null }, helpOpen: { classPropertyName: "helpOpen", publicName: "helpOpen", isSignal: true, isRequired: false, transformFunction: null }, swipeActive: { classPropertyName: "swipeActive", publicName: "swipeActive", isSignal: true, isRequired: false, transformFunction: null }, searchOpen: { classPropertyName: "searchOpen", publicName: "searchOpen", isSignal: true, isRequired: false, transformFunction: null }, adminFilterOpen: { classPropertyName: "adminFilterOpen", publicName: "adminFilterOpen", isSignal: true, isRequired: false, transformFunction: null }, parcelOpen: { classPropertyName: "parcelOpen", publicName: "parcelOpen", isSignal: true, isRequired: false, transformFunction: null }, managedLayers: { classPropertyName: "managedLayers", publicName: "managedLayers", isSignal: true, isRequired: false, transformFunction: null }, searchResults: { classPropertyName: "searchResults", publicName: "searchResults", isSignal: true, isRequired: false, transformFunction: null }, selectedParcel: { classPropertyName: "selectedParcel", publicName: "selectedParcel", isSignal: true, isRequired: false, transformFunction: null }, adminCheckedKeys: { classPropertyName: "adminCheckedKeys", publicName: "adminCheckedKeys", isSignal: true, isRequired: false, transformFunction: null }, adminExpandedKeys: { classPropertyName: "adminExpandedKeys", publicName: "adminExpandedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { basemapId: "basemapIdChange", measureMode: "measureModeChange", checkedMap: "checkedMapChange", layersOpen: "layersOpenChange", legendOpen: "legendOpenChange", helpOpen: "helpOpenChange", swipeActive: "swipeActiveChange", searchOpen: "searchOpenChange", adminFilterOpen: "adminFilterOpenChange", parcelOpen: "parcelOpenChange", managedLayers: "managedLayersChange", searchResults: "searchResultsChange", selectedParcel: "selectedParcelChange", adminCheckedKeys: "adminCheckedKeysChange", adminExpandedKeys: "adminExpandedKeysChange", mapReady: "mapReady", mapClick: "mapClick", located: "located", locateDenied: "locateDenied", locateError: "locateError", actionClick: "actionClick", search: "search", searchReset: "searchReset", resultSelect: "resultSelect", parcelExport: "parcelExport", adminApply: "adminApply", snapshotCaptured: "snapshotCaptured", snapshotError: "snapshotError" }, host: { properties: { "style.height": "height()" }, classAttribute: "geo-map-shell-host" }, viewQueries: [{ propertyName: "snapshotRef", first: true, predicate: GeoMapSnapshotComponent, descendants: true, isSignal: true }, { propertyName: "zoomRef", first: true, predicate: GeoMapZoomComponent, descendants: true, isSignal: true }, { propertyName: "locateRef", first: true, predicate: GeoMapLocateComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"geo-map-shell\">\n  <geo-map\n    class=\"geo-map-shell__map\"\n    [center]=\"center()\"\n    [zoom]=\"zoom()\"\n    [height]=\"'100%'\"\n    [basemap]=\"basemap()\"\n    [layers]=\"resolvedLayers()\"\n    [showMousePosition]=\"showMousePosition()\"\n    [showZoomControl]=\"false\"\n    (mapReady)=\"onMapReady($event)\"\n    (mapClick)=\"onMapClick($event)\"\n  />\n\n  <div class=\"geo-map-shell__chrome-left\">\n    <geo-map-toolbar\n      class=\"geo-map-shell__toolbar\"\n      [controller]=\"controller()\"\n      [actions]=\"resolvedToolbarActions()\"\n      [(checkedMap)]=\"checkedMap\"\n      (actionClick)=\"onToolbarAction($event)\"\n      (actionToggle)=\"onToolbarToggle($event)\"\n    />\n\n    <div class=\"geo-map-shell__panels\">\n      <geo-map-search\n        [(open)]=\"searchOpen\"\n        [results]=\"searchResults()\"\n        (search)=\"onSearch($event)\"\n        (reset)=\"onSearchReset()\"\n        (resultSelect)=\"onResultSelect($event)\"\n      />\n      <geo-map-admin-filter\n        [(open)]=\"adminFilterOpen\"\n        title=\"Chuy\u1EC3n v\u1ECB tr\u00ED\"\n        [nodes]=\"adminNodes()\"\n        [selectionMode]=\"adminSelectionMode()\"\n        [(checkedKeys)]=\"adminCheckedKeys\"\n        [(expandedKeys)]=\"adminExpandedKeys\"\n        (apply)=\"onAdminApply($event)\"\n        (reset)=\"adminCheckedKeys.set([])\"\n        (fitProvince)=\"onFitProvince()\"\n        (closed)=\"onAdminClosed()\"\n      />\n      <geo-map-parcel-popup\n        [(open)]=\"parcelOpen\"\n        [parcel]=\"selectedParcel()\"\n        [audience]=\"parcelAudience()\"\n        (exportClick)=\"parcelExport.emit($event)\"\n        (back)=\"onParcelBack()\"\n        (closed)=\"onParcelClosed()\"\n      />\n      <geo-map-layers-drawer\n        [controller]=\"controller()\"\n        [(open)]=\"layersOpen\"\n        [(layers)]=\"managedLayers\"\n      />\n      <geo-map-legend\n        [(open)]=\"legendOpen\"\n        [items]=\"legendItems()\"\n        [catalogMissing]=\"legendCatalogMissing()\"\n      />\n    </div>\n  </div>\n\n  <!-- Headless bridges: zoom/fullscreen + snapshot + locate (driven by toolbar actions). -->\n  <geo-map-zoom\n    class=\"geo-map-shell__zoom-bridge\"\n    [controller]=\"controller()\"\n    [showNav]=\"showNav()\"\n    [provinceExtent]=\"provinceExtent()\"\n  />\n  <geo-map-snapshot\n    class=\"geo-map-shell__snapshot-bridge\"\n    [controller]=\"controller()\"\n    (captured)=\"snapshotCaptured.emit()\"\n    (captureError)=\"snapshotError.emit($event)\"\n  />\n  <geo-map-locate\n    class=\"geo-map-shell__locate-bridge\"\n    [controller]=\"controller()\"\n    (located)=\"located.emit($event)\"\n    (denied)=\"locateDenied.emit()\"\n    (locateError)=\"locateError.emit($event)\"\n  />\n\n  <div class=\"geo-map-shell__top-right\">\n    <ng-content select=\"[geoMapShellTopRight]\" />\n  </div>\n\n  <div class=\"geo-map-shell__bottom-right\">\n    <geo-map-basemap-switcher\n      [options]=\"basemapOptions()\"\n      [(selectedId)]=\"basemapId\"\n      (basemapChange)=\"onBasemapChange($event)\"\n    />\n  </div>\n\n  <div class=\"geo-map-shell__status\">\n    @if (locationLabel()) {\n      <geo-map-location-chip [label]=\"locationLabel()\" />\n    }\n    <geo-map-measure\n      [controller]=\"controller()\"\n      [(mode)]=\"measureMode\"\n    />\n    @if (measureMode() !== 'none' && measureDisclaimer()) {\n      <p class=\"geo-map-shell__measure-disclaimer\" role=\"note\">\n        {{ measureDisclaimer() }}\n      </p>\n    }\n  </div>\n\n  <geo-map-swipe\n    [controller]=\"controller()\"\n    [(active)]=\"swipeActive\"\n  />\n\n  <geo-map-help [(open)]=\"helpOpen\" />\n</div>\n", styles: ["@charset \"UTF-8\";.geo-map-shell-host{display:block;min-height:360px}.geo-map-shell{position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden;border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-neutral-100)}.geo-map-shell:fullscreen,.geo-map-shell:-webkit-full-screen{width:100%;height:100%;min-height:100%;border:0;border-radius:0;background:var(--geo-color-neutral-100)}.geo-map-shell:fullscreen>.cdk-overlay-container,.geo-map-shell:-webkit-full-screen>.cdk-overlay-container{z-index:1200}.geo-map-shell__map{display:block;width:100%;height:100%}.geo-map-shell__chrome-left{position:absolute;top:16px;left:16px;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 32px);max-height:calc(100% - 172px);overflow:visible;pointer-events:none}.geo-map-shell__chrome-left>*{pointer-events:auto}.geo-map-shell__toolbar{flex-shrink:0}.geo-map-shell__panels{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:min(420px,100%);min-height:0;overflow:visible;pointer-events:none}.geo-map-shell__panels>*{pointer-events:auto}.geo-map-shell__panels .geo-map-search,.geo-map-shell__panels .geo-map-admin-filter,.geo-map-shell__panels .geo-map-parcel-popup,.geo-map-shell__panels .geo-map-layers-drawer,.geo-map-shell__panels .geo-map-legend{max-height:min(640px,100dvh - 100px);overflow:auto}.geo-map-shell__snapshot-bridge,.geo-map-shell__zoom-bridge,.geo-map-shell__locate-bridge{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;opacity:0}.geo-map-shell__bottom-left{position:absolute;left:16px;bottom:72px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:min(300px,100% - 120px);pointer-events:none}.geo-map-shell__bottom-left>*{pointer-events:auto}.geo-map-shell__top-right{position:absolute;top:16px;right:16px;z-index:7;display:flex;align-items:center;justify-content:flex-end;height:64px;max-width:min(360px,100% - 32px);pointer-events:none}.geo-map-shell__top-right>*{pointer-events:auto}.geo-map-shell__bottom-right{position:absolute;right:16px;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}.geo-map-shell__bottom-right>*{pointer-events:auto}.geo-map-shell__status{position:absolute;left:50%;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(480px,100% - 32px);transform:translate(-50%);pointer-events:none}.geo-map-shell__status>*{pointer-events:auto}.geo-map-shell__measure-disclaimer{margin:0;padding:6px 12px;border-radius:var(--geo-radius);background:var(--geo-color-neutral-white);border:1px solid var(--geo-color-border-default);font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-700);text-align:center}.geo-map-shell .geo-map__mouse-position,.geo-map-shell .ol-scale-line{display:none!important}.geo-map-shell .ol-attribution{display:none}\n"], dependencies: [{ kind: "component", type: GeoMapComponent, selector: "geo-map", inputs: ["center", "zoom", "minZoom", "maxZoom", "viewProjection", "basemap", "layers", "height", "registerProjections", "projections", "showMousePosition", "mousePositionProjection", "showZoomControl"], outputs: ["mapReady", "mapClick", "viewChange", "initError"] }, { kind: "component", type: GeoMapToolbarComponent, selector: "geo-map-toolbar", inputs: ["controller", "actions", "compact", "checkedMap"], outputs: ["checkedMapChange", "actionClick", "actionToggle"] }, { kind: "component", type: GeoMapZoomComponent, selector: "geo-map-zoom", inputs: ["controller", "showNav", "showFitProvince", "provinceExtent", "fullscreenTarget"] }, { kind: "component", type: GeoMapSnapshotComponent, selector: "geo-map-snapshot", inputs: ["controller", "label", "filename"], outputs: ["captured", "captureError"] }, { kind: "component", type: GeoMapMeasureComponent, selector: "geo-map-measure", inputs: ["controller", "mode", "showResult"], outputs: ["modeChange", "measureChange"] }, { kind: "component", type: GeoMapLayersDrawerComponent, selector: "geo-map-layers-drawer", inputs: ["controller", "open", "title", "legendItems", "showOpacity", "showLegend", "layers"], outputs: ["openChange", "layersChange", "closed"] }, { kind: "component", type: GeoMapLegendComponent, selector: "geo-map-legend", inputs: ["title", "items", "catalogMissing", "open"], outputs: ["openChange", "closed"] }, { kind: "component", type: GeoMapHelpComponent, selector: "geo-map-help", inputs: ["open", "title", "sections"], outputs: ["openChange"] }, { kind: "component", type: GeoMapSwipeComponent, selector: "geo-map-swipe", inputs: ["controller", "active", "position", "layerId"], outputs: ["activeChange", "positionChange"] }, { kind: "component", type: GeoMapSearchComponent, selector: "geo-map-search", inputs: ["open", "title", "mode", "results", "loading", "pageIndex", "pageSize", "total", "emptyText"], outputs: ["openChange", "modeChange", "pageIndexChange", "pageSizeChange", "search", "reset", "resultSelect", "closed"] }, { kind: "component", type: GeoMapAdminFilterComponent, selector: "geo-map-admin-filter", inputs: ["open", "title", "nodes", "selectionMode", "checkedKeys", "expandedKeys"], outputs: ["openChange", "checkedKeysChange", "expandedKeysChange", "apply", "reset", "fitProvince", "closed", "selectionChange"] }, { kind: "component", type: GeoMapParcelPopupComponent, selector: "geo-map-parcel-popup", inputs: ["open", "title", "parcel", "audience", "showExport"], outputs: ["openChange", "closed", "back", "exportClick", "diagramClick"] }, { kind: "component", type: GeoMapLocationChipComponent, selector: "geo-map-location-chip", inputs: ["label", "icon"] }, { kind: "component", type: GeoMapBasemapSwitcherComponent, selector: "geo-map-basemap-switcher", inputs: ["options", "selectedId", "label", "tooltip"], outputs: ["selectedIdChange", "basemapChange"] }, { kind: "component", type: GeoMapLocateComponent, selector: "geo-map-locate", inputs: ["controller", "label"], outputs: ["located", "denied", "locateError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoMapShellComponent, decorators: [{
             type: Component,
@@ -7943,10 +8001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         GeoMapParcelPopupComponent,
                         GeoMapLocationChipComponent,
                         GeoMapBasemapSwitcherComponent,
+                        GeoMapLocateComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'geo-map-shell-host',
                         '[style.height]': 'height()',
-                    }, template: "<div class=\"geo-map-shell\">\n  <geo-map\n    class=\"geo-map-shell__map\"\n    [center]=\"center()\"\n    [zoom]=\"zoom()\"\n    [height]=\"'100%'\"\n    [basemap]=\"basemap()\"\n    [layers]=\"resolvedLayers()\"\n    [showMousePosition]=\"showMousePosition()\"\n    [showZoomControl]=\"false\"\n    (mapReady)=\"onMapReady($event)\"\n    (mapClick)=\"onMapClick($event)\"\n  />\n\n  <div class=\"geo-map-shell__chrome-left\">\n    <geo-map-toolbar\n      class=\"geo-map-shell__toolbar\"\n      [controller]=\"controller()\"\n      [actions]=\"resolvedToolbarActions()\"\n      [(checkedMap)]=\"checkedMap\"\n      (actionClick)=\"onToolbarAction($event)\"\n      (actionToggle)=\"onToolbarToggle($event)\"\n    />\n\n    <div class=\"geo-map-shell__panels\">\n      <geo-map-search\n        [(open)]=\"searchOpen\"\n        [results]=\"searchResults()\"\n        (search)=\"onSearch($event)\"\n        (reset)=\"onSearchReset()\"\n        (resultSelect)=\"onResultSelect($event)\"\n      />\n      <geo-map-admin-filter\n        [(open)]=\"adminFilterOpen\"\n        title=\"Chuy\u1EC3n v\u1ECB tr\u00ED\"\n        [nodes]=\"adminNodes()\"\n        [(checkedKeys)]=\"adminCheckedKeys\"\n        [(expandedKeys)]=\"adminExpandedKeys\"\n        (apply)=\"onAdminApply($event)\"\n        (reset)=\"adminCheckedKeys.set([])\"\n        (fitProvince)=\"onFitProvince()\"\n        (closed)=\"onAdminClosed()\"\n      />\n      <geo-map-parcel-popup\n        [(open)]=\"parcelOpen\"\n        [parcel]=\"selectedParcel()\"\n        [audience]=\"parcelAudience()\"\n        (exportClick)=\"parcelExport.emit($event)\"\n        (back)=\"onParcelBack()\"\n        (closed)=\"onParcelClosed()\"\n      />\n      <geo-map-layers-drawer\n        [controller]=\"controller()\"\n        [(open)]=\"layersOpen\"\n        [(layers)]=\"managedLayers\"\n      />\n      <geo-map-legend\n        [(open)]=\"legendOpen\"\n        [items]=\"legendItems()\"\n      />\n    </div>\n  </div>\n\n  <!-- Headless bridges: zoom/fullscreen + snapshot (driven by toolbar actions). -->\n  <geo-map-zoom\n    class=\"geo-map-shell__zoom-bridge\"\n    [controller]=\"controller()\"\n    [showNav]=\"showNav()\"\n    [provinceExtent]=\"provinceExtent()\"\n  />\n  <geo-map-snapshot\n    class=\"geo-map-shell__snapshot-bridge\"\n    [controller]=\"controller()\"\n  />\n\n  <div class=\"geo-map-shell__top-right\">\n    <ng-content select=\"[geoMapShellTopRight]\" />\n  </div>\n\n  <div class=\"geo-map-shell__bottom-right\">\n    <geo-map-basemap-switcher\n      [options]=\"basemapOptions()\"\n      [(selectedId)]=\"basemapId\"\n      (basemapChange)=\"onBasemapChange($event)\"\n    />\n  </div>\n\n  <div class=\"geo-map-shell__status\">\n    @if (locationLabel()) {\n      <geo-map-location-chip [label]=\"locationLabel()\" />\n    }\n    <geo-map-measure\n      [controller]=\"controller()\"\n      [(mode)]=\"measureMode\"\n    />\n  </div>\n\n  <geo-map-swipe\n    [controller]=\"controller()\"\n    [(active)]=\"swipeActive\"\n  />\n\n  <geo-map-help [(open)]=\"helpOpen\" />\n</div>\n", styles: [".geo-map-shell-host{display:block;min-height:360px}.geo-map-shell{position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden;border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-neutral-100)}.geo-map-shell:fullscreen,.geo-map-shell:-webkit-full-screen{width:100%;height:100%;min-height:100%;border:0;border-radius:0;background:var(--geo-color-neutral-100)}.geo-map-shell:fullscreen>.cdk-overlay-container,.geo-map-shell:-webkit-full-screen>.cdk-overlay-container{z-index:1200}.geo-map-shell__map{display:block;width:100%;height:100%}.geo-map-shell__chrome-left{position:absolute;top:16px;left:16px;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 32px);max-height:calc(100% - 172px);overflow:visible;pointer-events:none}.geo-map-shell__chrome-left>*{pointer-events:auto}.geo-map-shell__toolbar{flex-shrink:0}.geo-map-shell__panels{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:min(420px,100%);min-height:0;overflow:visible;pointer-events:none}.geo-map-shell__panels>*{pointer-events:auto}.geo-map-shell__panels .geo-map-search,.geo-map-shell__panels .geo-map-admin-filter,.geo-map-shell__panels .geo-map-parcel-popup,.geo-map-shell__panels .geo-map-layers-drawer,.geo-map-shell__panels .geo-map-legend{max-height:min(640px,100dvh - 100px);overflow:auto}.geo-map-shell__snapshot-bridge,.geo-map-shell__zoom-bridge{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;opacity:0}.geo-map-shell__bottom-left{position:absolute;left:16px;bottom:72px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:min(300px,100% - 120px);pointer-events:none}.geo-map-shell__bottom-left>*{pointer-events:auto}.geo-map-shell__top-right{position:absolute;top:16px;right:16px;z-index:7;display:flex;align-items:center;justify-content:flex-end;height:64px;max-width:min(360px,100% - 32px);pointer-events:none}.geo-map-shell__top-right>*{pointer-events:auto}.geo-map-shell__bottom-right{position:absolute;right:16px;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}.geo-map-shell__bottom-right>*{pointer-events:auto}.geo-map-shell__status{position:absolute;left:50%;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(480px,100% - 32px);transform:translate(-50%);pointer-events:none}.geo-map-shell__status>*{pointer-events:auto}.geo-map-shell .geo-map__mouse-position,.geo-map-shell .ol-scale-line{display:none!important}.geo-map-shell .ol-attribution{display:none}\n"] }]
+                    }, template: "<div class=\"geo-map-shell\">\n  <geo-map\n    class=\"geo-map-shell__map\"\n    [center]=\"center()\"\n    [zoom]=\"zoom()\"\n    [height]=\"'100%'\"\n    [basemap]=\"basemap()\"\n    [layers]=\"resolvedLayers()\"\n    [showMousePosition]=\"showMousePosition()\"\n    [showZoomControl]=\"false\"\n    (mapReady)=\"onMapReady($event)\"\n    (mapClick)=\"onMapClick($event)\"\n  />\n\n  <div class=\"geo-map-shell__chrome-left\">\n    <geo-map-toolbar\n      class=\"geo-map-shell__toolbar\"\n      [controller]=\"controller()\"\n      [actions]=\"resolvedToolbarActions()\"\n      [(checkedMap)]=\"checkedMap\"\n      (actionClick)=\"onToolbarAction($event)\"\n      (actionToggle)=\"onToolbarToggle($event)\"\n    />\n\n    <div class=\"geo-map-shell__panels\">\n      <geo-map-search\n        [(open)]=\"searchOpen\"\n        [results]=\"searchResults()\"\n        (search)=\"onSearch($event)\"\n        (reset)=\"onSearchReset()\"\n        (resultSelect)=\"onResultSelect($event)\"\n      />\n      <geo-map-admin-filter\n        [(open)]=\"adminFilterOpen\"\n        title=\"Chuy\u1EC3n v\u1ECB tr\u00ED\"\n        [nodes]=\"adminNodes()\"\n        [selectionMode]=\"adminSelectionMode()\"\n        [(checkedKeys)]=\"adminCheckedKeys\"\n        [(expandedKeys)]=\"adminExpandedKeys\"\n        (apply)=\"onAdminApply($event)\"\n        (reset)=\"adminCheckedKeys.set([])\"\n        (fitProvince)=\"onFitProvince()\"\n        (closed)=\"onAdminClosed()\"\n      />\n      <geo-map-parcel-popup\n        [(open)]=\"parcelOpen\"\n        [parcel]=\"selectedParcel()\"\n        [audience]=\"parcelAudience()\"\n        (exportClick)=\"parcelExport.emit($event)\"\n        (back)=\"onParcelBack()\"\n        (closed)=\"onParcelClosed()\"\n      />\n      <geo-map-layers-drawer\n        [controller]=\"controller()\"\n        [(open)]=\"layersOpen\"\n        [(layers)]=\"managedLayers\"\n      />\n      <geo-map-legend\n        [(open)]=\"legendOpen\"\n        [items]=\"legendItems()\"\n        [catalogMissing]=\"legendCatalogMissing()\"\n      />\n    </div>\n  </div>\n\n  <!-- Headless bridges: zoom/fullscreen + snapshot + locate (driven by toolbar actions). -->\n  <geo-map-zoom\n    class=\"geo-map-shell__zoom-bridge\"\n    [controller]=\"controller()\"\n    [showNav]=\"showNav()\"\n    [provinceExtent]=\"provinceExtent()\"\n  />\n  <geo-map-snapshot\n    class=\"geo-map-shell__snapshot-bridge\"\n    [controller]=\"controller()\"\n    (captured)=\"snapshotCaptured.emit()\"\n    (captureError)=\"snapshotError.emit($event)\"\n  />\n  <geo-map-locate\n    class=\"geo-map-shell__locate-bridge\"\n    [controller]=\"controller()\"\n    (located)=\"located.emit($event)\"\n    (denied)=\"locateDenied.emit()\"\n    (locateError)=\"locateError.emit($event)\"\n  />\n\n  <div class=\"geo-map-shell__top-right\">\n    <ng-content select=\"[geoMapShellTopRight]\" />\n  </div>\n\n  <div class=\"geo-map-shell__bottom-right\">\n    <geo-map-basemap-switcher\n      [options]=\"basemapOptions()\"\n      [(selectedId)]=\"basemapId\"\n      (basemapChange)=\"onBasemapChange($event)\"\n    />\n  </div>\n\n  <div class=\"geo-map-shell__status\">\n    @if (locationLabel()) {\n      <geo-map-location-chip [label]=\"locationLabel()\" />\n    }\n    <geo-map-measure\n      [controller]=\"controller()\"\n      [(mode)]=\"measureMode\"\n    />\n    @if (measureMode() !== 'none' && measureDisclaimer()) {\n      <p class=\"geo-map-shell__measure-disclaimer\" role=\"note\">\n        {{ measureDisclaimer() }}\n      </p>\n    }\n  </div>\n\n  <geo-map-swipe\n    [controller]=\"controller()\"\n    [(active)]=\"swipeActive\"\n  />\n\n  <geo-map-help [(open)]=\"helpOpen\" />\n</div>\n", styles: ["@charset \"UTF-8\";.geo-map-shell-host{display:block;min-height:360px}.geo-map-shell{position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden;border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-neutral-100)}.geo-map-shell:fullscreen,.geo-map-shell:-webkit-full-screen{width:100%;height:100%;min-height:100%;border:0;border-radius:0;background:var(--geo-color-neutral-100)}.geo-map-shell:fullscreen>.cdk-overlay-container,.geo-map-shell:-webkit-full-screen>.cdk-overlay-container{z-index:1200}.geo-map-shell__map{display:block;width:100%;height:100%}.geo-map-shell__chrome-left{position:absolute;top:16px;left:16px;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 32px);max-height:calc(100% - 172px);overflow:visible;pointer-events:none}.geo-map-shell__chrome-left>*{pointer-events:auto}.geo-map-shell__toolbar{flex-shrink:0}.geo-map-shell__panels{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:min(420px,100%);min-height:0;overflow:visible;pointer-events:none}.geo-map-shell__panels>*{pointer-events:auto}.geo-map-shell__panels .geo-map-search,.geo-map-shell__panels .geo-map-admin-filter,.geo-map-shell__panels .geo-map-parcel-popup,.geo-map-shell__panels .geo-map-layers-drawer,.geo-map-shell__panels .geo-map-legend{max-height:min(640px,100dvh - 100px);overflow:auto}.geo-map-shell__snapshot-bridge,.geo-map-shell__zoom-bridge,.geo-map-shell__locate-bridge{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;opacity:0}.geo-map-shell__bottom-left{position:absolute;left:16px;bottom:72px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:min(300px,100% - 120px);pointer-events:none}.geo-map-shell__bottom-left>*{pointer-events:auto}.geo-map-shell__top-right{position:absolute;top:16px;right:16px;z-index:7;display:flex;align-items:center;justify-content:flex-end;height:64px;max-width:min(360px,100% - 32px);pointer-events:none}.geo-map-shell__top-right>*{pointer-events:auto}.geo-map-shell__bottom-right{position:absolute;right:16px;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}.geo-map-shell__bottom-right>*{pointer-events:auto}.geo-map-shell__status{position:absolute;left:50%;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(480px,100% - 32px);transform:translate(-50%);pointer-events:none}.geo-map-shell__status>*{pointer-events:auto}.geo-map-shell__measure-disclaimer{margin:0;padding:6px 12px;border-radius:var(--geo-radius);background:var(--geo-color-neutral-white);border:1px solid var(--geo-color-border-default);font-size:var(--geo-font-size-caption);color:var(--geo-color-neutral-700);text-align:center}.geo-map-shell .geo-map__mouse-position,.geo-map-shell .ol-scale-line{display:none!important}.geo-map-shell .ol-attribution{display:none}\n"] }]
         }], ctorParameters: () => [] });
 /*
@@ -7957,5 +8016,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { DEFAULT_UI_ROW_ACTIONS, DEFAULT_UI_TABLE_PAGE_SIZE_OPTIONS, GEO_ICON_SIZE_MAP, GEO_LAYOUT_DEFAULT_NOTIFICATIONS, GEO_LAYOUT_DEFAULT_SUBSYSTEMS, GEO_LAYOUT_DEFAULT_USER, GEO_LAYOUT_DEFAULT_USER_MENU, GEO_MAP_BASEMAP_LAYER_ID, GEO_MAP_BUILTIN_PROJECTIONS, GEO_MAP_DEFAULT_BASEMAP_OPTIONS, GEO_MAP_DEFAULT_CENTER, GEO_MAP_DEFAULT_HEIGHT, GEO_MAP_DEFAULT_HELP_SECTIONS, GEO_MAP_DEFAULT_MAX_ZOOM, GEO_MAP_DEFAULT_MIN_ZOOM, GEO_MAP_DEFAULT_PLANNING_LAYERS, GEO_MAP_DEFAULT_PROVINCE_EXTENT_4326, GEO_MAP_DEFAULT_TOOLBAR_ACTIONS, GEO_MAP_DEFAULT_VIEW_PROJECTION, GEO_MAP_DEFAULT_ZOOM, GEO_MAP_DEMO_ADMIN_NODES, GEO_MAP_DEMO_LEGEND_ITEMS, GEO_MAP_DEMO_PARCEL_DETAIL, GEO_MAP_DEMO_THEMATIC_LAYERS, GEO_MAP_ENV_PLACEHOLDERS, GEO_MAP_ESRI_IMAGERY_URL, GEO_MAP_ESRI_STREETS_URL, GEO_MAP_ESRI_TRANSPORT_URL, GEO_MAP_HIGHLIGHT_LAYER_ID, GEO_MAP_MEASURE_LAYER_ID, GEO_MAP_SELECTION_LAYER_ID, GEO_MAP_TOOLBAR_ASSET_BASE, GEO_MAP_TOOLBAR_ICONS, GEO_MAP_TRAFFIC_LAYER_ID, GEO_MAP_TRAFFIC_OVERLAY, GEO_STATUS_COLOR_MAP, GEO_STATUS_LABELS, GEO_TOAST_DEFAULT_TITLES, GEO_TOAST_ICONS, GEO_TYPOGRAPHY_TAG, GEO_TYPOGRAPHY_VARIANTS, GeoAlertComponent, GeoBackButtonComponent, GeoBreadcrumbComponent, GeoButtonComponent, GeoChartComponent, GeoCheckboxComponent, GeoColumnPickerComponent, GeoConfirmModalComponent, GeoDashboardComponent, GeoDatePickerComponent, GeoDateRangePickerComponent, GeoEmptyStateComponent, GeoFeedbackFormComponent, GeoFilePickerComponent, GeoForgotPasswordComponent, GeoFormModalComponent, GeoIconComponent, GeoInputComponent, GeoLayoutActionsDirective, GeoLayoutComponent, GeoLayoutFooterComponent, GeoLayoutHeaderActionsComponent, GeoLayoutHeaderComponent, GeoLayoutSidebarComponent, GeoListPageComponent, GeoLoginComponent, GeoMapAdminFilterComponent, GeoMapBasemapSwitcherComponent, GeoMapComponent, GeoMapController, GeoMapHelpComponent, GeoMapLayerCardComponent, GeoMapLayerPanelComponent, GeoMapLayerService, GeoMapLayersDrawerComponent, GeoMapLegendComponent, GeoMapLocateComponent, GeoMapLocationChipComponent, GeoMapMeasureComponent, GeoMapOpacityComponent, GeoMapParcelPopupComponent, GeoMapProjectionError, GeoMapProjectionService, GeoMapSearchComponent, GeoMapService, GeoMapShellComponent, GeoMapSnapshotComponent, GeoMapSwipeComponent, GeoMapToolbarComponent, GeoMapZoomComponent, GeoOverlapResultComponent, GeoPageHeaderComponent, GeoPageTitleComponent, GeoPaginationComponent, GeoRadioComponent, GeoRowActionsComponent, GeoSelectComponent, GeoSliderComponent, GeoStatCardComponent, GeoStatusTagComponent, GeoStepFormLayoutComponent, GeoStepperComponent, GeoTabDirective, GeoTableComponent, GeoTableFilterComponent, GeoTablePaginationComponent, GeoTableToolbarComponent, GeoTabsComponent, GeoTextareaComponent, GeoToastComponent, GeoToastService, GeoTreeComponent, GeoTypographyComponent, GeoUploadComponent, NgZorroAntdModule, UI_ALERT_DEFAULT_TITLES, UI_STATUS_LABELS, UI_TABLE_MOBILE_BREAKPOINT, applyColumnPickerState, cssVar, geoColorCssVars, geoColorTokens, geoFormatBytes, geoFormatSpeed, geoRadiusCssVars, geoRadiusTokens, geoShadowTokens, geoTypographyTokens, geoUploadPercent, loadColumnPickerState, mergeColumnPickerItems, pickInlineRowActions, pickOverflowRowActions, saveColumnPickerState };
+export { DEFAULT_UI_ROW_ACTIONS, DEFAULT_UI_TABLE_PAGE_SIZE_OPTIONS, GEO_ICON_SIZE_MAP, GEO_LAYOUT_DEFAULT_NOTIFICATIONS, GEO_LAYOUT_DEFAULT_SUBSYSTEMS, GEO_LAYOUT_DEFAULT_USER, GEO_LAYOUT_DEFAULT_USER_MENU, GEO_MAP_BASEMAP_LAYER_ID, GEO_MAP_BUILTIN_PROJECTIONS, GEO_MAP_DEFAULT_BASEMAP_OPTIONS, GEO_MAP_DEFAULT_CENTER, GEO_MAP_DEFAULT_HEIGHT, GEO_MAP_DEFAULT_HELP_SECTIONS, GEO_MAP_DEFAULT_MAX_ZOOM, GEO_MAP_DEFAULT_MIN_ZOOM, GEO_MAP_DEFAULT_PLANNING_LAYERS, GEO_MAP_DEFAULT_PROVINCE_EXTENT_4326, GEO_MAP_DEFAULT_TOOLBAR_ACTIONS, GEO_MAP_DEFAULT_VIEW_PROJECTION, GEO_MAP_DEFAULT_ZOOM, GEO_MAP_DEMO_ADMIN_NODES, GEO_MAP_DEMO_LEGEND_ITEMS, GEO_MAP_DEMO_PARCEL_DETAIL, GEO_MAP_DEMO_THEMATIC_LAYERS, GEO_MAP_ENV_PLACEHOLDERS, GEO_MAP_ESRI_IMAGERY_URL, GEO_MAP_ESRI_STREETS_URL, GEO_MAP_ESRI_TRANSPORT_URL, GEO_MAP_HIGHLIGHT_LAYER_ID, GEO_MAP_LOCATE_TOOLBAR_ACTION, GEO_MAP_MEASURE_LAYER_ID, GEO_MAP_SELECTION_LAYER_ID, GEO_MAP_TOOLBAR_ASSET_BASE, GEO_MAP_TOOLBAR_ICONS, GEO_MAP_TRAFFIC_LAYER_ID, GEO_MAP_TRAFFIC_OVERLAY, GEO_STATUS_COLOR_MAP, GEO_STATUS_LABELS, GEO_TOAST_DEFAULT_TITLES, GEO_TOAST_ICONS, GEO_TYPOGRAPHY_TAG, GEO_TYPOGRAPHY_VARIANTS, GeoAlertComponent, GeoBackButtonComponent, GeoBreadcrumbComponent, GeoButtonComponent, GeoChartComponent, GeoCheckboxComponent, GeoColumnPickerComponent, GeoConfirmModalComponent, GeoDashboardComponent, GeoDatePickerComponent, GeoDateRangePickerComponent, GeoEmptyStateComponent, GeoFeedbackFormComponent, GeoFilePickerComponent, GeoForgotPasswordComponent, GeoFormModalComponent, GeoIconComponent, GeoInputComponent, GeoLayoutActionsDirective, GeoLayoutComponent, GeoLayoutFooterComponent, GeoLayoutHeaderActionsComponent, GeoLayoutHeaderComponent, GeoLayoutSidebarComponent, GeoListPageComponent, GeoLoginComponent, GeoMapAdminFilterComponent, GeoMapBasemapSwitcherComponent, GeoMapComponent, GeoMapController, GeoMapHelpComponent, GeoMapLayerCardComponent, GeoMapLayerPanelComponent, GeoMapLayerService, GeoMapLayersDrawerComponent, GeoMapLegendComponent, GeoMapLocateComponent, GeoMapLocationChipComponent, GeoMapMeasureComponent, GeoMapOpacityComponent, GeoMapParcelPopupComponent, GeoMapProjectionError, GeoMapProjectionService, GeoMapSearchComponent, GeoMapService, GeoMapShellComponent, GeoMapSnapshotComponent, GeoMapSwipeComponent, GeoMapToolbarComponent, GeoMapZoomComponent, GeoOverlapResultComponent, GeoPageHeaderComponent, GeoPageTitleComponent, GeoPaginationComponent, GeoRadioComponent, GeoRowActionsComponent, GeoSelectComponent, GeoSliderComponent, GeoStatCardComponent, GeoStatusTagComponent, GeoStepFormLayoutComponent, GeoStepperComponent, GeoTabDirective, GeoTableComponent, GeoTableFilterComponent, GeoTablePaginationComponent, GeoTableToolbarComponent, GeoTabsComponent, GeoTextareaComponent, GeoToastComponent, GeoToastService, GeoTreeComponent, GeoTypographyComponent, GeoUploadComponent, NgZorroAntdModule, UI_ALERT_DEFAULT_TITLES, UI_STATUS_LABELS, UI_TABLE_MOBILE_BREAKPOINT, applyColumnPickerState, cssVar, geoColorCssVars, geoColorTokens, geoFormatBytes, geoFormatSpeed, geoRadiusCssVars, geoRadiusTokens, geoShadowTokens, geoTypographyTokens, geoUploadPercent, loadColumnPickerState, mergeColumnPickerItems, pickInlineRowActions, pickOverflowRowActions, saveColumnPickerState };
 //# sourceMappingURL=geoit-ui.mjs.map