udp-stencil-component-library 26.5.0-beta.2 → 26.5.0-beta.21

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/typeSpecific/TallyConfig.js

@@ -0,0 +1,59 @@
+import { h } from "@stencil/core";
+import { FieldTypeId } from "../../../../core";
+import { readDraftFieldProperty } from "../utils";
+function readTallyMode(ctx) {
+    const modeRaw = readDraftFieldProperty(ctx, 'tallyMode');
+    return modeRaw === 'include' || modeRaw === 'exclude' ? modeRaw : 'all';
+}
+function collectYesNoSiblings(ctx) {
+    var _a, _b, _c;
+    const out = [];
+    const sections = (_a = ctx.sections) !== null && _a !== void 0 ? _a : [];
+    for (const section of sections) {
+        for (const q of (_b = section.questions) !== null && _b !== void 0 ? _b : []) {
+            if (q.fieldTypeId !== FieldTypeId.YesNo)
+                continue;
+            if (q.id === ctx.currentQuestionId)
+                continue;
+            out.push({
+                value: q.id,
+                label: ((_c = q.questionText) === null || _c === void 0 ? void 0 : _c.trim()) || '(untitled question)',
+            });
+        }
+    }
+    return out;
+}
+export function renderTallyConfig(ctx) {
+    const mode = readTallyMode(ctx);
+    const yesNoOptions = collectYesNoSiblings(ctx);
+    const hasYesNoSiblings = yesNoOptions.length > 0;
+    const modeItems = [
+        { value: 'all', label: 'All Yes/No questions' },
+        { value: 'include', label: 'Only the selected Yes/No questions' },
+        { value: 'exclude', label: 'All except the selected Yes/No questions' },
+    ];
+    const onModeChange = (e) => {
+        var _a;
+        if (ctx.isViewOnly)
+            return;
+        const form = (_a = ctx.getForm) === null || _a === void 0 ? void 0 : _a.call(ctx);
+        if (!form)
+            return;
+        // udp-field already writes `fieldProperties.tallyMode` via its bubble-phase
+        // listener; this target-phase handler adds the cascade — clear the unused
+        // selection array so the wire payload doesn't carry stale ids from the
+        // mode the user just left.
+        const next = e.detail;
+        if (next === 'all') {
+            form.change('fieldProperties.includeFields', []);
+            form.change('fieldProperties.excludeFields', []);
+        }
+        else if (next === 'include') {
+            form.change('fieldProperties.excludeFields', []);
+        }
+        else if (next === 'exclude') {
+            form.change('fieldProperties.includeFields', []);
+        }
+    };
+    return (h("udp-flexbox", { display: "flex", direction: "column", gap: "md" }, h("udp-field", { name: "fieldProperties.tallyMode" }, h("udp-fluent-radio-group", { label: "Which Yes/No questions feed this tally?", orientation: "vertical", items: modeItems, disabled: ctx.isViewOnly, onValueChanged: onModeChange })), !hasYesNoSiblings && (h("udp-text", { variant: "caption1" }, "No other Yes/No questions exist in this form yet.")), hasYesNoSiblings && mode === 'include' && (h("udp-field", { name: "fieldProperties.includeFields" }, h("udp-fluent-dropdown", { label: "Include these Yes/No questions", multiple: true, clearable: true, options: yesNoOptions, optionLabel: "label", optionValue: "value", disabled: ctx.isViewOnly, placeholder: "Select questions to include..." }))), hasYesNoSiblings && mode === 'exclude' && (h("udp-field", { name: "fieldProperties.excludeFields" }, h("udp-fluent-dropdown", { label: "Exclude these Yes/No questions", multiple: true, clearable: true, options: yesNoOptions, optionLabel: "label", optionValue: "value", disabled: ctx.isViewOnly, placeholder: "Select questions to exclude..." })))));
+}

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/typeSpecific/index.js

