@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/steps-map.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepMap = stepMap;
+const chrome_1 = require("./chrome");
+const rules_formula_box_1 = require("./rules-formula-box");
+const rules_formula_1 = require("./rules-formula");
+function stepMap(el, options) {
+    const w = options.words.steps;
+    const list = el('div', { class: 'fd-do-map-rows' });
+    const add = el('button', { type: 'button', class: 'fd-button fd-button-link fd-do-map-add' }, options.addWords);
+    const element = el('div', { class: 'fd-do-map', role: 'group', 'aria-label': options.label }, el('span', { class: 'fd-answer-rule-word' }, options.label), list, add);
+    let rows = [];
+    /** The map as kept, to tell a row begun from one kept. */
+    let kept = {};
+    let shape = '';
+    /** The rows that read, as a map: a row with no name or no value is not one yet. */
+    function read() {
+        const map = {};
+        for (const row of rows) {
+            const [name, value] = [row.name().trim(), row.value().trim()];
+            if (name && value)
+                map[name] = value;
+        }
+        return map;
+    }
+    const save = (typing = false) => {
+        const map = read();
+        if (JSON.stringify(map) !== JSON.stringify(kept))
+            options.commit(map, typing);
+    };
+    function row(name, value) {
+        const names = options.names();
+        const nameBox = names
+            ? el('select', { class: 'fd-input fd-select', 'aria-label': options.nameLabel }, el('option', { value: '' }, w.pick), ...names.map((n) => el('option', { value: n.value }, n.label)))
+            : el('input', { class: 'fd-input fd-answer-rule-code', 'aria-label': options.nameLabel, spellcheck: 'false', autocomplete: 'off' });
+        nameBox.value = name;
+        nameBox.addEventListener(names ? 'change' : 'input', () => {
+            named();
+            save(!names);
+        });
+        const values = options.values?.() ?? null;
+        let box = null;
+        let pick = null;
+        let typed = value;
+        const valueLabel = () => options.valueLabel(names?.find((n) => n.value === nameBox.value)?.label || nameBox.value || w.value);
+        if (values) {
+            pick = el('select', { class: 'fd-input fd-select', 'aria-label': valueLabel() }, el('option', { value: '' }, w.pick), ...values.map((v) => el('option', { value: v.value }, v.label)));
+            pick.value = value;
+            pick.addEventListener('change', () => save());
+        }
+        else {
+            box = (0, rules_formula_box_1.formulaBox)(el, {
+                words: options.words,
+                label: valueLabel(),
+                placeholder: w.expressionPlaceholder,
+                check: (_page, source) => (0, rules_formula_1.formulaProblem)(options.reads(), source, options.words),
+                commit(source) {
+                    typed = source;
+                    save(true);
+                },
+            });
+            box.update(options.reads(), value);
+        }
+        const said = (n) => w.removeValue(names?.find((c) => c.value === n)?.label || n || w.value);
+        const remove = (0, chrome_1.iconButton)(el, said(name), '×', () => {
+            rows = rows.filter((r) => r !== made);
+            made.element.remove();
+            save();
+            add.focus();
+        });
+        remove.classList.add('fd-do-map-remove');
+        /** The value's box named after the name it is for, as the name changes. */
+        const named = () => (pick ?? box?.input)?.setAttribute('aria-label', valueLabel());
+        const element = el('div', { class: 'fd-do-map-row' }, nameBox, ...(pick ? [pick] : box ? [box.element] : []), remove, ...(box ? [box.problem] : []));
+        const made = {
+            element,
+            name: () => nameBox.value,
+            value: () => (pick ? pick.value : typed),
+            set(n, v) {
+                const doc = element.ownerDocument;
+                if (doc.activeElement !== nameBox)
+                    nameBox.value = n;
+                if (pick && doc.activeElement !== pick)
+                    pick.value = v;
+                if (box) {
+                    typed = v;
+                    box.update(options.reads(), v);
+                }
+                remove.setAttribute('aria-label', said(n));
+                remove.title = said(n);
+                named();
+            },
+            focus: () => nameBox.focus(),
+        };
+        return made;
+    }
+    add.addEventListener('click', () => {
+        // The first name not taken yet, when names are offered.
+        const taken = new Set(rows.map((r) => r.name()));
+        const free = options.names()?.find((n) => !taken.has(n.value))?.value ?? '';
+        const made = row(free, '');
+        rows.push(made);
+        list.append(made.element);
+        made.focus();
+    });
+    return {
+        element,
+        update(map) {
+            kept = map;
+            const entries = Object.entries(map);
+            // Drawn again when what is offered changes, or rows were added or taken away elsewhere; else patched, so a box keeps its cursor.
+            const offered = JSON.stringify([options.names(), options.values?.() ?? null]);
+            const complete = rows.filter((r) => r.name().trim() && r.value().trim());
+            if (offered !== shape || complete.length !== entries.length) {
+                shape = offered;
+                rows = entries.map(([name, value]) => row(name, value));
+                list.replaceChildren(...rows.map((r) => r.element));
+                return;
+            }
+            entries.forEach(([name, value], i) => complete[i].set(name, value));
+        },
+    };
+}
+//# sourceMappingURL=steps-map.js.map

