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

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%;
+}

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

@@ -0,0 +1,461 @@
+import { Host, h, } from "@stencil/core";
+import { CONDITION_TREE_COMBINATORS, oppositeCombinator, } from "./condition-tree-combinators";
+import { ConditionTreeWalker } from "./condition-tree-nodes";
+import { ConditionTreeOpenState } from "./condition-tree-open-state";
+import { GroupView, NodeView } from "./group-node-view";
+import { createTranslator } from "./condition-tree-translate";
+/**
+ * The group drawn when there is no tree yet. Nothing is inside it, so no
+ * combinator is offered and there is nothing to delete or to group.
+ */
+const EMPTY_GROUP = {
+    kind: 'group',
+    combinator: 'all',
+    children: [],
+};
+/**
+ * The shared skeleton for editing a tree of conditions: nested groups joined by
+ * "All of the following" or "Any of the following", or the negations of those
+ * two, each holding conditions shown as chips, with the buttons that add,
+ * remove and regroup them.
+ *
+ * This component is deliberately ignorant of what a condition *is*.
+ *
+ * A condition is visualized as a chip, plus the tag name of an editor to open.
+ * So the same skeleton serves a condition that tests a property ("Deal value is
+ * greater than 100 000") and one that is opaque ("User is a member of a group")
+ * without either model leaking into it.
+ *
+ * It holds no tree of its own either. The consumer passes in its own tree, and
+ * an adapter that reads one node and rebuilds one group. Every structural edit
+ * — add, delete, regroup, rejoin, negate — is applied here and handed back as a
+ * tree of the same kind, so no consumer has to write that code twice.
+ *
+ * @exampleComponent limebb-example-condition-tree-basic
+ * @exampleComponent limebb-example-condition-tree-combinators
+ * @exampleComponent limebb-example-condition-tree-editors
+ * @exampleComponent limebb-example-condition-tree-palette
+ *
+ * @beta
+ */
+export class ConditionTree {
+    constructor() {
+        /**
+         * Which combinators to offer in the group dropdowns, in the order given.
+         *
+         * All four are offered by default. "Not all of the following" and "None of
+         * the following" are harder to reason about than the two they negate, so a
+         * consumer whose users would be better served without them passes
+         * `['all', 'any']`. A group that already uses a combinator left off this
+         * list still shows it, rather than misrepresenting itself as using one of
+         * the offered ones.
+         */
+        this.combinators = [
+            ...CONDITION_TREE_COMBINATORS,
+        ];
+        /**
+         * Set to `true` when the tree is not the viewer's to change: the add,
+         * delete and negate controls are not rendered at all, leaving the
+         * conditions to be read. Use it where the tree is being shown rather than
+         * edited — a saved filter summarized on a card, or a rule the viewer has
+         * no rights over.
+         */
+        this.readonly = false;
+        /**
+         * Set to `true` when the tree *is* the viewer's to change, but not at this
+         * moment: every control stays where it is, dimmed and inert. Use it for a
+         * state that will pass — a form mid-save, or a tree behind an "Apply a
+         * filter" switch that is currently off.
+         */
+        this.disabled = false;
+        /**
+         * Which editor is open, and what the user has already been through — see
+         * `condition-tree-open-state.ts`.
+         */
+        this.openState = ConditionTreeOpenState.empty();
+    }
+    componentWillLoad() {
+        this.buildWalker();
+    }
+    buildWalker() {
+        this.walker = new ConditionTreeWalker(this.adapter, (node) => this.openState.hasSeen(node));
+        this.syncOpenState();
+    }
+    /**
+     * Nothing can be read out of a tree until there is an adapter to read it
+     * with, so a tree that arrives first waits here. `buildWalker` catches it
+     * up when the adapter turns up.
+     */
+    syncOpenState() {
+        if (!this.adapter) {
+            return;
+        }
+        this.openState = this.openState.sync(this.value, this.walker);
+    }
+    render() {
+        if (!this.adapter) {
+            return h(Host, null);
+        }
+        return (h(Host, null, this.isEmpty ? (this.renderEmptyState()) : (h(NodeView, { node: this.value, description: this.walker.describe(this.value), path: [], ctx: this.renderContext() }))));
+    }
+    /**
+     * The empty tree is drawn as the group it is about to become, rather than
+     * as a lone button: every condition here ends up inside a group, so the
+     * first one lands in a frame that was already on screen instead of
+     * conjuring one around itself. It can be filled either way round, with a
+     * condition or with a nested group.
+     */
+    renderEmptyState() {
+        if (this.readonly) {
+            return null;
+        }
+        return (h(GroupView, { description: EMPTY_GROUP, path: [], ctx: this.renderContext(), placeholder: true }));
+    }
+    renderContext() {
+        return {
+            platform: this.platform,
+            context: this.context,
+            walker: this.walker,
+            translate: createTranslator(this.platform),
+            combinators: this.combinators,
+            readonly: this.readonly,
+            disabled: this.disabled,
+            negatable: !!this.adapter.negate,
+            openNode: this.openState.openNode,
+            addOptions: this.addOptions,
+            onAddLeaf: (path, item) => this.addLeaf(path, item),
+            onAddGroup: (path) => this.addGroup(path),
+            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)),
+            onConditionChange: (path, next) => {
+                this.openState = this.openState.expect(next);
+                this.applyEdit((root) => this.walker.replaceAt(root, path, next));
+            },
+            onOpen: (node) => {
+                this.openState = this.openState.moveTo(node);
+            },
+        };
+    }
+    addLeaf(path, item) {
+        this.grow(path, this.adapter.createLeaf(item));
+    }
+    /**
+     * A nested group is joined the other way round from the one holding it: a
+     * group joined the same way as its parent would say nothing the parent does
+     * 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.
+     */
+    newGroupChildren() {
+        var _a;
+        if ((_a = this.addOptions) === null || _a === void 0 ? void 0 : _a.length) {
+            return [];
+        }
+        return [this.adapter.createLeaf()];
+    }
+    /**
+     * Add a condition, or a group to put conditions in.
+     *
+     * Everything in this tree lives inside a group, so the first thing added
+     * to an empty one gets a root group to live in. After that the walker
+     * places it.
+     * @param path
+     * @param child
+     */
+    grow(path, child) {
+        if (this.isEmpty) {
+            this.emitChange(this.adapter.group(this.rootCombinator(), [child]));
+            return;
+        }
+        this.emitChange(this.walker.appendAt(this.value, path, child));
+    }
+    /**
+     * An empty tree has nothing to edit.
+     * @param edit
+     */
+    applyEdit(edit) {
+        if (this.isEmpty) {
+            return;
+        }
+        this.emitChange(edit(this.value));
+    }
+    /**
+     * Announce a tree the user has changed — unless it was not theirs to
+     * change. Every control is hidden or dimmed by then, so what this catches
+     * is an editor: the tree mounts whatever component a condition names, and
+     * has no way to make it honour the `readonly` it was handed.
+     * @param next
+     */
+    emitChange(next) {
+        if (this.readonly || this.disabled) {
+            return;
+        }
+        this.change.emit(next);
+    }
+    /**
+     * Whether there is no tree yet — which is not the same as a tree that
+     * happens to be an empty group.
+     */
+    get isEmpty() {
+        return this.value === undefined || this.value === null;
+    }
+    /**
+     * The combinator a group made here is joined by: the first one the consumer
+     * offers, so a tree that never offers "All of the following" never invents
+     * one.
+     */
+    rootCombinator() {
+        var _a;
+        return (_a = this.combinators[0]) !== null && _a !== void 0 ? _a : 'all';
+    }
+    static get is() { return "limebb-condition-tree"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["condition-tree.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["condition-tree.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": "Component context, forwarded to each condition's editor."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The consumer's own tree, rendered as-is \u2014 the root node, in whatever\nshape `adapter` reads. Leave it unset for a tree with nothing in it yet,\nwhich draws an empty group asking for its first condition."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "adapter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConditionTreeAdapter<any>",
+                    "resolved": "ConditionTreeAdapter<any>",
+                    "references": {
+                        "ConditionTreeAdapter": {
+                            "location": "import",
+                            "path": "./condition-tree.types",
+                            "id": "src/components/condition-tree/condition-tree.types.ts::ConditionTreeAdapter",
+                            "referenceLocation": "ConditionTreeAdapter"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How to read and rebuild `value`. Build it once and hold on to it: one\nbuilt inside a consumer's `render()` is a new object every time, which\nmakes this component re-render for no reason.\n\nA Stencil element cannot be generic, so this is typed loosely here.\nDeclare the adapter as `ConditionTreeAdapter<YourNode>` where you write\nit, and the compiler checks it against your own model."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "combinators": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConditionTreeCombinator[]",
+                    "resolved": "ConditionTreeCombinator[]",
+                    "references": {
+                        "ConditionTreeCombinator": {
+                            "location": "import",
+                            "path": "./condition-tree.types",
+                            "id": "src/components/condition-tree/condition-tree.types.ts::ConditionTreeCombinator",
+                            "referenceLocation": "ConditionTreeCombinator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which combinators to offer in the group dropdowns, in the order given.\n\nAll four are offered by default. \"Not all of the following\" and \"None of\nthe following\" are harder to reason about than the two they negate, so a\nconsumer whose users would be better served without them passes\n`['all', 'any']`. A group that already uses a combinator left off this\nlist still shows it, rather than misrepresenting itself as using one of\nthe offered ones."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n        ...CONDITION_TREE_COMBINATORS,\n    ]"
+            },
+            "addOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<MenuItem | ListSeparator>",
+                    "resolved": "(ListSeparator | MenuItem<any>)[] | undefined",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "MenuItem": {
+                            "location": "import",
+                            "path": "@limetech/lime-elements",
+                            "id": "node_modules::MenuItem",
+                            "referenceLocation": "MenuItem"
+                        },
+                        "ListSeparator": {
+                            "location": "import",
+                            "path": "@limetech/lime-elements",
+                            "id": "node_modules::ListSeparator",
+                            "referenceLocation": "ListSeparator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The kinds of condition a user can add, offered as a menu when the add\nbutton is pressed. The chosen item is passed to `adapter.createLeaf`.\n\nLeave it unset when every condition in the tree is of the same kind:\na blank one can simply be inserted, and its editor settles the rest, so\npressing the button is the whole interaction. Set it when conditions come\nin kinds that have nothing in common \u2014 \"the deal is worth more than\n100 000\", \"the user belongs to a group\", \"it is the first day of the\nmonth\" \u2014 where nothing can be inserted until the user says which.\n\nThe menu has to be rendered here rather than by the consumer, because\nthe button it hangs from lives inside this component."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` when the tree is not the viewer's to change: the add,\ndelete and negate controls are not rendered at all, leaving the\nconditions to be read. Use it where the tree is being shown rather than\nedited \u2014 a saved filter summarized on a card, or a rule the viewer has\nno rights over."
+                },
+                "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": [],
+                    "text": "Set to `true` when the tree *is* the viewer's to change, but not at this\nmoment: every control stays where it is, dimmed and inert. Use it for a\nstate that will pass \u2014 a form mid-save, or a tree behind an \"Apply a\nfilter\" switch that is currently off."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "openState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the whole tree, of the consumer's own kind, whenever the\nuser changes it. `null` means the last condition went and there is\nnothing left \u2014 an event carries no detail otherwise."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "adapter",
+                "methodName": "buildWalker"
+            }, {
+                "propName": "value",
+                "methodName": "syncOpenState"
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+export {};