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

package/dist/esm/limebb-condition-tree.entry.js

@@ -0,0 +1,880 @@
+import { h, r as registerInstance, c as createEvent, H as Host } from './index-COtSgrC5.js';
+import { c as createTranslator } from './condition-tree-translate-CBeXbZ_z.js';
+import './index.esm-B9D_MXA6.js';
+
+/**
+ * Every combinator a group can use, in the order they are offered.
+ *
+ * @public
+ */
+const CONDITION_TREE_COMBINATORS = [
+    'all',
+    'any',
+    'not-all',
+    'none',
+];
+/**
+ * The combinator to give a group nested inside one joined by `combinator`.
+ *
+ * The opposite join is the useful default: a group joined the same way as the
+ * one holding it says nothing the outer group does not already say. The
+ * negation is dropped with it, since a nested group has nothing to negate yet.
+ * @param combinator
+ */
+function oppositeCombinator(combinator) {
+    return OPPOSITE[combinator];
+}
+const OPPOSITE = {
+    all: 'any',
+    any: 'all',
+    'not-all': 'any',
+    none: 'all',
+};
+/**
+ * How each combinator looks and reads. The labels are fallbacks used when the
+ * platform has no translation for the key next to them.
+ */
+const COMBINATOR_PRESENTATION = {
+    all: {
+        color: 'rgb(var(--contrast-900))',
+        iconName: 'dot_circle',
+        labelKey: 'webclient.combinator.all',
+        label: 'All of the following',
+        descriptionKey: 'webclient.combinator.all.description',
+        description: 'Every condition must be met.',
+        negated: false,
+        delimiterKey: 'webclient.delimiter.and',
+        delimiter: '&',
+    },
+    any: {
+        color: 'rgb(var(--color-sky-default))',
+        iconName: 'centre_point',
+        labelKey: 'webclient.combinator.any',
+        label: 'Any of the following',
+        descriptionKey: 'webclient.combinator.any.description',
+        description: 'At least one condition must be met.',
+        negated: false,
+        delimiterKey: 'webclient.delimiter.or',
+        delimiter: 'or',
+    },
+    'not-all': {
+        color: 'rgb(var(--color-orange-default))',
+        iconName: 'dot_circle',
+        labelKey: 'webclient.combinator.not-all',
+        label: 'Not all of the following',
+        descriptionKey: 'webclient.combinator.not-all.description',
+        description: 'At least one condition must not be met.',
+        negated: true,
+        delimiterKey: 'webclient.delimiter.and',
+        delimiter: '&',
+    },
+    none: {
+        color: 'rgb(var(--color-red-default))',
+        iconName: 'centre_point',
+        labelKey: 'webclient.combinator.none',
+        label: 'None of the following',
+        descriptionKey: 'webclient.combinator.none.description',
+        description: 'No conditions may be met.',
+        negated: true,
+        delimiterKey: 'webclient.delimiter.or',
+        delimiter: 'or',
+    },
+};
+
+/**
+ * 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
+ */
+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.
+ */
+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),
+    ];
+}
+
+/**
+ * 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.
+ */
+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 });
+    }
+}
+
+/**
+ * Problems reported on a node, listed beneath it.
+ * @param props
+ */
+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
+ */
+const handleDelete = (path, ctx) => (event) => {
+    event.stopPropagation();
+    ctx.onDelete(path);
+};
+
+/**
+ * One condition: a chip that summarizes it, and the editor it opens.
+ * @param props
+ */
+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(IssuesView, { issues: description.issues }),
+    ];
+};
+/**
+ * The chip that summarizes a condition: `limebb-filter-chip` unless the
+ * condition named another component, and either way the control the tree
+ * drives — it selects, locks and removes it the same way.
+ *
+ * The built-in chip is written out as itself rather than reached through the
+ * same tag name as the rest, so that the build sees it: a tag that only ever
+ * appears as a string is not counted as a dependency, and the chip would then
+ * never be defined for a consumer importing one component at a time.
+ * @param props
+ */
+const ChipView = (props) => {
+    const { component } = props.description.chip;
+    if (!component) {
+        return h("limebb-filter-chip", Object.assign({}, drivenProps(props)));
+    }
+    const Chip = component.name;
+    return h(Chip, Object.assign({}, component.props, drivenProps(props)));
+};
+/**
+ * What the tree tells a chip, whichever chip it is. Spread after the
+ * descriptor's own props, so that a chip cannot opt out of the tree's state.
+ * @param props
+ */
+function drivenProps(props) {
+    const { node, description, path, ctx } = props;
+    const { chip } = description;
+    return {
+        slot: 'trigger',
+        platform: ctx.platform,
+        label: chip.label,
+        value: chip.value,
+        icon: chip.icon,
+        invalid: chip.invalid,
+        selected: ctx.openNode === node,
+        readonly: ctx.readonly,
+        disabled: ctx.disabled,
+        removable: !ctx.readonly,
+        onClick: handleOpen(node, description, ctx),
+        onRemove: handleDelete(path, ctx),
+    };
+}
+const handleOpen = (node, description, ctx) => () => {
+    if (description.editor && !ctx.disabled) {
+        ctx.onOpen(node);
+    }
+};
+const handleClose = (ctx) => (event) => {
+    event.stopPropagation();
+    ctx.onOpen(null);
+};
+const handleNegate = (path, ctx) => (event) => {
+    event.stopPropagation();
+    ctx.onNegate(path, event.detail);
+};
+const handleConditionChange = (path, ctx) => (event) => {
+    event.stopPropagation();
+    ctx.onConditionChange(path, event.detail);
+};
+
+/**
+ * Render one of the consumer's nodes, whichever kind the adapter says it is.
+ *
+ * It lives beside `GroupView` because a group is what holds nodes of either
+ * kind: the recursion is the group's, and keeping the choice here is what lets
+ * a group draw a group without two modules importing each other.
+ * @param props
+ */
+const NodeView = (props) => {
+    const { description } = props;
+    if (description.kind === 'group') {
+        return (h(GroupView, { description: description, path: props.path, ctx: props.ctx }));
+    }
+    return (h(LeafView, { node: props.node, description: description, path: props.path, ctx: props.ctx }));
+};
+/**
+ * A box holding a combinator, the conditions joined by it, and the two buttons
+ * that grow it.
+ * @param props
+ */
+const GroupView = (props) => {
+    const { description, path, ctx, placeholder } = props;
+    const presentation = COMBINATOR_PRESENTATION[description.combinator];
+    const delimiter = ctx.translate(presentation.delimiterKey, presentation.delimiter);
+    // The marker between two rows reads as the join itself: "&", "or", and
+    // for the negated combinators the same joins prefixed with "not".
+    const marker = presentation.negated
+        ? `${ctx.translate('webclient.delimiter.not', 'not')} ${delimiter}`
+        : delimiter;
+    return (h("div", { class: "group", key: pathKey(path), "data-combinator": description.combinator, style: { '--group-rail-color': presentation.color } }, h("div", { class: "group-header" }, renderCombinator(description, path, ctx), renderDeleteGroup(path, ctx, placeholder)), h(IssuesView, { issues: description.issues }), h("ul", { class: "rows" }, description.children.map((child, index) => {
+        const childDescription = ctx.walker.describe(child);
+        return (h("li", { class: {
+                row: true,
+                'row--group': childDescription.kind === 'group',
+            }, "data-marker": marker, key: pathKey([...path, index]) }, h(NodeView, { node: child, description: childDescription, path: [...path, index], ctx: ctx })));
+    }), renderAddCondition(path, marker, ctx)), renderAddGroup(path, ctx)));
+};
+/**
+ * The "+" that turns a noun into an action.
+ *
+ * The chips and buttons that grow the tree read as "+ Condition" and
+ * "+ Group": a sighted reader takes the glyph as the verb, so the label only
+ * has to carry the noun. A screen reader cannot — an icon without a `title`
+ * is hidden from it entirely, leaving nothing but a bare "Condition". The
+ * title supplies the missing verb, and lime-elements composes the two into
+ * "Add Condition" for assistive technology and for the tooltip alike.
+ *
+ * This is why the translated strings behind these are nouns, and must stay
+ * nouns: the verb lives here.
+ * @param ctx
+ * @param color
+ */
+function addIcon(ctx, color) {
+    return {
+        name: 'plus_math',
+        title: ctx.translate('webclient.add', 'Add'),
+        color: color,
+    };
+}
+/**
+ * The combinators to list, which is what the consumer offers — plus the one the
+ * group already uses, when that is not among them. A group saved before the
+ * consumer narrowed the list has to keep saying what it does, rather than
+ * misrepresenting itself as using one of the offered ones.
+ * @param ctx
+ * @param current
+ */
+function combinatorOptions(ctx, current) {
+    const combinators = [...ctx.combinators];
+    if (current && !combinators.includes(current)) {
+        combinators.push(current);
+    }
+    return combinators.map((combinator) => {
+        const presentation = COMBINATOR_PRESENTATION[combinator];
+        return {
+            value: combinator,
+            text: ctx.translate(presentation.labelKey, presentation.label),
+            secondaryText: ctx.translate(presentation.descriptionKey, presentation.description),
+            icon: {
+                name: presentation.iconName,
+                color: presentation.color,
+            },
+        };
+    });
+}
+/**
+ * The dropdown that says how a group joins what is inside it.
+ *
+ * A group holding fewer than two things has nothing to join yet, so choosing
+ * between "All of the following" and "Any of the following" would change
+ * nothing, and the dropdown is left out until there is a second thing for it to
+ * act on. A negating combinator is the exception: "None of the following" says
+ * something about a lone condition that "All of the following" does not, so
+ * leaving it out would leave out the negation with it.
+ * @param description
+ * @param path
+ * @param ctx
+ */
+function renderCombinator(description, path, ctx) {
+    const joins = description.children.length > 1;
+    if (!joins && !COMBINATOR_PRESENTATION[description.combinator].negated) {
+        return null;
+    }
+    const options = combinatorOptions(ctx, description.combinator);
+    // No label: every option is a full sentence about the group ("All of the
+    // following"), so a label above it could only name the same thing twice.
+    // The accessible name comes from the selected option for the same reason.
+    return (h("limel-select", { class: "combinator", value: options.find((option) => option.value === description.combinator), options: options, disabled: ctx.disabled, readonly: ctx.readonly, onChange: handleCombinator(path, ctx) }));
+}
+function renderDeleteGroup(path, ctx, placeholder) {
+    if (ctx.readonly) {
+        return null;
+    }
+    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) }));
+    // 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)));
+}
+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 handleCombinator = (path, ctx) => (event) => {
+    var _a;
+    event.stopPropagation();
+    const combinator = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.value;
+    if (combinator) {
+        ctx.onCombinator(path, combinator);
+    }
+};
+const handleAddLeaf = (path, ctx) => () => ctx.onAddLeaf(path);
+const handleAddLeafPick = (path, ctx) => (event) => {
+    event.stopPropagation();
+    ctx.onAddLeaf(path, event.detail);
+};
+const handleAddGroup = (path, ctx) => () => ctx.onAddGroup(path);
+
+const conditionTreeCss = () => `*,*: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%}`;
+
+/**
+ * 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: [],
+};
+const ConditionTree = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change");
+        /**
+         * 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 watchers() { return {
+        "adapter": [{
+                "buildWalker": 0
+            }],
+        "value": [{
+                "syncOpenState": 0
+            }]
+    }; }
+};
+ConditionTree.style = conditionTreeCss();
+
+export { ConditionTree as limebb_condition_tree };