@fieldia/designer 0.0.0-stage → 0.11.0

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;

package/src/lib/steps-panel.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.whenClicked = whenClicked;
+exports.whenItChanges = whenItChanges;
+exports.formMoments = formMoments;
+const page_tree_1 = require("./page-tree");
+const panel_controls_1 = require("./panel-controls");
+const steps_editor_1 = require("./steps-editor");
+const steps_places_1 = require("./steps-places");
+/** What a button does when it is pressed: its steps, its app action among them. */
+function whenClicked(el, designer, id, tab = 'content') {
+    const w = designer.words.steps;
+    const editor = (0, steps_editor_1.stepsEditor)(el, designer, { press: id }, { label: w.whenClicked });
+    const element = (0, panel_controls_1.setting)(el, tab, 'When clicked', editor.element, { words: w.whenClicked });
+    element.classList.add('fd-do-setting');
+    return { element, update: (page) => editor.update(page), focus: () => editor.focus() };
+}
+/** What a field's change does: steps run as a person changes it. */
+function whenItChanges(el, designer, nodeId) {
+    const w = designer.words.steps;
+    const found = (0, page_tree_1.findNode)(designer.getPage(), nodeId)?.node;
+    const field = found?.type === 'field' ? found.field : '';
+    const editor = (0, steps_editor_1.stepsEditor)(el, designer, { change: field }, { label: w.whenItChanges });
+    const element = (0, panel_controls_1.setting)(el, 'rules', 'When it changes', editor.element, { words: w.whenItChanges, hint: w.changeHint });
+    element.classList.add('fd-do-setting');
+    return { element, update: (page) => editor.update(page), focus: () => editor.focus() };
+}
+/** The form's own moments, one list each, and a list for each tab or step shown that has one. */
+function formMoments(el, designer) {
+    const w = designer.words.steps;
+    const moment = (name, editor, hint) => el('div', { class: 'fd-do-moment' }, el('span', { class: 'fd-do-moment-name' }, name), editor.element, ...(hint ? [el('p', { class: 'fd-properties-hint fd-set-hint' }, hint)] : []));
+    const editors = steps_places_1.MOMENTS.map((at) => ({ at, editor: (0, steps_editor_1.stepsEditor)(el, designer, { moment: at }, { label: w.momentNames[at] }) }));
+    // A tab or step shown: one list each, for those that have steps or were picked to have some.
+    const shows = el('div', { class: 'fd-do-shows' });
+    const pick = el('select', { class: 'fd-input fd-select fd-do-show-pick', 'aria-label': w.stepsForATab });
+    const showRow = el('div', { class: 'fd-do-moment' }, el('span', { class: 'fd-do-moment-name' }, w.momentNames.show), shows, pick);
+    const showEditors = new Map();
+    const begun = new Set();
+    pick.addEventListener('change', () => {
+        if (!pick.value)
+            return;
+        begun.add(pick.value);
+        const id = pick.value;
+        pick.value = '';
+        update(designer.getPage());
+        showEditors.get(id)?.editor.focus();
+    });
+    const element = el('div', { class: 'fd-prop fd-do-setting fd-do-moments', 'data-tab': 'rules', 'data-setting': 'When…' }, el('span', { class: 'fd-prop-name' }, w.moments), ...editors.map(({ at, editor }) => moment(w.momentNames[at], editor, at === 'beforeSave' ? w.beforeSaveHint : undefined)), showRow);
+    function update(page) {
+        for (const { editor } of editors)
+            editor.update(page);
+        const targets = (0, steps_places_1.showTargets)(page);
+        const withSteps = new Set(Object.keys(page.on?.show ?? {}));
+        const listed = targets.filter((t) => withSteps.has(t.id) || begun.has(t.id));
+        for (const [id, view] of showEditors) {
+            if (listed.some((t) => t.id === id))
+                continue;
+            view.element.remove();
+            showEditors.delete(id);
+        }
+        for (const target of listed) {
+            let view = showEditors.get(target.id);
+            if (!view) {
+                const editor = (0, steps_editor_1.stepsEditor)(el, designer, { show: target.id }, { label: w.whenShown(target.label || target.id) });
+                const name = el('span', { class: 'fd-do-show-name' });
+                view = { element: el('div', { class: 'fd-do-show' }, name, editor.element), editor, name };
+                showEditors.set(target.id, view);
+            }
+            view.name.textContent = w.whenShown(target.label || target.id);
+            if (shows.children[listed.indexOf(target)] !== view.element)
+                shows.insertBefore(view.element, shows.children[listed.indexOf(target)] ?? null);
+            view.editor.update(page);
+        }
+        const free = targets.filter((t) => !listed.includes(t));
+        const key = JSON.stringify(free);
+        if (pick.dataset['targets'] !== key) {
+            pick.dataset['targets'] = key;
+            pick.replaceChildren(el('option', { value: '' }, w.stepsForATab), ...free.map((t) => el('option', { value: t.id }, t.label || t.id)));
+        }
+        pick.hidden = !free.length;
+        showRow.hidden = !targets.length;
+    }
+    return {
+        element,
+        update,
+        focus: () => editors[0].editor.focus(),
+    };
+}
+//# sourceMappingURL=steps-panel.js.map

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

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

