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

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

@@ -0,0 +1,88 @@
+import { r as registerInstance, c as createEvent, h } from './index-COtSgrC5.js';
+import { k as kt } from './index.esm-B9D_MXA6.js';
+import { L as LimeWebComponentTemplate } from './web-component-template-DxbwHsvw.js';
+import { c as createTranslator } from './condition-tree-translate-CBeXbZ_z.js';
+
+const conditionTreeEditorCss = () => `:host{display:contents}limel-header.header{--header-background-color:rgba(var(--contrast-300));padding-right:0.5rem;gap:1rem}.header-actions{display:grid;grid-auto-flow:column;grid-gap:0.75rem;padding:0.25rem;align-items:center}`;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const ConditionTreeEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.negateChange = createEvent(this, "negateChange");
+        this.conditionChange = createEvent(this, "conditionChange");
+        /**
+         * Whether the popover holding this element is open.
+         *
+         * The element itself stays in place while closed, because `limel-popover`
+         * moves its content into the popover surface once and for all when that
+         * surface first loads — anything not there by then is never moved. Drawing
+         * nothing until asked is what keeps the consumer's editor from being built
+         * for every condition in the tree.
+         */
+        this.open = false;
+        /**
+         * @inheritdoc
+         */
+        this.readonly = false;
+        /**
+         * @inheritdoc
+         */
+        this.disabled = false;
+        this.handleNegate = (event) => {
+            event.stopPropagation();
+            this.negateChange.emit(event.detail);
+        };
+        this.handleConditionChange = (event) => {
+            event.stopPropagation();
+            this.conditionChange.emit(event.detail);
+        };
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        return [this.renderHeader(), this.renderBody()];
+    }
+    /**
+     * The header exists only to hold the negation switch, so a condition that
+     * owns its polarity gets no header at all — its editor is the whole
+     * popover, exactly as if this element weren't here.
+     */
+    renderHeader() {
+        if (this.negated === undefined || this.readonly) {
+            return null;
+        }
+        return (h("limel-header", { class: "header is-narrow", heading: this.heading }, h("div", { slot: "actions", class: "header-actions" }, h("limel-switch", { class: "negate", label: this.negateLabel, value: this.negated, disabled: this.disabled, onChange: this.handleNegate }))));
+    }
+    renderBody() {
+        if (!this.editor) {
+            return null;
+        }
+        return (h(LimeWebComponentTemplate, { class: "editor", platform: this.platform, context: this.context, name: this.editor.name, props: Object.assign(Object.assign({}, this.editor.props), {
+                // The condition itself, and the tree's own state, win over
+                // the descriptor: an editor that stayed open while the tree
+                // was locked must not be the one place the lock does not
+                // reach.
+                value: this.value, readonly: this.readonly, disabled: this.disabled, onConditionChange: this.handleConditionChange
+            }) }));
+    }
+    get negateLabel() {
+        return createTranslator(this.platform)('webclient.negate', 'Negate');
+    }
+};
+__decorate([
+    kt('context')
+], ConditionTreeEditor.prototype, "context", void 0);
+ConditionTreeEditor.style = conditionTreeEditorCss();
+
+export { ConditionTreeEditor as limebb_condition_tree_editor };