@limetech/lime-crm-building-blocks 1.125.0 → 1.126.0

package/dist/collection/components/rule-editor/chip-picker-view.js

@@ -0,0 +1,141 @@
+import { h } from "@stencil/core";
+import { pathsEqual } from "./rule-operations";
+import { createSearcher, resolveItem, } from "./view-helpers";
+const CHIP_TOKEN_PREFIX = '__chip__:';
+function chipTokenFor(index) {
+    return `${CHIP_TOKEN_PREFIX}${index}`;
+}
+// The address of a chip inside a group is the group's path followed
+// by a two-segment suffix `['rules', index]`. Build and parse via
+// these helpers so both sides stay in sync.
+const CHIP_PATH_SUFFIX_LENGTH = 2;
+function buildChipPath(groupPath, index) {
+    return [...groupPath, 'rules', index];
+}
+function parentGroupPath(chipPath) {
+    return chipPath.slice(0, -CHIP_PATH_SUFFIX_LENGTH);
+}
+/**
+ * If `node` is a `ref` or a `not(ref)`, return the underlying ref
+ * together with its negation flag. Used to decide whether a child of a
+ * group renders as a chip (this returns non-null) or as a nested box
+ * (this returns null).
+ * @param node
+ */
+export function extractRef(node) {
+    if (node.type === 'ref') {
+        return { ref: node, isNegated: false };
+    }
+    if (node.type === 'not' && node.rule.type === 'ref') {
+        return { ref: node.rule, isNegated: true };
+    }
+    return null;
+}
+export const GroupChipsView = ({ groupNode, groupPath, chipChildren, ctx }) => {
+    const chipsByToken = new Map();
+    const value = chipChildren.map((entry) => {
+        const token = chipTokenFor(entry.index);
+        chipsByToken.set(token, entry);
+        const base = resolveItem(ctx.primitiveOptions, entry.ref.id);
+        return Object.assign(Object.assign({}, base), { text: entry.isNegated ? `¬ ${base.text}` : base.text, value: token });
+    });
+    const searcher = createSearcher(ctx.primitiveOptions);
+    const openChip = findOpenChip(chipChildren, groupPath, ctx.openChipPath);
+    const delimiter = groupNode.type === 'all' ? '&' : '|';
+    return (h("limel-popover", { class: "rule-node__chips-popover", open: openChip !== null, openDirection: "bottom-start", onClose: ctx.onPopoverClose }, h("div", { slot: "trigger", class: "rule-node__chips" }, h("limel-picker", { multiple: true, label: ctx.translator.get('webclient.rule-editor.rules-label'), value: value, searcher: searcher, delimiter: delimiter, readonly: ctx.readonly, disabled: ctx.disabled, onChange: chipsChangeHandler(groupNode, groupPath, chipsByToken, ctx), onInteract: chipInteractHandler(groupPath, chipsByToken, ctx) })), h("div", null, renderChipPopoverContent(openChip, groupPath, ctx))));
+};
+function renderChipPopoverContent(openChip, groupPath, ctx) {
+    if (!openChip) {
+        return null;
+    }
+    const openChipPath = buildChipPath(groupPath, openChip.index);
+    return (h("limebb-rule-chip-popover", { platform: ctx.platform, context: ctx.context, refNode: openChip.ref, isNegated: openChip.isNegated, metadata: ctx.metadataById.get(openChip.ref.id), readonly: ctx.readonly, disabled: ctx.disabled, isMutable: ctx.isMutable, onNegate: chipNegateHandler(openChip, openChipPath, ctx), onUpdateArgs: chipArgsHandler(openChip, openChipPath, ctx), onDeleteChip: chipDeleteHandler(openChipPath, ctx) }));
+}
+const chipsChangeHandler = (groupNode, groupPath, chipsByToken, ctx) => (event) => {
+    event.stopPropagation();
+    const items = Array.isArray(event.detail) ? event.detail : [];
+    const openIndex = openChipIndexInGroup(groupPath, ctx.openChipPath);
+    if (openIndex !== null) {
+        const openToken = chipTokenFor(openIndex);
+        if (items.every((item) => item.value !== openToken)) {
+            ctx.onPopoverClose();
+        }
+    }
+    const newChipNodes = items.flatMap((item) => {
+        if (typeof item.value !== 'string') {
+            return [];
+        }
+        const existing = chipsByToken.get(item.value);
+        if (existing) {
+            return [
+                existing.isNegated
+                    ? { type: 'not', rule: existing.ref }
+                    : existing.ref,
+            ];
+        }
+        return [{ type: 'ref', id: item.value }];
+    });
+    const nestedGroupRules = groupNode.rules.filter((rule) => extractRef(rule) === null);
+    ctx.onReplaceNode(groupPath, Object.assign(Object.assign({}, groupNode), { rules: [...newChipNodes, ...nestedGroupRules] }));
+};
+const chipInteractHandler = (groupPath, chipsByToken, ctx) => (event) => {
+    event.stopPropagation();
+    const token = interactedToken(event.detail);
+    const chip = token ? chipsByToken.get(token) : undefined;
+    if (!chip) {
+        return;
+    }
+    ctx.onChipInteract([...groupPath, 'rules', chip.index]);
+};
+const chipNegateHandler = (openChip, openChipPath, ctx) => (event) => {
+    event.stopPropagation();
+    const next = event.detail
+        ? { type: 'not', rule: openChip.ref }
+        : openChip.ref;
+    ctx.onReplaceNode(openChipPath, next);
+};
+const chipArgsHandler = (openChip, openChipPath, ctx) => (event) => {
+    event.stopPropagation();
+    const argsPath = openChip.isNegated
+        ? [...openChipPath, 'rule']
+        : openChipPath;
+    ctx.onUpdateArgs(argsPath, event.detail);
+};
+const chipDeleteHandler = (openChipPath, ctx) => () => {
+    ctx.onDelete(openChipPath);
+};
+/**
+ * `limel-picker` declares its `interact` event as
+ * `EventEmitter<ListItem<PickerValue>>` but the runtime actually emits
+ * the chip's value (a string) — see picker.tsx's handleInteract. This
+ * unwraps either shape into the string token.
+ * @param detail
+ */
+function interactedToken(detail) {
+    if (typeof detail === 'string') {
+        return detail;
+    }
+    if (detail && typeof detail === 'object' && 'value' in detail) {
+        const value = detail.value;
+        return typeof value === 'string' ? value : undefined;
+    }
+    return undefined;
+}
+function findOpenChip(chipChildren, groupPath, openChipPath) {
+    var _a;
+    const index = openChipIndexInGroup(groupPath, openChipPath);
+    if (index === null) {
+        return null;
+    }
+    return (_a = chipChildren.find((entry) => entry.index === index)) !== null && _a !== void 0 ? _a : null;
+}
+function openChipIndexInGroup(groupPath, openChipPath) {
+    if (!openChipPath || openChipPath.length < CHIP_PATH_SUFFIX_LENGTH) {
+        return null;
+    }
+    if (!pathsEqual(parentGroupPath(openChipPath), groupPath)) {
+        return null;
+    }
+    const lastKey = openChipPath.at(-1);
+    return typeof lastKey === 'number' ? lastKey : null;
+}