package/src/lib/steps-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps-map.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/steps-map.ts"],"names":[],"mappings":"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"}

package/src/lib/steps-map.mjs

@@ -0,0 +1,121 @@
+import { iconButton } from './chrome.mjs';
+import { formulaBox } from './rules-formula-box.mjs';
+import { formulaProblem } from './rules-formula.mjs';
+export function stepMap(el, options) {
+    const w = options.words.steps;
+    const list = el('div', { class: 'fd-do-map-rows' });
+    const add = el('button', { type: 'button', class: 'fd-button fd-button-link fd-do-map-add' }, options.addWords);
+    const element = el('div', { class: 'fd-do-map', role: 'group', 'aria-label': options.label }, el('span', { class: 'fd-answer-rule-word' }, options.label), list, add);
+    let rows = [];
+    /** The map as kept, to tell a row begun from one kept. */
+    let kept = {};
+    let shape = '';
+    /** The rows that read, as a map: a row with no name or no value is not one yet. */
+    function read() {
+        const map = {};
+        for (const row of rows) {
+            const [name, value] = [row.name().trim(), row.value().trim()];
+            if (name && value)
+                map[name] = value;
+        }
+        return map;
+    }
+    const save = (typing = false) => {
+        const map = read();
+        if (JSON.stringify(map) !== JSON.stringify(kept))
+            options.commit(map, typing);
+    };
+    function row(name, value) {
+        const names = options.names();
+        const nameBox = names
+            ? el('select', { class: 'fd-input fd-select', 'aria-label': options.nameLabel }, el('option', { value: '' }, w.pick), ...names.map((n) => el('option', { value: n.value }, n.label)))
+            : el('input', { class: 'fd-input fd-answer-rule-code', 'aria-label': options.nameLabel, spellcheck: 'false', autocomplete: 'off' });
+        nameBox.value = name;
+        nameBox.addEventListener(names ? 'change' : 'input', () => {
+            named();
+            save(!names);
+        });
+        const values = options.values?.() ?? null;
+        let box = null;
+        let pick = null;
+        let typed = value;
+        const valueLabel = () => options.valueLabel(names?.find((n) => n.value === nameBox.value)?.label || nameBox.value || w.value);
+        if (values) {
+            pick = el('select', { class: 'fd-input fd-select', 'aria-label': valueLabel() }, el('option', { value: '' }, w.pick), ...values.map((v) => el('option', { value: v.value }, v.label)));
+            pick.value = value;
+            pick.addEventListener('change', () => save());
+        }
+        else {
+            box = formulaBox(el, {
+                words: options.words,
+                label: valueLabel(),
+                placeholder: w.expressionPlaceholder,
+                check: (_page, source) => formulaProblem(options.reads(), source, options.words),
+                commit(source) {
+                    typed = source;
+                    save(true);
+                },
+            });
+            box.update(options.reads(), value);
+        }
+        const said = (n) => w.removeValue(names?.find((c) => c.value === n)?.label || n || w.value);
+        const remove = iconButton(el, said(name), '×', () => {
+            rows = rows.filter((r) => r !== made);
+            made.element.remove();
+            save();
+            add.focus();
+        });
+        remove.classList.add('fd-do-map-remove');
+        /** The value's box named after the name it is for, as the name changes. */
+        const named = () => (pick ?? box?.input)?.setAttribute('aria-label', valueLabel());
+        const element = el('div', { class: 'fd-do-map-row' }, nameBox, ...(pick ? [pick] : box ? [box.element] : []), remove, ...(box ? [box.problem] : []));
+        const made = {
+            element,
+            name: () => nameBox.value,
+            value: () => (pick ? pick.value : typed),
+            set(n, v) {
+                const doc = element.ownerDocument;
+                if (doc.activeElement !== nameBox)
+                    nameBox.value = n;
+                if (pick && doc.activeElement !== pick)
+                    pick.value = v;
+                if (box) {
+                    typed = v;
+                    box.update(options.reads(), v);
+                }
+                remove.setAttribute('aria-label', said(n));
+                remove.title = said(n);
+                named();
+            },
+            focus: () => nameBox.focus(),
+        };
+        return made;
+    }
+    add.addEventListener('click', () => {
+        // The first name not taken yet, when names are offered.
+        const taken = new Set(rows.map((r) => r.name()));
+        const free = options.names()?.find((n) => !taken.has(n.value))?.value ?? '';
+        const made = row(free, '');
+        rows.push(made);
+        list.append(made.element);
+        made.focus();
+    });
+    return {
+        element,
+        update(map) {
+            kept = map;
+            const entries = Object.entries(map);
+            // Drawn again when what is offered changes, or rows were added or taken away elsewhere; else patched, so a box keeps its cursor.
+            const offered = JSON.stringify([options.names(), options.values?.() ?? null]);
+            const complete = rows.filter((r) => r.name().trim() && r.value().trim());
+            if (offered !== shape || complete.length !== entries.length) {
+                shape = offered;
+                rows = entries.map(([name, value]) => row(name, value));
+                list.replaceChildren(...rows.map((r) => r.element));
+                return;
+            }
+            entries.forEach(([name, value], i) => complete[i].set(name, value));
+        },
+    };
+}
+//# sourceMappingURL=steps-map.mjs.map

