@limetech/lime-crm-building-blocks 2.0.4 → 2.1.0

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

@@ -0,0 +1,333 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { ProvideContext, } from "@limetech/lime-web-components";
+import { LimeWebComponentTemplate } from "../../../util/web-component-template";
+import { createTranslator } from "../condition-tree-translate";
+/**
+ * The body of a condition's editor popover: the consumer's editor, and — for a
+ * condition that cannot express its own negation — a switch that negates it.
+ *
+ * It is an element of its own rather than markup inside the tree because
+ * `limel-popover` portals its content out of the tree's shadow DOM, leaving it
+ * behind. Carrying its own shadow root means its styles travel with it.
+ *
+ * @private
+ */
+export class ConditionTreeEditor {
+    constructor() {
+        /**
+         * Whether the popover holding this element is open.
+         *
+         * The element itself stays in place while closed, because `limel-popover`
+         * moves its content into the popover surface once and for all when that
+         * surface first loads — anything not there by then is never moved. Drawing
+         * nothing until asked is what keeps the consumer's editor from being built
+         * for every condition in the tree.
+         */
+        this.open = false;
+        /**
+         * @inheritdoc
+         */
+        this.readonly = false;
+        /**
+         * @inheritdoc
+         */
+        this.disabled = false;
+        this.handleNegate = (event) => {
+            event.stopPropagation();
+            this.negateChange.emit(event.detail);
+        };
+        this.handleConditionChange = (event) => {
+            event.stopPropagation();
+            this.conditionChange.emit(event.detail);
+        };
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        return [this.renderHeader(), this.renderBody()];
+    }
+    /**
+     * The header exists only to hold the negation switch, so a condition that
+     * owns its polarity gets no header at all — its editor is the whole
+     * popover, exactly as if this element weren't here.
+     */
+    renderHeader() {
+        if (this.negated === undefined || this.readonly) {
+            return null;
+        }
+        return (h("limel-header", { class: "header is-narrow", heading: this.heading }, h("div", { slot: "actions", class: "header-actions" }, h("limel-switch", { class: "negate", label: this.negateLabel, value: this.negated, disabled: this.disabled, onChange: this.handleNegate }))));
+    }
+    renderBody() {
+        if (!this.editor) {
+            return null;
+        }
+        return (h(LimeWebComponentTemplate, { class: "editor", platform: this.platform, context: this.context, name: this.editor.name, props: Object.assign(Object.assign({}, this.editor.props), {
+                // The condition itself, and the tree's own state, win over
+                // the descriptor: an editor that stayed open while the tree
+                // was locked must not be the one place the lock does not
+                // reach.
+                value: this.value, readonly: this.readonly, disabled: this.disabled, onConditionChange: this.handleConditionChange
+            }) }));
+    }
+    get negateLabel() {
+        return createTranslator(this.platform)('webclient.negate', 'Negate');
+    }
+    static get is() { return "limebb-condition-tree-editor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["condition-tree-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["condition-tree-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "platform": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentPlatform",
+                    "resolved": "LimeWebComponentPlatform",
+                    "references": {
+                        "LimeWebComponentPlatform": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentPlatform",
+                            "referenceLocation": "LimeWebComponentPlatform"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Platform service provider"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "context": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentContext",
+                    "resolved": "LimeWebComponentContext",
+                    "references": {
+                        "LimeWebComponentContext": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentContext",
+                            "referenceLocation": "LimeWebComponentContext"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bridges the tree's context across the `limel-popover` portal."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the popover holding this element is open.\n\nThe element itself stays in place while closed, because `limel-popover`\nmoves its content into the popover surface once and for all when that\nsurface first loads \u2014 anything not there by then is never moved. Drawing\nnothing until asked is what keeps the consumer's editor from being built\nfor every condition in the tree."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "editor": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentDescriptor",
+                    "resolved": "ComponentDescriptor<unknown> | undefined",
+                    "references": {
+                        "ComponentDescriptor": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::ComponentDescriptor",
+                            "referenceLocation": "ComponentDescriptor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The editor to mount, as given on the condition."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The condition being edited, in the consumer's own model. Handed to the\nmounted editor as `value`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Title of the condition, shown above the editor when there is a header to\nshow at all."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "negated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the condition is negated. `undefined` means the condition\nexpresses its own polarity and no switch is offered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "negated"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "inheritdoc",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "inheritdoc",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "negateChange",
+                "name": "negateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user toggles the negation switch."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "conditionChange",
+                "name": "conditionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the replacement condition when the mounted editor reports\none.\n\n`limel-popover` portals this element out of the tree's shadow DOM, so an\nevent from the editor never reaches the tree on its own. Catching it here\nand emitting it again is what carries it back across."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+__decorate([
+    ProvideContext('context')
+], ConditionTreeEditor.prototype, "context", void 0);

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

@@ -0,0 +1,218 @@
+/**
+ * A stable string form of a path, for `key` attributes and for comparing two
+ * paths without an element-by-element loop at every call site.
+ * @param path
+ */
+export function pathKey(path) {
+    return path.length === 0 ? 'root' : path.join('.');
+}
+/**
+ * Reads and rebuilds a consumer's tree through its adapter.
+ *
+ * Walking down goes through `describe`, so the tree never has to know how a
+ * consumer nests its nodes. Rebuilding goes up through `group`, and only groups
+ * are rebuilt: a condition is moved as the object it already is.
+ */
+export class ConditionTreeWalker {
+    /**
+     * @param adapter
+     * @param isVisited - Whether the user has opened and closed a node's
+     * editor. Read through a function rather than taken as a set, so that the
+     * walker outlives the tree's tally growing.
+     */
+    constructor(adapter, isVisited = () => false) {
+        this.adapter = adapter;
+        this.isVisited = isVisited;
+    }
+    /**
+     * What the tree should draw for `node`.
+     * @param node
+     */
+    describe(node) {
+        return this.adapter.describe(node, {
+            visited: this.isVisited(node),
+        });
+    }
+    /**
+     * How `node` reads as a group, or `undefined` when it is a single
+     * condition rather than a group of them.
+     * @param node
+     */
+    groupOf(node) {
+        const description = this.describe(node);
+        return description.kind === 'group' ? description : undefined;
+    }
+    /**
+     * The children of a group, or `undefined` for a single condition.
+     * @param node
+     */
+    childrenOf(node) {
+        var _a;
+        return (_a = this.groupOf(node)) === null || _a === void 0 ? void 0 : _a.children;
+    }
+    /**
+     * The node at `path`, or `undefined` when the path leads nowhere — which
+     * happens routinely when the consumer replaces the tree while an editor is
+     * open.
+     * @param root
+     * @param path
+     */
+    nodeAt(root, path) {
+        let node = root;
+        for (const index of path) {
+            if (node === undefined) {
+                return undefined;
+            }
+            const children = this.childrenOf(node);
+            if (!children) {
+                return undefined;
+            }
+            node = children[index];
+        }
+        return node;
+    }
+    /**
+     * The group at `path`, or `undefined` when the path leads nowhere or to a
+     * condition. Every caller that wants to look inside a group first has to
+     * find it and then find out whether it is one, so both steps live here.
+     * @param root
+     * @param path
+     */
+    groupAt(root, path) {
+        const node = this.nodeAt(root, path);
+        return node === undefined ? undefined : this.groupOf(node);
+    }
+    /**
+     * Whether `node` is still somewhere in the tree, by identity.
+     *
+     * Identity rather than equality: a condition the tree did not touch is the
+     * very object the consumer handed over, so one that merely looks the same
+     * is a different condition.
+     * @param root
+     * @param node
+     */
+    contains(root, node) {
+        if (root === undefined) {
+            return false;
+        }
+        if (root === node) {
+            return true;
+        }
+        const children = this.childrenOf(root);
+        return !!(children === null || children === void 0 ? void 0 : children.some((child) => this.contains(child, node)));
+    }
+    /**
+     * Every condition asking to be opened, in display order.
+     *
+     * All of them rather than the first, because a consumer that leaves the
+     * flag on a condition it has already added would otherwise keep pointing at
+     * that one, and the next condition added would never get its turn.
+     * @param root
+     */
+    autoOpenNodes(root) {
+        if (root === undefined) {
+            return [];
+        }
+        const description = this.describe(root);
+        if (description.kind === 'leaf') {
+            return description.autoOpen ? [root] : [];
+        }
+        return description.children.flatMap((child) => this.autoOpenNodes(child));
+    }
+    /**
+     * The tree with the node at `path` replaced by `next`, or removed when
+     * `next` is `undefined`.
+     * @param root
+     * @param path
+     * @param next
+     */
+    replaceAt(root, path, next) {
+        if (path.length === 0) {
+            return next;
+        }
+        const group = this.groupOf(root);
+        if (!group) {
+            return root;
+        }
+        const [index, ...rest] = path;
+        const children = group.children;
+        if (!(index in children)) {
+            return root;
+        }
+        const child = this.replaceAt(children[index], rest, next);
+        return this.rebuild(group.combinator, spliced(children, index, child));
+    }
+    /**
+     * The tree with `child` added to the end of the group at `path`. A path
+     * leading to a condition rather than a group leaves the tree alone: there
+     * is nothing there to add to.
+     * @param root
+     * @param path
+     * @param child
+     */
+    appendAt(root, path, child) {
+        const group = this.groupAt(root, path);
+        if (!group) {
+            return root;
+        }
+        return this.replaceAt(root, path, this.adapter.group(group.combinator, [...group.children, child]));
+    }
+    /**
+     * The tree with the group at `path` joined by `combinator` instead, and
+     * what is inside it left alone. A path leading anywhere but a group leaves
+     * the tree as it was.
+     * @param root
+     * @param path
+     * @param combinator
+     */
+    rejoinAt(root, path, combinator) {
+        const group = this.groupAt(root, path);
+        if (!group) {
+            return root;
+        }
+        return this.replaceAt(root, path, this.adapter.group(combinator, group.children));
+    }
+    /**
+     * The tree with the condition at `path` negated, or not.
+     *
+     * 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.
+     * @param root
+     * @param path
+     * @param negated
+     */
+    negateAt(root, path, negated) {
+        const target = this.nodeAt(root, path);
+        if (target === undefined || !this.adapter.negate) {
+            return root;
+        }
+        return this.replaceAt(root, path, this.adapter.negate(target, negated));
+    }
+    /**
+     * A group holding `children`, or nothing at all when there are none left: a
+     * group with nothing in it says nothing, so it goes the way of its last
+     * condition — and so, in turn, does the group that held it.
+     * @param combinator
+     * @param children
+     */
+    rebuild(combinator, children) {
+        if (children.length === 0) {
+            return undefined;
+        }
+        return this.adapter.group(combinator, children);
+    }
+}
+/**
+ * The same list with the entry at `index` swapped for `replacement`, or dropped
+ * when there is no replacement.
+ * @param children
+ * @param index
+ * @param replacement
+ */
+function spliced(children, index, replacement) {
+    return [
+        ...children.slice(0, index),
+        ...(replacement === undefined ? [] : [replacement]),
+        ...children.slice(index + 1),
+    ];
+}

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

@@ -0,0 +1,127 @@
+/**
+ * Which condition's editor is open, and what the tree remembers about the user
+ * having been there.
+ *
+ * All of it is held by condition rather than by place in the tree, so that it
+ * survives the tree being rearranged around it.
+ *
+ * Every method returns a new state rather than changing this one, because
+ * `limebb-condition-tree` keeps it in `@State` and Stencil redraws on a new
+ * reference, not on a changed field.
+ */
+export class ConditionTreeOpenState {
+    constructor(fields) {
+        this.fields = fields;
+    }
+    static empty() {
+        return new ConditionTreeOpenState({
+            open: null,
+            pending: null,
+            seen: new Set(),
+            autoOpened: new Set(),
+        });
+    }
+    get openNode() {
+        return this.fields.open;
+    }
+    /**
+     * Whether the user has opened this condition's editor and closed it again.
+     * @param node
+     */
+    hasSeen(node) {
+        return this.fields.seen.has(node);
+    }
+    /**
+     * The open editor moved onto `next`, or onto nothing at all, remembering
+     * the condition left behind — the moment the user is done with it for now,
+     * and the earliest anything can fairly judge it. Losing a condition because
+     * it went away is not the user leaving it: see `dropIfGone`.
+     * @param next
+     */
+    moveTo(next) {
+        const previous = this.fields.open;
+        const moved = this.with({
+            open: next,
+            // Whatever the consumer was about to send back is no longer the
+            // condition being edited, so it must not be chased later.
+            pending: null,
+        });
+        if (previous === null || previous === next) {
+            return moved;
+        }
+        return moved.with({ seen: new Set(this.fields.seen).add(previous) });
+    }
+    /**
+     * The same state, now waiting for `next` — the condition an editor just
+     * reported — to turn up in a tree from the consumer.
+     * @param next
+     */
+    expect(next) {
+        return this.with({ pending: next });
+    }
+    /**
+     * The state brought up to date with a tree the consumer has just handed
+     * over: follow the condition that replaced the one being edited, open
+     * whatever is asking to be opened, and let go of a condition that is no
+     * longer there.
+     * @param root
+     * @param walker
+     */
+    sync(root, walker) {
+        return this.followPending(root, walker)
+            .openWhatAsks(root, walker)
+            .dropIfGone(root, walker);
+    }
+    with(changes) {
+        return new ConditionTreeOpenState(Object.assign(Object.assign({}, this.fields), changes));
+    }
+    /**
+     * Move the editor onto the replacement, once the consumer has sent a tree
+     * holding it. One that reports the edit elsewhere, or normalizes the
+     * condition on the way through, never sends it back at all — the editor
+     * then stays where it is, and `dropIfGone` settles it if that has gone too.
+     * @param root
+     * @param walker
+     */
+    followPending(root, walker) {
+        if (this.fields.pending === null) {
+            return this;
+        }
+        if (!walker.contains(root, this.fields.pending)) {
+            return this;
+        }
+        return this.with({ open: this.fields.pending, pending: null });
+    }
+    /**
+     * Open the condition that is asking for it and has not had its turn yet.
+     *
+     * A consumer is free to leave the flag on conditions it added earlier, so
+     * what settles this is not the flag alone but whether that condition has
+     * already been opened once. Conditions that stop asking are forgotten
+     * again, so one that is removed and put back opens anew.
+     * @param root
+     * @param walker
+     */
+    openWhatAsks(root, walker) {
+        const nodes = walker.autoOpenNodes(root);
+        const fresh = nodes.find((node) => !this.fields.autoOpened.has(node));
+        const remembered = this.with({ autoOpened: new Set(nodes) });
+        return fresh === undefined ? remembered : remembered.moveTo(fresh);
+    }
+    /**
+     * Let go of the open condition when it is no longer there — the user
+     * removed it, or the consumer replaced the tree under it. That is not the
+     * user finishing with it, so it does not count as having been seen.
+     * @param root
+     * @param walker
+     */
+    dropIfGone(root, walker) {
+        if (this.fields.open === null) {
+            return this;
+        }
+        if (walker.contains(root, this.fields.open)) {
+            return this;
+        }
+        return this.with({ open: null });
+    }
+}