@@ -0,0 +1,45 @@
+import { FieldTypeId } from "../../../../core";
+import { renderParagraphConfig } from "./ParagraphConfig";
+import { renderListOptionsConfig } from "./ListOptionsConfig";
+import { renderFileUploadConfig } from "./FileUploadConfig";
+import { renderSignatureConfig } from "./SignatureConfig";
+import { renderFormMetadataDisplayConfig } from "./FormMetadataDisplayConfig";
+import { renderLocationConfig } from "./LocationConfig";
+import { renderTableConfig } from "./TableConfig";
+import { renderTallyConfig } from "./TallyConfig";
+/**
+ * Type-specific config dispatcher. Returns the per-type structural /
+ * display config (items, columns, map, etc.) plus the section label so the
+ * caller can wrap it in a labelled accordion. Validation rules are NOT
+ * routed here — those live in the Validation Rules section, driven by
+ * the rule registry. Field types whose only config is validation
+ * (SingleLineText, MultiLineText, DateSelector, TimeSelector,
+ * DateTimeSelector, Number, YesNo, Hidden) fall through to `null`.
+ */
+export function renderTypeSpecific(fieldTypeId, ctx) {
+    switch (fieldTypeId) {
+        case FieldTypeId.Paragraph:
+            return { label: 'Paragraph Text', content: renderParagraphConfig(ctx) };
+        case FieldTypeId.Checkbox:
+        case FieldTypeId.RadioButton:
+        case FieldTypeId.DropdownSingleSelect:
+        case FieldTypeId.DropdownMultipleSelect:
+        case FieldTypeId.ListMultiSelect:
+            return { label: 'List Options', content: renderListOptionsConfig(ctx) };
+        case FieldTypeId.FileUpload:
+        case FieldTypeId.ImageUpload:
+            return { label: 'Upload options', content: renderFileUploadConfig(ctx) };
+        case FieldTypeId.Signature:
+            return { label: 'Signature options', content: renderSignatureConfig(ctx) };
+        case FieldTypeId.FormMetadataDisplay:
+            return { label: 'Display options', content: renderFormMetadataDisplayConfig(ctx) };
+        case FieldTypeId.Location:
+            return { label: 'Location', content: renderLocationConfig(ctx) };
+        case FieldTypeId.Table:
+            return { label: 'Table Columns', content: renderTableConfig(ctx) };
+        case FieldTypeId.Tally:
+            return { label: 'Tally source', content: renderTallyConfig(ctx) };
+        default:
+            return null;
+    }
+}

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/udp-question-config-fluent.css