package/src/lib/steps-panel.mjs

@@ -0,0 +1,84 @@
+import { findNode } from './page-tree.mjs';
+import { setting } from './panel-controls.mjs';
+import { stepsEditor } from './steps-editor.mjs';
+import { MOMENTS, showTargets } from './steps-places.mjs';
+/** What a button does when it is pressed: its steps, its app action among them. */
+export function whenClicked(el, designer, id, tab = 'content') {
+    const w = designer.words.steps;
+    const editor = stepsEditor(el, designer, { press: id }, { label: w.whenClicked });
+    const element = setting(el, tab, 'When clicked', editor.element, { words: w.whenClicked });
+    element.classList.add('fd-do-setting');
+    return { element, update: (page) => editor.update(page), focus: () => editor.focus() };
+}
+/** What a field's change does: steps run as a person changes it. */
+export function whenItChanges(el, designer, nodeId) {
+    const w = designer.words.steps;
+    const found = findNode(designer.getPage(), nodeId)?.node;
+    const field = found?.type === 'field' ? found.field : '';
+    const editor = stepsEditor(el, designer, { change: field }, { label: w.whenItChanges });
+    const element = setting(el, 'rules', 'When it changes', editor.element, { words: w.whenItChanges, hint: w.changeHint });
+    element.classList.add('fd-do-setting');
+    return { element, update: (page) => editor.update(page), focus: () => editor.focus() };
+}
+/** The form's own moments, one list each, and a list for each tab or step shown that has one. */
+export function formMoments(el, designer) {
+    const w = designer.words.steps;
+    const moment = (name, editor, hint) => el('div', { class: 'fd-do-moment' }, el('span', { class: 'fd-do-moment-name' }, name), editor.element, ...(hint ? [el('p', { class: 'fd-properties-hint fd-set-hint' }, hint)] : []));
+    const editors = MOMENTS.map((at) => ({ at, editor: stepsEditor(el, designer, { moment: at }, { label: w.momentNames[at] }) }));
+    // A tab or step shown: one list each, for those that have steps or were picked to have some.
+    const shows = el('div', { class: 'fd-do-shows' });
+    const pick = el('select', { class: 'fd-input fd-select fd-do-show-pick', 'aria-label': w.stepsForATab });
+    const showRow = el('div', { class: 'fd-do-moment' }, el('span', { class: 'fd-do-moment-name' }, w.momentNames.show), shows, pick);
+    const showEditors = new Map();
+    const begun = new Set();
+    pick.addEventListener('change', () => {
+        if (!pick.value)
+            return;
+        begun.add(pick.value);
+        const id = pick.value;
+        pick.value = '';
+        update(designer.getPage());
+        showEditors.get(id)?.editor.focus();
+    });
+    const element = el('div', { class: 'fd-prop fd-do-setting fd-do-moments', 'data-tab': 'rules', 'data-setting': 'When…' }, el('span', { class: 'fd-prop-name' }, w.moments), ...editors.map(({ at, editor }) => moment(w.momentNames[at], editor, at === 'beforeSave' ? w.beforeSaveHint : undefined)), showRow);
+    function update(page) {
+        for (const { editor } of editors)
+            editor.update(page);
+        const targets = showTargets(page);
+        const withSteps = new Set(Object.keys(page.on?.show ?? {}));
+        const listed = targets.filter((t) => withSteps.has(t.id) || begun.has(t.id));
+        for (const [id, view] of showEditors) {
+            if (listed.some((t) => t.id === id))
+                continue;
+            view.element.remove();
+            showEditors.delete(id);
+        }
+        for (const target of listed) {
+            let view = showEditors.get(target.id);
+            if (!view) {
+                const editor = stepsEditor(el, designer, { show: target.id }, { label: w.whenShown(target.label || target.id) });
+                const name = el('span', { class: 'fd-do-show-name' });
+                view = { element: el('div', { class: 'fd-do-show' }, name, editor.element), editor, name };
+                showEditors.set(target.id, view);
+            }
+            view.name.textContent = w.whenShown(target.label || target.id);
+            if (shows.children[listed.indexOf(target)] !== view.element)
+                shows.insertBefore(view.element, shows.children[listed.indexOf(target)] ?? null);
+            view.editor.update(page);
+        }
+        const free = targets.filter((t) => !listed.includes(t));
+        const key = JSON.stringify(free);
+        if (pick.dataset['targets'] !== key) {
+            pick.dataset['targets'] = key;
+            pick.replaceChildren(el('option', { value: '' }, w.stepsForATab), ...free.map((t) => el('option', { value: t.id }, t.label || t.id)));
+        }
+        pick.hidden = !free.length;
+        showRow.hidden = !targets.length;
+    }
+    return {
+        element,
+        update,
+        focus: () => editors[0].editor.focus(),
+    };
+}
+//# sourceMappingURL=steps-panel.mjs.map

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

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