@vectoriox/iox-ui 5.28.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: [{
@@ -3692,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.
  *