@limetech/lime-crm-building-blocks 1.130.0 → 1.131.0

package/dist/esm/limebb-lime-query-filter-builder.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-BIwHMk6j.js';
-import { n as nt } from './index.esm-CJU4N9K8.js';
+import { r as registerInstance, c as createEvent, h } from './index-DYpn0EkA.js';
+import { n as nt } from './index.esm-DAe4_MLR.js';
+import { i as isGroupShape } from './filter-group-logic-RXn-GGk1.js';
 
 const limeQueryFilterBuilderCss = () => `.expression-with-promotion{display:flex;flex-direction:column;gap:1rem}limel-button{width:100%}.query-options-section{margin-top:1rem}`;
 
@@ -54,12 +55,7 @@ const LimeQueryFilterBuilderComponent = class {
         if (!this.expression) {
             return false;
         }
-        // Basic comparison needs promotion
-        if ('key' in this.expression) {
-            return true;
-        }
-        // NOT needs promotion
-        return this.expression.op === nt.NOT;
+        return !isGroupShape(this.expression);
     }
     renderEmptyState() {
         return (h("limel-button", { label: "Condition", icon: {

package/dist/esm/{limebb-lime-query-filter-group_3.entry.js → limebb-lime-query-filter-comparison-editor_4.entry.js}

@@ -1,215 +1,185 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BIwHMk6j.js';
-import { n as nt, L as Le } from './index.esm-CJU4N9K8.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DYpn0EkA.js';
+import { b as n, n as nt, L as Le } from './index.esm-DAe4_MLR.js';
+import { L as LIME_QUERY_OPERATORS } from './lime-query-operators-DYlN1dAt.js';
+import { g as getCombinator, s as setCombinator, b as addExpressionToGroup, u as updateChildExpression, c as getInnerAndOr, d as createNestedGroup, e as createEmptyComparison } from './filter-group-logic-RXn-GGk1.js';
 import { g as getPropertyFromPath } from './property-resolution-CQUZjrU4.js';
 
-/**
- * Get the subheading text for a filter group based on its operator and expression count
- *
- * @param operator - The group's operator (AND or OR)
- * @param expressionCount - Number of child expressions
- * @returns Subheading text, or empty string if 0 or 1 expressions
- */
-function getFilterGroupSubheading(operator, expressionCount) {
-    if (expressionCount <= 1) {
-        return '';
+const limeQueryFilterComparisonEditorCss = () => `:host{display:grid;grid-template-columns:3fr 1fr;gap:0.5rem;padding:0.75rem;min-width:30rem;align-items:center}.value{grid-column:1/-1}`;
+
+const LimeQueryFilterComparisonEditorComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.expressionChange = createEvent(this, "expressionChange");
+        this.handlePropertyChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { key: event.detail }));
+        };
+        this.handleOperatorChange = (event) => {
+            event.stopPropagation();
+            const newOperator = event.detail.value;
+            const oldOperator = this.expression.op;
+            let convertedValue = this.expression.exp;
+            // IN expects an array; other operators expect a single value.
+            if (newOperator === nt.IN && !Array.isArray(convertedValue)) {
+                convertedValue =
+                    convertedValue !== undefined && convertedValue !== ''
+                        ? [convertedValue]
+                        : [];
+            }
+            else if (oldOperator === nt.IN &&
+                newOperator !== nt.IN &&
+                Array.isArray(convertedValue)) {
+                convertedValue = convertedValue.length > 0 ? convertedValue[0] : '';
+            }
+            this.expressionChange.emit({
+                key: this.expression.key,
+                op: newOperator,
+                exp: convertedValue,
+            });
+        };
+        this.handleValueChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { exp: event.detail }));
+        };
     }
