@limetech/lime-crm-building-blocks 2.3.1 → 2.4.1

package/dist/collection/components/condition-tree/condition-tree-nodes.js

@@ -173,20 +173,27 @@ export class ConditionTreeWalker {
         return this.replaceAt(root, path, this.adapter.group(combinator, group.children));
     }
     /**
-     * The tree with the condition at `path` negated, or not.
+     * The condition at `path`, negated or not — the condition itself, not a
+     * tree holding it.
      *
-     * An adapter with no way to rebuild a negated condition leaves the tree
-     * alone: it has already told the tree not to offer the control.
+     * Handed back on its own because negating replaces the condition, and
+     * whatever is watching the one being replaced has to be told which object
+     * takes its place before the new tree goes out. Putting it into the tree is
+     * `replaceAt`, one step later.
+     *
+     * `undefined` when there is nothing at `path`, or when the adapter has no
+     * way to rebuild a negated condition — it has already told the tree not to
+     * offer the control.
      * @param root
      * @param path
      * @param negated
      */
-    negateAt(root, path, negated) {
+    negated(root, path, negated) {
         const target = this.nodeAt(root, path);
         if (target === undefined || !this.adapter.negate) {
-            return root;
+            return undefined;
         }
-        return this.replaceAt(root, path, this.adapter.negate(target, negated));
+        return this.adapter.negate(target, negated);
     }
     /**
      * A group holding `children`, or nothing at all when there are none left: a

package/dist/collection/components/condition-tree/condition-tree.js

@@ -123,11 +123,12 @@ export class ConditionTree {
             negatable: !!this.adapter.negate,
             openNode: this.openState.openNode,
             addOptions: this.addOptions,
+            addSearcher: this.addSearcher,
             onAddLeaf: (path, item) => this.addLeaf(path, item),
-            onAddGroup: (path) => this.addGroup(path),
+            onAddGroup: (path, item) => this.addGroup(path, item),
             onDelete: (path) => this.applyEdit((root) => this.walker.replaceAt(root, path, undefined)),
             onCombinator: (path, combinator) => this.applyEdit((root) => this.walker.rejoinAt(root, path, combinator)),
-            onNegate: (path, negated) => this.applyEdit((root) => this.walker.negateAt(root, path, negated)),
+            onNegate: (path, negated) => this.negate(path, negated),
             onConditionChange: (path, next) => {
                 this.openState = this.openState.expect(next);
                 this.applyEdit((root) => this.walker.replaceAt(root, path, next));
@@ -137,6 +138,25 @@ export class ConditionTree {
             },
         };
     }
+    /**
+     * Negate the condition at `path`, or stop negating it.
+     *
+     * Negating rebuilds the condition, so the one an open editor is bound to
+     * is about to be a different object. Saying which object that is, before
+     * the edit goes out, is what keeps the editor from shutting under the very
+     * switch the user just reached for — the same courtesy an editor's own
+     * change already gets.
+     * @param path
+     * @param negated
+     */
+    negate(path, negated) {
+        const next = this.walker.negated(this.value, path, negated);
+        if (next === undefined) {
+            return;
+        }
+        this.openState = this.openState.expect(next);
+        this.applyEdit((root) => this.walker.replaceAt(root, path, next));
+    }
     addLeaf(path, item) {
         this.grow(path, this.adapter.createLeaf(item));
     }
@@ -146,24 +166,31 @@ export class ConditionTree {
      * not already say.
      * @param path
      */
-    addGroup(path) {
-        var _a, _b;
-        const combinator = (_b = (_a = this.walker.groupAt(this.value, path)) === null || _a === void 0 ? void 0 : _a.combinator) !== null && _b !== void 0 ? _b : this.rootCombinator();
-        this.grow(path, this.adapter.group(oppositeCombinator(combinator), this.newGroupChildren()));
-    }
     /**
-     * What a new group starts with: one blank condition, so that a group is
-     * never handed over saying nothing — the same rule by which a group emptied
-     * of its last condition is dropped rather than kept. A consumer offering a
-     * menu of kinds is the exception, since the tree cannot know which kind to
-     * make.
+     * Add a group, holding the one condition it was asked for.
+     *
+     * A group is never handed over with nothing in it, which is the same rule
+     * by which a group emptied of its last condition is dropped rather than
+     * kept — and here it is not tidiness but arithmetic. An empty group is not
+     * an undecided one: `all` of nothing is true and `any` of nothing is
+     * false, so a group left unfilled answers for itself. Since a new group
+     * joins the other way round from the one holding it, that answer is always
+     * the one that settles its parent, and every real condition beside it
+     * stops counting.
+     *
+     * So the consumer that names its kinds is asked which one first — the same
+     * question the add-condition button asks, put before the group is made
+     * rather than after. One that names none has only one kind to make, and
+     * the tree makes it.
+     * @param path
+     * @param item
      */
-    newGroupChildren() {
-        var _a;
-        if ((_a = this.addOptions) === null || _a === void 0 ? void 0 : _a.length) {
-            return [];
-        }
-        return [this.adapter.createLeaf()];
+    addGroup(path, item) {
+        var _a, _b;
+        const combinator = (_b = (_a = this.walker.groupAt(this.value, path)) === null || _a === void 0 ? void 0 : _a.combinator) !== null && _b !== void 0 ? _b : this.rootCombinator();
+        this.grow(path, this.adapter.group(oppositeCombinator(combinator), [
+            this.adapter.createLeaf(item),
+        ]));
     }
     /**
      * Add a condition, or a group to put conditions in.
@@ -384,6 +411,30 @@ export class ConditionTree {
                 "getter": false,
                 "setter": false
             },
+            "addSearcher": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuSearcher",
+                    "resolved": "((query: string) => Promise<(ListSeparator | MenuItem<any>)[]>) | undefined",
+                    "references": {
+                        "MenuSearcher": {
+                            "location": "import",
+                            "path": "@limetech/lime-elements",
+                            "id": "node_modules::MenuSearcher",
+                            "referenceLocation": "MenuSearcher"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "How to narrow `addOptions` as the user types, which is what puts a search\nfield at the top of the add menu.\n\nWorth setting as soon as the kinds on offer stop fitting on a screen \u2014\nand a consumer whose kinds are contributed by add-ons cannot know that\nthey still do. `addOptions` is still what the menu opens on, so an\nunsearched menu reads exactly as it did before."
+                },
+                "getter": false,
+                "setter": false
+            },
             "readonly": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/condition-tree/group-node-view.js

@@ -119,23 +119,55 @@ function renderDeleteGroup(path, ctx, placeholder) {
     return (h("limel-icon-button", { class: "delete-group", icon: "trash", label: ctx.translate('webclient.delete-group', 'Delete this group'), disabled: ctx.disabled || !!placeholder, onClick: handleDelete(path, ctx) }));
 }
 function renderAddCondition(path, marker, ctx) {
-    var _a;
     if (ctx.readonly) {
         return null;
     }
-    const offersChoice = !!((_a = ctx.addOptions) === null || _a === void 0 ? void 0 : _a.length);
-    const chip = (h("limel-chip", { slot: offersChoice ? 'trigger' : undefined, class: "add-condition", text: ctx.translate('webclient.condition', 'Condition'), disabled: ctx.disabled, icon: addIcon(ctx), onClick: offersChoice ? undefined : handleAddLeaf(path, ctx) }));
+    const chip = (h("limel-chip", { slot: offersChoice(ctx) ? 'trigger' : undefined, class: "add-condition", text: ctx.translate('webclient.condition', 'Condition'), disabled: ctx.disabled || hasNoKinds(ctx), icon: addIcon(ctx), onClick: offersChoice(ctx) ? undefined : handleAddLeaf(path, ctx) }));
     // A row of its own rather than a bare chip, so that the join between it
     // and the condition before it is drawn by the same rule that joins any two
     // rows: the button is where the next condition goes, and it reads as part
     // of the sequence — "Won or 100000 or + Condition".
-    return (h("li", { class: "row", "data-marker": marker, key: `${pathKey(path)}.add` }, offersChoice ? (h("limel-menu", { class: "add-condition-menu", items: ctx.addOptions, openDirection: "bottom-start", onSelect: handleAddLeafPick(path, ctx) }, chip)) : (chip)));
+    return (h("li", { class: "row", "data-marker": marker, key: `${pathKey(path)}.add` }, withKindMenu(chip, 'add-condition-menu', handleAddLeafPick(path, ctx), ctx)));
 }
 function renderAddGroup(path, ctx) {
     if (ctx.readonly) {
         return null;
     }
-    return (h("limel-chip", { class: "add-group", size: "small", text: ctx.translate('webclient.group', 'Group'), disabled: ctx.disabled, icon: addIcon(ctx, 'var(--group-rail-color)'), onClick: handleAddGroup(path, ctx) }));
+    const chip = (h("limel-chip", { slot: offersChoice(ctx) ? 'trigger' : undefined, class: "add-group", size: "small", text: ctx.translate('webclient.group', 'Group'), disabled: ctx.disabled || hasNoKinds(ctx), icon: addIcon(ctx, 'var(--group-rail-color)'), onClick: offersChoice(ctx) ? undefined : handleAddGroup(path, ctx) }));
+    return withKindMenu(chip, 'add-group-menu', handleAddGroupPick(path, ctx), ctx);
+}
+/**
+ * Whether the consumer picks what a new condition is rather than the tree.
+ * @param ctx
+ */
+function offersChoice(ctx) {
+    return !!ctx.addOptions;
+}
+/**
+ * Whether the consumer offers a choice but has nothing to choose from, which
+ * is a tree that cannot be added to at all.
+ * @param ctx
+ */
+function hasNoKinds(ctx) {
+    var _a;
+    return ((_a = ctx.addOptions) === null || _a === void 0 ? void 0 : _a.length) === 0;
+}
+/**
+ * The trigger, behind the menu of kinds when there is one to put behind it.
+ *
+ * Both buttons ask the same question — which kind of condition — because both
+ * make one: the group button makes a group to put it in first. A consumer that
+ * names no kinds is adding the only kind it has, and the button acts directly.
+ * @param trigger
+ * @param className
+ * @param onPick
+ * @param ctx
+ */
+function withKindMenu(trigger, className, onPick, ctx) {
+    if (!offersChoice(ctx)) {
+        return trigger;
+    }
+    return (h("limel-menu", { class: className, items: ctx.addOptions, searcher: ctx.addSearcher, openDirection: "bottom-start", onSelect: onPick }, trigger));
 }
 const handleCombinator = (path, ctx) => (event) => {
     var _a;
@@ -151,3 +183,7 @@ const handleAddLeafPick = (path, ctx) => (event) => {
     ctx.onAddLeaf(path, event.detail);
 };
 const handleAddGroup = (path, ctx) => () => ctx.onAddGroup(path);
+const handleAddGroupPick = (path, ctx) => (event) => {
+    event.stopPropagation();
+    ctx.onAddGroup(path, event.detail);
+};

package/dist/collection/components/condition-tree/leaf-node-view.js

@@ -9,7 +9,7 @@ export const LeafView = (props) => {
     const { node, description, path, ctx } = props;
     const isOpen = ctx.openNode === node;
     return [
-        h("limel-popover", { class: "leaf", key: pathKey(path), open: isOpen, openDirection: "bottom-start", onClose: handleClose(ctx) }, h(ChipView, { node: node, description: description, path: path, ctx: ctx }), h("limebb-condition-tree-editor", { platform: ctx.platform, context: ctx.context, open: isOpen, editor: description.editor, value: node, heading: description.chip.label, negated: ctx.negatable ? description.negated : undefined, readonly: ctx.readonly, disabled: ctx.disabled, onNegateChange: handleNegate(path, ctx), onConditionChange: handleConditionChange(path, ctx) })),
+        h("limel-popover", { class: "leaf", key: pathKey(path), open: isOpen, openDirection: "bottom-start", onClose: handleClose(ctx) }, h(ChipView, { node: node, description: description, path: path, ctx: ctx }), h("limebb-condition-tree-editor", { platform: ctx.platform, context: ctx.context, open: isOpen, editor: description.editor, value: node, heading: description.chip.label, icon: description.chip.icon, negated: ctx.negatable ? description.negated : undefined, readonly: ctx.readonly, disabled: ctx.disabled, onNegateChange: handleNegate(path, ctx), onConditionChange: handleConditionChange(path, ctx) })),
         h(IssuesView, { issues: description.issues }),
     ];
 };
@@ -56,10 +56,27 @@ function drivenProps(props) {
     };
 }
 const handleOpen = (node, description, ctx) => () => {
-    if (description.editor && !ctx.disabled) {
+    if (hasSomethingToOpen(description, ctx) && !ctx.disabled) {
         ctx.onOpen(node);
     }
 };
+/**
+ * Whether opening this condition would show anything at all.
+ *
+ * Its editor is the usual answer. The other one is a condition the tree negates
+ * on its behalf: the switch that does so is the only thing in its popover, and
+ * a condition that cannot be opened is a condition that cannot be negated.
+ *
+ * A condition with neither is a label, and stays shut.
+ * @param description
+ * @param ctx
+ */
+function hasSomethingToOpen(description, ctx) {
+    if (description.editor) {
+        return true;
+    }
+    return ctx.negatable && description.negated !== undefined;
+}
 const handleClose = (ctx) => (event) => {
     event.stopPropagation();
     ctx.onOpen(null);

package/dist/collection/components/rule-editor/condition-tree-adapter.js

@@ -0,0 +1,229 @@
+/** What a chip says for a condition with no name to put on it. */
+const UNNAMED = '…';
+/**
+ * Which `all`/`any` a combinator is built on, and whether a `not` goes round it.
+ * The wrapper is not a node of its own in a condition tree: it folds into the
+ * combinator of the group it wraps, and unfolds again on the way back out.
+ */
+const SHAPE = {
+    all: { type: 'all', negated: false },
+    any: { type: 'any', negated: false },
+    'not-all': { type: 'all', negated: true },
+    none: { type: 'any', negated: true },
+};
+const NEGATED_COMBINATOR = {
+    all: 'not-all',
+    any: 'none',
+    'not-all': 'all',
+    none: 'any',
+};
+/**
+ * How `limebb-condition-tree` reads and rebuilds a {@link Rule}. Everything
+ * structural belongs to the tree; everything about what a rule *is* belongs
+ * here.
+ * @param source
+ */
+export function createRuleConditionTreeAdapter(source) {
+    return {
+        describe: (node, state) => describeRule(node, state, source),
+        group: group,
+        negate: negate,
+        createLeaf: (item) => {
+            var _a;
+            const leaf = { type: 'ref', id: String((_a = item === null || item === void 0 ? void 0 : item.value) !== null && _a !== void 0 ? _a : '') };
+            source.created().add(leaf);
+            return leaf;
+        },
+    };
+}
+/**
+ * How the rule joins what is inside it, and what that is — or nothing when it
+ * is a single condition rather than a group. A `not` is transparent: it becomes
+ * the group's combinator, and chains of them fold down to one.
+ * @param rule
+ */
+export function groupOf(rule) {
+    if (!isNode(rule)) {
+        return undefined;
+    }
+    if (rule.type === 'all' || rule.type === 'any') {
+        return Array.isArray(rule.rules)
+            ? { combinator: rule.type, rules: rule.rules }
+            : undefined;
+    }
+    if (rule.type !== 'not') {
+        return undefined;
+    }
+    const inner = groupOf(rule.rule);
+    return inner
+        ? {
+            combinator: NEGATED_COMBINATOR[inner.combinator],
+            rules: inner.rules,
+        }
+        : undefined;
+}
+/**
+ * The primitive a rule refers to, and whether it is negated — or nothing when
+ * the rule refers to none. Wrapping in a `not` is the only negation a rule
+ * condition has, having no "is not" vocabulary of its own.
+ * @param rule
+ */
+export function refOf(rule) {
+    if (!isNode(rule)) {
+        return undefined;
+    }
+    if (rule.type === 'ref') {
+        return { ref: rule, negated: false };
+    }
+    if (rule.type === 'not' && isNode(rule.rule) && rule.rule.type === 'ref') {
+        return { ref: rule.rule, negated: true };
+    }
+    return undefined;
+}
+/**
+ * Whether there is a rule here at all. A hand-edited rule can hold a `null` or
+ * a bare value where a node should be, and reading `type` off one throws, so
+ * everything that asks about structure asks this first.
+ * @param rule
+ */
+function isNode(rule) {
+    return typeof rule === 'object' && rule !== null;
+}
+function describeRule(node, state, source) {
+    const issues = source.issues().get(node);
+    const group = groupOf(node);
+    if (group) {
+        return {
+            kind: 'group',
+            combinator: group.combinator,
+            // Never copies: the tree tells conditions apart by identity.
+            children: group.rules,
+            issues: issues,
+        };
+    }
+    const reference = refOf(node);
+    if (!reference) {
+        return unreadable(node, source, issues);
+    }
+    return describeRef(reference, state, source, issues);
+}
+/**
+ * How a condition reads: its primitive's name, the bare id when nobody
+ * registered it, and the placeholder when it has not even got that.
+ * @param ref
+ * @param source
+ */
+function nameOf(ref, source) {
+    return source.titles.get(ref.id) || ref.id || UNNAMED;
+}
+function describeRef(reference, state, source, issues) {
+    const { ref, negated } = reference;
+    const metadata = source.metadata.get(ref.id);
+    const fresh = source.created().has(ref);
+    const editor = metadata === null || metadata === void 0 ? void 0 : metadata.configComponent;
+    return {
+        kind: 'leaf',
+        chip: {
+            label: nameOf(ref, source),
+            icon: glyphOf(metadata),
+            // Marked before validation has had its say, so that a rule loaded
+            // from storage does not read as sound for a render.
+            invalid: !metadata || !!(issues === null || issues === void 0 ? void 0 : issues.length),
+            component: {
+                name: 'limebb-rule-condition-chip',
+                props: {
+                    negated: negated,
+                    iconColor: colourOf(metadata),
+                },
+            },
+        },
+        // Every condition here is opaque, so the tree offers the negation and
+        // rebuilds it through `negate`.
+        negated: negated,
+        issues: issues,
+        // Just added and with something to configure: the one thing left to do
+        // is put in front of the author. One with nothing to configure is
+        // already complete, and stays shut.
+        autoOpen: fresh && !!editor,
+        editor: editor && {
+            name: 'limebb-rule-condition-editor',
+            props: {
+                configComponent: editor,
+                // Never into one they merely re-opened to look at.
+                focusOnOpen: fresh && !state.visited,
+            },
+        },
+    };
+}
+/**
+ * A rule this adapter cannot read: neither a group nor a reference. Drawn, so
+ * the tree is not silently short of a condition, and marked — but with no
+ * editor, which is what keeps it shut.
+ * @param node
+ * @param source
+ * @param issues
+ */
+function unreadable(node, source, issues) {
+    var _a;
+    return {
+        kind: 'leaf',
+        chip: {
+            label: (_a = typeNameOf(node)) !== null && _a !== void 0 ? _a : UNNAMED,
+            icon: 'question',
+            invalid: true,
+            component: { name: 'limebb-rule-condition-chip' },
+        },
+        issues: (issues === null || issues === void 0 ? void 0 : issues.length)
+            ? issues
+            : [
+                source.translate('webclient.rule-editor.unreadable-condition', 'This condition cannot be read, and so cannot be edited here.'),
+            ],
+    };
+}
+/**
+ * What a node says it is, when it says anything at all. Read defensively: the
+ * nodes that get here are the ones that are not rules, so a `type` that is
+ * missing or is not a word is exactly how one arrives.
+ * @param node
+ */
+function typeNameOf(node) {
+    if (!isNode(node)) {
+        return undefined;
+    }
+    const type = node.type;
+    return typeof type === 'string' && type ? type : undefined;
+}
+/**
+ * The primitive's glyph, or the one standing for a primitive nobody registered.
+ * Its colour travels separately — see {@link colourOf} — because the tree's
+ * chip vocabulary has room only for the name.
+ * @param metadata
+ */
+function glyphOf(metadata) {
+    if (!metadata) {
+        return 'question';
+    }
+    if (!metadata.icon) {
+        return undefined;
+    }
+    return typeof metadata.icon === 'string'
+        ? metadata.icon
+        : metadata.icon.name;
+}
+/**
+ * The colour the primitive asked for its glyph, when it asked for one.
+ * @param metadata
+ */
+function colourOf(metadata) {
+    return typeof (metadata === null || metadata === void 0 ? void 0 : metadata.icon) === 'object' ? metadata.icon.color : undefined;
+}
+function group(combinator, children) {
+    const inner = { type: SHAPE[combinator].type, rules: [...children] };
+    return SHAPE[combinator].negated ? { type: 'not', rule: inner } : inner;
+}
+function negate(node, negated) {
+    if (negated) {
+        return node.type === 'not' ? node : { type: 'not', rule: node };
+    }
+    return node.type === 'not' ? node.rule : node;
+}

package/dist/collection/components/rule-editor/rule-condition-chip/rule-condition-chip.css

@@ -0,0 +1,4 @@
+:host {
+  display: inline-flex;
+  min-width: 0;
+}