@vectoriox/iox-ui 5.27.0 → 5.29.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1245,6 +1245,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
+/**
+ * Where a node links (W1.1). Link and LinkedContainer always had two link types — an external URL or a
+ * website PAGE by its route — and ButtonBlock now has the same pair, so a composed "Get in touch" button
+ * is a page link the builder shows as `/contact`, not a hand-built URL. Framework-free: the composer
+ * (generation-core) writes it, the builder canvas and both engine render paths read it.
+ */
+var LinkType;
+(function (LinkType) {
+    LinkType["External"] = "external";
+    LinkType["Page"] = "page";
+})(LinkType || (LinkType = {}));
+const ANCHOR_TAG = 'a';
+/**
+ * The href a ButtonBlock renders, or `null` for none (it is a `<button>`, or a link with no target).
+ * Only an `<a>` links. A page link's route goes through `pageHref` — the engine's `resolvePageHref`
+ * (`:params` substituted, base-relative); the builder canvas passes none and shows the route as authored,
+ * as its Link does.
+ */
+function buttonBlockHref(props, pageHref = route => route) {
+    if (props.tag !== ANCHOR_TAG)
+        return null;
+    const href = props.linkType === LinkType.Page ? pageHref(String(props.pageRoute ?? '')) : String(props.href ?? '');
+    return href || null;
+}
+
 /**
  * Directive-host ButtonBlock: the real `<a>`/`<button>` IS the host — no `app-button-block`
  * wrapper, no inner/outer split. The tag is chosen by whoever CREATES the component (engine
@@ -1252,30 +1277,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * The `iox-btn-block` class (UA resets: inline-flex, color/font inherit, no border) matches the
  * string renderer and lives in the engine's global styles.scss — kept OFF `:host` so styleProps
  * (`.iox-node-{id}`) can override it. Children render into the host via `childrenHost`.
+ * A page link (`linkType: page`) arrives with its `pageRoute` already resolved by the engine (params
+ * substituted, base-relative — the Link's resolver); `buttonBlockHref` decides the href for every renderer.
  */
 class ButtonBlockComponent {
     constructor() {
         this.tag = 'button';
+        this.linkType = LinkType.External;
         this.href = '';
+        this.pageRoute = '';
         this.target = '_self';
         this.type = 'button';
         this.nodeId = '';
     }
+    get resolvedHref() {
+        return buttonBlockHref(this);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ButtonBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ButtonBlockComponent, isStandalone: false, selector: "a[iox-button-block],button[iox-button-block]", inputs: { tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId" }, host: { properties: { "class": "'iox-btn-block iox-node-' + nodeId", "attr.href": "tag === 'a' ? (href || null) : null", "attr.target": "tag === 'a' ? (target || null) : null", "attr.type": "tag === 'a' ? null : type" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ButtonBlockComponent, isStandalone: false, selector: "a[iox-button-block],button[iox-button-block]", inputs: { tag: "tag", linkType: "linkType", href: "href", pageRoute: "pageRoute", target: "target", type: "type", nodeId: "nodeId" }, host: { properties: { "class": "'iox-btn-block iox-node-' + nodeId", "attr.href": "resolvedHref", "attr.target": "tag === 'a' ? (target || null) : null", "attr.type": "tag === 'a' ? null : type" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ButtonBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[iox-button-block],button[iox-button-block]', template: `<ng-container #childrenHost></ng-container>`, host: {
                         '[class]': "'iox-btn-block iox-node-' + nodeId",
-                        '[attr.href]': "tag === 'a' ? (href || null) : null",
+                        '[attr.href]': 'resolvedHref',
                         '[attr.target]': "tag === 'a' ? (target || null) : null",
                         '[attr.type]': "tag === 'a' ? null : type",
                     }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
         }], propDecorators: { tag: [{
                 type: Input
+            }], linkType: [{
+                type: Input
             }], href: [{
                 type: Input
+            }], pageRoute: [{
+                type: Input
             }], target: [{
                 type: Input
             }], type: [{
@@ -3289,6 +3325,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 +3458,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 +3676,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.
@@ -3657,6 +3728,85 @@ function normaliseErrors(raw) {
     return Object.keys(errors).length ? errors : undefined;
 }
 
+/**
+ * FORM PRESETS — a complete, working form as one insert: its fields, its submit label and the words of
+ * its Success and Error blocks. ONE definition (W1.1): the builder's Forms tray builds a preset from
+ * here (`buildFormPreset`, iox-builder), and the site composer (`generation-core`) stamps the SAME preset
+ * into a composed page, so a generated contact form is the real one — never a second, drifting copy.
+ * Data only: framework-free, like the rest of forms-core.
+ */
+var FormPresetId;
+(function (FormPresetId) {
+    FormPresetId["Contact"] = "contact";
+    FormPresetId["Newsletter"] = "newsletter";
+    FormPresetId["Application"] = "application";
+    FormPresetId["Booking"] = "booking";
+})(FormPresetId || (FormPresetId = {}));
+const FORM_PRESETS = Object.freeze([
+    {
+        id: FormPresetId.Contact, name: 'Contact', icon: 'ph-thin ph-envelope-simple',
+        description: 'Name, email and a message. Stored, and emailed to you.',
+        formName: 'Contact form',
+        fields: [
+            { label: 'Full name', control: 'text', required: true },
+            { label: 'Email', control: 'email', required: true },
+            { label: 'Message', control: 'textarea', required: true, rows: 5 },
+        ],
+        submitLabel: 'Send message',
+        successText: 'Thanks — we’ll be in touch shortly.',
+        errorText: 'We couldn’t send your message. Please try again — your answers are still here.',
+    },
+    {
+        id: FormPresetId.Newsletter, name: 'Newsletter', icon: 'ph-thin ph-paper-plane-tilt',
+        description: 'One email field plus consent. Stored.',
+        formName: 'Newsletter signup',
+        fields: [
+            { label: 'Email', control: 'email', required: true, placeholder: 'you@company.com' },
+            // Consent is a checkbox that must be TICKED — `required` on a checkbox becomes the
+            // `accepted` rule, with its own message, rather than a generic "this is required".
+            { label: 'Email me occasional updates', control: 'checkbox', required: true },
+        ],
+        submitLabel: 'Subscribe',
+        successText: 'You’re on the list.',
+        errorText: 'We couldn’t sign you up. Please try again.',
+    },
+    {
+        id: FormPresetId.Application, name: 'Application', icon: 'ph-thin ph-read-cv-logo',
+        description: 'Details plus a CV upload. Stored, with an auto-reply.',
+        formName: 'Application',
+        fields: [
+            { label: 'Full name', control: 'text', required: true },
+            { label: 'Email', control: 'email', required: true },
+            { label: 'Phone', control: 'tel' },
+            { label: 'Role', control: 'select', required: true, optionsText: 'Design\nEngineering\nOther' },
+            { label: 'CV', control: 'file', required: true, help: 'PDF or Word, up to 5MB' },
+            { label: 'Anything else', control: 'textarea', rows: 4 },
+        ],
+        submitLabel: 'Apply',
+        successText: 'Application received — we’ll read it properly and reply.',
+        errorText: 'We couldn’t submit your application. Please try again.',
+    },
+    {
+        id: FormPresetId.Booking, name: 'Booking request', icon: 'ph-thin ph-calendar-check',
+        description: 'Date and party size. Stored, and it notifies you.',
+        formName: 'Booking request',
+        fields: [
+            { label: 'Name', control: 'text', required: true },
+            { label: 'Email', control: 'email', required: true },
+            { label: 'Date', control: 'date', required: true },
+            { label: 'People', control: 'number', required: true },
+            { label: 'Notes', control: 'textarea', rows: 3, help: 'Allergies, access needs, anything useful' },
+        ],
+        submitLabel: 'Request a booking',
+        successText: 'Request received — we’ll confirm by email.',
+        errorText: 'We couldn’t send your request. Please try again.',
+    },
+]);
+/** The preset with this id, or undefined. */
+function formPresetById(id) {
+    return FORM_PRESETS.find(p => p.id === id);
+}
+
 /*
  * @vectoriox/iox-ui/forms-core — the shared, FRAMEWORK-FREE core of the forms feature.
  *
@@ -4068,6 +4218,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 +4258,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 +4316,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 +4348,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 +4384,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 +4431,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 +4509,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 +4556,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 +4638,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], optionsText: [{
+                type: Input
             }], value: [{
                 type: Input
             }], rules: [{