-    return operator === nt.AND
-        ? 'All of these conditions are met'
-        : 'Any of these conditions are met';
-}
-/**
- * Create a new empty comparison expression
- *
- * @returns A new comparison expression with empty key and value
- */
-function createEmptyComparison() {
-    return {
-        key: '',
-        op: nt.EQUALS,
-        exp: '',
-    };
-}
-/**
- * Create a new nested group with the opposite operator from the parent
- *
- * @param parentOperator - The parent group's operator
- * @returns A new group with the opposite operator and one empty comparison
- */
-function createNestedGroup(parentOperator) {
-    const oppositeOp = parentOperator === nt.AND ? nt.OR : nt.AND;
-    return {
-        op: oppositeOp,
-        exp: [createEmptyComparison()],
-    };
-}
-/**
- * Add a new expression to a group immutably
- *
- * @param group - The existing group
- * @param newExpression - The expression to add
- * @returns A new group with the expression added to the end
- */
-function addExpressionToGroup(group, newExpression) {
-    return {
-        op: group.op,
-        exp: [...group.exp, newExpression],
-    };
-}
-/**
- * Toggle a group's operator between AND and OR
- *
- * @param group - The group to toggle
- * @returns A new group with the toggled operator
- */
-function toggleGroupOperator(group) {
-    const newOperator = group.op === nt.AND ? nt.OR : nt.AND;
-    return {
-        op: newOperator,
-        exp: [...group.exp],
-    };
-}
-/**
- * Update a child expression in a group, handling deletion and unwrapping
- *
- * This function handles three scenarios:
- * 1. Update: Replace a child expression with a new one
- * 2. Delete: Remove a child (when updatedChild is undefined)
- *    - If last child is deleted, return 'removed' (group should be deleted)
- *    - If deletion leaves one child, return 'unwrapped' (unwrap to that child)
- *    - Otherwise, return 'updated' with the remaining children
- *
- * @param group - The group containing the child
- * @param childIndex - Index of the child to update
- * @param updatedChild - The new child expression, or undefined to delete
- * @returns Result object with type and resulting expression
- */
-function updateChildExpression(group, childIndex, updatedChild) {
-    const expressions = [...group.exp];
-    if (!updatedChild) {
-        // Deletion - remove the child
-        expressions.splice(childIndex, 1);
-        if (expressions.length === 0) {
-            // No children left - remove the entire group
-            return {
-                type: 'removed',
-                expression: undefined,
-            };
-        }
-        if (expressions.length === 1) {
-            // One child left - unwrap to that child
-            return {
-                type: 'unwrapped',
-                expression: expressions[0],
-            };
+    componentDidLoad() {
+        var _a;
+        // limel-popover does not auto-focus its portaled content.
+        (_a = this.propertySelectorEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (h(Host, { key: '8b70eaef1906fd9eaa69c9e4d6c42937406d2fcc' }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput()));
+    }
+    renderPropertySelector() {
+        return (h("limebb-property-selector", { ref: (el) => (this.propertySelectorEl = el), class: "property", label: "Property", platform: this.platform, context: this.context, limetype: this.limetype, value: this.expression.key, required: true, onChange: this.handlePropertyChange }));
+    }
+    renderOperator() {
+        const operatorHasBeenSet = !!this.expression.op;
+        const options = LIME_QUERY_OPERATORS.map((op) => {
+            var _a, _b;
+            return ({
+                text: (_b = (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get(op.label)) !== null && _b !== void 0 ? _b : op.label,
+                value: op.value,
+                icon: op.icon ? { name: op.icon } : undefined,
+            });
+        });
+        const selectedOption = options.find((o) => o.value === this.expression.op);
+        return (h("limel-select", { class: "operator", label: "Operator", value: selectedOption, options: options, disabled: !operatorHasBeenSet && !this.expression.key, onChange: this.handleOperatorChange }));
+    }
+    renderValueInput() {
+        if (!this.expression.op) {
+            return null;
         }
-        // Multiple children remain - return updated group
-        return {
-            type: 'updated',
-            expression: {
-                op: group.op,
-                exp: expressions,
-            },
-        };
+        return (h("limebb-lime-query-value-input", { class: "value", label: "Value", platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, propertyPath: this.expression.key, operator: this.expression.op, value: this.expression.exp, onChange: this.handleValueChange }));
     }
-    // Update - replace the child
-    expressions[childIndex] = updatedChild;
-    return {
-        type: 'updated',
-        expression: {
-            op: group.op,
-            exp: expressions,
-        },
-    };
-}
+    get translator() {
+        var _a;
+        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(n.Translate);
+    }
+    static get delegatesFocus() { return true; }
+};
+LimeQueryFilterComparisonEditorComponent.style = limeQueryFilterComparisonEditorCss();
 
-const limeQueryFilterGroupCss = () => `@charset "UTF-8";*,*::before,*::after{box-sizing:border-box}limebb-lime-query-filter-expression{position:relative;isolation:isolate}limebb-lime-query-filter-expression:not(:first-of-type):after{content:"";position:absolute;top:-0.5rem;left:0.75rem;display:block;border-radius:1rem;height:2rem;width:0.125rem;background-color:var(--limebb-lime-query-builder-group-color)}limebb-lime-query-filter-expression:not(:first-of-type):before{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;height:1rem;content:var(--limebb-lime-query-filter-group-operator);display:inline-block;margin:0 auto 0.5rem auto;transform:translateY(-50%);font-size:0.625rem;padding:0 0.5rem;color:rgb(var(--color-blue-dark));background-color:var(--limebb-lime-query-builder-group-color);border-radius:2rem}.expression{display:flex;flex-direction:column;margin-bottom:1rem;gap:0;background-color:rgb(var(--contrast-100));border-radius:0.75rem;border:1px solid var(--limebb-lime-query-builder-group-color)}.expression ul{list-style:none;margin:0;padding:0.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.expression ul [role=listitem]{list-style:none;width:100%}limel-button.add-group{width:fit-content;margin:0.5rem}limel-icon-button.delete-group{margin-left:0.5rem}limel-select.operator-select{min-width:8rem}`;
+const limeQueryFilterGroupCss = () => `*,*:before,*::after{box-sizing:border-box}:host(limebb-lime-query-filter-group){--group-rail-color:var(--limebb-query-filter-group-color-code);display:flex;flex-direction:column;gap:1.5rem}:host([data-op=AND]){--combinator-symbol:"&"}:host([data-op=NOT_AND]){--combinator-symbol:"- &"}:host([data-op=OR]){--combinator-symbol:"or"}:host([data-op=NOT_OR]){--combinator-symbol:"- or"}.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(limel-icon-button.delete-group:hover),.group:has(limel-icon-button.delete-group:focus-within){box-shadow:var(--shadow-error-state)}.group-header{display:flex;align-items:center;gap:0.5rem}limel-select.combinator{min-width:9rem}limel-icon-button.delete-group{margin-left:auto;opacity:0;transition:opacity 120ms ease}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))}.group:hover>.group-header>limel-icon-button.delete-group,limel-icon-button.delete-group:focus-within{opacity:1}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:has(>limebb-lime-query-filter-expression>limebb-lime-query-filter-group){flex-basis:100%;align-self:stretch}li.row+li.row:before{content:var(--combinator-symbol);color:var(--limebb-query-filter-group-color-code);font-size:0.75rem;font-weight:600}li.row+li.row:has(>limebb-lime-query-filter-expression>limebb-lime-query-filter-group):before{position:absolute;left:0;top:0;transform:translate(-50%, -50%)}li.row+li.row:not(:has(>limebb-lime-query-filter-expression>limebb-lime-query-filter-group)):before{margin-right:0.5rem}`;
 
+const OP_STYLE = {
+    AND: {
+        color: 'rgb(var(--contrast-900))',
+        iconName: 'dot_circle',
+        text: 'All of',
+        secondaryText: 'True when every condition is true',
+    },
+    OR: {
+        color: 'rgb(var(--color-sky-default))',
+        iconName: 'centre_point',
+        text: 'Any of',
+        secondaryText: 'True when at least one condition is true',
+    },
+    NOT_AND: {
+        color: 'rgb(var(--color-orange-default))',
+        iconName: 'dot_circle',
+        text: 'Not all of',
+        secondaryText: 'True when at least one condition is false',
+    },
+    NOT_OR: {
+        color: 'rgb(var(--color-red-default))',
+        iconName: 'centre_point',
+        text: 'None of',
+        secondaryText: 'True when every condition is false',
+    },
+};
+const COMBINATOR_OPTIONS = ['AND', 'OR', 'NOT_AND', 'NOT_OR'].map((value) => ({
+    text: OP_STYLE[value].text,
+    secondaryText: OP_STYLE[value].secondaryText,
+    value,
+    icon: { name: OP_STYLE[value].iconName, color: OP_STYLE[value].color },
+}));
 const LimeQueryFilterGroupComponent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.expressionChange = createEvent(this, "expressionChange");
-        this.options = [
-            {
-                text: 'All',
-                secondaryText: 'AND operator',
-                value: 'and',
-            },
-            {
-                text: 'Any',
-                secondaryText: 'OR operator',
-                value: 'or',
-            },
-        ];
-        this.renderChildExpression = (expression, childIndex) => (h("limebb-lime-query-filter-expression", { role: "listitem", platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleExpressionChange(childIndex) }));
+        this.renderChildExpression = (expression, childIndex) => (h("li", { class: "row" }, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleChildExpressionChange(childIndex) })));
+        this.handleCombinatorChange = (event) => {
+            event.stopPropagation();
+            const next = event.detail.value;
+            if (!next || next === getCombinator(this.expression)) {
+                return;
+            }
+            this.expressionChange.emit(setCombinator(this.expression, next));
+        };
         this.handleDeleteGroup = () => {
             this.expressionChange.emit();
         };
-        this.handleToggleOperator = (event) => {
-            const selectedOption = Array.isArray(event.detail)
-                ? event.detail[0]
-                : event.detail;
-            this.value = selectedOption;
-            const newOp = selectedOption.value === 'and' ? nt.AND : nt.OR;
-            if (newOp !== this.expression.op) {
-                const newGroup = toggleGroupOperator(this.expression);
-                this.expressionChange.emit(newGroup);
-            }
-        };
         this.handleAddChildExpression = () => {
-            const newChild = createEmptyComparison();
-            const newGroup = addExpressionToGroup(this.expression, newChild);
-            this.expressionChange.emit(newGroup);
+            const inner = getInnerAndOr(this.expression);
+            const updatedInner = addExpressionToGroup(inner, createEmptyComparison());
+            this.expressionChange.emit(this.wrap(updatedInner));
         };
         this.handleAddChildGroup = () => {
-            const newChild = createNestedGroup(this.expression.op);
-            const newGroup = addExpressionToGroup(this.expression, newChild);
-            this.expressionChange.emit(newGroup);
+            const inner = getInnerAndOr(this.expression);
+            const newChild = createNestedGroup(inner.op);
+            const updatedInner = addExpressionToGroup(inner, newChild);
+            this.expressionChange.emit(this.wrap(updatedInner));
         };
-        this.handleExpressionChange = (updatedChildIndex) => (event) => {
+        this.handleChildExpressionChange = (childIndex) => (event) => {
             event.stopPropagation();
-            const updatedExpression = event.detail;
-            const result = updateChildExpression(this.expression, updatedChildIndex, updatedExpression);
+            const inner = getInnerAndOr(this.expression);
+            const result = updateChildExpression(inner, childIndex, event.detail);
+            if (result.type === 'removed') {
+                this.expressionChange.emit(undefined);
+                return;
+            }
+            if (this.isNegated) {
+                this.expressionChange.emit({
+                    op: nt.NOT,
+                    exp: result.expression,
+                });
+                return;
+            }
             this.expressionChange.emit(result.expression);
         };
     }
-    // Initialize value to match current operator
-    componentWillLoad() {
-        this.value =
-            this.options.find((option) => option.value ===
-                (this.expression.op === nt.AND ? 'and' : 'or')) || this.options[0];
-    }
     render() {
-        return (h(Host, { key: '4b1647c741b78253b4ce4ed1bd347800da394563', style: {
-                '--limebb-lime-query-filter-group-operator': `"${this.expression.op === nt.AND ? 'AND' : 'OR'}"`,
-            } }, h("div", { key: '47fd3000275e17ef70d86af5e6abcb492806ffba', class: "expression" }, this.renderHeader(), h("ul", { key: '224249a4b305eb2b20c1aedad98d2c3191d47e83' }, this.expression.exp.map(this.renderChildExpression), this.renderAddButton()), this.renderAddGroupButton())));
-    }
-    renderHeader() {
-        const subheading = this.getSubheading();
-        if (!subheading) {
-            return null;
-        }
-        return (h("limel-header", { subheading: subheading }, this.renderOperators(), this.renderDeleteGroupButton()));
-    }
-    renderOperators() {
-        return (h("limel-select", { class: "operator-select", slot: "actions", value: this.value, options: this.options, onChange: this.handleToggleOperator }));
-    }
-    renderDeleteGroupButton() {
-        return (h("limel-icon-button", { class: "delete-group", slot: "actions", icon: "trash", label: "Delete This Group", onClick: this.handleDeleteGroup }));
-    }
-    getSubheading() {
-        return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);
-    }
-    renderAddButton() {
-        return (h("limel-button", { role: "listitem", label: "Condition", icon: {
+        const combinator = getCombinator(this.expression);
+        const inner = getInnerAndOr(this.expression);
+        const selected = COMBINATOR_OPTIONS.find((o) => o.value === combinator);
+        return (h(Host, { key: 'c9ca20c6b893416088807266fede19e5a24e360d', "data-op": combinator, style: {
+                '--limebb-query-filter-group-color-code': OP_STYLE[combinator].color,
+            } }, h("div", { key: '8efe9e6e4d1ba552b8a761ec23b18668a1aef7f3', class: "group" }, h("div", { key: 'e99bb85a9532431a63ce0916dc4882a2f73d2307', class: "group-header" }, h("limel-select", { key: '981fd5c1d4755ef937451144245640228ed515a9', class: "combinator", label: "Match", value: selected, options: COMBINATOR_OPTIONS, onChange: this.handleCombinatorChange }), h("limel-icon-button", { key: 'caa427e897501a12a98a370c4d2364564904c042', class: "delete-group", icon: "trash", label: "Delete this group", onClick: this.handleDeleteGroup })), h("ul", { key: '8a21efdd1d783b11bb00f39c3579eec7277a505e', class: "rows" }, inner.exp.map(this.renderChildExpression), h("limel-chip", { key: 'b4612f1899060f2f553283cc7afac53777b0c1ef', role: "listitem", class: "add-condition", text: "Condition", icon: { name: 'plus_math', title: 'Add' }, onClick: this.handleAddChildExpression })), h("limel-chip", { key: '7046abfe1929fa13f4de3e90285610280467fd76', class: "add-group", size: "small", text: "Group", icon: {
                 name: 'plus_math',
                 title: 'Add',
-            }, onClick: this.handleAddChildExpression }));
+                color: 'var(--group-rail-color)',
+            }, onClick: this.handleAddChildGroup }))));
     }
