@vectoriox/iox-builder 4.9.0 → 4.10.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -9335,6 +9335,216 @@ class GalleryConfig extends ComponentConfig {
     }
 }
 
+/** Every style group — the state blocks and field group are ordinary containers to style. */
+const fullStyles = () => buildFullStyleTraits();
+/** Layout-ish groups for a form shell: it arranges fields, it is not text. */
+const shellStyles = () => [
+    new PositionGroupStyleConfig(),
+    new LayoutGroupStyleConfig(),
+    new SizeGroupStyleConfig(),
+    new SpacingGroupStyleConfig(),
+    new BorderGroupStyleConfig(),
+    new BackgroundGroupStyleConfig(),
+    new TypographyGroupStyleConfig(),
+    new EffectsGroupStyleConfig(),
+];
+/**
+ * Form — the container that scopes its fields by ANCESTRY (decision D1).
+ *
+ * The destination config ("After submit") is an ordered action list edited in the Bindings panel as
+ * a property group, not here as flat traits — see forms-and-inputs-plan.md §4b. What lives here is
+ * the handful of settings that ARE single values.
+ *
+ * Auto-creates a working contact form: two fields, a submit button, and the two non-deletable state
+ * blocks. Dropping a Form therefore gives a form that already validates and already stores.
+ */
+class FormComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Form', 'iox-form', 'ph-thin ph-textbox', 'Forms');
+        this.traits = [
+            new TraitConfig('__formLabel', 'Form', TraitInputType.SectionLabel),
+            new TraitConfig('name', 'Form name', TraitInputType.Text, undefined, 'Contact form'),
+            // Stable identity the submit endpoint resolves the saved spec by. Generated on create;
+            // shown read-only-ish so an author can copy it into a webhook consumer.
+            new TraitConfig('formId', 'Form ID', TraitInputType.Text, undefined, ''),
+            new TraitConfig('feedback', 'Validation feedback', TraitInputType.Select, [
+                { label: 'Smart — on submit, then live once touched', value: 'smart' },
+                { label: 'On submit only', value: 'submit' },
+                { label: 'As you type', value: 'live' },
+            ], 'smart'),
+            new TraitConfig('resetAfterSubmit', 'Clear the form after submit', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('__spamLabel', 'Spam protection', TraitInputType.SectionLabel),
+            // On by default and invisible to the visitor (decision D12).
+            new TraitConfig('honeypot', 'Honeypot field', TraitInputType.Checkbox, undefined, true),
+            new TraitConfig('minFillMs', 'Minimum fill time (ms)', TraitInputType.Number, undefined, 1200),
+            new TraitConfig('__dataLabel', 'Data', TraitInputType.SectionLabel),
+            // Absent means keep forever — the confirmed default. A number opts into purging.
+            new TraitConfig('retentionDays', 'Delete submissions after (days)', TraitInputType.Number, undefined, ''),
+        ];
+        this.styleTraits = shellStyles();
+        this.children = [
+            makeField({ label: 'Name', control: 'text', required: true }),
+            makeField({ label: 'Email', control: 'email', required: true }),
+            new SubmitButtonComponentConfig(),
+            new FormSuccessComponentConfig(),
+            new FormErrorComponentConfig(),
+        ];
+        this.applyStyleDefaults({
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px',
+            width: '100%',
+        });
+    }
+}
+/**
+ * Field — ONE component for every control type (decision D4).
+ *
+ * `Required` is its own switch because it is the rule every form needs; the rest are added from a
+ * menu, so an unused rule is invisible rather than an empty control (the Effects-group pattern).
+ */
+class FieldComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Field', 'iox-field', 'ph-thin ph-text-box', 'Forms');
+        this.traits = [
+            new TraitConfig('__contentLabel', 'Content', TraitInputType.SectionLabel),
+            new TraitConfig('label', 'Label', TraitInputType.Text, undefined, 'Label'),
+            // Choosing the control also chooses the validation — an Email field validates email
+            // with nothing configured.
+            new TraitConfig('control', 'Type', TraitInputType.Select, [
+                { label: 'Text', value: 'text' },
+                { label: 'Email', value: 'email' },
+                { label: 'Phone', value: 'tel' },
+                { label: 'Website', value: 'url' },
+                { label: 'Number', value: 'number' },
+                { label: 'Password', value: 'password' },
+                { label: 'Long text', value: 'textarea' },
+                { label: 'Dropdown', value: 'select' },
+                { label: 'Checkbox', value: 'checkbox' },
+                { label: 'Radio group', value: 'radio' },
+                { label: 'Date', value: 'date' },
+                { label: 'Time', value: 'time' },
+                { label: 'File upload', value: 'file' },
+                { label: 'Hidden', value: 'hidden' },
+            ], 'text'),
+            new TraitConfig('placeholder', 'Placeholder', TraitInputType.Text, undefined, '', false, { trait: 'control', values: ['text', 'email', 'tel', 'url', 'number', 'password', 'textarea', 'select'] }),
+            new TraitConfig('help', 'Help text', TraitInputType.Text, undefined, ''),
+            new TraitConfig('rows', 'Rows', TraitInputType.Number, undefined, 4, false, { trait: 'control', values: 'textarea' }),
+            new TraitConfig('accept', 'Accepted file types', TraitInputType.Text, undefined, '', false, { trait: 'control', values: 'file' }),
+            new TraitConfig('labelHidden', 'Hide label (screen readers still read it)', TraitInputType.Checkbox, undefined, false),
+            // The submitted key. Derived from the label; editable for external integrations.
+            new TraitConfig('name', 'Submitted key', TraitInputType.Text, undefined, ''),
+            new TraitConfig('defaultValue', 'Default value', TraitInputType.Text, undefined, ''),
+            new TraitConfig('__optionsLabel', 'Options', TraitInputType.SectionLabel),
+            // One per line, `value|Label` or just the label. A richer editor arrives with bound
+            // options in Phase 2; this keeps v1 to one control instead of a new trait type.
+            new TraitConfig('optionsText', 'Choices (one per line)', TraitInputType.Textarea, undefined, '', false, { trait: 'control', values: ['select', 'radio'] }),
+            new TraitConfig('__validationLabel', 'Validation', TraitInputType.SectionLabel),
+            new TraitConfig('required', 'Required', TraitInputType.Checkbox, undefined, false),
+            // `rules` is the additive list (minLength, pattern, matches, …). Its editor is a panel
+            // concern; the node just carries the array.
+            new TraitConfig('rules', 'Rules', TraitInputType.Textarea, undefined, ''),
+        ];
+        this.styleTraits = fullStyles();
+        this.applyStyleDefaults({
+            display: 'block',
+            width: '100%',
+        });
+    }
+}
+/** A plain layout row so two fields can sit side by side. Config-only, like List/ListItem. */
+class FieldGroupComponentConfig extends ComponentConfig {
+    constructor() {
+        super('FieldGroup', 'app-builder-container', 'ph-thin ph-columns', 'Forms');
+        this.traits = [];
+        this.styleTraits = fullStyles();
+        this.children = [];
+        this.applyStyleDefaults({
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '16px',
+            width: '100%',
+        });
+    }
+}
+/** The submit button. Carries no destination — that lives on the Form (decision D9). */
+class SubmitButtonComponentConfig extends ComponentConfig {
+    constructor() {
+        super('SubmitButton', 'iox-submit', 'ph-thin ph-paper-plane-tilt', 'Forms');
+        this.traits = [
+            new TraitConfig('label', 'Label', TraitInputType.Text, undefined, 'Send'),
+            new TraitConfig('loadingLabel', 'While sending', TraitInputType.Text, undefined, 'Sending…'),
+            new TraitConfig('disableWhileSubmitting', 'Disable while sending', TraitInputType.Checkbox, undefined, true),
+        ];
+        this.styleTraits = fullStyles();
+        this.applyStyleDefaults({
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 'auto',
+            // Meets the 44px tap-target minimum the responsive audit checks for.
+            minHeight: '44px',
+            padding: '12px 24px',
+            borderRadius: '6px',
+            backgroundColor: '#a05c5c',
+            color: '#ffffff',
+            cursor: 'pointer',
+        });
+    }
+}
+/**
+ * The Success block. `hidden` keeps it out of the Components panel: it is auto-created by the Form
+ * and reached through the canvas state switcher, never dropped on its own.
+ */
+class FormSuccessComponentConfig extends ComponentConfig {
+    constructor() {
+        super('FormSuccess', 'iox-form-success', 'ph-thin ph-check-circle', 'Forms');
+        this.hidden = true;
+        this.traits = [];
+        this.styleTraits = fullStyles();
+        this.children = [];
+        this.applyStyleDefaults({
+            display: 'block',
+            width: '100%',
+            padding: '16px',
+            borderRadius: '6px',
+            backgroundColor: '#e4efe8',
+            color: '#3f7355',
+        });
+    }
+}
+/** The Error block. One design, five reasons — the renderer writes the resolved reason in. */
+class FormErrorComponentConfig extends ComponentConfig {
+    constructor() {
+        super('FormError', 'iox-form-error', 'ph-thin ph-warning-circle', 'Forms');
+        this.hidden = true;
+        this.traits = [];
+        this.styleTraits = fullStyles();
+        this.children = [];
+        this.applyStyleDefaults({
+            display: 'block',
+            width: '100%',
+            padding: '16px',
+            borderRadius: '6px',
+            backgroundColor: '#f6e3e1',
+            color: '#a8413a',
+        });
+    }
+}
+/** A Field pre-filled for the default contact form. */
+function makeField(props) {
+    const config = new FieldComponentConfig();
+    for (const trait of config.traits) {
+        if (trait.name === 'label')
+            trait.default = props.label;
+        if (trait.name === 'control')
+            trait.default = props.control;
+        if (trait.name === 'required')
+            trait.default = !!props.required;
+    }
+    return config;
+}
+
 class BuilderHeadingComponentConfig extends ComponentConfig {
     constructor() {
         super('Heading', 'app-builder-heading', 'ph-thin ph-text-h', 'Basic');
@@ -9747,5 +9957,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map