commons-shared-web-ui 0.0.63 → 0.0.64

package/fesm2022/commons-shared-web-ui.mjs

@@ -5334,7 +5334,7 @@ class SmartFormComponent {
         if (!rawCfg)
             return of([]);
         const cfg = this._normalizeHierarchyCfg(rawCfg);
-        if (!cfg.templateApiUrl)
+        if (!cfg.templateApiUrl && !cfg.templateData)
             return of([]);
         return this._fetchHierarchyTemplate(cfg).pipe(map((template) => template ? this._buildHierarchyFields(cfg, template) : []), catchError(() => of([])));
     }
@@ -5351,6 +5351,8 @@ class SmartFormComponent {
                 templateSelect: ta['select'] || 'default',
                 templateSelectField: ta['selectField'] || 'isDefault',
                 templateSelectCode: ta['selectCode'],
+                templateSelectId: ta['selectId'],
+                templateData: ta['data'],
                 rootCodePath: st['rootCodePath'] || 'rootClassCode',
                 templateCodePath: st['templateCodePath'] || 'templateCode',
                 hierarchyListPath: st['hierarchyListPath'] || 'mdmclasshierarchytemplatestructList',
@@ -5398,6 +5400,11 @@ class SmartFormComponent {
         };
     }
     _fetchHierarchyTemplate(cfg) {
+        // Caller already resolved the exact template object — use it as-is, skipping the HTTP GET
+        // and the templateSelect/templateSelectId matching entirely (there's nothing left to pick
+        // between). See HierarchyCfg.templateData for the staleness tradeoff this accepts.
+        if (cfg.templateData)
+            return of(cfg.templateData);
         const headers = this.getHeaders();
         return this.http.get(cfg.templateApiUrl, { headers }).pipe(map((response) => {
             let list;
@@ -5417,6 +5424,15 @@ class SmartFormComponent {
             if (cfg.templateSelect === 'byCode') {
                 return list.find((t) => this._getPathValue(t, cfg.templateCodePath) === cfg.templateSelectCode) || list[0];
             }
+            if (cfg.templateSelect === 'byId') {
+                // Multiple templates can share the same templateCode (distinguished by templateName,
+                // with one flagged isDefault) — 'byCode' alone can't disambiguate between them, so this
+                // matches the exact template the admin picked by its unique numeric id instead. Falls
+                // back to the tenant default (then list[0]) if the id no longer matches anything.
+                return list.find((t) => t.id === cfg.templateSelectId)
+                    || list.find((t) => !!t[cfg.templateSelectField])
+                    || list[0];
+            }
             return list.find((t) => !!t[cfg.templateSelectField]) || list[0];
         }), catchError(() => of(null)));
     }
@@ -8173,6 +8189,8 @@ class FormSchemaTreeService {
             'GENERATED': 'generated',
             'CHIP': 'chip',
             'LOCATION': 'location',
+            'GEOGRAPHY_DYNAMIC': 'geography',
+            'GEOGRAPHY_NODE': 'geographyNode',
             'GROUP': 'group',
             'SUBFIELDS': 'section',
         };
@@ -8237,11 +8255,11 @@ class FormSchemaTreeService {
             else if (child.type === 'ROW' && child.children?.length) {
                 // ROW children are leaf fields
                 for (const rowChild of child.children) {
-                    leafFields.push(this._buildFieldNode(rowChild));
+                    leafFields.push(...this._buildFieldNodesFor(rowChild));
                 }
             }
             else {
-                leafFields.push(this._buildFieldNode(child));
+                leafFields.push(...this._buildFieldNodesFor(child));
             }
         }
         // Flush remaining leaf fields
@@ -8260,11 +8278,11 @@ class FormSchemaTreeService {
             }
             else if (child.type === 'ROW' && child.children?.length) {
                 for (const rowChild of child.children) {
-                    fields.push(this._buildFieldNode(rowChild));
+                    fields.push(...this._buildFieldNodesFor(rowChild));
                 }
             }
             else {
-                fields.push(this._buildFieldNode(child));
+                fields.push(...this._buildFieldNodesFor(child));
             }
         }
         const isVisible = field.isEnabled ?? field.visible ?? true;
@@ -8296,6 +8314,38 @@ class FormSchemaTreeService {
             isLocked: field.readonly === true,
         };
     }
+    /**
+     * Normal leaf fields produce exactly one SelectionFieldNode. A GEOGRAPHY_DYNAMIC field is
+     * special-cased: it expands into the whole-block toggle PLUS one synthetic toggle per
+     * hierarchy level declared in geographyConfig.field.nodes (e.g. Country/State/District), so a
+     * business user can show/hide individual levels instead of only the entire address block.
+     * This is purely additive to every other field type's tree — see _applyGeographyNodeSelections
+     * for the matching write-back half.
+     */
+    _buildFieldNodesFor(field) {
+        if (field.type === 'GEOGRAPHY_DYNAMIC') {
+            return this._buildGeographyFieldNodes(field);
+        }
+        return [this._buildFieldNode(field)];
+    }
+    /** See _buildFieldNodesFor. Synthetic per-level nodes are ephemeral (rebuilt on every parse from
+     *  geographyConfig.field.nodes) — they don't exist as real schema children, only as a nested map
+     *  on the parent GEOGRAPHY_DYNAMIC field, so they carry a distinguishing `name` for name-keyed
+     *  matching in _applyGeographyNodeSelections rather than object identity. */
+    _buildGeographyFieldNodes(field) {
+        const nodes = [this._buildFieldNode(field)];
+        const geoNodes = field.geographyConfig?.field?.nodes ?? {};
+        for (const classCode of Object.keys(geoNodes)) {
+            const cfg = geoNodes[classCode] ?? {};
+            const synthetic = {
+                name: `${field.name}__node__${classCode}`,
+                label: cfg.label ?? classCode,
+                type: 'GEOGRAPHY_NODE',
+            };
+            nodes.push({ fieldConfig: synthetic, selected: cfg.hidden !== true, isLocked: false });
+        }
+        return nodes;
+    }
     // ────────────────────────────────────────────────────────────────────────────
     // PRIVATE — Apply selection back to FormSchema children
     // ────────────────────────────────────────────────────────────────────────────
@@ -8335,6 +8385,9 @@ class FormSchemaTreeService {
                         rowChild.visible = matchedField.selected; // Backward compatibility
                         fieldIdx++;
                     }
+                    if (rowChild.type === 'GEOGRAPHY_DYNAMIC') {
+                        this._applyGeographyNodeSelections(sections, rowChild);
+                    }
                 }
             }
             else {
@@ -8344,9 +8397,39 @@ class FormSchemaTreeService {
                     child.visible = matchedField.selected; // Backward compatibility
                     fieldIdx++;
                 }
+                if (child.type === 'GEOGRAPHY_DYNAMIC') {
+                    this._applyGeographyNodeSelections(sections, child);
+                }
             }
         }
     }