-    renderAddGroupButton() {
-        return (h("limel-button", { class: "add-group", label: "Group", icon: {
-                name: 'plus_math',
-                title: 'Add',
-            }, onClick: this.handleAddChildGroup }));
+    get isNegated() {
+        return this.expression.op === nt.NOT;
+    }
+    wrap(inner) {
+        if (this.isNegated) {
+            const wrapped = { op: nt.NOT, exp: inner };
+            return wrapped;
+        }
+        return inner;
     }
 };
 LimeQueryFilterGroupComponent.style = limeQueryFilterGroupCss();
@@ -235,7 +205,7 @@ const LimeQueryFilterNotComponent = class {
         };
     }
     render() {
-        return (h("div", { key: '16246e10be820ad18713cb097146040d30e242bf', class: "expression" }, this.label && h("limel-header", { key: '539d60a4567727282463dec2a90e06a3630501aa', heading: this.label }), h("limebb-lime-query-filter-expression", { key: '67f892704ea3e5a061acdcb8f3ffe22271971569', platform: this.platform, context: this.context, label: "Not", limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression.exp, onExpressionChange: this.handleExpressionChange })));
+        return (h("div", { key: '30b9f2fbe27c8277633ef02fbebbafb227387ed8', class: "expression" }, this.label && h("limel-header", { key: '05b193ac0ec191b1f9394ed48691c24e534ba66c', heading: this.label }), h("limebb-lime-query-filter-expression", { key: '83b6a42631b886735502a8ec6454f5e9c868cc4c', platform: this.platform, context: this.context, label: "Not", limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression.exp, onExpressionChange: this.handleExpressionChange })));
     }
 };
 LimeQueryFilterNotComponent.style = limeQueryFilterNotCss();
@@ -590,4 +560,4 @@ __decorate([
 ], LimeQueryValueInput.prototype, "limetypes", void 0);
 LimeQueryValueInput.style = limeQueryValueInputCss();
 
-export { LimeQueryFilterGroupComponent as limebb_lime_query_filter_group, LimeQueryFilterNotComponent as limebb_lime_query_filter_not, LimeQueryValueInput as limebb_lime_query_value_input };
+export { LimeQueryFilterComparisonEditorComponent as limebb_lime_query_filter_comparison_editor, LimeQueryFilterGroupComponent as limebb_lime_query_filter_group, LimeQueryFilterNotComponent as limebb_lime_query_filter_not, LimeQueryValueInput as limebb_lime_query_value_input };