@@ -0,0 +1,140 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.options-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingVerticalS);
+}
+
+/* Reserved first column for drag handle / alignment. */
+.options-drag-handle-spacer {
+  width: 24px;
+  min-width: 24px;
+}
+
+.option-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
+  color: var(--colorNeutralForeground3);
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.option-drag-handle:active {
+  cursor: grabbing;
+}
+
+/* SortableJS (used by udp-sortable for option rows) */
+.sortable-ghost {
+  opacity: 0.4;
+  border: 2px dashed var(--colorBrandStroke1) !important;
+  background-color: var(--colorBrandBackground2) !important;
+}
+
+.sortable-chosen {
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.sortable-drag {
+  opacity: 0.9;
+  box-shadow: var(--shadow16);
+  cursor: grabbing !important;
+}
+
+.options-grid-header {
+  display: grid;
+  grid-template-columns: 24px 1fr 1fr 32px;
+  gap: var(--spacingHorizontalS);
+  align-items: center;
+}
+
+.options-grid-header-label {
+  font-size: var(--fontSizeBase200);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--colorNeutralForeground2);
+}
+
+.option-row {
+  display: grid;
+  grid-template-columns: 24px 1fr 1fr 32px;
+  gap: var(--spacingHorizontalS);
+  align-items: center;
+  padding: var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalS) 0;
+  background-color: var(--colorNeutralBackground2);
+  border-radius: var(--borderRadiusMedium);
+  margin-bottom: var(--spacingVerticalXS);
+}
+
+/* Choice-options widen Display Text relative to Option Value: in practice
+   most authors only care about the label (the value usually mirrors it or
+   is a short code), so giving Display 2/3 of the available row keeps the
+   important field readable without truncation. Scoped to the choice grid
+   so the shared Table column header stays at 1fr:1fr. */
+.options-grid--choice .options-grid-header,
+.options-grid--choice .option-row {
+  grid-template-columns: 24px 2fr 1fr 32px;
+}
+
+.option-row-actions {
+  display: flex;
+  justify-content: center;
+  min-width: 32px;
+}
+
+.options-add-row {
+  margin-top: 4px;
+  padding: 2px 0 0 0;
+}
+
+/* Table column cards. Mirrors .option-row's horizontal layout so the
+   header strip above the cards aligns with the inputs inside. */
+.table-col-card {
+  background-color: var(--colorNeutralBackground2);
+  border-radius: var(--borderRadiusMedium);
+  padding: var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalS) 0;
+  margin-bottom: var(--spacingVerticalXS);
+}
+
+/* Main row inside a table column card: handle | name | type | delete.
+   Inputs render without inline labels (labels live in .options-grid-header
+   above the cards), so every cell is uniform height and center alignment
+   keeps drag/trash visually centered with the inputs. */
+.table-col-main-row {
+  display: grid;
+  grid-template-columns: 24px 1fr 1fr 32px;
+  gap: var(--spacingHorizontalS);
+  align-items: center;
+}
+
+/* Row of secondary controls inside a table column card (switches, aggregate dropdowns).
+   Indented to align with the input content (past the 24px drag handle + gap). */
+.table-col-secondary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacingHorizontalS);
+  align-items: center;
+  padding-top: var(--spacingVerticalXS);
+  padding-left: calc(24px + var(--spacingHorizontalXS));
+}
+
+@container (max-width: 400px) {
+  .options-grid-header {
+    display: none;
+  }
+  .option-row {
+    grid-template-columns: 24px 1fr 1fr;
+    gap: var(--spacingHorizontalS) 2px;
+    padding: 2px 0;
+  }
+  .option-row-actions {
+    grid-column: 2 / -1;
+    justify-content: flex-end;
+  }
+}

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/udp-question-config-fluent.js

