commons-shared-web-ui 0.0.72 → 0.0.73

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

@@ -55,6 +55,8 @@ import * as i1$1 from '@angular/platform-browser';
 import * as i1$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1$5 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 
 class MaterialModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -10689,6 +10691,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * clone, so `applyTreeToSchema` simply walks the tree and assigns the node state
  * onto those references — there is no positional re-matching, which keeps it robust
  * against ROWs, nested groups, and mixed leaf/section children.
+ *
+ * Field order is a plain property of the schema — there is no separate `sequence`
+ * field. Reordering rewrites the schema's own children array in place, so render
+ * order (which simply follows array order, as it always has) reflects the
+ * configurator's choices with no extra sorting logic anywhere else.
  */
 class ConfigSchemaTreeService {
     // ── Parsing ─────────────────────────────────────────────────────────────────
@@ -10704,8 +10711,9 @@ class ConfigSchemaTreeService {
     }
     /**
      * Write the current tree state back onto the schema the nodes reference.
-     * Sets isEnabled/visible/disabled for visibility and required for mandatory.
-     * Hidden fields always emit required: false ("mandatory only if visible").
+     * Sets isEnabled/visible/disabled for visibility, required for mandatory, and
+     * colSpan; and physically reorders each section's own children array to match
+     * the tree's current field order.
      */
     applyTreeToSchema(sections) {
         for (const section of sections) {
@@ -10715,11 +10723,12 @@ class ConfigSchemaTreeService {
     // ── Private: parsing ──────────────────────────────────────────────────────────
     _buildSections(children) {
         const sections = [];
+        const reorderable = !children.some(c => c.type === 'ROW');
         let leafBundle = [];
         for (const child of children) {
             if (this._isSection(child)) {
                 if (leafBundle.length) {
-                    sections.push(this._createBundleSection(leafBundle));
+                    sections.push(this._createBundleSection(leafBundle, children, reorderable));
                     leafBundle = [];
                 }
                 sections.push(this._buildSection(child));
@@ -10733,11 +10742,12 @@ class ConfigSchemaTreeService {
             }
         }
         if (leafBundle.length)
-            sections.push(this._createBundleSection(leafBundle));
+            sections.push(this._createBundleSection(leafBundle, children, reorderable));
         return sections;
     }
     _buildSection(field) {
         const children = field.sectionConfig?.children ?? field.children ?? [];
+        const reorderable = !children.some(c => c.type === 'ROW');
         const fields = [];
         const subsections = [];
         for (const child of children) {
@@ -10771,9 +10781,11 @@ class ConfigSchemaTreeService {
             expanded: true,
             fields,
             subsections,
+            fieldsSource: children,
+            reorderable,
         };
     }
-    _createBundleSection(fields) {
+    _createBundleSection(fields, fieldsSource, reorderable) {
         return {
             label: 'Fields',
             fieldConfig: null,
@@ -10783,6 +10795,8 @@ class ConfigSchemaTreeService {
             expanded: true,
             fields,
             subsections: [],
+            fieldsSource,
+            reorderable,
         };
     }
     _buildField(field) {
@@ -10793,6 +10807,7 @@ class ConfigSchemaTreeService {
             type: field.type,
             visible,
             mandatory: visible ? field.required === true : false,
+            colSpan: field.colSpan ?? 12,
             lockVisibility: field.lockVisibility === true,
             lockMandatory: field.lockMandatory === true,
             parentName: field.optionConfig?.dependencies?.['parentDataCode'],
@@ -10809,15 +10824,34 @@ class ConfigSchemaTreeService {
             section.fieldConfig.visible = section.visible; // backward compatibility
             section.fieldConfig.disabled = !section.visible;
         }
+        if (section.reorderable && section.fieldsSource) {
+            this._reorderChildren(section.fieldsSource, section.fields);
+        }
         for (const field of section.fields)
             this._applyField(field);
         for (const sub of section.subsections)
             this._applySection(sub);
     }
+    /**
+     * Rewrites `slots` in place so its leaf-field entries follow `fields`' current
+     * order. Section entries (GROUP/SUBFIELDS) keep their original array position —
+     * only the leaf fields move. Safe to call whenever `slots` contains no ROW
+     * (guaranteed by the `reorderable` flag the caller checks).
+     */
+    _reorderChildren(slots, fields) {
+        const orderedLeaves = fields.map(f => f.fieldConfig);
+        let cursor = 0;
+        for (let i = 0; i < slots.length; i++) {
+            if (!this._isSection(slots[i])) {
+                slots[i] = orderedLeaves[cursor++];
+            }
+        }
+    }
     _applyField(field) {
         field.fieldConfig.isEnabled = field.visible;
         field.fieldConfig.visible = field.visible; // backward compatibility
         field.fieldConfig.required = field.visible ? field.mandatory : false;
+        field.fieldConfig.colSpan = field.colSpan;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSchemaTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSchemaTreeService, providedIn: 'root' });
@@ -10894,6 +10928,27 @@ class FieldConfigurationService {
             return { ...f, mandatory: !f.mandatory };
         });
     }
+    /** Set a field's column span, clamped to the 1-12 grid range. */
+    setFieldColSpan(path, fieldIndex, colSpan) {
+        const clamped = Math.min(12, Math.max(1, Math.round(colSpan) || 1));
+        this._updateFieldAtPath(path, fieldIndex, f => ({ ...f, colSpan: clamped }));
+    }
+    /**
+     * Reorder a field within its own section (drag-and-drop). Reordering is scoped to
+     * one section's direct fields — dragging never moves a field across sections.
+     * Rejected (no-op) if the move would place a field above the field it depends on
+     * via `optionConfig.dependencies` (e.g. a "state" field can never sort above the
+     * "country" field it depends on).
+     */
+    reorderField(path, previousIndex, currentIndex) {
+        if (previousIndex === currentIndex)
+            return;
+        this._updateSectionAtPath(path, section => {
+            const fields = [...section.fields];
+            moveItemInArray(fields, previousIndex, currentIndex);
+            return this._isValidFieldOrder(fields) ? { ...section, fields } : section;
+        });
+    }
     // ── Output ──────────────────────────────────────────────────────────────────
     /**
      * Produce the updated schema. Writes the current tree state onto the working
@@ -11001,6 +11056,25 @@ class FieldConfigurationService {
         }));
         return rebuildSections(sections);
     }
+    /**
+     * True when every field with a dependency parent (`parentName`) sorts after that
+     * parent within the given list. Fields whose parent isn't a sibling in this same
+     * list (cross-section dependency, or no such field) are unconstrained here.
+     */
+    _isValidFieldOrder(fields) {
+        const indexByName = new Map();
+        fields.forEach((f, i) => {
+            const name = f.fieldConfig.name;
+            if (name)
+                indexByName.set(name, i);
+        });
+        return fields.every((f, i) => {
+            if (!f.parentName)
+                return true;
+            const parentIndex = indexByName.get(f.parentName);
+            return parentIndex === undefined || parentIndex < i;
+        });
+    }
     /** Recursively set visibility on a section and all its descendants (respecting locks). */
     _cascadeVisibility(section, visible) {
         return {
@@ -11030,16 +11104,23 @@ class ConfigFieldNodeComponent {
     translate;
     toggleVisible = new EventEmitter();
     toggleMandatory = new EventEmitter();
+    colSpanChange = new EventEmitter();
     get displayLabel() {
         const label = this.field.label;
         return this.translate ? this.translate(label) : label;
     }
+    onColSpanInput(value) {
+        const parsed = Number(value);
+        if (!Number.isFinite(parsed))
+            return;
+        this.colSpanChange.emit(parsed);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigFieldNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigFieldNodeComponent, isStandalone: false, selector: "lib-config-field-node", inputs: { field: "field", translate: "translate" }, outputs: { toggleVisible: "toggleVisible", toggleMandatory: "toggleMandatory" }, ngImport: i0, template: "<div\r\n  class=\"ffc-field\"\r\n  [class.ffc-field--hidden]=\"!field.visible\"\r\n  [class.ffc-field--locked]=\"field.lockVisibility\"\r\n>\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"ffc-field__eye\" [class.ffc-field__eye--off]=\"!field.visible\" aria-hidden=\"true\">\r\n    @if (field.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"ffc-field__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Mandatory control (only meaningful when visible) -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"ffc-field__mandatory\"\r\n    [class.ffc-field__mandatory--disabled]=\"!field.visible || field.lockMandatory\"\r\n    [disabled]=\"!field.visible || field.lockMandatory\"\r\n    [attr.aria-pressed]=\"field.mandatory\"\r\n    (click)=\"toggleMandatory.emit()\"\r\n  >\r\n    <span class=\"ffc-check\" [class.ffc-check--on]=\"field.mandatory\">\r\n      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    </span>\r\n    <span class=\"ffc-field__mandatory-text\">Mandatory</span>\r\n  </button>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (field.lockVisibility) {\r\n    <span class=\"ffc-lock\" title=\"This field is always visible\">\r\n      <svg width=\"15\" height=\"15\" 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        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ffc-toggle\"\r\n      [class.ffc-toggle--on]=\"field.visible\"\r\n      [class.ffc-toggle--disabled]=\"field.visibilityLockedByParent\"\r\n      [disabled]=\"field.visibilityLockedByParent\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"field.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      [attr.title]=\"field.visibilityLockedByParent ? 'Show the field it depends on first' : null\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"ffc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-field{display:flex;align-items:center;gap:var(--ffc-field-gap, 12px);padding:var(--ffc-field-padding, 10px 14px);border-radius:var(--ffc-field-radius, 8px);background:var(--ffc-field-bg, #ffffff);border:1px solid var(--ffc-field-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.ffc-field:hover:not(.ffc-field--locked){background:var(--ffc-field-hover-bg, #f8fafc)}.ffc-field--hidden .ffc-field__eye,.ffc-field--hidden .ffc-field__label,.ffc-field--hidden .ffc-field__mandatory{opacity:.55}.ffc-field--locked{background:var(--ffc-field-locked-bg, #f6f7f8)}.ffc-field__eye{display:flex;align-items:center;color:var(--ffc-eye-color, #6b7280);flex-shrink:0}.ffc-field__eye--off{color:var(--ffc-eye-off-color, #b0b6be)}.ffc-field__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-field-label-size, 14px);color:var(--ffc-field-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-field__mandatory{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit}.ffc-field__mandatory--disabled{cursor:not-allowed}.ffc-field__mandatory-text{font-size:var(--ffc-mandatory-size, 13px);color:var(--ffc-mandatory-color, #52606d);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigFieldNodeComponent, isStandalone: false, selector: "lib-config-field-node", inputs: { field: "field", translate: "translate" }, outputs: { toggleVisible: "toggleVisible", toggleMandatory: "toggleMandatory", colSpanChange: "colSpanChange" }, ngImport: i0, template: "<div\r\n  class=\"ffc-field\"\r\n  [class.ffc-field--hidden]=\"!field.visible\"\r\n  [class.ffc-field--locked]=\"field.lockVisibility\"\r\n>\r\n  <!-- Drag handle (reorder within this section) -->\r\n  <span class=\"ffc-field__grip\" title=\"Drag to reorder within this section\" aria-hidden=\"true\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <circle cx=\"8\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"19\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"19\" r=\"1.6\"></circle>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"ffc-field__eye\" [class.ffc-field__eye--off]=\"!field.visible\" aria-hidden=\"true\">\r\n    @if (field.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"ffc-field__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Column span (1-12 grid) -->\r\n  <label class=\"ffc-field__colspan\" [attr.title]=\"'Column span (1-12)'\">\r\n    <span class=\"ffc-field__colspan-text\">Col</span>\r\n    <input\r\n      type=\"number\"\r\n      min=\"1\"\r\n      max=\"12\"\r\n      step=\"1\"\r\n      class=\"ffc-field__colspan-input\"\r\n      [value]=\"field.colSpan\"\r\n      (change)=\"onColSpanInput($any($event.target).value)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n    />\r\n  </label>\r\n\r\n  <!-- Mandatory control (only meaningful when visible) -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"ffc-field__mandatory\"\r\n    [class.ffc-field__mandatory--disabled]=\"!field.visible || field.lockMandatory\"\r\n    [disabled]=\"!field.visible || field.lockMandatory\"\r\n    [attr.aria-pressed]=\"field.mandatory\"\r\n    (click)=\"toggleMandatory.emit()\"\r\n  >\r\n    <span class=\"ffc-check\" [class.ffc-check--on]=\"field.mandatory\">\r\n      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    </span>\r\n    <span class=\"ffc-field__mandatory-text\">Mandatory</span>\r\n  </button>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (field.lockVisibility) {\r\n    <span class=\"ffc-lock\" title=\"This field is always visible\">\r\n      <svg width=\"15\" height=\"15\" 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        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ffc-toggle\"\r\n      [class.ffc-toggle--on]=\"field.visible\"\r\n      [class.ffc-toggle--disabled]=\"field.visibilityLockedByParent\"\r\n      [disabled]=\"field.visibilityLockedByParent\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"field.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      [attr.title]=\"field.visibilityLockedByParent ? 'Show the field it depends on first' : null\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"ffc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}:host{display:block;cursor:grab}:host.cdk-drag-dragging,:host.cdk-drag-placeholder{cursor:grabbing}.ffc-field{display:flex;align-items:center;gap:var(--ffc-field-gap, 12px);padding:var(--ffc-field-padding, 10px 14px);border-radius:var(--ffc-field-radius, 8px);background:var(--ffc-field-bg, #ffffff);border:1px solid var(--ffc-field-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.ffc-field:hover:not(.ffc-field--locked){background:var(--ffc-field-hover-bg, #f8fafc)}.ffc-field--hidden .ffc-field__eye,.ffc-field--hidden .ffc-field__label,.ffc-field--hidden .ffc-field__mandatory{opacity:.55}.ffc-field--locked{background:var(--ffc-field-locked-bg, #f6f7f8)}.ffc-field__grip{display:flex;align-items:center;color:var(--ffc-grip-color, #cbd2d9);flex-shrink:0}.ffc-field__eye{display:flex;align-items:center;color:var(--ffc-eye-color, #6b7280);flex-shrink:0}.ffc-field__eye--off{color:var(--ffc-eye-off-color, #b0b6be)}.ffc-field__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-field-label-size, 14px);color:var(--ffc-field-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-field__colspan{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:default}.ffc-field__colspan-text{font-size:var(--ffc-colspan-label-size, 12px);color:var(--ffc-colspan-label-color, #9aa2ab);padding-right:5px}.ffc-field__colspan-input{width:var(--ffc-colspan-input-width, 42px);padding:3px 4px;text-align:center;font-size:var(--ffc-colspan-input-size, 13px);color:var(--ffc-field-label-color, #1f2933);border:1px solid var(--ffc-field-border, #d7dce1);border-radius:5px;background:var(--ffc-colspan-input-bg, #ffffff);cursor:text}.ffc-field__colspan-input:focus{outline:none;border-color:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-field__colspan-input::-webkit-outer-spin-button,.ffc-field__colspan-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ffc-field__colspan-input[type=number]{-moz-appearance:textfield}.ffc-field__mandatory{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit}.ffc-field__mandatory--disabled{cursor:not-allowed}.ffc-field__mandatory-text{font-size:var(--ffc-mandatory-size, 13px);color:var(--ffc-mandatory-color, #52606d);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigFieldNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-field-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ffc-field\"\r\n  [class.ffc-field--hidden]=\"!field.visible\"\r\n  [class.ffc-field--locked]=\"field.lockVisibility\"\r\n>\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"ffc-field__eye\" [class.ffc-field__eye--off]=\"!field.visible\" aria-hidden=\"true\">\r\n    @if (field.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"ffc-field__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Mandatory control (only meaningful when visible) -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"ffc-field__mandatory\"\r\n    [class.ffc-field__mandatory--disabled]=\"!field.visible || field.lockMandatory\"\r\n    [disabled]=\"!field.visible || field.lockMandatory\"\r\n    [attr.aria-pressed]=\"field.mandatory\"\r\n    (click)=\"toggleMandatory.emit()\"\r\n  >\r\n    <span class=\"ffc-check\" [class.ffc-check--on]=\"field.mandatory\">\r\n      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    </span>\r\n    <span class=\"ffc-field__mandatory-text\">Mandatory</span>\r\n  </button>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (field.lockVisibility) {\r\n    <span class=\"ffc-lock\" title=\"This field is always visible\">\r\n      <svg width=\"15\" height=\"15\" 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        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ffc-toggle\"\r\n      [class.ffc-toggle--on]=\"field.visible\"\r\n      [class.ffc-toggle--disabled]=\"field.visibilityLockedByParent\"\r\n      [disabled]=\"field.visibilityLockedByParent\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"field.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      [attr.title]=\"field.visibilityLockedByParent ? 'Show the field it depends on first' : null\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"ffc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-field{display:flex;align-items:center;gap:var(--ffc-field-gap, 12px);padding:var(--ffc-field-padding, 10px 14px);border-radius:var(--ffc-field-radius, 8px);background:var(--ffc-field-bg, #ffffff);border:1px solid var(--ffc-field-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.ffc-field:hover:not(.ffc-field--locked){background:var(--ffc-field-hover-bg, #f8fafc)}.ffc-field--hidden .ffc-field__eye,.ffc-field--hidden .ffc-field__label,.ffc-field--hidden .ffc-field__mandatory{opacity:.55}.ffc-field--locked{background:var(--ffc-field-locked-bg, #f6f7f8)}.ffc-field__eye{display:flex;align-items:center;color:var(--ffc-eye-color, #6b7280);flex-shrink:0}.ffc-field__eye--off{color:var(--ffc-eye-off-color, #b0b6be)}.ffc-field__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-field-label-size, 14px);color:var(--ffc-field-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-field__mandatory{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit}.ffc-field__mandatory--disabled{cursor:not-allowed}.ffc-field__mandatory-text{font-size:var(--ffc-mandatory-size, 13px);color:var(--ffc-mandatory-color, #52606d);white-space:nowrap}\n"] }]
+            args: [{ selector: 'lib-config-field-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ffc-field\"\r\n  [class.ffc-field--hidden]=\"!field.visible\"\r\n  [class.ffc-field--locked]=\"field.lockVisibility\"\r\n>\r\n  <!-- Drag handle (reorder within this section) -->\r\n  <span class=\"ffc-field__grip\" title=\"Drag to reorder within this section\" aria-hidden=\"true\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <circle cx=\"8\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"19\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"19\" r=\"1.6\"></circle>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"ffc-field__eye\" [class.ffc-field__eye--off]=\"!field.visible\" aria-hidden=\"true\">\r\n    @if (field.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"ffc-field__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Column span (1-12 grid) -->\r\n  <label class=\"ffc-field__colspan\" [attr.title]=\"'Column span (1-12)'\">\r\n    <span class=\"ffc-field__colspan-text\">Col</span>\r\n    <input\r\n      type=\"number\"\r\n      min=\"1\"\r\n      max=\"12\"\r\n      step=\"1\"\r\n      class=\"ffc-field__colspan-input\"\r\n      [value]=\"field.colSpan\"\r\n      (change)=\"onColSpanInput($any($event.target).value)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n    />\r\n  </label>\r\n\r\n  <!-- Mandatory control (only meaningful when visible) -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"ffc-field__mandatory\"\r\n    [class.ffc-field__mandatory--disabled]=\"!field.visible || field.lockMandatory\"\r\n    [disabled]=\"!field.visible || field.lockMandatory\"\r\n    [attr.aria-pressed]=\"field.mandatory\"\r\n    (click)=\"toggleMandatory.emit()\"\r\n  >\r\n    <span class=\"ffc-check\" [class.ffc-check--on]=\"field.mandatory\">\r\n      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    </span>\r\n    <span class=\"ffc-field__mandatory-text\">Mandatory</span>\r\n  </button>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (field.lockVisibility) {\r\n    <span class=\"ffc-lock\" title=\"This field is always visible\">\r\n      <svg width=\"15\" height=\"15\" 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        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ffc-toggle\"\r\n      [class.ffc-toggle--on]=\"field.visible\"\r\n      [class.ffc-toggle--disabled]=\"field.visibilityLockedByParent\"\r\n      [disabled]=\"field.visibilityLockedByParent\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"field.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      [attr.title]=\"field.visibilityLockedByParent ? 'Show the field it depends on first' : null\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"ffc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}:host{display:block;cursor:grab}:host.cdk-drag-dragging,:host.cdk-drag-placeholder{cursor:grabbing}.ffc-field{display:flex;align-items:center;gap:var(--ffc-field-gap, 12px);padding:var(--ffc-field-padding, 10px 14px);border-radius:var(--ffc-field-radius, 8px);background:var(--ffc-field-bg, #ffffff);border:1px solid var(--ffc-field-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.ffc-field:hover:not(.ffc-field--locked){background:var(--ffc-field-hover-bg, #f8fafc)}.ffc-field--hidden .ffc-field__eye,.ffc-field--hidden .ffc-field__label,.ffc-field--hidden .ffc-field__mandatory{opacity:.55}.ffc-field--locked{background:var(--ffc-field-locked-bg, #f6f7f8)}.ffc-field__grip{display:flex;align-items:center;color:var(--ffc-grip-color, #cbd2d9);flex-shrink:0}.ffc-field__eye{display:flex;align-items:center;color:var(--ffc-eye-color, #6b7280);flex-shrink:0}.ffc-field__eye--off{color:var(--ffc-eye-off-color, #b0b6be)}.ffc-field__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-field-label-size, 14px);color:var(--ffc-field-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-field__colspan{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:default}.ffc-field__colspan-text{font-size:var(--ffc-colspan-label-size, 12px);color:var(--ffc-colspan-label-color, #9aa2ab);padding-right:5px}.ffc-field__colspan-input{width:var(--ffc-colspan-input-width, 42px);padding:3px 4px;text-align:center;font-size:var(--ffc-colspan-input-size, 13px);color:var(--ffc-field-label-color, #1f2933);border:1px solid var(--ffc-field-border, #d7dce1);border-radius:5px;background:var(--ffc-colspan-input-bg, #ffffff);cursor:text}.ffc-field__colspan-input:focus{outline:none;border-color:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-field__colspan-input::-webkit-outer-spin-button,.ffc-field__colspan-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ffc-field__colspan-input[type=number]{-moz-appearance:textfield}.ffc-field__mandatory{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit}.ffc-field__mandatory--disabled{cursor:not-allowed}.ffc-field__mandatory-text{font-size:var(--ffc-mandatory-size, 13px);color:var(--ffc-mandatory-color, #52606d);white-space:nowrap}\n"] }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11049,6 +11130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], toggleMandatory: [{
                 type: Output
+            }], colSpanChange: [{
+                type: Output
             }] } });
 
 /**
@@ -11065,6 +11148,8 @@ class ConfigSectionNodeComponent {
     toggleExpanded = new EventEmitter();
     fieldToggleVisible = new EventEmitter();
     fieldToggleMandatory = new EventEmitter();
+    fieldColSpanChange = new EventEmitter();
+    fieldReorder = new EventEmitter();
     get displayLabel() {
         return this.translate ? this.translate(this.section.label) : this.section.label;
     }
@@ -11087,6 +11172,18 @@ class ConfigSectionNodeComponent {
     onFieldToggleMandatory(fieldIndex) {
         this.fieldToggleMandatory.emit({ sectionPath: [], fieldIndex });
     }
+    onFieldColSpanChange(fieldIndex, colSpan) {
+        this.fieldColSpanChange.emit({ sectionPath: [], fieldIndex, colSpan });
+    }
+    onFieldDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        this.fieldReorder.emit({
+            sectionPath: [],
+            previousIndex: event.previousIndex,
+            currentIndex: event.currentIndex,
+        });
+    }
     // ── Subsection re-emits (prefix with the subsection index) ───
     onSubToggleVisible(subIndex, subPath) {
         this.toggleVisible.emit([subIndex, ...subPath]);
@@ -11106,15 +11203,29 @@ class ConfigSectionNodeComponent {
             fieldIndex: payload.fieldIndex,
         });
     }
+    onSubFieldColSpanChange(subIndex, payload) {
+        this.fieldColSpanChange.emit({
+            sectionPath: [subIndex, ...payload.sectionPath],
+            fieldIndex: payload.fieldIndex,
+            colSpan: payload.colSpan,
+        });
+    }
+    onSubFieldReorder(subIndex, payload) {
+        this.fieldReorder.emit({
+            sectionPath: [subIndex, ...payload.sectionPath],
+            previousIndex: payload.previousIndex,
+            currentIndex: payload.currentIndex,
+        });
+    }
     trackByIndex(index) {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSectionNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigSectionNodeComponent, isStandalone: false, selector: "lib-config-section-node", inputs: { section: "section", depth: "depth", translate: "translate" }, outputs: { toggleVisible: "toggleVisible", toggleExpanded: "toggleExpanded", fieldToggleVisible: "fieldToggleVisible", fieldToggleMandatory: "fieldToggleMandatory" }, ngImport: i0, template: "<div\r\n  class=\"ffc-section\"\r\n  [class.ffc-section--nested]=\"depth > 0\"\r\n  [class.ffc-section--hidden]=\"hasToggle && !section.visible\"\r\n>\r\n  <div class=\"ffc-section__header\">\r\n    <button\r\n      class=\"ffc-section__expand-btn\"\r\n      type=\"button\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <svg\r\n        class=\"ffc-section__chevron\"\r\n        [class.ffc-section__chevron--open]=\"section.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <span class=\"ffc-section__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n    @if (section.fields.length) {\r\n      <span class=\"ffc-section__count\">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>\r\n    }\r\n\r\n    @if (hasToggle) {\r\n      @if (section.lockVisibility) {\r\n        <span class=\"ffc-lock\" title=\"This section is always visible\">\r\n          <svg width=\"15\" height=\"15\" 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            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n        </span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ffc-toggle\"\r\n          [class.ffc-toggle--on]=\"section.visible\"\r\n          role=\"switch\"\r\n          [attr.aria-checked]=\"section.visible\"\r\n          [attr.aria-label]=\"'Show ' + displayLabel\"\r\n          (click)=\"onToggleVisible()\"\r\n        >\r\n          <span class=\"ffc-toggle__thumb\"></span>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"ffc-section__body\">\r\n      @for (field of section.fields; track trackByIndex($index); let fi = $index) {\r\n        <lib-config-field-node\r\n          [field]=\"field\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onFieldToggleVisible(fi)\"\r\n          (toggleMandatory)=\"onFieldToggleMandatory(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {\r\n        <lib-config-section-node\r\n          [section]=\"sub\"\r\n          [depth]=\"depth + 1\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onSubToggleVisible(si, $event)\"\r\n          (toggleExpanded)=\"onSubToggleExpanded(si, $event)\"\r\n          (fieldToggleVisible)=\"onSubFieldToggleVisible(si, $event)\"\r\n          (fieldToggleMandatory)=\"onSubFieldToggleMandatory(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-section{border:1px solid var(--ffc-section-border, #e5e7eb);border-radius:var(--ffc-section-radius, 10px);background:var(--ffc-section-bg, #ffffff);overflow:hidden}.ffc-section--nested{border-color:var(--ffc-section-nested-border, #eef0f2);background:var(--ffc-section-nested-bg, #fbfcfd)}.ffc-section--hidden .ffc-section__label,.ffc-section--hidden .ffc-section__count{opacity:.55}.ffc-section__header{display:flex;align-items:center;gap:10px;padding:var(--ffc-section-header-padding, 12px 14px);background:var(--ffc-section-header-bg, #f6f7f8);-webkit-user-select:none;user-select:none}.ffc-section--nested .ffc-section__header{background:var(--ffc-section-nested-header-bg, #f1f3f5)}.ffc-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--ffc-chevron-color, #6b7280);flex-shrink:0}.ffc-section__chevron{transform:rotate(-90deg);transition:transform .2s}.ffc-section__chevron--open{transform:rotate(0)}.ffc-section__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-section-label-size, 14px);font-weight:600;color:var(--ffc-section-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-section__count{flex-shrink:0;font-size:var(--ffc-count-size, 12px);color:var(--ffc-count-color, #7b8794);white-space:nowrap}.ffc-section__body{padding:var(--ffc-section-body-padding, 8px 14px 14px 32px);display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}@media(max-width:640px){.ffc-section__body{padding:8px 10px 10px 18px;gap:6px}}\n"], dependencies: [{ kind: "component", type: ConfigSectionNodeComponent, selector: "lib-config-section-node", inputs: ["section", "depth", "translate"], outputs: ["toggleVisible", "toggleExpanded", "fieldToggleVisible", "fieldToggleMandatory"] }, { kind: "component", type: ConfigFieldNodeComponent, selector: "lib-config-field-node", inputs: ["field", "translate"], outputs: ["toggleVisible", "toggleMandatory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigSectionNodeComponent, isStandalone: false, selector: "lib-config-section-node", inputs: { section: "section", depth: "depth", translate: "translate" }, outputs: { toggleVisible: "toggleVisible", toggleExpanded: "toggleExpanded", fieldToggleVisible: "fieldToggleVisible", fieldToggleMandatory: "fieldToggleMandatory", fieldColSpanChange: "fieldColSpanChange", fieldReorder: "fieldReorder" }, ngImport: i0, template: "<div\r\n  class=\"ffc-section\"\r\n  [class.ffc-section--nested]=\"depth > 0\"\r\n  [class.ffc-section--hidden]=\"hasToggle && !section.visible\"\r\n>\r\n  <div class=\"ffc-section__header\">\r\n    <button\r\n      class=\"ffc-section__expand-btn\"\r\n      type=\"button\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <svg\r\n        class=\"ffc-section__chevron\"\r\n        [class.ffc-section__chevron--open]=\"section.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <span class=\"ffc-section__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n    @if (section.fields.length) {\r\n      <span class=\"ffc-section__count\">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>\r\n    }\r\n\r\n    @if (hasToggle) {\r\n      @if (section.lockVisibility) {\r\n        <span class=\"ffc-lock\" title=\"This section is always visible\">\r\n          <svg width=\"15\" height=\"15\" 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            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n        </span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ffc-toggle\"\r\n          [class.ffc-toggle--on]=\"section.visible\"\r\n          role=\"switch\"\r\n          [attr.aria-checked]=\"section.visible\"\r\n          [attr.aria-label]=\"'Show ' + displayLabel\"\r\n          (click)=\"onToggleVisible()\"\r\n        >\r\n          <span class=\"ffc-toggle__thumb\"></span>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"ffc-section__body\">\r\n      <div\r\n        class=\"ffc-section__fields\"\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!section.reorderable\"\r\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\r\n      >\r\n        @for (field of section.fields; track trackByIndex($index); let fi = $index) {\r\n          <lib-config-field-node\r\n            cdkDrag\r\n            [cdkDragDisabled]=\"!section.reorderable\"\r\n            [field]=\"field\"\r\n            [translate]=\"translate\"\r\n            (toggleVisible)=\"onFieldToggleVisible(fi)\"\r\n            (toggleMandatory)=\"onFieldToggleMandatory(fi)\"\r\n            (colSpanChange)=\"onFieldColSpanChange(fi, $event)\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {\r\n        <lib-config-section-node\r\n          [section]=\"sub\"\r\n          [depth]=\"depth + 1\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onSubToggleVisible(si, $event)\"\r\n          (toggleExpanded)=\"onSubToggleExpanded(si, $event)\"\r\n          (fieldToggleVisible)=\"onSubFieldToggleVisible(si, $event)\"\r\n          (fieldToggleMandatory)=\"onSubFieldToggleMandatory(si, $event)\"\r\n          (fieldColSpanChange)=\"onSubFieldColSpanChange(si, $event)\"\r\n          (fieldReorder)=\"onSubFieldReorder(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-section{border:1px solid var(--ffc-section-border, #e5e7eb);border-radius:var(--ffc-section-radius, 10px);background:var(--ffc-section-bg, #ffffff);overflow:hidden}.ffc-section--nested{border-color:var(--ffc-section-nested-border, #eef0f2);background:var(--ffc-section-nested-bg, #fbfcfd)}.ffc-section--hidden .ffc-section__label,.ffc-section--hidden .ffc-section__count{opacity:.55}.ffc-section__header{display:flex;align-items:center;gap:10px;padding:var(--ffc-section-header-padding, 12px 14px);background:var(--ffc-section-header-bg, #f6f7f8);-webkit-user-select:none;user-select:none}.ffc-section--nested .ffc-section__header{background:var(--ffc-section-nested-header-bg, #f1f3f5)}.ffc-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--ffc-chevron-color, #6b7280);flex-shrink:0}.ffc-section__chevron{transform:rotate(-90deg);transition:transform .2s}.ffc-section__chevron--open{transform:rotate(0)}.ffc-section__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-section-label-size, 14px);font-weight:600;color:var(--ffc-section-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-section__count{flex-shrink:0;font-size:var(--ffc-count-size, 12px);color:var(--ffc-count-color, #7b8794);white-space:nowrap}.ffc-section__body{padding:var(--ffc-section-body-padding, 8px 14px 14px 14px);display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}@media(max-width:640px){.ffc-section__body{padding:8px 10px 10px 18px;gap:6px}}.ffc-section__fields{display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}\n"], dependencies: [{ kind: "directive", type: i1$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ConfigSectionNodeComponent, selector: "lib-config-section-node", inputs: ["section", "depth", "translate"], outputs: ["toggleVisible", "toggleExpanded", "fieldToggleVisible", "fieldToggleMandatory", "fieldColSpanChange", "fieldReorder"] }, { kind: "component", type: ConfigFieldNodeComponent, selector: "lib-config-field-node", inputs: ["field", "translate"], outputs: ["toggleVisible", "toggleMandatory", "colSpanChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSectionNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-section-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ffc-section\"\r\n  [class.ffc-section--nested]=\"depth > 0\"\r\n  [class.ffc-section--hidden]=\"hasToggle && !section.visible\"\r\n>\r\n  <div class=\"ffc-section__header\">\r\n    <button\r\n      class=\"ffc-section__expand-btn\"\r\n      type=\"button\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <svg\r\n        class=\"ffc-section__chevron\"\r\n        [class.ffc-section__chevron--open]=\"section.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <span class=\"ffc-section__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n    @if (section.fields.length) {\r\n      <span class=\"ffc-section__count\">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>\r\n    }\r\n\r\n    @if (hasToggle) {\r\n      @if (section.lockVisibility) {\r\n        <span class=\"ffc-lock\" title=\"This section is always visible\">\r\n          <svg width=\"15\" height=\"15\" 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            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n        </span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ffc-toggle\"\r\n          [class.ffc-toggle--on]=\"section.visible\"\r\n          role=\"switch\"\r\n          [attr.aria-checked]=\"section.visible\"\r\n          [attr.aria-label]=\"'Show ' + displayLabel\"\r\n          (click)=\"onToggleVisible()\"\r\n        >\r\n          <span class=\"ffc-toggle__thumb\"></span>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"ffc-section__body\">\r\n      @for (field of section.fields; track trackByIndex($index); let fi = $index) {\r\n        <lib-config-field-node\r\n          [field]=\"field\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onFieldToggleVisible(fi)\"\r\n          (toggleMandatory)=\"onFieldToggleMandatory(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {\r\n        <lib-config-section-node\r\n          [section]=\"sub\"\r\n          [depth]=\"depth + 1\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onSubToggleVisible(si, $event)\"\r\n          (toggleExpanded)=\"onSubToggleExpanded(si, $event)\"\r\n          (fieldToggleVisible)=\"onSubFieldToggleVisible(si, $event)\"\r\n          (fieldToggleMandatory)=\"onSubFieldToggleMandatory(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-section{border:1px solid var(--ffc-section-border, #e5e7eb);border-radius:var(--ffc-section-radius, 10px);background:var(--ffc-section-bg, #ffffff);overflow:hidden}.ffc-section--nested{border-color:var(--ffc-section-nested-border, #eef0f2);background:var(--ffc-section-nested-bg, #fbfcfd)}.ffc-section--hidden .ffc-section__label,.ffc-section--hidden .ffc-section__count{opacity:.55}.ffc-section__header{display:flex;align-items:center;gap:10px;padding:var(--ffc-section-header-padding, 12px 14px);background:var(--ffc-section-header-bg, #f6f7f8);-webkit-user-select:none;user-select:none}.ffc-section--nested .ffc-section__header{background:var(--ffc-section-nested-header-bg, #f1f3f5)}.ffc-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--ffc-chevron-color, #6b7280);flex-shrink:0}.ffc-section__chevron{transform:rotate(-90deg);transition:transform .2s}.ffc-section__chevron--open{transform:rotate(0)}.ffc-section__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-section-label-size, 14px);font-weight:600;color:var(--ffc-section-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-section__count{flex-shrink:0;font-size:var(--ffc-count-size, 12px);color:var(--ffc-count-color, #7b8794);white-space:nowrap}.ffc-section__body{padding:var(--ffc-section-body-padding, 8px 14px 14px 32px);display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}@media(max-width:640px){.ffc-section__body{padding:8px 10px 10px 18px;gap:6px}}\n"] }]
+            args: [{ selector: 'lib-config-section-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ffc-section\"\r\n  [class.ffc-section--nested]=\"depth > 0\"\r\n  [class.ffc-section--hidden]=\"hasToggle && !section.visible\"\r\n>\r\n  <div class=\"ffc-section__header\">\r\n    <button\r\n      class=\"ffc-section__expand-btn\"\r\n      type=\"button\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <svg\r\n        class=\"ffc-section__chevron\"\r\n        [class.ffc-section__chevron--open]=\"section.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <span class=\"ffc-section__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n    @if (section.fields.length) {\r\n      <span class=\"ffc-section__count\">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>\r\n    }\r\n\r\n    @if (hasToggle) {\r\n      @if (section.lockVisibility) {\r\n        <span class=\"ffc-lock\" title=\"This section is always visible\">\r\n          <svg width=\"15\" height=\"15\" 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            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n        </span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ffc-toggle\"\r\n          [class.ffc-toggle--on]=\"section.visible\"\r\n          role=\"switch\"\r\n          [attr.aria-checked]=\"section.visible\"\r\n          [attr.aria-label]=\"'Show ' + displayLabel\"\r\n          (click)=\"onToggleVisible()\"\r\n        >\r\n          <span class=\"ffc-toggle__thumb\"></span>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"ffc-section__body\">\r\n      <div\r\n        class=\"ffc-section__fields\"\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!section.reorderable\"\r\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\r\n      >\r\n        @for (field of section.fields; track trackByIndex($index); let fi = $index) {\r\n          <lib-config-field-node\r\n            cdkDrag\r\n            [cdkDragDisabled]=\"!section.reorderable\"\r\n            [field]=\"field\"\r\n            [translate]=\"translate\"\r\n            (toggleVisible)=\"onFieldToggleVisible(fi)\"\r\n            (toggleMandatory)=\"onFieldToggleMandatory(fi)\"\r\n            (colSpanChange)=\"onFieldColSpanChange(fi, $event)\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {\r\n        <lib-config-section-node\r\n          [section]=\"sub\"\r\n          [depth]=\"depth + 1\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onSubToggleVisible(si, $event)\"\r\n          (toggleExpanded)=\"onSubToggleExpanded(si, $event)\"\r\n          (fieldToggleVisible)=\"onSubFieldToggleVisible(si, $event)\"\r\n          (fieldToggleMandatory)=\"onSubFieldToggleMandatory(si, $event)\"\r\n          (fieldColSpanChange)=\"onSubFieldColSpanChange(si, $event)\"\r\n          (fieldReorder)=\"onSubFieldReorder(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-section{border:1px solid var(--ffc-section-border, #e5e7eb);border-radius:var(--ffc-section-radius, 10px);background:var(--ffc-section-bg, #ffffff);overflow:hidden}.ffc-section--nested{border-color:var(--ffc-section-nested-border, #eef0f2);background:var(--ffc-section-nested-bg, #fbfcfd)}.ffc-section--hidden .ffc-section__label,.ffc-section--hidden .ffc-section__count{opacity:.55}.ffc-section__header{display:flex;align-items:center;gap:10px;padding:var(--ffc-section-header-padding, 12px 14px);background:var(--ffc-section-header-bg, #f6f7f8);-webkit-user-select:none;user-select:none}.ffc-section--nested .ffc-section__header{background:var(--ffc-section-nested-header-bg, #f1f3f5)}.ffc-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--ffc-chevron-color, #6b7280);flex-shrink:0}.ffc-section__chevron{transform:rotate(-90deg);transition:transform .2s}.ffc-section__chevron--open{transform:rotate(0)}.ffc-section__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-section-label-size, 14px);font-weight:600;color:var(--ffc-section-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-section__count{flex-shrink:0;font-size:var(--ffc-count-size, 12px);color:var(--ffc-count-color, #7b8794);white-space:nowrap}.ffc-section__body{padding:var(--ffc-section-body-padding, 8px 14px 14px 14px);display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}@media(max-width:640px){.ffc-section__body{padding:8px 10px 10px 18px;gap:6px}}.ffc-section__fields{display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}\n"] }]
         }], propDecorators: { section: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11130,22 +11241,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], fieldToggleMandatory: [{
                 type: Output
+            }], fieldColSpanChange: [{
+                type: Output
+            }], fieldReorder: [{
+                type: Output
             }] } });
 
 /**
  * Form Field Configuration
  * ------------------------
  * Renders a compact tree of a form schema's sections and fields, each with a
- * **visibility** toggle and a **mandatory** control. Intended to be embedded
- * inside a `cc-confirmation-modal` on a host page ("Configure fields").
+ * **visibility** toggle, a **mandatory** control, an editable **column span**,
+ * and a drag handle to **reorder** fields within their own section. Intended to
+ * be embedded inside a `cc-confirmation-modal` on a host page ("Configure fields").
  *
  * Pass a `FormSchema` via `[schema]`. The input is deep-cloned, so it is never
  * mutated. When the user confirms, call `getUpdatedSchema()` to read back the
- * modified schema (visible/isEnabled/disabled and required flags updated).
+ * modified schema (visible/isEnabled/disabled, required, and colSpan flags
+ * updated, and each section's own children reordered to match the tree).
  *
  * Fields/sections carrying `lockVisibility: true` cannot be hidden, and
  * `lockMandatory: true` freezes their required state.
  *
+ * Reordering is scoped to one section's direct fields — a field can never be
+ * dragged into another section, and a field can never be dragged above a field
+ * it depends on via `optionConfig.dependencies` (e.g. "state" can't sort above
+ * "country"). Sections whose children include a `ROW` wrapper can't be
+ * reordered at all (dragging is disabled) to avoid flattening the row layout.
+ *
  * @example
  * ```html
  * <cc-confirmation-modal [isOpen]="open" (confirm)="save()" (cancel)="open = false">
@@ -11190,15 +11313,21 @@ class FormFieldConfigurationComponent {
     onFieldToggleMandatory(sectionIndex, payload) {
         this.store.toggleFieldMandatory([sectionIndex, ...payload.sectionPath], payload.fieldIndex);
     }
+    onFieldColSpanChange(sectionIndex, payload) {
+        this.store.setFieldColSpan([sectionIndex, ...payload.sectionPath], payload.fieldIndex, payload.colSpan);
+    }
+    onFieldReorder(sectionIndex, payload) {
+        this.store.reorderField([sectionIndex, ...payload.sectionPath], payload.previousIndex, payload.currentIndex);
+    }
     trackByIndex(index) {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FormFieldConfigurationComponent, isStandalone: false, selector: "lib-form-field-configuration", inputs: { schema: "schema", translate: "translate", showLegend: "showLegend" }, providers: [FieldConfigurationService], usesOnChanges: true, ngImport: i0, template: "<div class=\"ffc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"ffc-legend\">\r\n      <span class=\"ffc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" 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          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n      <span class=\"ffc-legend__item\">\r\n        <span class=\"ffc-legend__asterisk\" aria-hidden=\"true\">&#10033;</span>\r\n        <span>Mandatory (only if visible)</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"ffc-tree\">\r\n    @for (section of store.sections(); track trackByIndex($index); let si = $index) {\r\n      <lib-config-section-node\r\n        [section]=\"section\"\r\n        [depth]=\"0\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(si, $event)\"\r\n        (toggleExpanded)=\"onToggleExpanded(si, $event)\"\r\n        (fieldToggleVisible)=\"onFieldToggleVisible(si, $event)\"\r\n        (fieldToggleMandatory)=\"onFieldToggleMandatory(si, $event)\"\r\n      />\r\n    }\r\n\r\n    @if (store.sections().length === 0) {\r\n      <div class=\"ffc-empty\">\r\n        <p>No sections or fields found in the schema.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".ffc-root{display:flex;flex-direction:column;gap:var(--ffc-root-gap, 12px);font-family:var(--ffc-font-family, inherit)}.ffc-legend{display:flex;align-items:center;gap:var(--ffc-legend-gap, 24px);padding:var(--ffc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--ffc-legend-border, #eef0f2);flex-wrap:wrap}.ffc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--ffc-legend-size, 13px);color:var(--ffc-legend-color, #52606d)}.ffc-legend__asterisk{color:var(--ffc-asterisk-color, #d97757);font-size:14px;line-height:1}.ffc-tree{display:flex;flex-direction:column;gap:var(--ffc-tree-gap, 12px)}.ffc-empty{padding:24px;text-align:center;color:var(--ffc-empty-color, #9aa2ab);font-size:13px}\n"], dependencies: [{ kind: "component", type: ConfigSectionNodeComponent, selector: "lib-config-section-node", inputs: ["section", "depth", "translate"], outputs: ["toggleVisible", "toggleExpanded", "fieldToggleVisible", "fieldToggleMandatory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FormFieldConfigurationComponent, isStandalone: false, selector: "lib-form-field-configuration", inputs: { schema: "schema", translate: "translate", showLegend: "showLegend" }, providers: [FieldConfigurationService], usesOnChanges: true, ngImport: i0, template: "<div class=\"ffc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"ffc-legend\">\r\n      <span class=\"ffc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" 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          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n      <span class=\"ffc-legend__item\">\r\n        <span class=\"ffc-legend__asterisk\" aria-hidden=\"true\">&#10033;</span>\r\n        <span>Mandatory (only if visible)</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"ffc-tree\">\r\n    @for (section of store.sections(); track trackByIndex($index); let si = $index) {\r\n      <lib-config-section-node\r\n        [section]=\"section\"\r\n        [depth]=\"0\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(si, $event)\"\r\n        (toggleExpanded)=\"onToggleExpanded(si, $event)\"\r\n        (fieldToggleVisible)=\"onFieldToggleVisible(si, $event)\"\r\n        (fieldToggleMandatory)=\"onFieldToggleMandatory(si, $event)\"\r\n        (fieldColSpanChange)=\"onFieldColSpanChange(si, $event)\"\r\n        (fieldReorder)=\"onFieldReorder(si, $event)\"\r\n      />\r\n    }\r\n\r\n    @if (store.sections().length === 0) {\r\n      <div class=\"ffc-empty\">\r\n        <p>No sections or fields found in the schema.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".ffc-root{display:flex;flex-direction:column;gap:var(--ffc-root-gap, 12px);font-family:var(--ffc-font-family, inherit)}.ffc-legend{display:flex;align-items:center;gap:var(--ffc-legend-gap, 24px);padding:var(--ffc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--ffc-legend-border, #eef0f2);flex-wrap:wrap}.ffc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--ffc-legend-size, 13px);color:var(--ffc-legend-color, #52606d)}.ffc-legend__asterisk{color:var(--ffc-asterisk-color, #d97757);font-size:14px;line-height:1}.ffc-tree{display:flex;flex-direction:column;gap:var(--ffc-tree-gap, 12px)}.ffc-empty{padding:24px;text-align:center;color:var(--ffc-empty-color, #9aa2ab);font-size:13px}\n"], dependencies: [{ kind: "component", type: ConfigSectionNodeComponent, selector: "lib-config-section-node", inputs: ["section", "depth", "translate"], outputs: ["toggleVisible", "toggleExpanded", "fieldToggleVisible", "fieldToggleMandatory", "fieldColSpanChange", "fieldReorder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-field-configuration', standalone: false, providers: [FieldConfigurationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ffc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"ffc-legend\">\r\n      <span class=\"ffc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" 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          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n      <span class=\"ffc-legend__item\">\r\n        <span class=\"ffc-legend__asterisk\" aria-hidden=\"true\">&#10033;</span>\r\n        <span>Mandatory (only if visible)</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"ffc-tree\">\r\n    @for (section of store.sections(); track trackByIndex($index); let si = $index) {\r\n      <lib-config-section-node\r\n        [section]=\"section\"\r\n        [depth]=\"0\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(si, $event)\"\r\n        (toggleExpanded)=\"onToggleExpanded(si, $event)\"\r\n        (fieldToggleVisible)=\"onFieldToggleVisible(si, $event)\"\r\n        (fieldToggleMandatory)=\"onFieldToggleMandatory(si, $event)\"\r\n      />\r\n    }\r\n\r\n    @if (store.sections().length === 0) {\r\n      <div class=\"ffc-empty\">\r\n        <p>No sections or fields found in the schema.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".ffc-root{display:flex;flex-direction:column;gap:var(--ffc-root-gap, 12px);font-family:var(--ffc-font-family, inherit)}.ffc-legend{display:flex;align-items:center;gap:var(--ffc-legend-gap, 24px);padding:var(--ffc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--ffc-legend-border, #eef0f2);flex-wrap:wrap}.ffc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--ffc-legend-size, 13px);color:var(--ffc-legend-color, #52606d)}.ffc-legend__asterisk{color:var(--ffc-asterisk-color, #d97757);font-size:14px;line-height:1}.ffc-tree{display:flex;flex-direction:column;gap:var(--ffc-tree-gap, 12px)}.ffc-empty{padding:24px;text-align:center;color:var(--ffc-empty-color, #9aa2ab);font-size:13px}\n"] }]
+            args: [{ selector: 'lib-form-field-configuration', standalone: false, providers: [FieldConfigurationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ffc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"ffc-legend\">\r\n      <span class=\"ffc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" 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          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n      <span class=\"ffc-legend__item\">\r\n        <span class=\"ffc-legend__asterisk\" aria-hidden=\"true\">&#10033;</span>\r\n        <span>Mandatory (only if visible)</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"ffc-tree\">\r\n    @for (section of store.sections(); track trackByIndex($index); let si = $index) {\r\n      <lib-config-section-node\r\n        [section]=\"section\"\r\n        [depth]=\"0\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(si, $event)\"\r\n        (toggleExpanded)=\"onToggleExpanded(si, $event)\"\r\n        (fieldToggleVisible)=\"onFieldToggleVisible(si, $event)\"\r\n        (fieldToggleMandatory)=\"onFieldToggleMandatory(si, $event)\"\r\n        (fieldColSpanChange)=\"onFieldColSpanChange(si, $event)\"\r\n        (fieldReorder)=\"onFieldReorder(si, $event)\"\r\n      />\r\n    }\r\n\r\n    @if (store.sections().length === 0) {\r\n      <div class=\"ffc-empty\">\r\n        <p>No sections or fields found in the schema.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".ffc-root{display:flex;flex-direction:column;gap:var(--ffc-root-gap, 12px);font-family:var(--ffc-font-family, inherit)}.ffc-legend{display:flex;align-items:center;gap:var(--ffc-legend-gap, 24px);padding:var(--ffc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--ffc-legend-border, #eef0f2);flex-wrap:wrap}.ffc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--ffc-legend-size, 13px);color:var(--ffc-legend-color, #52606d)}.ffc-legend__asterisk{color:var(--ffc-asterisk-color, #d97757);font-size:14px;line-height:1}.ffc-tree{display:flex;flex-direction:column;gap:var(--ffc-tree-gap, 12px)}.ffc-empty{padding:24px;text-align:center;color:var(--ffc-empty-color, #9aa2ab);font-size:13px}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11217,8 +11346,10 @@ class FormFieldConfigurationModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, declarations: [FormFieldConfigurationComponent,
             ConfigSectionNodeComponent,
-            ConfigFieldNodeComponent], imports: [CommonModule], exports: [FormFieldConfigurationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, imports: [CommonModule] });
+            ConfigFieldNodeComponent], imports: [CommonModule,
+            DragDropModule], exports: [FormFieldConfigurationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, imports: [CommonModule,
+            DragDropModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, decorators: [{
             type: NgModule,
@@ -11226,6 +11357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     declarations: [...COMPONENTS$1],
                     imports: [
                         CommonModule,
+                        DragDropModule,
                     ],
                     exports: [
                         FormFieldConfigurationComponent,
@@ -11251,7 +11383,8 @@ class TableColumnConfigurationService {
      */
     loadConfig(config) {
         const workingConfig = JSON.parse(JSON.stringify(config));
-        const columns = (workingConfig.columns ?? []).map(col => this._buildColumn(col));
+        workingConfig.columns = this._sortBySequence(workingConfig.columns ?? []);
+        const columns = workingConfig.columns.map(col => this._buildColumn(col));
         this._state.set({ columns, workingConfig });
     }
     // ── Mutations ─────────────────────────────────────────────────────────────
@@ -11262,6 +11395,14 @@ class TableColumnConfigurationService {
             columns: state.columns.map((c, i) => i === index && !c.lockVisibility ? { ...c, visible: !c.visible } : c),
         }));
     }
+    /** Move a column from `previousIndex` to `currentIndex` (drag-and-drop reorder). */
+    reorderColumn(previousIndex, currentIndex) {
+        this._state.update(state => {
+            const columns = [...state.columns];
+            moveItemInArray(columns, previousIndex, currentIndex);
+            return { ...state, columns };
+        });
+    }
     // ── Output ────────────────────────────────────────────────────────────────
     /**
      * Produce the updated config. Writes the current node state onto the working
@@ -11272,10 +11413,13 @@ class TableColumnConfigurationService {
         const { columns, workingConfig } = this._state();
         if (!workingConfig)
             return null;
-        for (const node of columns) {
+        columns.forEach((node, index) => {
             node.column.isEnabled = node.visible;
             node.column.visible = node.visible; // backward compatibility
-        }
+            node.column.sequence = index;
+        });
+        // Keep the working config's columns array in sync with the (possibly reordered) node list.
+        workingConfig.columns = columns.map(node => node.column);
         return JSON.parse(JSON.stringify(workingConfig));
     }
     // ── Private helpers ─────────────────────────────────────────────────────────
@@ -11288,6 +11432,21 @@ class TableColumnConfigurationService {
             lockVisibility: column.lockVisibility === true,
         };
     }
+    /**
+     * Orders columns by `sequence` (ascending). Columns without a `sequence` keep their
+     * original relative order, placed after any columns that do have one — so configs that
+     * never set `sequence` come back untouched (stable sort).
+     */
+    _sortBySequence(columns) {
+        const hasSequence = columns.some(c => c.sequence !== undefined && c.sequence !== null);
+        if (!hasSequence)
+            return columns;
+        return [...columns].sort((a, b) => {
+            const aSeq = a.sequence ?? Number.MAX_SAFE_INTEGER;
+            const bSeq = b.sequence ?? Number.MAX_SAFE_INTEGER;
+            return aSeq - bSeq;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationService });
 }
@@ -11310,11 +11469,11 @@ class ConfigColumnNodeComponent {
         return this.translate ? this.translate(label) : label;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigColumnNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigColumnNodeComponent, isStandalone: false, selector: "lib-config-column-node", inputs: { column: "column", translate: "translate" }, outputs: { toggleVisible: "toggleVisible" }, ngImport: i0, template: "<div\r\n  class=\"tcc-col\"\r\n  [class.tcc-col--hidden]=\"!column.visible\"\r\n  [class.tcc-col--locked]=\"column.lockVisibility\"\r\n>\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"tcc-col__eye\" [class.tcc-col__eye--off]=\"!column.visible\" aria-hidden=\"true\">\r\n    @if (column.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"tcc-col__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (column.lockVisibility) {\r\n    <span class=\"tcc-lock\" title=\"This column is always visible\">\r\n      <svg width=\"15\" height=\"15\" 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        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tcc-toggle\"\r\n      [class.tcc-toggle--on]=\"column.visible\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"column.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"tcc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".tcc-toggle{position:relative;flex-shrink:0;width:var(--tcc-toggle-width, 38px);height:var(--tcc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--tcc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.tcc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--tcc-toggle-height, 22px) - 4px);height:calc(var(--tcc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--tcc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.tcc-toggle--on{background:var(--tcc-toggle-on-bg, #2f9e6f)}.tcc-toggle--on .tcc-toggle__thumb{left:calc(100% - (var(--tcc-toggle-height, 22px) - 2px))}.tcc-toggle:focus-visible{outline:2px solid var(--tcc-focus-ring, #2f9e6f);outline-offset:2px}.tcc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tcc-toggle-width, 38px);color:var(--tcc-lock-color, #9aa2ab)}.tcc-col{display:flex;align-items:center;gap:var(--tcc-col-gap, 12px);padding:var(--tcc-col-padding, 10px 14px);border-radius:var(--tcc-col-radius, 8px);background:var(--tcc-col-bg, #ffffff);border:1px solid var(--tcc-col-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.tcc-col:hover:not(.tcc-col--locked){background:var(--tcc-col-hover-bg, #f8fafc)}.tcc-col--hidden .tcc-col__eye,.tcc-col--hidden .tcc-col__label{opacity:.55}.tcc-col--locked{background:var(--tcc-col-locked-bg, #f6f7f8)}.tcc-col__eye{display:flex;align-items:center;color:var(--tcc-eye-color, #6b7280);flex-shrink:0}.tcc-col__eye--off{color:var(--tcc-eye-off-color, #b0b6be)}.tcc-col__label{flex:1 1 auto;min-width:0;font-size:var(--tcc-col-label-size, 14px);color:var(--tcc-col-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigColumnNodeComponent, isStandalone: false, selector: "lib-config-column-node", inputs: { column: "column", translate: "translate" }, outputs: { toggleVisible: "toggleVisible" }, ngImport: i0, template: "<div\r\n  class=\"tcc-col\"\r\n  [class.tcc-col--hidden]=\"!column.visible\"\r\n  [class.tcc-col--locked]=\"column.lockVisibility\"\r\n>\r\n  <!-- Drag handle (reorder via the sequence field) -->\r\n  <span class=\"tcc-col__grip\" title=\"Drag to reorder\" aria-hidden=\"true\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <circle cx=\"8\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"19\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"19\" r=\"1.6\"></circle>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"tcc-col__eye\" [class.tcc-col__eye--off]=\"!column.visible\" aria-hidden=\"true\">\r\n    @if (column.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"tcc-col__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (column.lockVisibility) {\r\n    <span class=\"tcc-lock\" title=\"This column is always visible\">\r\n      <svg width=\"15\" height=\"15\" 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        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tcc-toggle\"\r\n      [class.tcc-toggle--on]=\"column.visible\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"column.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"tcc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".tcc-toggle{position:relative;flex-shrink:0;width:var(--tcc-toggle-width, 38px);height:var(--tcc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--tcc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.tcc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--tcc-toggle-height, 22px) - 4px);height:calc(var(--tcc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--tcc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.tcc-toggle--on{background:var(--tcc-toggle-on-bg, #2f9e6f)}.tcc-toggle--on .tcc-toggle__thumb{left:calc(100% - (var(--tcc-toggle-height, 22px) - 2px))}.tcc-toggle:focus-visible{outline:2px solid var(--tcc-focus-ring, #2f9e6f);outline-offset:2px}.tcc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tcc-toggle-width, 38px);color:var(--tcc-lock-color, #9aa2ab)}:host{display:block;cursor:grab}:host.cdk-drag-dragging,:host.cdk-drag-placeholder{cursor:grabbing}.tcc-col{display:flex;align-items:center;gap:var(--tcc-col-gap, 12px);padding:var(--tcc-col-padding, 10px 14px);border-radius:var(--tcc-col-radius, 8px);background:var(--tcc-col-bg, #ffffff);border:1px solid var(--tcc-col-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.tcc-col:hover:not(.tcc-col--locked){background:var(--tcc-col-hover-bg, #f8fafc)}.tcc-col__grip{display:flex;align-items:center;color:var(--tcc-grip-color, #cbd2d9);flex-shrink:0}.tcc-col--hidden .tcc-col__eye,.tcc-col--hidden .tcc-col__label{opacity:.55}.tcc-col--locked{background:var(--tcc-col-locked-bg, #f6f7f8)}.tcc-col__eye{display:flex;align-items:center;color:var(--tcc-eye-color, #6b7280);flex-shrink:0}.tcc-col__eye--off{color:var(--tcc-eye-off-color, #b0b6be)}.tcc-col__label{flex:1 1 auto;min-width:0;font-size:var(--tcc-col-label-size, 14px);color:var(--tcc-col-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigColumnNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-column-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"tcc-col\"\r\n  [class.tcc-col--hidden]=\"!column.visible\"\r\n  [class.tcc-col--locked]=\"column.lockVisibility\"\r\n>\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"tcc-col__eye\" [class.tcc-col__eye--off]=\"!column.visible\" aria-hidden=\"true\">\r\n    @if (column.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"tcc-col__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (column.lockVisibility) {\r\n    <span class=\"tcc-lock\" title=\"This column is always visible\">\r\n      <svg width=\"15\" height=\"15\" 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        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tcc-toggle\"\r\n      [class.tcc-toggle--on]=\"column.visible\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"column.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"tcc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".tcc-toggle{position:relative;flex-shrink:0;width:var(--tcc-toggle-width, 38px);height:var(--tcc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--tcc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.tcc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--tcc-toggle-height, 22px) - 4px);height:calc(var(--tcc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--tcc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.tcc-toggle--on{background:var(--tcc-toggle-on-bg, #2f9e6f)}.tcc-toggle--on .tcc-toggle__thumb{left:calc(100% - (var(--tcc-toggle-height, 22px) - 2px))}.tcc-toggle:focus-visible{outline:2px solid var(--tcc-focus-ring, #2f9e6f);outline-offset:2px}.tcc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tcc-toggle-width, 38px);color:var(--tcc-lock-color, #9aa2ab)}.tcc-col{display:flex;align-items:center;gap:var(--tcc-col-gap, 12px);padding:var(--tcc-col-padding, 10px 14px);border-radius:var(--tcc-col-radius, 8px);background:var(--tcc-col-bg, #ffffff);border:1px solid var(--tcc-col-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.tcc-col:hover:not(.tcc-col--locked){background:var(--tcc-col-hover-bg, #f8fafc)}.tcc-col--hidden .tcc-col__eye,.tcc-col--hidden .tcc-col__label{opacity:.55}.tcc-col--locked{background:var(--tcc-col-locked-bg, #f6f7f8)}.tcc-col__eye{display:flex;align-items:center;color:var(--tcc-eye-color, #6b7280);flex-shrink:0}.tcc-col__eye--off{color:var(--tcc-eye-off-color, #b0b6be)}.tcc-col__label{flex:1 1 auto;min-width:0;font-size:var(--tcc-col-label-size, 14px);color:var(--tcc-col-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'lib-config-column-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"tcc-col\"\r\n  [class.tcc-col--hidden]=\"!column.visible\"\r\n  [class.tcc-col--locked]=\"column.lockVisibility\"\r\n>\r\n  <!-- Drag handle (reorder via the sequence field) -->\r\n  <span class=\"tcc-col__grip\" title=\"Drag to reorder\" aria-hidden=\"true\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <circle cx=\"8\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"19\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"19\" r=\"1.6\"></circle>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"tcc-col__eye\" [class.tcc-col__eye--off]=\"!column.visible\" aria-hidden=\"true\">\r\n    @if (column.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"tcc-col__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (column.lockVisibility) {\r\n    <span class=\"tcc-lock\" title=\"This column is always visible\">\r\n      <svg width=\"15\" height=\"15\" 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        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tcc-toggle\"\r\n      [class.tcc-toggle--on]=\"column.visible\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"column.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"tcc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".tcc-toggle{position:relative;flex-shrink:0;width:var(--tcc-toggle-width, 38px);height:var(--tcc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--tcc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.tcc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--tcc-toggle-height, 22px) - 4px);height:calc(var(--tcc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--tcc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.tcc-toggle--on{background:var(--tcc-toggle-on-bg, #2f9e6f)}.tcc-toggle--on .tcc-toggle__thumb{left:calc(100% - (var(--tcc-toggle-height, 22px) - 2px))}.tcc-toggle:focus-visible{outline:2px solid var(--tcc-focus-ring, #2f9e6f);outline-offset:2px}.tcc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tcc-toggle-width, 38px);color:var(--tcc-lock-color, #9aa2ab)}:host{display:block;cursor:grab}:host.cdk-drag-dragging,:host.cdk-drag-placeholder{cursor:grabbing}.tcc-col{display:flex;align-items:center;gap:var(--tcc-col-gap, 12px);padding:var(--tcc-col-padding, 10px 14px);border-radius:var(--tcc-col-radius, 8px);background:var(--tcc-col-bg, #ffffff);border:1px solid var(--tcc-col-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.tcc-col:hover:not(.tcc-col--locked){background:var(--tcc-col-hover-bg, #f8fafc)}.tcc-col__grip{display:flex;align-items:center;color:var(--tcc-grip-color, #cbd2d9);flex-shrink:0}.tcc-col--hidden .tcc-col__eye,.tcc-col--hidden .tcc-col__label{opacity:.55}.tcc-col--locked{background:var(--tcc-col-locked-bg, #f6f7f8)}.tcc-col__eye{display:flex;align-items:center;color:var(--tcc-eye-color, #6b7280);flex-shrink:0}.tcc-col__eye--off{color:var(--tcc-eye-off-color, #b0b6be)}.tcc-col__label{flex:1 1 auto;min-width:0;font-size:var(--tcc-col-label-size, 14px);color:var(--tcc-col-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { column: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11328,15 +11487,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Table Column Configuration
  * --------------------------
  * Renders a compact list of a table config's columns, each with a **visibility**
- * toggle. Intended to be embedded inside a `cc-confirmation-modal` on a host page
- * ("Configure columns").
+ * toggle and a drag handle for **reordering**. Intended to be embedded inside a
+ * `cc-confirmation-modal` on a host page ("Configure columns").
  *
  * Pass a `TableConfig` via `[config]`. The input is deep-cloned, so it is never
- * mutated. When the user confirms, call `getUpdatedConfig()` to read back the
- * modified config (isEnabled/visible flags updated per column).
+ * mutated. Columns load pre-sorted by `sequence` (if set); columns without a
+ * `sequence` keep their original relative order. When the user confirms, call
+ * `getUpdatedConfig()` to read back the modified config (isEnabled/visible flags
+ * and `sequence` updated per column, in the new order).
  *
  * Columns carrying `lockVisibility: true` cannot be hidden — their toggle is
- * replaced by a lock icon.
+ * replaced by a lock icon. They can still be dragged to reorder.
  *
  * @example
  * ```html
@@ -11372,15 +11533,21 @@ class TableColumnConfigurationComponent {
     onToggleVisible(index) {
         this.store.toggleColumnVisible(index);
     }
+    /** Drag-and-drop reorder. Written back as `sequence` on each column by `getUpdatedConfig()`. */
+    onDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        this.store.reorderColumn(event.previousIndex, event.currentIndex);
+    }
     trackByIndex(index) {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableColumnConfigurationComponent, isStandalone: false, selector: "lib-table-column-configuration", inputs: { config: "config", translate: "translate", showLegend: "showLegend" }, providers: [TableColumnConfigurationService], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"tcc-legend\">\r\n      <span class=\"tcc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" 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          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"tcc-list\">\r\n    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {\r\n      <lib-config-column-node\r\n        [column]=\"column\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(ci)\"\r\n      />\r\n    }\r\n\r\n    @if (store.columns().length === 0) {\r\n      <div class=\"tcc-empty\">\r\n        <p>No columns found in the config.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".tcc-root{display:flex;flex-direction:column;gap:var(--tcc-root-gap, 12px);font-family:var(--tcc-font-family, inherit)}.tcc-legend{display:flex;align-items:center;gap:var(--tcc-legend-gap, 24px);padding:var(--tcc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--tcc-legend-border, #eef0f2);flex-wrap:wrap}.tcc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--tcc-legend-size, 13px);color:var(--tcc-legend-color, #52606d)}.tcc-list{display:flex;flex-direction:column;gap:var(--tcc-list-gap, 10px)}.tcc-empty{padding:24px;text-align:center;color:var(--tcc-empty-color, #9aa2ab);font-size:13px}\n"], dependencies: [{ kind: "component", type: ConfigColumnNodeComponent, selector: "lib-config-column-node", inputs: ["column", "translate"], outputs: ["toggleVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableColumnConfigurationComponent, isStandalone: false, selector: "lib-table-column-configuration", inputs: { config: "config", translate: "translate", showLegend: "showLegend" }, providers: [TableColumnConfigurationService], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"tcc-legend\">\r\n      <span class=\"tcc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" 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          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"tcc-list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {\r\n      <lib-config-column-node\r\n        cdkDrag\r\n        [column]=\"column\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(ci)\"\r\n      />\r\n    }\r\n\r\n    @if (store.columns().length === 0) {\r\n      <div class=\"tcc-empty\">\r\n        <p>No columns found in the config.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".tcc-root{display:flex;flex-direction:column;gap:var(--tcc-root-gap, 12px);font-family:var(--tcc-font-family, inherit)}.tcc-legend{display:flex;align-items:center;gap:var(--tcc-legend-gap, 24px);padding:var(--tcc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--tcc-legend-border, #eef0f2);flex-wrap:wrap}.tcc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--tcc-legend-size, 13px);color:var(--tcc-legend-color, #52606d)}.tcc-list{display:flex;flex-direction:column;gap:var(--tcc-list-gap, 10px)}.tcc-empty{padding:24px;text-align:center;color:var(--tcc-empty-color, #9aa2ab);font-size:13px}\n"], dependencies: [{ kind: "directive", type: i1$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ConfigColumnNodeComponent, selector: "lib-config-column-node", inputs: ["column", "translate"], outputs: ["toggleVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-column-configuration', standalone: false, providers: [TableColumnConfigurationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tcc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"tcc-legend\">\r\n      <span class=\"tcc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" 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          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"tcc-list\">\r\n    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {\r\n      <lib-config-column-node\r\n        [column]=\"column\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(ci)\"\r\n      />\r\n    }\r\n\r\n    @if (store.columns().length === 0) {\r\n      <div class=\"tcc-empty\">\r\n        <p>No columns found in the config.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".tcc-root{display:flex;flex-direction:column;gap:var(--tcc-root-gap, 12px);font-family:var(--tcc-font-family, inherit)}.tcc-legend{display:flex;align-items:center;gap:var(--tcc-legend-gap, 24px);padding:var(--tcc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--tcc-legend-border, #eef0f2);flex-wrap:wrap}.tcc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--tcc-legend-size, 13px);color:var(--tcc-legend-color, #52606d)}.tcc-list{display:flex;flex-direction:column;gap:var(--tcc-list-gap, 10px)}.tcc-empty{padding:24px;text-align:center;color:var(--tcc-empty-color, #9aa2ab);font-size:13px}\n"] }]
+            args: [{ selector: 'lib-table-column-configuration', standalone: false, providers: [TableColumnConfigurationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tcc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"tcc-legend\">\r\n      <span class=\"tcc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" 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          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"tcc-list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {\r\n      <lib-config-column-node\r\n        cdkDrag\r\n        [column]=\"column\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(ci)\"\r\n      />\r\n    }\r\n\r\n    @if (store.columns().length === 0) {\r\n      <div class=\"tcc-empty\">\r\n        <p>No columns found in the config.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".tcc-root{display:flex;flex-direction:column;gap:var(--tcc-root-gap, 12px);font-family:var(--tcc-font-family, inherit)}.tcc-legend{display:flex;align-items:center;gap:var(--tcc-legend-gap, 24px);padding:var(--tcc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--tcc-legend-border, #eef0f2);flex-wrap:wrap}.tcc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--tcc-legend-size, 13px);color:var(--tcc-legend-color, #52606d)}.tcc-list{display:flex;flex-direction:column;gap:var(--tcc-list-gap, 10px)}.tcc-empty{padding:24px;text-align:center;color:var(--tcc-empty-color, #9aa2ab);font-size:13px}\n"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11397,8 +11564,10 @@ const COMPONENTS = [
 class TableColumnConfigurationModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, declarations: [TableColumnConfigurationComponent,
-            ConfigColumnNodeComponent], imports: [CommonModule], exports: [TableColumnConfigurationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, imports: [CommonModule] });
+            ConfigColumnNodeComponent], imports: [CommonModule,
+            DragDropModule], exports: [TableColumnConfigurationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, imports: [CommonModule,
+            DragDropModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, decorators: [{
             type: NgModule,
@@ -11406,6 +11575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     declarations: [...COMPONENTS],
                     imports: [
                         CommonModule,
+                        DragDropModule,
                     ],
                     exports: [
                         TableColumnConfigurationComponent,
@@ -13498,6 +13668,7 @@ class SmartTableComponent {
     ngOnInit() {
         window.addEventListener('scroll', this.onScrollCapture, true);
         if (this.config) {
+            this.sortColumnsBySequence();
             this.applyPaginationDefaults();
             if (this.config.sortBy) {
                 this.activeSort.key = this.config.sortBy;
@@ -13528,8 +13699,9 @@ class SmartTableComponent {
         if (changes['totalItemsCount'] && this.totalItemsCount !== undefined) {
             this.totalItems = this.totalItemsCount;
         }
-        // Config changed (non-first) — reload filter opts; reload data only if NOT in external mode
+        // Config changed — re-apply column ordering whenever a new config object arrives
         if (changes['config'] && !changes['config'].firstChange) {
+            this.sortColumnsBySequence();
             this.applyPaginationDefaults();
             this.loadFilterOptions();
             if (this.tableData === undefined) {
@@ -14260,6 +14432,24 @@ class SmartTableComponent {
     get columnCount() {
         return this.config.columns.length;
     }
+    /**
+     * Orders `config.columns` by their `sequence` value (ascending). Columns without a
+     * `sequence` are left in their original relative order, placed after any columns that
+     * do have one — so configs that never set `sequence` are left untouched (stable sort).
+     */
+    sortColumnsBySequence() {
+        const columns = this.config?.columns;
+        if (!columns || columns.length === 0)
+            return;
+        const hasSequence = columns.some(c => c.sequence !== undefined && c.sequence !== null);
+        if (!hasSequence)
+            return;
+        this.config.columns = [...columns].sort((a, b) => {
+            const aSeq = a.sequence ?? Number.MAX_SAFE_INTEGER;
+            const bSeq = b.sequence ?? Number.MAX_SAFE_INTEGER;
+            return aSeq - bSeq;
+        });
+    }
     /**
      * Filters out actions/action-items that are either explicitly disabled via
      * `isEnabled: false` or hidden for the given row by their `visibleWhen` /