@limetech/lime-crm-building-blocks 2.0.4 → 2.2.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 });
+    }
+}

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

@@ -0,0 +1,22 @@
+import { PlatformServiceName, } from "@limetech/lime-web-components";
+/**
+ * A translate function that falls back to the given English wording when the
+ * platform is absent or has no translation for the key.
+ *
+ * The tree is presentational and is rendered in docs and tests without a fully
+ * loaded platform, so it must read sensibly either way.
+ * @param platform
+ */
+export function createTranslator(platform) {
+    return (key, fallback) => {
+        var _a;
+        let translated;
+        try {
+            translated = (_a = platform === null || platform === void 0 ? void 0 : platform.get(PlatformServiceName.Translate)) === null || _a === void 0 ? void 0 : _a.get(key);
+        }
+        catch (_b) {
+            return fallback;
+        }
+        return translated && translated !== key ? translated : fallback;
+    };
+}

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

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+/**
+ * Problems reported on a node, listed beneath it.
+ * @param props
+ */
+export const IssuesView = (props) => {
+    var _a;
+    if (!((_a = props.issues) === null || _a === void 0 ? void 0 : _a.length)) {
+        return null;
+    }
+    return props.issues.map((issue) => h("div", { class: "issue" }, issue));
+};
+/**
+ * Throwing a node away. Shared because both kinds offer it: a group through
+ * the button in its header, a condition through the cross on its chip.
+ * @param path
+ * @param ctx
+ */
+export const handleDelete = (path, ctx) => (event) => {
+    event.stopPropagation();
+    ctx.onDelete(path);
+};

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

@@ -0,0 +1,132 @@
+*,
+*:before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.group {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.75rem;
+  background-color: rgb(var(--contrast-800), 0.15);
+  transition: box-shadow 120ms ease;
+}
+.group:before {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  bottom: calc(1rem + 1.75rem);
+  left: 0;
+  width: 0.125rem;
+  transform: translateX(-50%);
+  border-radius: 1rem;
+  background-color: var(--group-rail-color);
+}
+.group:has(> .group-header > limel-icon-button.delete-group:not([disabled]):hover), .group:has(> .group-header > limel-icon-button.delete-group:not([disabled]):focus-within) {
+  box-shadow: var(--shadow-error-state);
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+}
+
+limel-select.combinator {
+  min-width: 12rem;
+}
+
+limel-icon-button.delete-group {
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.group:hover > .group-header > limel-icon-button.delete-group,
+.group:focus-within > .group-header > limel-icon-button.delete-group {
+  opacity: 1;
+}
+
+limel-chip.add-group {
+  --lime-elevated-surface-background-color: transparent;
+  --button-shadow-normal: none;
+  isolation: isolate;
+  position: relative;
+  margin-right: auto;
+}
+limel-chip.add-group:after {
+  content: "";
+  position: absolute;
+  width: 0.5rem;
+  height: 1.75rem;
+  top: 0;
+  left: calc(0.5rem * -1 - 0.125rem / 2);
+  border-width: 0 0 0.125rem 0.125rem;
+  border-color: var(--group-rail-color);
+  border-style: solid;
+  border-radius: 0 0 0 0.5rem;
+  transform: translateY(calc(-50% - 0.125rem / 2));
+}
+
+ul.rows {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.5rem;
+  row-gap: 0.5rem;
+  padding: 0 0.5rem 0.5rem 0.5rem;
+}
+
+li.row {
+  list-style: none;
+  position: relative;
+}
+li.row.row--group {
+  flex-basis: 100%;
+  align-self: stretch;
+}
+li.row + li.row:before {
+  content: attr(data-marker);
+  color: var(--group-rail-color);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: normal;
+}
+li.row + li.row.row--group:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -50%);
+}
+li.row + li.row:not(.row--group) {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+li.row + li.row:not(.row--group):before {
+  margin-right: 0.5rem;
+}
+
+limel-popover.leaf {
+  display: inline-block;
+  max-width: 25rem;
+}
+
+.issue {
+  color: rgb(var(--color-red-default));
+  font-size: 0.875rem;
+  flex-basis: 100%;
+}