package/src/lib/steps-map.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps-map.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/steps-map.ts"],"names":[],"mappings":"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"}

package/src/lib/steps-marks.d.mts

@@ -0,0 +1,20 @@
+import type { Page } from '@fieldia/core';
+import type { Designer } from './designer.mjs';
+import { type StepsPlace } from './steps-places.mjs';
+/**
+ * What the canvas says of a part that does something, and going to it. A
+ * button that has steps wears a small mark after its words — drawn by its
+ * look, so its words stay its own to type in — its steps said when pointed
+ * at; a field whose change runs steps wears a mark among its rules' marks
+ * (rules-marks.ts). Going to steps picks their part and brings its list
+ * forward on the panel: a button's When clicked, a field's When it changes on
+ * its Rules tab, the form's moments on the page's.
+ */
+/** Each button on the canvas that has steps: marked, its steps said; one that has none, not. */
+export declare function pressMarks(container: HTMLElement, page: Page, designer: Designer): void;
+/** A saved page a step opens, for its title, once the app's store has it: asked for as it is first said. */
+export declare const savedPage: (designer: Designer) => (id: string) => Page | null | undefined;
+/** The fields whose change runs steps, by the part each shows at, with their steps said: for the rules' marks. */
+export declare function changeMarks(page: Page, designer: Designer): Map<string, string[]>;
+/** Go to a place's steps: its part picked, its list brought forward on the panel, the cursor on its first step. */
+export declare function openSteps(root: HTMLElement, designer: Designer, place: StepsPlace): void;

package/src/lib/steps-marks.d.ts

