@vectoriox/iox-ui 5.26.0 → 5.28.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -3289,6 +3289,36 @@ const files = (value) => Array.isArray(value) ? value
     : value && typeof value === 'object' ? [value]
         : [];
 
+/** `value|Label` separates a submitted value from what the visitor reads; a bare line is both. */
+const OPTION_SEPARATOR = '|';
+/**
+ * A Field's `optionsText` trait — the author's choices, one per line — as options. ONE parser for the
+ * builder canvas, both engine paths and iox-cms: until 2026-10-19 nothing parsed the trait, so a Radio
+ * group or a Dropdown from the tray rendered no choices at all on the canvas and on the live site.
+ */
+function parseFieldOptions(text) {
+    if (typeof text !== 'string')
+        return [];
+    const out = [];
+    for (const line of text.split(/\r?\n/)) {
+        const raw = line.trim();
+        if (!raw)
+            continue;
+        const at = raw.indexOf(OPTION_SEPARATOR);
+        const value = (at === -1 ? raw : raw.slice(0, at)).trim();
+        const label = (at === -1 ? raw : raw.slice(at + 1)).trim() || value;
+        if (value)
+            out.push({ value, label });
+    }
+    return out;
+}
+/** The choices a saved Field offers: an explicit `options` list wins, else its `optionsText` parsed. */
+function fieldOptionsOf(props) {
+    if (Array.isArray(props?.options) && props.options.length)
+        return props.options;
+    return parseFieldOptions(props?.optionsText);
+}
+
 // Derive a FormSpec from a node tree.
 //
 // The tree the author edited is the SINGLE source of truth for "what fields does this form have".