@@ -0,0 +1,299 @@
+import { h } from "@stencil/core";
+import { getType } from "../../form-item-types";
+import { renderBasicsSection, renderFieldBehaviorSection, renderAdvancedSection, } from "./GenericQuestionConfig";
+import { renderTypeSpecific } from "./typeSpecific";
+import { renderValidationRulesSection } from "./ValidationRulesSection";
+export class UdpQuestionConfigFluent {
+    constructor() {
+        this.followUpFormOptions = [];
+        this.isFollowUpFormConfigOn = false;
+        this.isCommentingConfigOn = false;
+        /**
+         * Reference to the Final Form API instance owned by the parent
+         * `<udp-form-component>`, acquired by dispatching `fetchFormInstance` on
+         * connect (the same handshake `<udp-field>` uses). Exposed to
+         * type-specific renderers via `TypeSpecificContext.getForm` so they can
+         * express multi-field cascades (Show Map → also clear Hide Address
+         * Search) and array-shape mutations (items / table-columns CRUD).
+         */
+        this.form = null;
+        this.unsubscribeFormValues = null;
+        /**
+         * Live mirror of Final Form's `values`. Type-specific renderers like
+         * `ListOptionsConfig` and `TableConfig` read directly from this so
+         * add/remove/reorder gestures (which mutate the array via `form.change`
+         * instead of touching `sections`) trigger a re-render the next tick.
+         * Inputs that already live inside `<udp-field>` don't need this — the
+         * subscriber in udp-field handles their value sync independently.
+         */
+        this.formValues = {};
+        this.getForm = () => this.form;
+    }
+    componentDidLoad() {
+        this.el.dispatchEvent(new CustomEvent('fetchFormInstance', {
+            bubbles: true,
+            composed: true,
+            detail: (form) => {
+                this.form = form;
+                this.unsubscribeFormValues = form.subscribe(state => {
+                    var _a;
+                    this.formValues = (_a = state.values) !== null && _a !== void 0 ? _a : {};
+                }, { values: true });
+            },
+        }));
+    }
+    disconnectedCallback() {
+        if (this.unsubscribeFormValues) {
+            this.unsubscribeFormValues();
+            this.unsubscribeFormValues = null;
+        }
+        this.form = null;
+    }
+    get question() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.sections) === null || _a === void 0 ? void 0 : _a[this.sIndex]) === null || _b === void 0 ? void 0 : _b.questions) === null || _c === void 0 ? void 0 : _c[this.qIndex];
+    }
+    buildTypeSpecificContext() {
+        var _a;
+        const question = this.question;
+        const fp = ((_a = question.fieldProperties) !== null && _a !== void 0 ? _a : {});
+        return {
+            fieldProperties: fp,
+            formValues: this.formValues,
+            getForm: this.getForm,
+            isViewOnly: this.isViewOnly,
+            lookupOptions: this.lookupOptions,
+            sections: this.sections,
+            currentQuestionId: question.id,
+        };
+    }
+    render() {
+        const question = this.question;
+        if (!question)
+            return null;
+        const template = getType(question.fieldTypeId);
+        const isQuestionTextRequired = !(template === null || template === void 0 ? void 0 : template.questionTextOptional);
+        const genericProps = {
+            question,
+            isViewOnly: this.isViewOnly,
+            formType: this.formType,
+            isFollowUpFormConfigOn: this.isFollowUpFormConfigOn,
+            isCommentingConfigOn: this.isCommentingConfigOn,
+            isQuestionTextRequired,
+            formValues: this.formValues,
+            followUpFormOptions: this.followUpFormOptions,
+        };
+        const typeSpecificCtx = this.buildTypeSpecificContext();
+        const typeSpecific = renderTypeSpecific(question.fieldTypeId, typeSpecificCtx);
+        // Single-page layout. Section order: Basics → (type-specific) → Field
+        // Behavior → Validation → Advanced. Everything below Basics is a
+        // contained accordion — its card chrome is the section boundary, so no
+        // explicit dividers are needed. Type-specific opens expanded by default
+        // (it's the field's primary config); Validation / Advanced start collapsed.
+        return (h("div", { class: "config-drawer" }, h("udp-flexbox", { display: "flex", direction: "column", gap: "md" }, renderBasicsSection(genericProps), typeSpecific && (h("udp-accordion", { expandmode: "multi", appearance: "contained", items: [{ id: 'type-specific', label: typeSpecific.label, expanded: true, block: true }] }, h("udp-flexbox", { slot: "type-specific-content", direction: "column", gap: "md" }, typeSpecific.content))), renderFieldBehaviorSection(genericProps), h("udp-accordion", { expandmode: "multi", appearance: "contained", items: [{ id: 'validation', label: 'Validation', expanded: false, block: true }] }, h("udp-flexbox", { slot: "validation-content", direction: "column", gap: "md" }, renderValidationRulesSection({ question, ctx: typeSpecificCtx }))), renderAdvancedSection(genericProps))));
+    }
+    static get is() { return "udp-question-config-fluent"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-question-config-fluent.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-question-config-fluent.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sections": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SectionWithQuestions[]",
+                    "resolved": "SectionWithQuestions[]",
+                    "references": {
+                        "SectionWithQuestions": {
+                            "location": "import",
+                            "path": "../../../core",
+                            "id": "src/components/forms/udp-question-form/core/index.ts::SectionWithQuestions",
+                            "referenceLocation": "SectionWithQuestions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "sIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "s-index"
+            },
+            "qIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "q-index"
+            },
+            "isViewOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-view-only"
+            },
+            "lookupOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ value: string; label: string }[]",
+                    "resolved": "{ value: string; label: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "followUpFormOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ value: string; label: string }[]",
+                    "resolved": "{ value: string; label: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "formType": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormType",
+                    "resolved": "FormType.FollowUp | FormType.Standard",
+                    "references": {
+                        "FormType": {
+                            "location": "import",
+                            "path": "../../../core",
+                            "id": "src/components/forms/udp-question-form/core/index.ts::FormType",
+                            "referenceLocation": "FormType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-type"
+            },
+            "isFollowUpFormConfigOn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-follow-up-form-config-on",
+                "defaultValue": "false"
+            },
+            "isCommentingConfigOn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-commenting-config-on",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formValues": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/utils/configValues.js