@@ -0,0 +1,20 @@
+import type { Page } from '@fieldia/core';
+import type { Designer } from './designer';
+import { type StepsPlace } from './steps-places';
+/**
+ * What the canvas says of a part that does something, and going to it. A
+ * button that has steps wears a small mark after its words — drawn by its
+ * look, so its words stay its own to type in — its steps said when pointed
+ * at; a field whose change runs steps wears a mark among its rules' marks
+ * (rules-marks.ts). Going to steps picks their part and brings its list
+ * forward on the panel: a button's When clicked, a field's When it changes on
+ * its Rules tab, the form's moments on the page's.
+ */
+/** Each button on the canvas that has steps: marked, its steps said; one that has none, not. */
+export declare function pressMarks(container: HTMLElement, page: Page, designer: Designer): void;
+/** A saved page a step opens, for its title, once the app's store has it: asked for as it is first said. */
+export declare const savedPage: (designer: Designer) => (id: string) => Page | null | undefined;
+/** The fields whose change runs steps, by the part each shows at, with their steps said: for the rules' marks. */
+export declare function changeMarks(page: Page, designer: Designer): Map<string, string[]>;
+/** Go to a place's steps: its part picked, its list brought forward on the panel, the cursor on its first step. */
+export declare function openSteps(root: HTMLElement, designer: Designer, place: StepsPlace): void;

package/src/lib/steps-marks.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.savedPage = void 0;
+exports.pressMarks = pressMarks;
+exports.changeMarks = changeMarks;
+exports.openSteps = openSteps;
+const steps_places_1 = require("./steps-places");
+const steps_words_1 = require("./steps-words");
+/**
+ * What the canvas says of a part that does something, and going to it. A
+ * button that has steps wears a small mark after its words — drawn by its
+ * look, so its words stay its own to type in — its steps said when pointed
+ * at; a field whose change runs steps wears a mark among its rules' marks
+ * (rules-marks.ts). Going to steps picks their part and brings its list
+ * forward on the panel: a button's When clicked, a field's When it changes on
+ * its Rules tab, the form's moments on the page's.
+ */
+/** Each button on the canvas that has steps: marked, its steps said; one that has none, not. */
+function pressMarks(container, page, designer) {
+    const lines = new Map((0, steps_words_1.pageSteps)(page, designer.words, (0, exports.savedPage)(designer)).filter((entry) => 'press' in entry.place).map((entry) => [entry.place.press, entry.lines]));
+    for (const part of container.querySelectorAll('.fd-canvas-block.fd-button[data-node], .fd-canvas-part[data-part]')) {
+        const id = part.dataset['node'] ?? part.dataset['part'] ?? '';
+        const said = lines.get(id);
+        if (!said || !(0, steps_places_1.pressOf)(page, id)) {
+            if (part.hasAttribute('data-steps')) {
+                part.removeAttribute('data-steps');
+                if (part.dataset['stepsTitle'] === part.title)
+                    part.removeAttribute('title');
+                delete part.dataset['stepsTitle'];
+            }
+            continue;
+        }
+        const title = `${designer.words.steps.whenClicked}:\n${said.join('\n')}`;
+        const count = String((0, steps_places_1.stepsAt)(page, { press: id }).length);
+        if (part.dataset['steps'] === count && part.title === title)
+            continue;
+        part.dataset['steps'] = count;
+        // A counter says what its number is from; its steps come after.
+        if (!part.title || part.dataset['stepsTitle'] === part.title) {
+            part.title = title;
+            part.dataset['stepsTitle'] = title;
+        }
+    }
+}
+/** A saved page a step opens, for its title, once the app's store has it: asked for as it is first said. */
+const savedPage = (designer) => (id) => {
+    const found = designer.savedForm(id);
+    return found === undefined ? undefined : (found?.page ?? null);
+};
+exports.savedPage = savedPage;
+/** The fields whose change runs steps, by the part each shows at, with their steps said: for the rules' marks. */
+function changeMarks(page, designer) {
+    const out = new Map();
+    for (const entry of (0, steps_words_1.pageSteps)(page, designer.words, (0, exports.savedPage)(designer))) {
+        if (!('change' in entry.place))
+            continue;
+        const part = (0, steps_words_1.fieldPlace)(page, entry.place.change);
+        if (part)
+            out.set(part, entry.lines);
+    }
+    return out;
+}
+/** Go to a place's steps: its part picked, its list brought forward on the panel, the cursor on its first step. */
+function openSteps(root, designer, place) {
+    const page = designer.getPage();
+    const part = 'press' in place ? place.press : 'change' in place ? (0, steps_words_1.fieldPlace)(page, place.change) : null;
+    designer.select(part);
+    const panel = root.querySelector('.fd-properties');
+    const tab = 'press' in place ? 'content' : 'rules';
+    panel?.querySelector(`[role="tab"][data-tab="${tab}"]`)?.click();
+    const setting = 'press' in place ? 'When clicked' : 'change' in place ? 'When it changes' : 'When…';
+    const row = panel?.querySelector(`[data-setting="${setting}"]`);
+    if (!row)
+        return;
+    // A moment's own list, or a tab's: the one asked for.
+    const lists = [...row.querySelectorAll('.fd-do')];
+    const w = designer.words.steps;
+    const label = 'moment' in place ? w.momentNames[place.moment] : 'show' in place ? w.whenShown((0, steps_places_1.showTargets)(page).find((t) => t.id === place.show)?.label || place.show) : null;
+    const list = label === null ? lists[0] : lists.find((l) => l.getAttribute('aria-label') === label);
+    const hand = (list ?? row).querySelector('.fd-do-say, .fd-do-add');
+    hand?.focus();
+    (list ?? row).scrollIntoView?.({ block: 'nearest' });
+}
+//# sourceMappingURL=steps-marks.js.map