package/dist/collection/components/rule-editor/group-node-view.js

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+import { appendChild, issuesAt, wrapNegated, } from "./rule-operations";
+import { IssuesView, RuleNodeView, } from "./rule-editor-views";
+import { nodeClasses } from "./view-helpers";
+import { extractRef, GroupChipsView } from "./chip-picker-view";
+export const GroupNodeView = ({ node, path, isNegated, ctx }) => {
+    const groupBasePath = isNegated ? [...path, 'rule'] : path;
+    const issuesHere = isNegated
+        ? [
+            ...issuesAt(ctx.issues, path),
+            ...issuesAt(ctx.issues, groupBasePath),
+        ]
+        : issuesAt(ctx.issues, path);
+    const chipChildren = [];
+    const nestedGroups = [];
+    for (const [index, child] of node.rules.entries()) {
+        const extracted = extractRef(child);
+        if (extracted) {
+            chipChildren.push(Object.assign(Object.assign({}, extracted), { index }));
+        }
+        else {
+            nestedGroups.push({ child, index });
+        }
+    }
+    const options = combinatorOptions(ctx);
+    const selectedCombinator = options.find((option) => option.value === node.type);
+    return (h("div", { class: nodeClasses(node.type, issuesHere), key: pathKey(path) }, h("div", { class: "rule-node__header" }, h("limel-select", { class: "rule-node__combinator-select", value: selectedCombinator, options: options, disabled: !ctx.isMutable, onChange: combinatorChangeHandler(node, path, isNegated, ctx) }), renderMutableGroupActions(node, path, isNegated, ctx)), h("div", { class: "rule-node__body" }, h(IssuesView, { issues: issuesHere }), h(GroupChipsView, { groupNode: node, groupPath: groupBasePath, chipChildren: chipChildren, ctx: ctx }), renderNestedGroups(nestedGroups, groupBasePath, ctx), renderAddGroupFooter(node, path, isNegated, ctx))));
+};
+function pathKey(path) {
+    return path.length === 0 ? 'root' : path.join('/');
+}
+function combinatorOptions(ctx) {
+    return [
+        {
+            value: 'all',
+            text: ctx.translator.get('webclient.rule-editor.combinator.all'),
+        },
+        {
+            value: 'any',
+            text: ctx.translator.get('webclient.rule-editor.combinator.any'),
+        },
+    ];
+}
+function renderMutableGroupActions(node, path, isNegated, ctx) {
+    if (!ctx.isMutable) {
+        return null;
+    }
+    return (h("div", { class: "rule-node__header-actions" }, h("limel-switch", { class: "rule-node__negate-switch", label: ctx.translator.get('webclient.rule-editor.negate'), value: isNegated, onChange: negateGroupHandler(node, path, ctx) }), h("limel-icon-button", { icon: "trash", label: ctx.translator.get('webclient.rule-editor.delete'), onClick: () => ctx.onDelete(path) })));
+}
+function renderNestedGroups(nestedGroups, groupBasePath, ctx) {
+    if (nestedGroups.length === 0) {
+        return null;
+    }
+    return (h("div", { class: "rule-node__children" }, nestedGroups.map((entry) => (h(RuleNodeView, { node: entry.child, path: [...groupBasePath, 'rules', entry.index], ctx: ctx })))));
+}
+function renderAddGroupFooter(node, path, isNegated, ctx) {
+    if (!ctx.isMutable) {
+        return null;
+    }
+    return (h("div", { class: "rule-node__footer" }, h("limel-button", { icon: "add", label: ctx.translator.get('webclient.rule-editor.add-nested-group'), onClick: addGroupHandler(node, path, isNegated, ctx) })));
+}
+function replaceGroup(nextGroup, path, isNegated, ctx) {
+    ctx.onReplaceNode(path, wrapNegated(nextGroup, isNegated));
+}
+const combinatorChangeHandler = (node, path, isNegated, ctx) => (event) => {
+    event.stopPropagation();
+    const newType = event.detail.value;
+    if (newType !== node.type) {
+        replaceGroup(Object.assign(Object.assign({}, node), { type: newType }), path, isNegated, ctx);
+    }
+};
+const addGroupHandler = (node, path, isNegated, ctx) => () => {
+    const expanded = appendChild(node, { type: 'all', rules: [] });
+    replaceGroup(expanded, path, isNegated, ctx);
+};
+const negateGroupHandler = (node, path, ctx) => (event) => {
+    event.stopPropagation();
+    ctx.onReplaceNode(path, wrapNegated(node, event.detail));
+};

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

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+}
+
+.popover {
+  display: flex;
+  flex-direction: column;
+  min-width: 24rem;
+  background-color: rgb(var(--contrast-100));
+  border: 1px solid rgb(var(--contrast-700));
+  border-radius: 0.5rem;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+.popover__header {
+  --header-background-color: rgba(var(--contrast-300));
+  padding-right: 0.5rem;
+  gap: 1rem;
+}
+
+.popover__header-actions {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 0.75rem;
+  padding: 0.25rem;
+  align-items: center;
+}
+
+.popover__delete-button {
+  color: rgb(var(--contrast-1100));
+}
+
+.popover__body {
+  padding: 1rem;
+}

package/dist/collection/components/rule-editor/rule-chip-popover/rule-chip-popover.js

@@ -0,0 +1,301 @@
+import { PlatformServiceName, } from "@limetech/lime-web-components";
+import { h } from "@stencil/core";
+import { LimeWebComponentTemplate } from "../../../util/web-component-template";
+/**
+ * Popover content for a rule-editor chip. Carries its own styles so
+ * they travel with the element when `limel-popover` portals it out of
+ * the rule-editor's shadow DOM.
+ *
+ * @private
+ */
+export class RuleChipPopover {
+    constructor() {
+        this.isNegated = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.isMutable = true;
+        this.handleNegateChange = (event) => {
+            event.stopPropagation();
+            this.negate.emit(event.detail);
+        };
+        this.handleArgsChange = (event) => {
+            event.stopPropagation();
+            this.updateArgs.emit(event.detail);
+        };
+        this.handleDelete = () => {
+            this.deleteChip.emit();
+        };
+    }
+    render() {
+        return (h("div", { key: '6aae573b524737ee3d2a4b2d3df68ec9bf1f1a0f', class: "popover" }, this.renderHeader(), this.renderBody()));
+    }
+    renderHeader() {
+        var _a, _b, _c, _d, _e;
+        const title = (_d = (_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : (_c = this.refNode) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : '';
+        return (h("limel-header", { class: "popover__header is-narrow", heading: title, icon: (_e = this.metadata) === null || _e === void 0 ? void 0 : _e.icon }, this.renderHeaderActions()));
+    }
+    renderHeaderActions() {
+        if (!this.isMutable) {
+            return null;
+        }
+        return (h("div", { slot: "actions", class: "popover__header-actions" }, h("limel-switch", { class: "popover__negate-switch", label: this.translator.get('webclient.rule-editor.negate'), value: this.isNegated, onChange: this.handleNegateChange }), h("limel-icon-button", { class: "popover__delete-button", icon: "trash", label: this.translator.get('webclient.rule-editor.delete'), onClick: this.handleDelete })));
+    }
+    get translator() {
+        return this.platform.get(PlatformServiceName.Translate);
+    }
+    renderBody() {
+        var _a, _b;
+        const configComponent = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.configComponent;
+        if (!configComponent) {
+            return null;
+        }
+        return (h("div", { class: "popover__body" }, h(LimeWebComponentTemplate, { platform: this.platform, context: this.context, name: configComponent.name, props: Object.assign(Object.assign({}, configComponent.props), { value: (_b = this.refNode) === null || _b === void 0 ? void 0 : _b.args, readonly: this.readonly, disabled: this.disabled, onChange: this.handleArgsChange }) })));
+    }
+    static get is() { return "limebb-rule-chip-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rule-chip-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rule-chip-popover.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": ""
+                },
+                "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": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "refNode": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RuleRef",
+                    "resolved": "RuleRef",
+                    "references": {
+                        "RuleRef": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::RuleRef",
+                            "referenceLocation": "RuleRef"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isNegated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-negated",
+                "defaultValue": "false"
+            },
+            "metadata": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PrimitiveMetadata",
+                    "resolved": "ConfigMetadata & { id: string; reads: (keyof SubjectRegistry)[]; } | undefined",
+                    "references": {
+                        "PrimitiveMetadata": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::PrimitiveMetadata",
+                            "referenceLocation": "PrimitiveMetadata"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "isMutable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-mutable",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "negate",
+                "name": "negate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "updateArgs",
+                "name": "updateArgs",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "JsonValue",
+                    "resolved": "JsonValue[] | boolean | null | number | string | { [key: string]: JsonValue; }",
+                    "references": {
+                        "JsonValue": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::JsonValue",
+                            "referenceLocation": "JsonValue"
+                        }
+                    }
+                }
+            }, {
+                "method": "deleteChip",
+                "name": "deleteChip",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/rule-editor/rule-editor-views.js

@@ -0,0 +1,43 @@
+import { h } from "@stencil/core";
+import { GroupNodeView } from "./group-node-view";
+/**
+ * Render a `Rule` node and recurse into its children.
+ * @param props
+ */
+export const RuleNodeView = (props) => {
+    const { node, path, ctx } = props;
+    const group = extractGroup(node);
+    if (!group) {
+        return null;
+    }
+    return (h(GroupNodeView, { node: group.node, path: path, isNegated: group.isNegated, ctx: ctx }));
+};
+const isNegatedGroup = (node) => node.type === 'not' &&
+    (node.rule.type === 'all' || node.rule.type === 'any');
+/**
+ * If `node` is a group (`all`/`any`) or a negated group, return the
+ * inner group together with its negation flag. Otherwise `null`.
+ * Used by the dispatcher and by the editor's input normalization.
+ * @param node
+ */
+export function extractGroup(node) {
+    if (node.type === 'all' || node.type === 'any') {
+        return { node, isNegated: false };
+    }
+    if (isNegatedGroup(node)) {
+        return { node: node.rule, isNegated: true };
+    }
+    if (node.type === 'not') {
+        const inner = extractGroup(node.rule);
+        if (inner) {
+            return { node: inner.node, isNegated: !inner.isNegated };
+        }
+    }
+    return null;
+}
+export const IssuesView = ({ issues }) => {
+    if (issues.length === 0) {
+        return null;
+    }
+    return issues.map((issue) => (h("div", { class: "rule-node__issue" }, issue.message)));
+};