@@ -0,0 +1,28 @@
+/**
+ * Read a single `fieldProperties` key from the live Final Form values, falling
+ * back to the question draft (`ctx.fieldProperties`) for the first render —
+ * before `form.subscribe` has fired. Returns the raw value; callers coerce /
+ * guard it for their own shape. This is the one place the
+ * "reactive-value-or-draft" precedence lives, so every type-specific config
+ * reads its state the same way.
+ */
+export function readDraftFieldProperty(ctx, key) {
+    var _a, _b, _c;
+    const formFp = (_b = (_a = ctx.formValues) === null || _a === void 0 ? void 0 : _a.fieldProperties) !== null && _b !== void 0 ? _b : null;
+    return (_c = formFp === null || formFp === void 0 ? void 0 : formFp[key]) !== null && _c !== void 0 ? _c : ctx.fieldProperties[key];
+}
+/**
+ * Normalise a `udp-fluent-dropdown` `valueChanged` payload to its value id.
+ * Single-select dropdowns emit the matched option object (`{ value, label }`)
+ * when options are objects, a primitive when options are primitives, or `''`
+ * when cleared. Returns `fallback` when the payload carries no usable value.
+ */
+export function extractDropdownValue(detail, fallback = '') {
+    if (typeof detail === 'string')
+        return detail;
+    if (detail && typeof detail === 'object') {
+        const value = detail.value;
+        return value == null ? fallback : String(value);
+    }
+    return fallback;
+}

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/utils/dateTimeFormat.js

@@ -0,0 +1,26 @@
+/**
+ * Helpers for converting between legacy fieldProperties date/time strings
+ * and fluent date-time-input format (ISO-style).
+ */
+export function toHHmm(value) {
+    if (!value)
+        return '';
+    return value.length >= 5 ? value.substring(0, 5) : value;
+}
+export function fromHHmm(value) {
+    if (!value)
+        return '';
+    return value.length === 5 ? `${value}:00` : value;
+}
+export function toIsoDateTime(value) {
+    if (!value)
+        return '';
+    const normalized = value.replace(' ', 'T');
+    return normalized.length >= 16 ? normalized.substring(0, 16) : normalized;
+}
+export function fromIsoDateTime(value) {
+    if (!value)
+        return '';
+    const normalized = value.replace('T', ' ');
+    return normalized.length === 16 ? `${normalized}:00` : normalized;
+}

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/utils/index.js

@@ -0,0 +1,3 @@
+export { toHHmm, fromHHmm, toIsoDateTime, fromIsoDateTime, } from './dateTimeFormat';
+export { readDraftFieldProperty, extractDropdownValue } from './configValues';
+export { createSortableRef } from './sortableRef';

package/dist/collection/components/forms/udp-question-form/builder/components/questionConfig/utils/sortableRef.js

@@ -0,0 +1,41 @@
+import Sortable from "sortablejs";
+/**
+ * Build a Stencil `ref` callback that wires Sortable.js drag-to-reorder onto a
+ * rows container. Shared by the choice-options and table-column editors — the
+ * only thing that differs between them is the `onReorder` callback.
+ *
+ * The `__onSortEnd` indirection lets the latest `onReorder` / `isViewOnly`
+ * close over fresh render state on every render, while Sortable itself is
+ * constructed exactly once (guarded by `__sortableInit`). On drop we revert the
+ * DOM move so Stencil's VDOM stays the source of truth and re-renders from the
+ * reordered state.
+ */
+export function createSortableRef(onReorder, isViewOnly) {
+    return el => {
+        if (!el)
+            return;
+        el.__onSortEnd = (oldIndex, newIndex) => {
+            if (isViewOnly)
+                return;
+            onReorder(oldIndex, newIndex);
+        };
+        if (el.__sortableInit)
+            return;
+        el.__sortableInit = true;
+        new Sortable(el, {
+            handle: '.option-drag-handle',
+            animation: 150,
+            ghostClass: 'sortable-ghost',
+            onEnd: (evt) => {
+                var _a;
+                const { oldIndex, newIndex } = evt;
+                if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex)
+                    return;
+                // Revert the DOM move so Stencil VDOM can re-render from state.
+                const refNode = oldIndex < newIndex ? evt.to.children[oldIndex] : evt.to.children[oldIndex + 1];
+                evt.to.insertBefore(evt.item, refNode);
+                (_a = el.__onSortEnd) === null || _a === void 0 ? void 0 : _a.call(el, oldIndex, newIndex);
+            },
+        });
+    };
+}