package/src/lib/steps-marks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps-marks.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/steps-marks.ts"],"names":[],"mappings":"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"}

package/src/lib/steps-marks.mjs

@@ -0,0 +1,77 @@
+import { pressOf, showTargets, stepsAt } from './steps-places.mjs';
+import { fieldPlace, pageSteps } from './steps-words.mjs';
+/**
+ * What the canvas says of a part that does something, and going to it. A
+ * button that has steps wears a small mark after its words — drawn by its
+ * look, so its words stay its own to type in — its steps said when pointed
+ * at; a field whose change runs steps wears a mark among its rules' marks
+ * (rules-marks.ts). Going to steps picks their part and brings its list
+ * forward on the panel: a button's When clicked, a field's When it changes on
+ * its Rules tab, the form's moments on the page's.
+ */
+/** Each button on the canvas that has steps: marked, its steps said; one that has none, not. */
+export function pressMarks(container, page, designer) {
+    const lines = new Map(pageSteps(page, designer.words, savedPage(designer)).filter((entry) => 'press' in entry.place).map((entry) => [entry.place.press, entry.lines]));
+    for (const part of container.querySelectorAll('.fd-canvas-block.fd-button[data-node], .fd-canvas-part[data-part]')) {
+        const id = part.dataset['node'] ?? part.dataset['part'] ?? '';
+        const said = lines.get(id);
+        if (!said || !pressOf(page, id)) {
+            if (part.hasAttribute('data-steps')) {
+                part.removeAttribute('data-steps');
+                if (part.dataset['stepsTitle'] === part.title)
+                    part.removeAttribute('title');
+                delete part.dataset['stepsTitle'];
+            }
+            continue;
+        }
+        const title = `${designer.words.steps.whenClicked}:\n${said.join('\n')}`;
+        const count = String(stepsAt(page, { press: id }).length);
+        if (part.dataset['steps'] === count && part.title === title)
+            continue;
+        part.dataset['steps'] = count;
+        // A counter says what its number is from; its steps come after.
+        if (!part.title || part.dataset['stepsTitle'] === part.title) {
+            part.title = title;
+            part.dataset['stepsTitle'] = title;
+        }
+    }
+}
+/** A saved page a step opens, for its title, once the app's store has it: asked for as it is first said. */
+export const savedPage = (designer) => (id) => {
+    const found = designer.savedForm(id);
+    return found === undefined ? undefined : (found?.page ?? null);
+};
+/** The fields whose change runs steps, by the part each shows at, with their steps said: for the rules' marks. */
+export function changeMarks(page, designer) {
+    const out = new Map();
+    for (const entry of pageSteps(page, designer.words, savedPage(designer))) {
+        if (!('change' in entry.place))
+            continue;
+        const part = fieldPlace(page, entry.place.change);
+        if (part)
+            out.set(part, entry.lines);
+    }
+    return out;
+}
+/** Go to a place's steps: its part picked, its list brought forward on the panel, the cursor on its first step. */
+export function openSteps(root, designer, place) {
+    const page = designer.getPage();
+    const part = 'press' in place ? place.press : 'change' in place ? fieldPlace(page, place.change) : null;
+    designer.select(part);
+    const panel = root.querySelector('.fd-properties');
+    const tab = 'press' in place ? 'content' : 'rules';
+    panel?.querySelector(`[role="tab"][data-tab="${tab}"]`)?.click();
+    const setting = 'press' in place ? 'When clicked' : 'change' in place ? 'When it changes' : 'When…';
+    const row = panel?.querySelector(`[data-setting="${setting}"]`);
+    if (!row)
+        return;
+    // A moment's own list, or a tab's: the one asked for.
+    const lists = [...row.querySelectorAll('.fd-do')];
+    const w = designer.words.steps;
+    const label = 'moment' in place ? w.momentNames[place.moment] : 'show' in place ? w.whenShown(showTargets(page).find((t) => t.id === place.show)?.label || place.show) : null;
+    const list = label === null ? lists[0] : lists.find((l) => l.getAttribute('aria-label') === label);
+    const hand = (list ?? row).querySelector('.fd-do-say, .fd-do-add');
+    hand?.focus();
+    (list ?? row).scrollIntoView?.({ block: 'nearest' });
+}
+//# sourceMappingURL=steps-marks.mjs.map