+    /**
+     * Writes each per-level checkbox state (from the synthetic `${field.name}__node__${classCode}`
+     * entries built by _buildGeographyFieldNodes) back onto the real GEOGRAPHY_DYNAMIC field's
+     * nested `geographyConfig.field.nodes[classCode].hidden`. The whole-block toggle itself is
+     * already handled by the normal name-matched assignment at the call site above — this only
+     * covers the additional per-level entries, which have no corresponding real schema child.
+     */
+    _applyGeographyNodeSelections(sections, field) {
+        const geoNodes = field.geographyConfig?.field?.nodes;
+        if (!geoNodes)
+            return;
+        for (const classCode of Object.keys(geoNodes)) {
+            const nodeField = this._findSelectionFieldByName(sections, `${field.name}__node__${classCode}`);
+            if (nodeField) {
+                geoNodes[classCode] = { ...geoNodes[classCode], hidden: !nodeField.selected };
+            }
+        }
+    }
+    _findSelectionFieldByName(sections, name) {
+        for (const section of sections) {
+            for (const f of section.fields) {
+                if (f.fieldConfig.name === name)
+                    return f;
+            }
+        }
+        return null;
+    }
     _applyFieldsToChildren(selectionFields, children) {
         let fi = 0;
         for (const child of children) {
@@ -8354,22 +8437,40 @@ class FormSchemaTreeService {
                 continue;
             if (child.type === 'ROW' && child.children?.length) {
                 for (const rowChild of child.children) {
-                    if (fi < selectionFields.length) {
-                        rowChild.isEnabled = selectionFields[fi].selected;
-                        rowChild.visible = selectionFields[fi].selected; // Backward compatibility
-                        fi++;
-                    }
+                    fi = this._applyOneFieldSelection(selectionFields, rowChild, fi);
                 }
             }
             else {
-                if (fi < selectionFields.length) {
-                    child.isEnabled = selectionFields[fi].selected;
-                    child.visible = selectionFields[fi].selected; // Backward compatibility
-                    fi++;
-                }
+                fi = this._applyOneFieldSelection(selectionFields, child, fi);
             }
         }
     }
+    /**
+     * Applies the selection state for exactly one schema child at flat position `fi` in
+     * `selectionFields`, and returns the next unconsumed index. Normally that's 1 slot — but
+     * _buildGeographyFieldNodes emits (1 whole-block + 1 per hierarchy level) entries for a single
+     * GEOGRAPHY_DYNAMIC schema child, so this must consume that many slots here too, or every
+     * subsequent sibling field's selection state would read from the wrong (shifted) index.
+     */
+    _applyOneFieldSelection(selectionFields, child, fi) {
+        if (fi < selectionFields.length) {
+            child.isEnabled = selectionFields[fi].selected;
+            child.visible = selectionFields[fi].selected; // Backward compatibility
+        }
+        let consumed = 1;
+        if (child.type === 'GEOGRAPHY_DYNAMIC') {
+            const geoNodes = child.geographyConfig?.field?.nodes ?? {};
+            const classCodes = Object.keys(geoNodes);
+            classCodes.forEach((classCode, i) => {
+                const nodeField = selectionFields[fi + 1 + i];
+                if (nodeField) {
+                    geoNodes[classCode] = { ...geoNodes[classCode], hidden: !nodeField.selected };
+                }
+            });
+            consumed += classCodes.length;
+        }
+        return fi + consumed;
+    }
     _findSelectionField(sections, _field, _index) {
         // Flatten all fields from all sections
         for (const section of sections) {
@@ -8397,12 +8498,12 @@ class FormSchemaTreeService {
             else if (child.type === 'ROW' && child.children?.length) {
                 child.children.forEach((rowChild, ri) => {
                     if (rowChild.isEnabled !== false && rowChild.visible !== false) {
-                        children.push(this._buildConfiguratorFieldNode(rowChild, [...childPath, ri]));
+                        children.push(this._buildConfiguratorLeafNode(rowChild, [...childPath, ri]));
                     }
                 });
             }
             else {
-                children.push(this._buildConfiguratorFieldNode(child, childPath));
+                children.push(this._buildConfiguratorLeafNode(child, childPath));
             }
         });
         return {
@@ -8428,12 +8529,12 @@ class FormSchemaTreeService {
             else if (child.type === 'ROW' && child.children?.length) {
                 child.children.forEach((rowChild, ri) => {
                     if (rowChild.isEnabled !== false && rowChild.visible !== false) {
-                        children.push(this._buildConfiguratorFieldNode(rowChild, [...childPath, ri]));
+                        children.push(this._buildConfiguratorLeafNode(rowChild, [...childPath, ri]));
                     }
                 });
             }
             else {
-                children.push(this._buildConfiguratorFieldNode(child, childPath));
+                children.push(this._buildConfiguratorLeafNode(child, childPath));
             }
         });
         return {
@@ -8457,6 +8558,61 @@ class FormSchemaTreeService {
             children: [],
         };
     }
+    /** Dispatches to the GEOGRAPHY_DYNAMIC-aware builder when needed; otherwise a normal leaf node. */
+    _buildConfiguratorLeafNode(field, path) {
+        if (field.type === 'GEOGRAPHY_DYNAMIC') {
+            return this._buildGeographyConfiguratorNode(field, path);
+        }
+        return this._buildConfiguratorFieldNode(field, path);
+    }
+    /**
+     * Builds the Configurator tree entry for a GEOGRAPHY_DYNAMIC field ("Address"): the field
+     * itself stays selectable/editable as normal (its own label/colSpan/etc.), but it ALSO gets
+     * one synthetic child per hierarchy level declared in geographyConfig.field.nodes (skipping
+     * any the admin already hid via Field Selection), so each level's own label can be
+     * individually edited. These children share the parent's `path` (there's no real schema
+     * array index for a nested map entry) — `geoClassCode` is what actually identifies which
+     * one a selection/patch targets. See FieldConfiguratorService for the read/write side.
+     */
+    _buildGeographyConfiguratorNode(field, path) {
+        const geoNodes = field.geographyConfig?.field?.nodes ?? {};
+        const children = Object.keys(geoNodes)
+            .filter((code) => geoNodes[code]?.hidden !== true)
+            .map((code) => ({
+            id: `${path.join('-')}__geo__${code}`,
+            label: geoNodes[code]?.label || code,
+            type: 'field',
+            expanded: false,
+            fieldConfig: null,
+            path,
+            children: [],
+            geoClassCode: code,
+        }));
+        return {
+            id: field.name || `field-${path.join('-')}`,
+            label: field.label || field.name || 'Field',
+            type: 'field',
+            expanded: false,
+            fieldConfig: field,
+            path,
+            children,
+        };
+    }
+    /**
+     * Applies a config patch (label/colSpan only — see field-type-schema.map.ts's
+     * `geographyNode` entry) to one hierarchy level's entry inside a GEOGRAPHY_DYNAMIC field's
+     * nested `geographyConfig.field.nodes[classCode]`, since that's not a real schema array
+     * child that applyFieldPatchToSchema's index-path lookup can reach.
+     */
+    applyGeographyNodePatchToSchema(path, classCode, patch, originalSchema) {
+        const schema = JSON.parse(JSON.stringify(originalSchema));
+        const field = this.findFieldByPath(schema, path);
+        const nodes = field?.geographyConfig?.field?.nodes;
+        if (nodes && nodes[classCode]) {
+            nodes[classCode] = { ...nodes[classCode], ...patch };
+        }
+        return schema;
+    }
     _buildConfiguratorChildNodes(children, basePath) {
         const nodes = [];
         children.forEach((child, ci) => {
@@ -8469,12 +8625,12 @@ class FormSchemaTreeService {
             else if (child.type === 'ROW' && child.children?.length) {
                 child.children.forEach((rowChild, ri) => {
                     if (rowChild.isEnabled !== false && rowChild.visible !== false) {
-                        nodes.push(this._buildConfiguratorFieldNode(rowChild, [...childPath, ri]));
+                        nodes.push(this._buildConfiguratorLeafNode(rowChild, [...childPath, ri]));
                     }
                 });
             }
             else {
-                nodes.push(this._buildConfiguratorFieldNode(child, childPath));
+                nodes.push(this._buildConfiguratorLeafNode(child, childPath));
             }
         });
         return nodes;
@@ -9006,6 +9162,7 @@ class FieldConfiguratorService {
     _state = signal({
         tree: [],
         selectedFieldPath: null,
+        selectedGeoClassCode: null,
         schema: null,
     }, ...(ngDevMode ? [{ debugName: "_state" }] : []));
     treeService = new FormSchemaTreeService();
@@ -9013,11 +9170,33 @@ class FieldConfiguratorService {
     tree = computed(() => this._state().tree, ...(ngDevMode ? [{ debugName: "tree" }] : []));
     schema = computed(() => this._state().schema, ...(ngDevMode ? [{ debugName: "schema" }] : []));
     selectedFieldPath = computed(() => this._state().selectedFieldPath, ...(ngDevMode ? [{ debugName: "selectedFieldPath" }] : []));
+    selectedGeoClassCode = computed(() => this._state().selectedGeoClassCode, ...(ngDevMode ? [{ debugName: "selectedGeoClassCode" }] : []));
+    /**
+     * Resolves to the real FieldConfig at the selected path — UNLESS the selection is a
+     * synthetic geography-hierarchy-level node (selectedGeoClassCode set), in which case this
+     * returns a small synthetic FieldConfig built from that level's entry in the parent
+     * GEOGRAPHY_DYNAMIC field's `geographyConfig.field.nodes` map instead. Every downstream
+     * consumer (selectedFieldInfo, selectedFieldBuilderType, the config panel itself) works
+     * against whichever shape comes out of here unchanged — mapFieldTypeToBuilderType('GEOGRAPHY_NODE')
+     * resolves the right minimal config schema (label/colSpan only, see field-type-schema.map.ts).
+     */
     selectedField = computed(() => {
-        const { schema, selectedFieldPath } = this._state();
+        const { schema, selectedFieldPath, selectedGeoClassCode } = this._state();
         if (!schema || !selectedFieldPath)
             return null;
-        return this.treeService.findFieldByPath(schema, selectedFieldPath);
+        const realField = this.treeService.findFieldByPath(schema, selectedFieldPath);
+        if (!realField)
+            return null;
+        if (selectedGeoClassCode) {
+            const nodeCfg = realField.geographyConfig?.field?.nodes?.[selectedGeoClassCode] ?? {};
+            return {
+                name: selectedGeoClassCode,
+                label: nodeCfg.label,
+                colSpan: nodeCfg.colSpan,
+                type: 'GEOGRAPHY_NODE',
+            };
+        }
+        return realField;
     }, ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
     selectedFieldInfo = computed(() => {
         const field = this.selectedField();
@@ -9056,24 +9235,35 @@ class FieldConfiguratorService {
             // If preserveSelection is truthy, we definitely keep it.
             // Otherwise, we still try to keep it IF the path is still valid in the new schema.
             let newPath = s.selectedFieldPath;
+            let newGeoClassCode = s.selectedGeoClassCode;
             if (!preserveSelection && newPath) {
-                const stillExists = !!this.treeService.findFieldByPath(schema, newPath);
-                if (!stillExists)
+                const field = this.treeService.findFieldByPath(schema, newPath);
+                if (!field) {
                     newPath = null;
+                    newGeoClassCode = null;
+                }
+                else if (newGeoClassCode && !field.geographyConfig?.field?.nodes?.[newGeoClassCode]) {
+                    // The selected hierarchy level no longer exists on this field (e.g. the address
+                    // template changed) — fall back to the parent field itself rather than dangling.
+                    newGeoClassCode = null;
+                }
             }
             return {
                 ...s,
                 tree,
                 selectedFieldPath: newPath,
+                selectedGeoClassCode: newGeoClassCode,
                 schema: JSON.parse(JSON.stringify(schema)),
             };
         });
     }
     /**
-     * Select a field by its path. Pass null to deselect.
+     * Select a field by its path. Pass null to deselect. `geoClassCode` selects a synthetic
+     * geography-hierarchy-level child of the GEOGRAPHY_DYNAMIC field at `path` instead of the
+     * field itself — see ConfiguratorTreeNode.geoClassCode / selectedField above.
      */
-    selectField(path) {
-        this._state.update(s => ({ ...s, selectedFieldPath: path }));
+    selectField(path, geoClassCode = null) {
+        this._state.update(s => ({ ...s, selectedFieldPath: path, selectedGeoClassCode: geoClassCode }));
     }
     /**
      * Toggle a tree node's expanded state.
@@ -9089,10 +9279,12 @@ class FieldConfiguratorService {
      * Rebuilds the schema and tree nodes immutably.
      */
     patchSelectedField(patch) {
-        const { schema, selectedFieldPath, tree } = this._state();
+        const { schema, selectedFieldPath, selectedGeoClassCode, tree } = this._state();
         if (!schema || !selectedFieldPath)
             return;
-        const newSchema = this.treeService.applyFieldPatchToSchema(selectedFieldPath, patch, schema);
+        const newSchema = selectedGeoClassCode
+            ? this.treeService.applyGeographyNodePatchToSchema(selectedFieldPath, selectedGeoClassCode, patch, schema)
+            : this.treeService.applyFieldPatchToSchema(selectedFieldPath, patch, schema);
         // Rebuild the tree to reflect label changes etc.
         const newTree = this.treeService.parseSchemaToConfiguratorTree(newSchema);
         // Preserve expanded states from the old tree
@@ -9100,15 +9292,19 @@ class FieldConfiguratorService {
         this._state.set({
             schema: newSchema,
             selectedFieldPath,
+            selectedGeoClassCode,
             tree: newTree,
         });
     }
     /**
      * Change the type (and optionally subType) of the currently selected field.
      * Mapping goes from builderType keys (e.g. 'richText') → {type, subType?}.
-     * DROPDOWN fields cannot be changed and are guarded here as well.
+     * DROPDOWN fields cannot be changed and are guarded here as well — same for a synthetic
+     * geography-hierarchy-level selection, which has no real `type` to switch at all.
      */
     changeFieldType(builderType) {
+        if (this._state().selectedGeoClassCode)
+            return;
         const currentField = this.selectedField();
         if (!currentField)
             return;
@@ -9516,6 +9712,17 @@ const DEFAULT_FIELD_TYPE_SCHEMA_MAP = {
             hint: 'Use data.field_name to reference other fields'
         },
     ]), FLAGS_SECTION, ADVANCED_SECTION),
+    // ── GEOGRAPHY (GEOGRAPHY_DYNAMIC → geographyConfig, whole-block settings) ──
+    geography: buildSchema(BASE_SECTION, FLAGS_SECTION, ADVANCED_SECTION),
+    // ── GEOGRAPHY NODE (one hierarchy level of a GEOGRAPHY_DYNAMIC field, e.g. Country/State/
+    //    District — a synthetic child, not a real schema field; see
+    //    FormSchemaTreeService.applyGeographyNodePatchToSchema). Only label/colSpan are
+    //    meaningful per level: mandatoriness is always forced off for every field but Center
+    //    Name (see lc-master-form.ts's lockRequiredFields), and name/payloadPath/API config are
+    //    all derived from the resolved template, not editable per-level. ─────────────────────
+    geographyNode: buildSchema(section('Basic Settings', [
+        row(F.label, F.colSpan),
+    ])),
     // ── GROUP & SECTION ───────────────────────────────────────────────────────
     group: buildSchema(section('Group Settings', [
         row(F.label, F.name),
@@ -9531,18 +9738,21 @@ const DEFAULT_FIELD_TYPE_SCHEMA_MAP = {
 class ConfiguratorTreeComponent {
     tree = [];
     selectedFieldPath = null;
+    /** Distinguishes a GEOGRAPHY_DYNAMIC field itself from one of its synthetic hierarchy-level
+     *  children — both share the same `path`, so `path` alone can't tell them apart. */
+    selectedGeoClassCode = null;
     selectField = new EventEmitter();
     toggleExpanded = new EventEmitter();
     onNodeClick(node) {
         if (node.type === 'field') {
-            this.selectField.emit(node.path);
+            this.selectField.emit({ path: node.path, geoClassCode: node.geoClassCode });
         }
         else {
             this.toggleExpanded.emit(node.id);
         }
     }
     onFieldSelect(node) {
-        this.selectField.emit(node.path);
+        this.selectField.emit({ path: node.path, geoClassCode: node.geoClassCode });
     }
     onToggleExpand(node, event) {
         event.stopPropagation();
@@ -9551,7 +9761,9 @@ class ConfiguratorTreeComponent {
     isSelected(node) {
         if (!this.selectedFieldPath || !node.path)
             return false;
-        return this.pathsEqual(node.path, this.selectedFieldPath);
+        if (!this.pathsEqual(node.path, this.selectedFieldPath))
+            return false;
+        return (node.geoClassCode ?? null) === (this.selectedGeoClassCode ?? null);
     }
     trackByNodeId(_index, node) {
         return node.id;
@@ -9562,15 +9774,17 @@ class ConfiguratorTreeComponent {
         return a.every((v, i) => v === b[i]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfiguratorTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfiguratorTreeComponent, isStandalone: false, selector: "lib-configurator-tree", inputs: { tree: "tree", selectedFieldPath: "selectedFieldPath" }, outputs: { selectField: "selectField", toggleExpanded: "toggleExpanded" }, ngImport: i0, template: "<div class=\"fb-cfg-tree\">\r\n  <div class=\"fb-cfg-tree__header\">\r\n    <h4 class=\"fb-cfg-tree__title\">Field Tree</h4>\r\n    <p class=\"fb-cfg-tree__subtitle\">Select a field to configure</p>\r\n  </div>\r\n\r\n  <div class=\"fb-cfg-tree__scrollable\">\r\n    @for (node of tree; track trackByNodeId($index, node)) {\r\n      <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\r\n    }\r\n\r\n    @if (tree.length === 0) {\r\n      <div class=\"fb-cfg-tree__empty\">\r\n        No fields to configure.\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Recursive tree node template -->\r\n<ng-template #treeNodeTpl let-node let-depth=\"depth\">\r\n  @if (node.type === 'field') {\r\n    <!-- Field node (clickable leaf) -->\r\n    <div\r\n      class=\"fb-cfg-tree-item\"\r\n      [class.fb-cfg-tree-item--active]=\"isSelected(node)\"\r\n      (click)=\"onFieldSelect(node)\"\r\n      [style.padding-left.px]=\"16 + depth * 16\"\r\n    >\r\n      <span class=\"fb-cfg-tree-item__drag\" title=\"Drag to reorder\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/>\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/>\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>\r\n        </svg>\r\n      </span>\r\n      <div class=\"fb-cfg-tree-item__content\">\r\n        <span class=\"fb-cfg-tree-item__label\">{{ node.label }}</span>\r\n        @if (node.fieldConfig?.type) {\r\n          <span class=\"fb-cfg-tree-item__type\">{{ node.fieldConfig.type }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <!-- Group or Section node (expandable) -->\r\n    <div\r\n      class=\"fb-cfg-tree-section\"\r\n      [style.padding-left.px]=\"8 + depth * 12\"\r\n    >\r\n      <div class=\"fb-cfg-tree-section__header\" (click)=\"onNodeClick(node)\">\r\n        <div class=\"fb-cfg-tree-section__title-group\">\r\n          <span\r\n            class=\"fb-cfg-tree-section__chevron\"\r\n            [class.fb-cfg-tree-section__chevron--expanded]=\"node.expanded\"\r\n          >\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n              <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n            </svg>\r\n          </span>\r\n          <span class=\"fb-cfg-tree-section__label\">{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (node.expanded && node.children.length > 0) {\r\n        <div class=\"fb-cfg-tree-section__children\">\r\n          @for (child of node.children; track trackByNodeId($index, child)) {\r\n            <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree__header{padding:16px 20px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-tree-header-bg, #ffffff);flex-shrink:0}@media(max-width:768px){.fb-cfg-tree__header{padding:12px 16px}}@media(max-width:640px){.fb-cfg-tree__header{padding:10px 12px}}.fb-cfg-tree__title{margin:0;font-size:14px;font-weight:700;color:var(--fb-fc-tree-title-color, #111827)}@media(max-width:640px){.fb-cfg-tree__title{font-size:13px}}.fb-cfg-tree__subtitle{margin:4px 0 0;font-size:11px;color:var(--fb-fc-tree-subtitle-color, #6b7280);letter-spacing:.02em}@media(max-width:640px){.fb-cfg-tree__subtitle{font-size:10px}}.fb-cfg-tree__scrollable{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px}@media(max-width:768px){.fb-cfg-tree__scrollable{padding:12px}}@media(max-width:640px){.fb-cfg-tree__scrollable{padding:8px}}.fb-cfg-tree__empty{padding:32px 16px;text-align:center;color:var(--fb-fc-empty-color, #9ca3af);font-size:13px}@media(max-width:640px){.fb-cfg-tree__empty{padding:24px 12px;font-size:12px}}.fb-cfg-tree-section{margin-bottom:16px}@media(max-width:768px){.fb-cfg-tree-section{margin-bottom:12px}}@media(max-width:640px){.fb-cfg-tree-section{margin-bottom:8px}}.fb-cfg-tree-section__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;border-bottom:1px solid var(--fb-fc-section-divider, #f3f4f6);margin-bottom:8px;cursor:pointer}@media(max-width:640px){.fb-cfg-tree-section__header{padding:3px 6px 6px;margin-bottom:6px}}.fb-cfg-tree-section__header:hover{background:var(--fb-fc-section-hover, #f9fafb);border-radius:6px}.fb-cfg-tree-section__title-group{display:flex;align-items:center;gap:6px}@media(max-width:640px){.fb-cfg-tree-section__title-group{gap:4px}}.fb-cfg-tree-section__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-section__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-section__label{font-size:13px;font-weight:700;color:var(--fb-fc-section-label-color, #111827);text-transform:uppercase;letter-spacing:.05em}@media(max-width:640px){.fb-cfg-tree-section__label{font-size:12px;letter-spacing:.02em}}.fb-cfg-tree-section__children{display:flex;flex-direction:column;gap:8px}@media(max-width:640px){.fb-cfg-tree-section__children{gap:6px}}.fb-cfg-tree-item{display:flex;align-items:center;padding:12px;background:var(--fb-fc-item-bg, #ffffff);border:1px solid var(--fb-fc-item-border, #e5e7eb);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-item:hover{border-color:var(--fb-fc-item-hover-border, #3b82f6);box-shadow:0 2px 8px #3b82f614}.fb-cfg-tree-item--active{border-color:var(--fb-fc-item-active-border, #3b82f6);background:var(--fb-fc-item-active-bg, #f0f7ff);box-shadow:0 0 0 1px var(--fb-fc-item-active-border, #3b82f6)}.fb-cfg-tree-item__drag{color:var(--fb-fc-drag-color, #d1d5db);cursor:grab;margin-right:8px;display:flex}.fb-cfg-tree-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fb-cfg-tree-item__label{font-size:13px;font-weight:600;color:var(--fb-fc-item-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-cfg-tree-item__type{font-size:10px;color:var(--fb-fc-item-type-color, #6b7280);text-transform:uppercase;letter-spacing:.05em;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfiguratorTreeComponent, isStandalone: false, selector: "lib-configurator-tree", inputs: { tree: "tree", selectedFieldPath: "selectedFieldPath", selectedGeoClassCode: "selectedGeoClassCode" }, outputs: { selectField: "selectField", toggleExpanded: "toggleExpanded" }, ngImport: i0, template: "<div class=\"fb-cfg-tree\">\r\n  <div class=\"fb-cfg-tree__header\">\r\n    <h4 class=\"fb-cfg-tree__title\">Field Tree</h4>\r\n    <p class=\"fb-cfg-tree__subtitle\">Select a field to configure</p>\r\n  </div>\r\n\r\n  <div class=\"fb-cfg-tree__scrollable\">\r\n    @for (node of tree; track trackByNodeId($index, node)) {\r\n      <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\r\n    }\r\n\r\n    @if (tree.length === 0) {\r\n      <div class=\"fb-cfg-tree__empty\">\r\n        No fields to configure.\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Recursive tree node template -->\r\n<ng-template #treeNodeTpl let-node let-depth=\"depth\">\r\n  @if (node.type === 'field') {\r\n    <!-- Field node (clickable leaf) \u2014 may itself have synthetic children (see\r\n         geoClassCode), in which case it also gets an expand chevron. -->\r\n    <div\r\n      class=\"fb-cfg-tree-item\"\r\n      [class.fb-cfg-tree-item--active]=\"isSelected(node)\"\r\n      (click)=\"onFieldSelect(node)\"\r\n      [style.padding-left.px]=\"16 + depth * 16\"\r\n    >\r\n      @if (node.children.length > 0) {\r\n        <span\r\n          class=\"fb-cfg-tree-item__chevron\"\r\n          [class.fb-cfg-tree-item__chevron--expanded]=\"node.expanded\"\r\n          (click)=\"onToggleExpand(node, $event)\"\r\n        >\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n          </svg>\r\n        </span>\r\n      }\r\n      <span class=\"fb-cfg-tree-item__drag\" title=\"Drag to reorder\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/>\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/>\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>\r\n        </svg>\r\n      </span>\r\n      <div class=\"fb-cfg-tree-item__content\">\r\n        <span class=\"fb-cfg-tree-item__label\">{{ node.label }}</span>\r\n        @if (node.fieldConfig?.type) {\r\n          <span class=\"fb-cfg-tree-item__type\">{{ node.fieldConfig.type }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (node.children.length > 0 && node.expanded) {\r\n      <div class=\"fb-cfg-tree-section__children\">\r\n        @for (child of node.children; track trackByNodeId($index, child)) {\r\n          <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  } @else {\r\n    <!-- Group or Section node (expandable) -->\r\n    <div\r\n      class=\"fb-cfg-tree-section\"\r\n      [style.padding-left.px]=\"8 + depth * 12\"\r\n    >\r\n      <div class=\"fb-cfg-tree-section__header\" (click)=\"onNodeClick(node)\">\r\n        <div class=\"fb-cfg-tree-section__title-group\">\r\n          <span\r\n            class=\"fb-cfg-tree-section__chevron\"\r\n            [class.fb-cfg-tree-section__chevron--expanded]=\"node.expanded\"\r\n          >\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n              <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n            </svg>\r\n          </span>\r\n          <span class=\"fb-cfg-tree-section__label\">{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (node.expanded && node.children.length > 0) {\r\n        <div class=\"fb-cfg-tree-section__children\">\r\n          @for (child of node.children; track trackByNodeId($index, child)) {\r\n            <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree__header{padding:16px 20px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-tree-header-bg, #ffffff);flex-shrink:0}@media(max-width:768px){.fb-cfg-tree__header{padding:12px 16px}}@media(max-width:640px){.fb-cfg-tree__header{padding:10px 12px}}.fb-cfg-tree__title{margin:0;font-size:14px;font-weight:700;color:var(--fb-fc-tree-title-color, #111827)}@media(max-width:640px){.fb-cfg-tree__title{font-size:13px}}.fb-cfg-tree__subtitle{margin:4px 0 0;font-size:11px;color:var(--fb-fc-tree-subtitle-color, #6b7280);letter-spacing:.02em}@media(max-width:640px){.fb-cfg-tree__subtitle{font-size:10px}}.fb-cfg-tree__scrollable{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px}@media(max-width:768px){.fb-cfg-tree__scrollable{padding:12px}}@media(max-width:640px){.fb-cfg-tree__scrollable{padding:8px}}.fb-cfg-tree__empty{padding:32px 16px;text-align:center;color:var(--fb-fc-empty-color, #9ca3af);font-size:13px}@media(max-width:640px){.fb-cfg-tree__empty{padding:24px 12px;font-size:12px}}.fb-cfg-tree-section{margin-bottom:16px}@media(max-width:768px){.fb-cfg-tree-section{margin-bottom:12px}}@media(max-width:640px){.fb-cfg-tree-section{margin-bottom:8px}}.fb-cfg-tree-section__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;border-bottom:1px solid var(--fb-fc-section-divider, #f3f4f6);margin-bottom:8px;cursor:pointer}@media(max-width:640px){.fb-cfg-tree-section__header{padding:3px 6px 6px;margin-bottom:6px}}.fb-cfg-tree-section__header:hover{background:var(--fb-fc-section-hover, #f9fafb);border-radius:6px}.fb-cfg-tree-section__title-group{display:flex;align-items:center;gap:6px}@media(max-width:640px){.fb-cfg-tree-section__title-group{gap:4px}}.fb-cfg-tree-section__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-section__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-section__label{font-size:13px;font-weight:700;color:var(--fb-fc-section-label-color, #111827);text-transform:uppercase;letter-spacing:.05em}@media(max-width:640px){.fb-cfg-tree-section__label{font-size:12px;letter-spacing:.02em}}.fb-cfg-tree-section__children{display:flex;flex-direction:column;gap:8px}@media(max-width:640px){.fb-cfg-tree-section__children{gap:6px}}.fb-cfg-tree-item{display:flex;align-items:center;padding:12px;background:var(--fb-fc-item-bg, #ffffff);border:1px solid var(--fb-fc-item-border, #e5e7eb);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-item:hover{border-color:var(--fb-fc-item-hover-border, #3b82f6);box-shadow:0 2px 8px #3b82f614}.fb-cfg-tree-item--active{border-color:var(--fb-fc-item-active-border, #3b82f6);background:var(--fb-fc-item-active-bg, #f0f7ff);box-shadow:0 0 0 1px var(--fb-fc-item-active-border, #3b82f6)}.fb-cfg-tree-item__drag{color:var(--fb-fc-drag-color, #d1d5db);cursor:grab;margin-right:8px;display:flex}.fb-cfg-tree-item__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1);margin-right:4px;cursor:pointer}.fb-cfg-tree-item__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fb-cfg-tree-item__label{font-size:13px;font-weight:600;color:var(--fb-fc-item-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-cfg-tree-item__type{font-size:10px;color:var(--fb-fc-item-type-color, #6b7280);text-transform:uppercase;letter-spacing:.05em;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfiguratorTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configurator-tree', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-cfg-tree\">\r\n  <div class=\"fb-cfg-tree__header\">\r\n    <h4 class=\"fb-cfg-tree__title\">Field Tree</h4>\r\n    <p class=\"fb-cfg-tree__subtitle\">Select a field to configure</p>\r\n  </div>\r\n\r\n  <div class=\"fb-cfg-tree__scrollable\">\r\n    @for (node of tree; track trackByNodeId($index, node)) {\r\n      <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\r\n    }\r\n\r\n    @if (tree.length === 0) {\r\n      <div class=\"fb-cfg-tree__empty\">\r\n        No fields to configure.\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Recursive tree node template -->\r\n<ng-template #treeNodeTpl let-node let-depth=\"depth\">\r\n  @if (node.type === 'field') {\r\n    <!-- Field node (clickable leaf) -->\r\n    <div\r\n      class=\"fb-cfg-tree-item\"\r\n      [class.fb-cfg-tree-item--active]=\"isSelected(node)\"\r\n      (click)=\"onFieldSelect(node)\"\r\n      [style.padding-left.px]=\"16 + depth * 16\"\r\n    >\r\n      <span class=\"fb-cfg-tree-item__drag\" title=\"Drag to reorder\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/>\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/>\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>\r\n        </svg>\r\n      </span>\r\n      <div class=\"fb-cfg-tree-item__content\">\r\n        <span class=\"fb-cfg-tree-item__label\">{{ node.label }}</span>\r\n        @if (node.fieldConfig?.type) {\r\n          <span class=\"fb-cfg-tree-item__type\">{{ node.fieldConfig.type }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <!-- Group or Section node (expandable) -->\r\n    <div\r\n      class=\"fb-cfg-tree-section\"\r\n      [style.padding-left.px]=\"8 + depth * 12\"\r\n    >\r\n      <div class=\"fb-cfg-tree-section__header\" (click)=\"onNodeClick(node)\">\r\n        <div class=\"fb-cfg-tree-section__title-group\">\r\n          <span\r\n            class=\"fb-cfg-tree-section__chevron\"\r\n            [class.fb-cfg-tree-section__chevron--expanded]=\"node.expanded\"\r\n          >\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n              <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n            </svg>\r\n          </span>\r\n          <span class=\"fb-cfg-tree-section__label\">{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (node.expanded && node.children.length > 0) {\r\n        <div class=\"fb-cfg-tree-section__children\">\r\n          @for (child of node.children; track trackByNodeId($index, child)) {\r\n            <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree__header{padding:16px 20px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-tree-header-bg, #ffffff);flex-shrink:0}@media(max-width:768px){.fb-cfg-tree__header{padding:12px 16px}}@media(max-width:640px){.fb-cfg-tree__header{padding:10px 12px}}.fb-cfg-tree__title{margin:0;font-size:14px;font-weight:700;color:var(--fb-fc-tree-title-color, #111827)}@media(max-width:640px){.fb-cfg-tree__title{font-size:13px}}.fb-cfg-tree__subtitle{margin:4px 0 0;font-size:11px;color:var(--fb-fc-tree-subtitle-color, #6b7280);letter-spacing:.02em}@media(max-width:640px){.fb-cfg-tree__subtitle{font-size:10px}}.fb-cfg-tree__scrollable{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px}@media(max-width:768px){.fb-cfg-tree__scrollable{padding:12px}}@media(max-width:640px){.fb-cfg-tree__scrollable{padding:8px}}.fb-cfg-tree__empty{padding:32px 16px;text-align:center;color:var(--fb-fc-empty-color, #9ca3af);font-size:13px}@media(max-width:640px){.fb-cfg-tree__empty{padding:24px 12px;font-size:12px}}.fb-cfg-tree-section{margin-bottom:16px}@media(max-width:768px){.fb-cfg-tree-section{margin-bottom:12px}}@media(max-width:640px){.fb-cfg-tree-section{margin-bottom:8px}}.fb-cfg-tree-section__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;border-bottom:1px solid var(--fb-fc-section-divider, #f3f4f6);margin-bottom:8px;cursor:pointer}@media(max-width:640px){.fb-cfg-tree-section__header{padding:3px 6px 6px;margin-bottom:6px}}.fb-cfg-tree-section__header:hover{background:var(--fb-fc-section-hover, #f9fafb);border-radius:6px}.fb-cfg-tree-section__title-group{display:flex;align-items:center;gap:6px}@media(max-width:640px){.fb-cfg-tree-section__title-group{gap:4px}}.fb-cfg-tree-section__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-section__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-section__label{font-size:13px;font-weight:700;color:var(--fb-fc-section-label-color, #111827);text-transform:uppercase;letter-spacing:.05em}@media(max-width:640px){.fb-cfg-tree-section__label{font-size:12px;letter-spacing:.02em}}.fb-cfg-tree-section__children{display:flex;flex-direction:column;gap:8px}@media(max-width:640px){.fb-cfg-tree-section__children{gap:6px}}.fb-cfg-tree-item{display:flex;align-items:center;padding:12px;background:var(--fb-fc-item-bg, #ffffff);border:1px solid var(--fb-fc-item-border, #e5e7eb);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-item:hover{border-color:var(--fb-fc-item-hover-border, #3b82f6);box-shadow:0 2px 8px #3b82f614}.fb-cfg-tree-item--active{border-color:var(--fb-fc-item-active-border, #3b82f6);background:var(--fb-fc-item-active-bg, #f0f7ff);box-shadow:0 0 0 1px var(--fb-fc-item-active-border, #3b82f6)}.fb-cfg-tree-item__drag{color:var(--fb-fc-drag-color, #d1d5db);cursor:grab;margin-right:8px;display:flex}.fb-cfg-tree-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fb-cfg-tree-item__label{font-size:13px;font-weight:600;color:var(--fb-fc-item-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-cfg-tree-item__type{font-size:10px;color:var(--fb-fc-item-type-color, #6b7280);text-transform:uppercase;letter-spacing:.05em;font-weight:500}\n"] }]
+            args: [{ selector: 'lib-configurator-tree', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-cfg-tree\">\r\n  <div class=\"fb-cfg-tree__header\">\r\n    <h4 class=\"fb-cfg-tree__title\">Field Tree</h4>\r\n    <p class=\"fb-cfg-tree__subtitle\">Select a field to configure</p>\r\n  </div>\r\n\r\n  <div class=\"fb-cfg-tree__scrollable\">\r\n    @for (node of tree; track trackByNodeId($index, node)) {\r\n      <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\r\n    }\r\n\r\n    @if (tree.length === 0) {\r\n      <div class=\"fb-cfg-tree__empty\">\r\n        No fields to configure.\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Recursive tree node template -->\r\n<ng-template #treeNodeTpl let-node let-depth=\"depth\">\r\n  @if (node.type === 'field') {\r\n    <!-- Field node (clickable leaf) \u2014 may itself have synthetic children (see\r\n         geoClassCode), in which case it also gets an expand chevron. -->\r\n    <div\r\n      class=\"fb-cfg-tree-item\"\r\n      [class.fb-cfg-tree-item--active]=\"isSelected(node)\"\r\n      (click)=\"onFieldSelect(node)\"\r\n      [style.padding-left.px]=\"16 + depth * 16\"\r\n    >\r\n      @if (node.children.length > 0) {\r\n        <span\r\n          class=\"fb-cfg-tree-item__chevron\"\r\n          [class.fb-cfg-tree-item__chevron--expanded]=\"node.expanded\"\r\n          (click)=\"onToggleExpand(node, $event)\"\r\n        >\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n          </svg>\r\n        </span>\r\n      }\r\n      <span class=\"fb-cfg-tree-item__drag\" title=\"Drag to reorder\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/>\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/>\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>\r\n        </svg>\r\n      </span>\r\n      <div class=\"fb-cfg-tree-item__content\">\r\n        <span class=\"fb-cfg-tree-item__label\">{{ node.label }}</span>\r\n        @if (node.fieldConfig?.type) {\r\n          <span class=\"fb-cfg-tree-item__type\">{{ node.fieldConfig.type }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (node.children.length > 0 && node.expanded) {\r\n      <div class=\"fb-cfg-tree-section__children\">\r\n        @for (child of node.children; track trackByNodeId($index, child)) {\r\n          <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  } @else {\r\n    <!-- Group or Section node (expandable) -->\r\n    <div\r\n      class=\"fb-cfg-tree-section\"\r\n      [style.padding-left.px]=\"8 + depth * 12\"\r\n    >\r\n      <div class=\"fb-cfg-tree-section__header\" (click)=\"onNodeClick(node)\">\r\n        <div class=\"fb-cfg-tree-section__title-group\">\r\n          <span\r\n            class=\"fb-cfg-tree-section__chevron\"\r\n            [class.fb-cfg-tree-section__chevron--expanded]=\"node.expanded\"\r\n          >\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n              <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n            </svg>\r\n          </span>\r\n          <span class=\"fb-cfg-tree-section__label\">{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (node.expanded && node.children.length > 0) {\r\n        <div class=\"fb-cfg-tree-section__children\">\r\n          @for (child of node.children; track trackByNodeId($index, child)) {\r\n            <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree__header{padding:16px 20px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-tree-header-bg, #ffffff);flex-shrink:0}@media(max-width:768px){.fb-cfg-tree__header{padding:12px 16px}}@media(max-width:640px){.fb-cfg-tree__header{padding:10px 12px}}.fb-cfg-tree__title{margin:0;font-size:14px;font-weight:700;color:var(--fb-fc-tree-title-color, #111827)}@media(max-width:640px){.fb-cfg-tree__title{font-size:13px}}.fb-cfg-tree__subtitle{margin:4px 0 0;font-size:11px;color:var(--fb-fc-tree-subtitle-color, #6b7280);letter-spacing:.02em}@media(max-width:640px){.fb-cfg-tree__subtitle{font-size:10px}}.fb-cfg-tree__scrollable{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px}@media(max-width:768px){.fb-cfg-tree__scrollable{padding:12px}}@media(max-width:640px){.fb-cfg-tree__scrollable{padding:8px}}.fb-cfg-tree__empty{padding:32px 16px;text-align:center;color:var(--fb-fc-empty-color, #9ca3af);font-size:13px}@media(max-width:640px){.fb-cfg-tree__empty{padding:24px 12px;font-size:12px}}.fb-cfg-tree-section{margin-bottom:16px}@media(max-width:768px){.fb-cfg-tree-section{margin-bottom:12px}}@media(max-width:640px){.fb-cfg-tree-section{margin-bottom:8px}}.fb-cfg-tree-section__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;border-bottom:1px solid var(--fb-fc-section-divider, #f3f4f6);margin-bottom:8px;cursor:pointer}@media(max-width:640px){.fb-cfg-tree-section__header{padding:3px 6px 6px;margin-bottom:6px}}.fb-cfg-tree-section__header:hover{background:var(--fb-fc-section-hover, #f9fafb);border-radius:6px}.fb-cfg-tree-section__title-group{display:flex;align-items:center;gap:6px}@media(max-width:640px){.fb-cfg-tree-section__title-group{gap:4px}}.fb-cfg-tree-section__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-section__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-section__label{font-size:13px;font-weight:700;color:var(--fb-fc-section-label-color, #111827);text-transform:uppercase;letter-spacing:.05em}@media(max-width:640px){.fb-cfg-tree-section__label{font-size:12px;letter-spacing:.02em}}.fb-cfg-tree-section__children{display:flex;flex-direction:column;gap:8px}@media(max-width:640px){.fb-cfg-tree-section__children{gap:6px}}.fb-cfg-tree-item{display:flex;align-items:center;padding:12px;background:var(--fb-fc-item-bg, #ffffff);border:1px solid var(--fb-fc-item-border, #e5e7eb);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-item:hover{border-color:var(--fb-fc-item-hover-border, #3b82f6);box-shadow:0 2px 8px #3b82f614}.fb-cfg-tree-item--active{border-color:var(--fb-fc-item-active-border, #3b82f6);background:var(--fb-fc-item-active-bg, #f0f7ff);box-shadow:0 0 0 1px var(--fb-fc-item-active-border, #3b82f6)}.fb-cfg-tree-item__drag{color:var(--fb-fc-drag-color, #d1d5db);cursor:grab;margin-right:8px;display:flex}.fb-cfg-tree-item__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1);margin-right:4px;cursor:pointer}.fb-cfg-tree-item__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fb-cfg-tree-item__label{font-size:13px;font-weight:600;color:var(--fb-fc-item-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-cfg-tree-item__type{font-size:10px;color:var(--fb-fc-item-type-color, #6b7280);text-transform:uppercase;letter-spacing:.05em;font-weight:500}\n"] }]
         }], propDecorators: { tree: [{
                 type: Input
             }], selectedFieldPath: [{
                 type: Input
+            }], selectedGeoClassCode: [{
+                type: Input
             }], selectField: [{
                 type: Output
             }], toggleExpanded: [{
@@ -9615,10 +9829,11 @@ class ConfiguratorConfigPanelComponent {
     currentBuilderType = null;
     /** Identity key of the currently rendered field — used to detect real field switches. */
     _currentFieldKey = '';
-    /** True when the current field type is DROPDOWN — type switching is disabled for these fields. */
+    /** True when type switching should be disabled — DROPDOWN-based fields, and synthetic
+     *  geography-hierarchy-level nodes (GEOGRAPHY_NODE), which have no real `type` to switch. */
     get isDropdownType() {
         const t = this.selectedField?.type?.toUpperCase();
-        return t === 'DROPDOWN' || t === 'MULTI_SELECT';
+        return t === 'DROPDOWN' || t === 'MULTI_SELECT' || t === 'GEOGRAPHY_NODE';
     }
     ngOnChanges(changes) {
         if ((changes['selectedField'] || changes['builderFieldType'] || changes['fieldTypeSchemaMap'])
@@ -10018,8 +10233,8 @@ class FieldConfiguratorComponent {
             this._isInternalChange = false;
         }
     }
-    onFieldSelected(path) {
-        this.store.selectField(path);
+    onFieldSelected(selection) {
+        this.store.selectField(selection.path, selection.geoClassCode ?? null);
         this.cdr.markForCheck();
     }
     onNodeToggleExpanded(nodeId) {
@@ -10043,11 +10258,11 @@ class FieldConfiguratorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FieldConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FieldConfiguratorComponent, isStandalone: false, selector: "lib-field-configurator", inputs: { schema: "schema", showOptionConfig: "showOptionConfig", lockedFieldNames: "lockedFieldNames" }, outputs: { schemaChange: "schemaChange" }, providers: [FieldConfiguratorService], usesOnChanges: true, ngImport: i0, template: "<div class=\"fb-configurator\">\r\n  <div class=\"fb-configurator__layout\">\r\n    <div class=\"fb-configurator__sidebar\">\r\n      <lib-configurator-tree\r\n        [tree]=\"store.tree()\"\r\n        [selectedFieldPath]=\"store.selectedFieldPath()\"\r\n        (selectField)=\"onFieldSelected($event)\"\r\n        (toggleExpanded)=\"onNodeToggleExpanded($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fb-configurator__main\">\r\n      <lib-configurator-config-panel\r\n        [selectedField]=\"store.selectedField()\"\r\n        [selectedFieldInfo]=\"store.selectedFieldInfo()\"\r\n        [builderFieldType]=\"store.selectedFieldBuilderType()\"\r\n        [fieldTypeSchemaMap]=\"finalFieldTypeSchemaMap\"\r\n        [showOptionConfig]=\"showOptionConfig\"\r\n        [lockedFieldNames]=\"lockedFieldNames\"\r\n        (configChange)=\"onConfigChange($event)\"\r\n        (typeChange)=\"onTypeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fb-configurator{display:flex;flex-direction:column;height:100%;width:100%;background:var(--fb-fc-bg, #ffffff);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-configurator__layout{flex:1;display:flex;overflow:hidden;width:100%}@media(max-width:768px){.fb-configurator__layout{flex-direction:column}}.fb-configurator__sidebar{flex:0 0 280px;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden;min-width:0}@media(max-width:1024px){.fb-configurator__sidebar{flex:0 0 250px}}@media(min-width:1440px){.fb-configurator__sidebar{flex:0 0 300px}}@media(max-width:768px){.fb-configurator__sidebar{flex:0 0 auto;width:100%;border-right:none;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);max-height:40vh}}@media(max-width:640px){.fb-configurator__sidebar{max-height:35vh}}.fb-configurator__main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;background:var(--fb-fc-main-bg, #ffffff);display:flex;flex-direction:column}@media(max-width:768px){.fb-configurator__main{width:100%;flex:1;min-height:0}}\n"], dependencies: [{ kind: "component", type: ConfiguratorTreeComponent, selector: "lib-configurator-tree", inputs: ["tree", "selectedFieldPath"], outputs: ["selectField", "toggleExpanded"] }, { kind: "component", type: ConfiguratorConfigPanelComponent, selector: "lib-configurator-config-panel", inputs: ["selectedField", "selectedFieldInfo", "builderFieldType", "fieldTypeSchemaMap", "showOptionConfig", "lockedFieldNames"], outputs: ["configChange", "typeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FieldConfiguratorComponent, isStandalone: false, selector: "lib-field-configurator", inputs: { schema: "schema", showOptionConfig: "showOptionConfig", lockedFieldNames: "lockedFieldNames" }, outputs: { schemaChange: "schemaChange" }, providers: [FieldConfiguratorService], usesOnChanges: true, ngImport: i0, template: "<div class=\"fb-configurator\">\r\n  <div class=\"fb-configurator__layout\">\r\n    <div class=\"fb-configurator__sidebar\">\r\n      <lib-configurator-tree\r\n        [tree]=\"store.tree()\"\r\n        [selectedFieldPath]=\"store.selectedFieldPath()\"\r\n        [selectedGeoClassCode]=\"store.selectedGeoClassCode()\"\r\n        (selectField)=\"onFieldSelected($event)\"\r\n        (toggleExpanded)=\"onNodeToggleExpanded($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fb-configurator__main\">\r\n      <lib-configurator-config-panel\r\n        [selectedField]=\"store.selectedField()\"\r\n        [selectedFieldInfo]=\"store.selectedFieldInfo()\"\r\n        [builderFieldType]=\"store.selectedFieldBuilderType()\"\r\n        [fieldTypeSchemaMap]=\"finalFieldTypeSchemaMap\"\r\n        [showOptionConfig]=\"showOptionConfig\"\r\n        [lockedFieldNames]=\"lockedFieldNames\"\r\n        (configChange)=\"onConfigChange($event)\"\r\n        (typeChange)=\"onTypeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fb-configurator{display:flex;flex-direction:column;height:100%;width:100%;background:var(--fb-fc-bg, #ffffff);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-configurator__layout{flex:1;display:flex;overflow:hidden;width:100%}@media(max-width:768px){.fb-configurator__layout{flex-direction:column}}.fb-configurator__sidebar{flex:0 0 280px;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden;min-width:0}@media(max-width:1024px){.fb-configurator__sidebar{flex:0 0 250px}}@media(min-width:1440px){.fb-configurator__sidebar{flex:0 0 300px}}@media(max-width:768px){.fb-configurator__sidebar{flex:0 0 auto;width:100%;border-right:none;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);max-height:40vh}}@media(max-width:640px){.fb-configurator__sidebar{max-height:35vh}}.fb-configurator__main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;background:var(--fb-fc-main-bg, #ffffff);display:flex;flex-direction:column}@media(max-width:768px){.fb-configurator__main{width:100%;flex:1;min-height:0}}\n"], dependencies: [{ kind: "component", type: ConfiguratorTreeComponent, selector: "lib-configurator-tree", inputs: ["tree", "selectedFieldPath", "selectedGeoClassCode"], outputs: ["selectField", "toggleExpanded"] }, { kind: "component", type: ConfiguratorConfigPanelComponent, selector: "lib-configurator-config-panel", inputs: ["selectedField", "selectedFieldInfo", "builderFieldType", "fieldTypeSchemaMap", "showOptionConfig", "lockedFieldNames"], outputs: ["configChange", "typeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FieldConfiguratorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-field-configurator', standalone: false, providers: [FieldConfiguratorService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-configurator\">\r\n  <div class=\"fb-configurator__layout\">\r\n    <div class=\"fb-configurator__sidebar\">\r\n      <lib-configurator-tree\r\n        [tree]=\"store.tree()\"\r\n        [selectedFieldPath]=\"store.selectedFieldPath()\"\r\n        (selectField)=\"onFieldSelected($event)\"\r\n        (toggleExpanded)=\"onNodeToggleExpanded($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fb-configurator__main\">\r\n      <lib-configurator-config-panel\r\n        [selectedField]=\"store.selectedField()\"\r\n        [selectedFieldInfo]=\"store.selectedFieldInfo()\"\r\n        [builderFieldType]=\"store.selectedFieldBuilderType()\"\r\n        [fieldTypeSchemaMap]=\"finalFieldTypeSchemaMap\"\r\n        [showOptionConfig]=\"showOptionConfig\"\r\n        [lockedFieldNames]=\"lockedFieldNames\"\r\n        (configChange)=\"onConfigChange($event)\"\r\n        (typeChange)=\"onTypeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fb-configurator{display:flex;flex-direction:column;height:100%;width:100%;background:var(--fb-fc-bg, #ffffff);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-configurator__layout{flex:1;display:flex;overflow:hidden;width:100%}@media(max-width:768px){.fb-configurator__layout{flex-direction:column}}.fb-configurator__sidebar{flex:0 0 280px;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden;min-width:0}@media(max-width:1024px){.fb-configurator__sidebar{flex:0 0 250px}}@media(min-width:1440px){.fb-configurator__sidebar{flex:0 0 300px}}@media(max-width:768px){.fb-configurator__sidebar{flex:0 0 auto;width:100%;border-right:none;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);max-height:40vh}}@media(max-width:640px){.fb-configurator__sidebar{max-height:35vh}}.fb-configurator__main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;background:var(--fb-fc-main-bg, #ffffff);display:flex;flex-direction:column}@media(max-width:768px){.fb-configurator__main{width:100%;flex:1;min-height:0}}\n"] }]
+            args: [{ selector: 'lib-field-configurator', standalone: false, providers: [FieldConfiguratorService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-configurator\">\r\n  <div class=\"fb-configurator__layout\">\r\n    <div class=\"fb-configurator__sidebar\">\r\n      <lib-configurator-tree\r\n        [tree]=\"store.tree()\"\r\n        [selectedFieldPath]=\"store.selectedFieldPath()\"\r\n        [selectedGeoClassCode]=\"store.selectedGeoClassCode()\"\r\n        (selectField)=\"onFieldSelected($event)\"\r\n        (toggleExpanded)=\"onNodeToggleExpanded($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fb-configurator__main\">\r\n      <lib-configurator-config-panel\r\n        [selectedField]=\"store.selectedField()\"\r\n        [selectedFieldInfo]=\"store.selectedFieldInfo()\"\r\n        [builderFieldType]=\"store.selectedFieldBuilderType()\"\r\n        [fieldTypeSchemaMap]=\"finalFieldTypeSchemaMap\"\r\n        [showOptionConfig]=\"showOptionConfig\"\r\n        [lockedFieldNames]=\"lockedFieldNames\"\r\n        (configChange)=\"onConfigChange($event)\"\r\n        (typeChange)=\"onTypeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fb-configurator{display:flex;flex-direction:column;height:100%;width:100%;background:var(--fb-fc-bg, #ffffff);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-configurator__layout{flex:1;display:flex;overflow:hidden;width:100%}@media(max-width:768px){.fb-configurator__layout{flex-direction:column}}.fb-configurator__sidebar{flex:0 0 280px;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden;min-width:0}@media(max-width:1024px){.fb-configurator__sidebar{flex:0 0 250px}}@media(min-width:1440px){.fb-configurator__sidebar{flex:0 0 300px}}@media(max-width:768px){.fb-configurator__sidebar{flex:0 0 auto;width:100%;border-right:none;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);max-height:40vh}}@media(max-width:640px){.fb-configurator__sidebar{max-height:35vh}}.fb-configurator__main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;background:var(--fb-fc-main-bg, #ffffff);display:flex;flex-direction:column}@media(max-width:768px){.fb-configurator__main{width:100%;flex:1;min-height:0}}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]