@@ -3392,8 +3422,9 @@ function toFieldSpec(node, taken) {
     const rules = normaliseRules(props['rules']);
     if (rules.length)
         spec.rules = rules;
-    if (Array.isArray(props['options']) && props['options'].length)
-        spec.options = props['options'];
+    const options = fieldOptionsOf(props);
+    if (options.length)
+        spec.options = options;
     if (props['optionsSource'])
         spec.optionsSource = props['optionsSource'];
     if (props['defaultValue'] !== undefined && props['defaultValue'] !== '') {
@@ -3609,10 +3640,14 @@ const RENDERED_AT_FIELD = '_iox_t';
  * The public submit path. Built here rather than interpolated at each call site, so the engine and
  * any future host cannot disagree about it — and so changing it is one edit.
  *
- * Deliberately relative and WITHOUT a leading slash: the engine mounts under a per-org base href.
+ * ⚠️ ROOT-relative (leading slash), never base-relative. A live site is served under a per-org
+ * `<base href="/<label>/">`, so a relative `api/…` resolved to `/<label>/api/…` — a path the reverse
+ * proxy (`/api` → iox-cms, everything else → the engine) hands to the ENGINE, which answers a POST with
+ * 404: no visitor submission ever reached iox-cms from an org path (found 2026-10-19 by
+ * e2e:forminsert:real). The org is already in the path segment after `site/`.
  */
 function submitEndpointPath(orgId, formId) {
-    return `api/site/${encodeURIComponent(orgId)}/forms/${encodeURIComponent(formId)}/submit`;
+    return `/api/site/${encodeURIComponent(orgId)}/forms/${encodeURIComponent(formId)}/submit`;
 }
 /**
  * Add the anti-spam fields to the collected values.
@@ -4068,6 +4103,19 @@ let fieldSeq = 0;
  * and choosing `email` also chooses email validation.
  */
 class IoxFieldComponent {
+    /** Explicit choices (bound data, a hand-built node). Wins over `optionsText`. */
+    set options(value) {
+        this._options = Array.isArray(value) ? value : [];
+        this.refreshChoices();
+    }
+    get options() { return this._options; }
+    /** The author's choices, one per line (`value|Label`) — the Field's trait. A SETTER: the builder
+     *  assigns traits directly, with no ngOnChanges. */
+    set optionsText(value) {
+        this._optionsText = value ?? '';
+        this.refreshChoices();
+    }
+    get optionsText() { return this._optionsText; }
     /**
      * Classic constructor injection, not `inject()`: this library's specs construct components
      * directly (its vitest setup cannot run `TestBed.createComponent`), and a field initializer
@@ -4095,7 +4143,10 @@ class IoxFieldComponent {
         this.rangeMax = 100;
         this.rangeStep = 1;
         this.accept = '';
-        this.options = [];
+        /** What the radio group / dropdown renders: the shared forms-core reading of the two inputs above. */
+        this.choices = [];
+        this._options = [];
+        this._optionsText = '';
         this.value = '';
         /** Rules beyond `required` — carried on the node, interpreted by forms-core. */
         this.rules = [];
@@ -4150,10 +4201,13 @@ class IoxFieldComponent {
             spec.required = true;
         if (this.rules?.length)
             spec.rules = this.rules;
-        if (this.options?.length)
-            spec.options = this.options;
+        if (this.choices.length)
+            spec.options = this.choices;
         return spec;
     }
+    refreshChoices() {
+        this.choices = fieldOptionsOf({ options: this._options, optionsText: this._optionsText });
+    }
     /** `file`, `date`, `number`… map straight through; everything else is a text input. */
     get inputType() {
         const passthrough = ['email', 'tel', 'url', 'number', 'password', 'date', 'time', 'file', 'hidden'];
@@ -4179,7 +4233,7 @@ class IoxFieldComponent {
         this.touched.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFieldComponent, deps: [{ token: FormRuntimeService, optional: true }, { token: IOX_FORM_MESSAGES }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFieldComponent, isStandalone: false, selector: "div[iox-field]", inputs: { nodeId: "nodeId", name: "name", label: "label", control: "control", placeholder: "placeholder", help: "help", required: "required", disabled: "disabled", labelHidden: "labelHidden", requiredMark: "requiredMark", rows: "rows", rangeMin: "rangeMin", rangeMax: "rangeMax", rangeStep: "rangeStep", accept: "accept", options: "options", value: "value", rules: "rules", forceInvalid: "forceInvalid", designErrorText: "designErrorText", showValid: "showValid" }, outputs: { valueChange: "valueChange", touched: "touched" }, host: { properties: { "class": "'iox-field iox-node-' + nodeId", "class.iox-invalid": "invalid", "class.iox-valid": "showValid", "attr.data-iox-field": "fieldName || null", "hidden": "control === 'hidden' ? true : null" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFieldComponent, isStandalone: false, selector: "div[iox-field]", inputs: { nodeId: "nodeId", name: "name", label: "label", control: "control", placeholder: "placeholder", help: "help", required: "required", disabled: "disabled", labelHidden: "labelHidden", requiredMark: "requiredMark", rows: "rows", rangeMin: "rangeMin", rangeMax: "rangeMax", rangeStep: "rangeStep", accept: "accept", options: "options", optionsText: "optionsText", value: "value", rules: "rules", forceInvalid: "forceInvalid", designErrorText: "designErrorText", showValid: "showValid" }, outputs: { valueChange: "valueChange", touched: "touched" }, host: { properties: { "class": "'iox-field iox-node-' + nodeId", "class.iox-invalid": "invalid", "class.iox-valid": "showValid", "attr.data-iox-field": "fieldName || null", "hidden": "control === 'hidden' ? true : null" } }, ngImport: i0, template: `
         <label class="iox-field__label"
                [class.iox-field__label--hidden]="labelHidden"
                [attr.for]="controlId">
@@ -4215,7 +4269,7 @@ class IoxFieldComponent {
                         (change)="emit($any($event.target).value)"
                         (blur)="touch()">
                     <option value="" [selected]="!value">{{ placeholder || '' }}</option>
-                    @for (option of options; track option.value) {
+                    @for (option of choices; track option.value) {
                         <option [value]="option.value" [selected]="option.value === value">{{ option.label }}</option>
                     }
                 </select>
@@ -4262,9 +4316,10 @@ class IoxFieldComponent {
             }
             @case ('radio') {
                 <div class="iox-field__group" role="radiogroup" [attr.aria-labelledby]="controlId + '-label'">
-                    @for (option of options; track option.value) {
+                    @for (option of choices; track option.value) {
                         <label class="iox-field__option">
-                            <input type="radio"
+                            <input class="iox-field__control iox-field__control--radio"
+                                   type="radio"
                                    [name]="fieldName"
                                    [value]="option.value"
                                    [checked]="option.value === value"
@@ -4339,7 +4394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         (change)="emit($any($event.target).value)"
                         (blur)="touch()">
                     <option value="" [selected]="!value">{{ placeholder || '' }}</option>
-                    @for (option of options; track option.value) {
+                    @for (option of choices; track option.value) {
                         <option [value]="option.value" [selected]="option.value === value">{{ option.label }}</option>
                     }
                 </select>
@@ -4386,9 +4441,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }
             @case ('radio') {
                 <div class="iox-field__group" role="radiogroup" [attr.aria-labelledby]="controlId + '-label'">
-                    @for (option of options; track option.value) {
+                    @for (option of choices; track option.value) {
                         <label class="iox-field__option">
-                            <input type="radio"
+                            <input class="iox-field__control iox-field__control--radio"
+                                   type="radio"
                                    [name]="fieldName"
                                    [value]="option.value"
                                    [checked]="option.value === value"
@@ -4467,6 +4523,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], optionsText: [{
+                type: Input
             }], value: [{
                 type: Input
             }], rules: [{