package/src/lib/steps-marks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps-marks.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/steps-marks.ts"],"names":[],"mappings":"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"}

package/src/lib/steps-panel.d.mts

@@ -0,0 +1,24 @@
+import type { Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+import type { PanelTab } from './panel-tabs.mjs';
+/**
+ * Where steps are set, on the panel: a button's "When clicked" (a body
+ * button, a record header's button or counter, a list's button), a field's
+ * "When it changes" on its Rules tab, and the form's own moments — when it
+ * opens, before and after it is saved or sent, when a tab or step is shown —
+ * on the page's Rules tab. Each is a setting's row, so the panel sorts it into
+ * its tab and the search finds it.
+ */
+export interface StepsSetting {
+    /** The setting's row. */
+    element: HTMLElement;
+    update(page: Page): void;
+    focus(): void;
+}
+/** What a button does when it is pressed: its steps, its app action among them. */
+export declare function whenClicked(el: ElementFactory, designer: Designer, id: string, tab?: PanelTab): StepsSetting;
+/** What a field's change does: steps run as a person changes it. */
+export declare function whenItChanges(el: ElementFactory, designer: Designer, nodeId: string): StepsSetting;
+/** The form's own moments, one list each, and a list for each tab or step shown that has one. */
+export declare function formMoments(el: ElementFactory, designer: Designer): StepsSetting;

package/src/lib/steps-panel.d.ts

@@ -0,0 +1,24 @@
+import type { Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+import type { PanelTab } from './panel-tabs';
+/**
+ * Where steps are set, on the panel: a button's "When clicked" (a body
+ * button, a record header's button or counter, a list's button), a field's
+ * "When it changes" on its Rules tab, and the form's own moments — when it
+ * opens, before and after it is saved or sent, when a tab or step is shown —
+ * on the page's Rules tab. Each is a setting's row, so the panel sorts it into
+ * its tab and the search finds it.
+ */
+export interface StepsSetting {
+    /** The setting's row. */
+    element: HTMLElement;
+    update(page: Page): void;
+    focus(): void;
+}
+/** What a button does when it is pressed: its steps, its app action among them. */
+export declare function whenClicked(el: ElementFactory, designer: Designer, id: string, tab?: PanelTab): StepsSetting;
+/** What a field's change does: steps run as a person changes it. */
+export declare function whenItChanges(el: ElementFactory, designer: Designer, nodeId: string): StepsSetting;
+/** The form's own moments, one list each, and a list for each tab or step shown that has one. */
+export declare function formMoments(el: ElementFactory, designer: Designer): StepsSetting;