package/dist/collection/components/forms/udp-question-form/builder/components/section-card.js

@@ -0,0 +1,19 @@
+import { h } from "@stencil/core";
+import { renderSectionQuestionItem } from "./section-question-item";
+/**
+ * Render a single section card (header + questions list). DOM stays in parent for Sortable.
+ */
+export function renderSectionCard(props) {
+    var _a;
+    const { section, sIndex, isEditable = true, getQuestionValidity, onEditSection, onSectionTitleChange, onAddQuestion, onDeleteSection, onEditQuestion, onDeleteQuestionClick, onDuplicateQuestion, } = props;
+    return (h("udp-fluent-card", { key: section.id, appearance: "filled" }, h("udp-flexbox", { slot: "header", class: "section-header", display: "flex", direction: "column", width: "100%" }, h("udp-flexbox", { class: "section-header-top-row", display: "flex", direction: "row", wrap: "nowrap", justify: "space-between", align: "center", width: "100%" }, isEditable && (h("div", { class: "section-drag-handle" }, h("udp-fluent-icon", { name: "drag", size: "sm" }))), h("udp-flexbox", { class: "section-header-content", display: "flex", direction: "column", gap: "xs", grow: "1" }, isEditable ? (h("udp-text", { variant: "subtitle1", class: "section-title-text" }, h("udp-fluent-inline-edit", { class: "section-title-input", value: (_a = section.title) !== null && _a !== void 0 ? _a : '', placeholder: "Untitled section", ariaLabel: "Section title", maxLength: 128, onValueChanged: (e) => onSectionTitleChange(sIndex, e.detail) }))) : (h("udp-text", { variant: "subtitle1", class: "section-title-text" }, section.title))), isEditable && (h("udp-flexbox", { display: "flex", direction: "row", gap: "xs", class: "section-header-actions" }, h("udp-tooltip", { content: "Edit section", positioning: "below" }, h("udp-fluent-icon-button", { iconName: "edit", appearance: "subtle", onClick: () => onEditSection(sIndex), ariaLabel: "Edit section" })), h("udp-tooltip", { content: "Delete section", positioning: "below" }, h("udp-fluent-icon-button", { iconName: "delete", appearance: "subtle", onClick: () => onDeleteSection(sIndex), ariaLabel: "Delete section" }))))), section.sectionText && (h("div", { class: "section-description-wrapper" }, h("div", { class: "section-description-truncated" }, h("udp-text", { variant: "body2" }, section.sectionText))))), h("div", { id: `questions-${sIndex}`, class: "questions-list", "data-section-index": sIndex }, section.questions.length === 0 ? (h("udp-message-bar", { intent: "info" }, h("udp-fluent-icon", { slot: "icon", name: "info" }), "This section has no questions yet, add one to get started.")) : (section.questions.map((question, qIndex) => renderSectionQuestionItem({
+        question,
+        sIndex,
+        qIndex,
+        isEditable,
+        isValid: getQuestionValidity(question),
+        onEdit: onEditQuestion,
+        onDelete: onDeleteQuestionClick,
+        onDuplicate: onDuplicateQuestion,
+    })))), isEditable && (h("udp-fluent-button", { appearance: "subtle", onClick: () => onAddQuestion(sIndex), startIconName: "add", slot: 'footer' }, "Add question"))));
+}