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

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

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

@@ -0,0 +1,96 @@
+:host {
+  display: block;
+}
+
+.rule-editor--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.rule-editor__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgb(var(--contrast-1500));
+  margin-bottom: 0.25rem;
+}
+
+.rule-editor__helper-text {
+  font-size: 0.75rem;
+  color: rgb(var(--contrast-1300));
+  margin-top: 0.25rem;
+}
+
+.rule-node {
+  border: 1px solid rgb(var(--contrast-500));
+  border-radius: 0.5rem;
+  margin: 0.25rem 0;
+  overflow: hidden;
+  background-color: rgb(var(--contrast-100));
+}
+
+.rule-node--invalid {
+  border-color: rgb(var(--color-red-default));
+}
+
+.rule-node--all > .rule-node__header,
+.rule-node--any > .rule-node__header {
+  background-color: rgb(var(--contrast-300));
+  padding: 0.375rem 0.75rem;
+  border-bottom: 1px solid rgb(var(--contrast-500));
+}
+
+.rule-node__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.rule-node__header-actions {
+  margin-left: auto;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 0.5rem;
+  padding: 0.125rem;
+  align-items: center;
+}
+
+.rule-node__combinator-select {
+  min-width: 6rem;
+}
+
+.rule-node__body {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+limel-popover.rule-node__chips-popover {
+  display: contents;
+}
+
+.rule-node__chips {
+  display: block;
+  width: 100%;
+}
+
+.rule-node__chips limel-picker {
+  display: block;
+  width: 100%;
+}
+
+.rule-node__children {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.rule-node__footer {
+  display: flex;
+  justify-content: center;
+}
+
+.rule-node__issue {
+  color: rgb(var(--color-red-default));
+  font-size: 0.875rem;
+}