@limetech/lime-crm-building-blocks 2.3.0 → 2.4.0

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

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  padding: 1rem;
+  min-width: 24rem;
+}

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

@@ -0,0 +1,259 @@
+import { h } from "@stencil/core";
+import { LimeWebComponentTemplate } from "../../../util/web-component-template";
+import { refOf } from "../condition-tree-adapter";
+/**
+ * The editor `limebb-condition-tree` opens for one rule condition: whatever
+ * component the primitive named as its `configComponent`.
+ *
+ * The two sides speak about different things. The tree passes a whole condition
+ * and listens for `conditionChange`; a config component edits the reference's
+ * `args` and reports a plain `change`. Config components are registered by
+ * add-ons this repo does not own, so this side is the one that translates.
+ *
+ * @alpha
+ * @private
+ */
+export class RuleConditionEditor {
+    constructor() {
+        /**
+         * Forwarded so that component can take focus as it appears. Set only for a
+         * condition the author has just added.
+         */
+        this.focusOnOpen = false;
+        /**
+         * @inheritdoc
+         */
+        this.readonly = false;
+        /**
+         * @inheritdoc
+         */
+        this.disabled = false;
+        /**
+         * The config component's `change` bubbles and is composed, so it would
+         * otherwise reach the rule editor and be taken for the whole rule changing.
+         * It stops here and leaves as the event the tree listens for.
+         * @param event
+         */
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            const reference = this.reference;
+            if (!reference) {
+                return;
+            }
+            const next = Object.assign(Object.assign({}, reference.ref), { args: event.detail });
+            this.conditionChange.emit(reference.negated ? { type: 'not', rule: next } : next);
+        };
+    }
+    render() {
+        if (!this.configComponent || !this.reference) {
+            return null;
+        }
+        return (h(LimeWebComponentTemplate, { class: "editor", platform: this.platform, context: this.context, name: this.configComponent.name, props: Object.assign(Object.assign({}, this.configComponent.props), { value: this.reference.ref.args, readonly: this.readonly, disabled: this.disabled, focusOnOpen: this.focusOnOpen, onChange: this.handleChange }) }));
+    }
+    get reference() {
+        return this.value ? refOf(this.value) : undefined;
+    }
+    static get is() { return "limebb-rule-condition-editor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rule-condition-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rule-condition-editor.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"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Rule",
+                    "resolved": "RuleAll | RuleAny | RuleNot | RuleRef",
+                    "references": {
+                        "Rule": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::Rule",
+                            "referenceLocation": "Rule"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The condition being edited: a reference to a primitive, or the `not`\naround one."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "configComponent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentDescriptor",
+                    "resolved": "ComponentDescriptor<unknown>",
+                    "references": {
+                        "ComponentDescriptor": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::ComponentDescriptor",
+                            "referenceLocation": "ComponentDescriptor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The component the primitive declared for editing its args."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "focusOnOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forwarded so that component can take focus as it appears. Set only for a\ncondition the author has just added."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focus-on-open",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "inheritdoc",
+                            "text": undefined
+                        }],
+                    "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": [{
+                            "name": "inheritdoc",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "conditionChange",
+                "name": "conditionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the whole condition, args and negation together, whenever\nthe config component reports new args."
+                },
+                "complexType": {
+                    "original": "Rule",
+                    "resolved": "RuleAll | RuleAny | RuleNot | RuleRef",
+                    "references": {
+                        "Rule": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::Rule",
+                            "referenceLocation": "Rule"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -135,82 +135,10 @@ limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline
   pointer-events: none;
 }
 
-.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;
+limebb-condition-tree {
   --popover-surface-width: min(calc(100vw - 4rem), 50rem);
 }
 
-.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;
-}
-
 :host(limebb-rule-editor:focus),
 :host(limebb-rule-editor:focus-visible),
 :host(limebb-rule-editor:focus-within) {