@limetech/lime-crm-building-blocks 1.103.0 → 1.103.1

package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-group.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { Operator, } from "@limetech/lime-web-components";
-import { addExpressionToGroup, createEmptyComparison, createNestedGroup, getAddConditionButtonLabel, getAddGroupButtonLabel, getFilterGroupSubheading, toggleGroupOperator, updateChildExpression, } from "./filter-group-logic";
+import { addExpressionToGroup, createEmptyComparison, createNestedGroup, getFilterGroupSubheading, toggleGroupOperator, updateChildExpression, } from "./filter-group-logic";
 /**
  * Lime Query Filter Group Component
  *
@@ -21,13 +21,29 @@ import { addExpressionToGroup, createEmptyComparison, createNestedGroup, getAddC
  */
 export class LimeQueryFilterGroupComponent {
     constructor() {
-        this.renderActionButton = (action) => {
-            return (h("limel-icon-button", { class: "action-icon", elevated: true, icon: action.icon, label: action.label, onClick: this.handleToggleOperator }));
-        };
+        this.options = [
+            {
+                text: 'All',
+                secondaryText: 'AND operator',
+                value: 'and',
+            },
+            {
+                text: 'Any',
+                secondaryText: 'OR operator',
+                value: 'or',
+            },
+        ];
         this.renderChildExpression = (expression, childIndex) => (h("li", null, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleExpressionChange(childIndex) })));
-        this.handleToggleOperator = () => {
-            const newGroup = toggleGroupOperator(this.expression);
-            this.expressionChange.emit(newGroup);
+        this.handleToggleOperator = (event) => {
+            const selectedOption = Array.isArray(event.detail)
+                ? event.detail[0]
+                : event.detail;
+            this.value = selectedOption;
+            const newOp = selectedOption.value === 'and' ? Operator.AND : Operator.OR;
+            if (newOp !== this.expression.op) {
+                const newGroup = toggleGroupOperator(this.expression);
+                this.expressionChange.emit(newGroup);
+            }
         };
         this.handleAddChildExpression = () => {
             const newChild = createEmptyComparison();
@@ -46,47 +62,33 @@ export class LimeQueryFilterGroupComponent {
             this.expressionChange.emit(result.expression);
         };
     }
+    // Initialize value to match current operator
+    componentWillLoad() {
+        this.value =
+            this.options.find((option) => option.value ===
+                (this.expression.op === Operator.AND ? 'and' : 'or')) || this.options[0];
+    }
     render() {
         const subheading = this.getSubheading();
-        return (h("div", { key: 'b7972fb9e34b8b0b57ae82b3bf4de3e55b66169f', class: "expression" }, subheading && (h("limel-header", { key: '9721388fa6a60018f95dbe27b2959dcc1c11211e', icon: {
-                name: this.expression.op === Operator.AND
-                    ? 'dot_bricks'
-                    : 'dot_circle',
-                color: 'rgb(var(--contrast-800))',
-            }, subheading: subheading, onClick: this.handleToggleOperator, class: "clickable-header" }, this.renderActions())), h("ul", { key: 'f3ae21204e082e81068c0e20b76e14ed4b577051' }, this.expression.exp.map(this.renderChildExpression), h("li", { key: 'd5958d8b61f348540b3dfb821de16ed0f2d0a1f4', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
+        return (h("div", { key: '741f2870c545d8e879a53244e0334d5c0cf0a4bd', class: "expression" }, subheading && (h("limel-header", { key: 'c08e664d2aaa539a47d3f5b4bbb4daa350c15131', subheading: subheading }, this.renderOperators())), h("ul", { key: '2bddf3cc8b4167845838844512aa6ab5688c46c5' }, this.expression.exp.map(this.renderChildExpression), h("li", { key: 'da86547dcf15b4c53a1991340f19d8bd54f4dee4', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
     }
-    get actions() {
-        return [
-            {
-                id: '1',
-                icon: this.expression.op === Operator.AND
-                    ? 'dot_circle'
-                    : 'dot_bricks',
-                label: this.expression.op === Operator.AND
-                    ? 'Any condition (OR)'
-                    : 'All conditions (AND)',
-            },
-        ];
-    }
-    renderActions() {
-        return (h("div", { class: "actions" }, this.actions.map(this.renderActionButton)));
+    renderOperators() {
+        return (h("limel-select", { slot: "actions", value: this.value, options: this.options, onChange: this.handleToggleOperator }));
     }
     getSubheading() {
         return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);
     }
     renderAddButton() {
-        const label = this.getAddButtonLabel();
-        return (h("limel-button", { label: label, icon: "plus_math", onClick: this.handleAddChildExpression }));
+        return (h("limel-button", { label: "Condition", icon: {
+                name: 'plus_math',
+                title: 'Add',
+            }, onClick: this.handleAddChildExpression }));
     }
     renderAddGroupButton() {
-        const label = this.getAddGroupButtonLabel();
-        return (h("limel-button", { label: label, icon: "tree_structure", onClick: this.handleAddChildGroup }));
-    }
-    getAddButtonLabel() {
-        return getAddConditionButtonLabel(this.expression.op, this.expression.exp.length);
-    }
-    getAddGroupButtonLabel() {
-        return getAddGroupButtonLabel(this.expression.op, this.expression.exp.length);
+        return (h("limel-button", { label: "Group", icon: {
+                name: 'tree_structure',
+                title: 'Add',
+            }, onClick: this.handleAddChildGroup }));
     }
     static get is() { return "limebb-lime-query-filter-group"; }
     static get encapsulation() { return "shadow"; }
@@ -211,6 +213,11 @@ export class LimeQueryFilterGroupComponent {
             }
         };
     }
+    static get states() {
+        return {
+            "value": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "expressionChange",

package/dist/collection/components/lime-query-builder/lime-query-builder.css

@@ -1,33 +1,36 @@
-:host(limebb-lime-lime-query-builder) {
-  display: block;
-  width: 100%;
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
 }
 
-.lime-query-builder {
+:host(limebb-lime-query-builder) {
+  --header-background-color: rgb(var(--contrast-400));
+  --limebb-lime-query-builder-background-color: rgb(var(--contrast-100));
+  --limebb-lime-query-builder-border-radius: 0.75rem;
+  box-sizing: border-box;
+  width: calc(100% - 1.5rem);
+  margin: 0.75rem auto;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
+  border-radius: var(--limebb-lime-query-builder-border-radius);
+  background-color: var(--limebb-lime-query-builder-background-color);
+  box-shadow: var(--shadow-inflated-16);
 }
 
-.mode-controls {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0.5rem;
+.gui-mode {
+  padding: 1rem;
+  border: 1px solid var(--header-background-color);
+  border-radius: 0 0 0.754rem 0.75rem;
 }
 
-.gui-mode,
 .code-mode {
-  display: block;
-}
-
-.code-editor-container {
   --code-editor-max-height: 70vh;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.code-editor-container .validation-errors {
+.code-mode .validation-errors {
   padding: 0.75rem 1rem;
   color: rgb(var(--color-red-default));
   background-color: rgb(var(--color-red-lighter));
@@ -35,19 +38,19 @@
   border-radius: 0.25rem;
   font-size: 0.875rem;
 }
-.code-editor-container .validation-errors strong {
+.code-mode .validation-errors strong {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 600;
 }
-.code-editor-container .validation-errors ul {
+.code-mode .validation-errors ul {
   margin: 0;
   padding-left: 1.5rem;
 }
-.code-editor-container .validation-errors li {
+.code-mode .validation-errors li {
   margin: 0.25rem 0;
 }
-.code-editor-container .gui-limitations {
+.code-mode .gui-limitations {
   padding: 0.75rem 1rem;
   color: rgb(var(--color-blue-dark));
   background-color: rgb(var(--color-blue-lighter));
@@ -55,26 +58,19 @@
   border-radius: 0.25rem;
   font-size: 0.875rem;
 }
-.code-editor-container .gui-limitations strong {
+.code-mode .gui-limitations strong {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 600;
 }
-.code-editor-container .gui-limitations ul {
+.code-mode .gui-limitations ul {
   margin: 0;
   padding-left: 1.5rem;
 }
-.code-editor-container .gui-limitations li {
+.code-mode .gui-limitations li {
   margin: 0.25rem 0;
 }
 
-.lime-query-builder-label {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: rgb(var(--contrast-1100));
-}
-
 .limetype-section {
   display: flex;
   flex-direction: column;
@@ -99,10 +95,4 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-}
-
-@media (max-width: 768px) {
-  .lime-query-builder {
-    gap: 1.5rem;
-  }
 }

package/dist/collection/components/lime-query-builder/lime-query-builder.js

@@ -8,7 +8,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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;
 };
-import { h } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { SelectLimeTypes as Limetypes, } from "@limetech/lime-web-components";
 import { isLimeQuerySupported, } from "./lime-query-validation";
 /**
@@ -158,11 +158,14 @@ export class LimeQueryBuilder {
         }
     }
     render() {
+        return (h(Host, { key: '02e7367fbc718a8625c8d49d5e546acca0986ce2' }, this.renderHeader(), this.renderContent()));
+    }
+    renderContent() {
         const guiSupported = this.checkGuiSupport();
         const showCodeMode = !this.guiModeEnabled || this.mode === 'code';
-        return (h("div", { key: '5e9c8bb860cf348b08272831bc2e252752fad24d', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
+        return showCodeMode
             ? this.renderCodeMode(guiSupported)
-            : this.renderGuiMode()));
+            : this.renderGuiMode();
     }
     emitChange() {
         // Only emit in GUI mode
@@ -256,14 +259,19 @@ export class LimeQueryBuilder {
     renderModeSwitch(support) {
         const guiDisabled = !support.guiSupported;
         const buttons = this.getButtons().map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
-        return (h("limel-button-group", { onChange: this.handleChange, value: buttons, disabled: guiDisabled }));
+        return (h("limel-button-group", { slot: "actions", onChange: this.handleChange, value: buttons, disabled: guiDisabled }));
     }
     renderCodeEditor(guiSupported) {
-        return (h("div", { class: "code-editor-container" }, h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }), !guiSupported.valid &&
-            guiSupported.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Lime Query:"), h("ul", null, guiSupported.validationErrors.map((error) => (h("li", null, error)))))), this.guiModeEnabled &&
-            guiSupported.valid &&
-            !guiSupported.guiSupported &&
-            guiSupported.guiLimitations.length > 0 && (h("div", { class: "gui-limitations" }, h("strong", null, "Cannot switch to GUI mode:"), h("ul", null, guiSupported.guiLimitations.map((limitation) => (h("li", null, limitation))))))));
+        return [
+            h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }),
+            /* Show validation errors (invalid Lime Query) */
+            !guiSupported.valid && guiSupported.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Lime Query:"), h("ul", null, guiSupported.validationErrors.map((error) => (h("li", null, error)))))),
+            /* Show GUI limitations (only when GUI mode is enabled and Lime Query is valid) */
+            this.guiModeEnabled &&
+                guiSupported.valid &&
+                !guiSupported.guiSupported &&
+                guiSupported.guiLimitations.length > 0 && (h("div", { class: "gui-limitations" }, h("strong", null, "Cannot switch to GUI mode:"), h("ul", null, guiSupported.guiLimitations.map((limitation) => (h("li", null, limitation)))))),
+        ];
     }
     renderLimetypeSection() {
         return (h("div", { class: "limetype-section" }, h("limebb-limetype-field", { platform: this.platform, context: this.context, label: "Object Type", value: this.limetype, required: true, fieldName: "limetype", helperText: "Select the type of object you want to query", onChange: this.handleLimetypeChange })));
@@ -290,17 +298,15 @@ export class LimeQueryBuilder {
     renderGuiMode() {
         return (h("div", { class: "gui-mode" }, this.renderLimetypeSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
     }
-    renderLabel() {
-        if (!this.label) {
-            return;
-        }
-        return h("h3", { class: "lime-query-builder-label" }, this.label);
+    renderHeader() {
+        const guiSupported = this.checkGuiSupport();
+        return (h("limel-header", { heading: this.label }, this.renderModeControls(guiSupported)));
     }
     renderModeControls(support) {
         if (!this.guiModeEnabled) {
             return;
         }
-        return (h("div", { class: "mode-controls" }, this.renderModeSwitch(support)));
+        return this.renderModeSwitch(support);
     }
     renderCodeMode(support) {
         return h("div", { class: "code-mode" }, this.renderCodeEditor(support));

package/dist/collection/components/lime-query-builder/response-format/response-format-editor.css

@@ -6,19 +6,17 @@
 .response-format-editor {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
   padding: 1rem 0;
 }
 
-.header {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: rgb(var(--contrast-1000));
+limel-badge[slot=actions] {
+  --badge-background-color: rgb(var(--contrast-200));
+  margin-right: 0.25rem;
 }
 
 .property {
-  border: 1px solid rgb(var(--contrast-500));
+  border: 1px solid var(--header-background-color);
+  border-radius: 0 0 0.75rem 0.75rem;
 }
 
 .property-list {
@@ -46,17 +44,6 @@
   width: 100%;
 }
 
-.summary {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.summary .count {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: rgb(var(--contrast-900));
-}
-
 .empty-state {
   padding: 2rem;
   text-align: center;

package/dist/collection/components/lime-query-builder/response-format/response-format-editor.js

@@ -24,7 +24,7 @@ export class ResponseFormatEditor {
         /**
          * Optional label
          */
-        this.label = 'Select Properties to Return';
+        this.label = 'Properties';
         this.items = [{ path: '_id' }];
         this.handleItemChange = (index) => (event) => {
             event.stopPropagation();
@@ -81,7 +81,16 @@ export class ResponseFormatEditor {
         if (!this.limetype) {
             return (h("div", { class: "empty-state" }, h("p", null, "Select a limetype to choose properties")));
         }
-        return (h("div", { class: "response-format-editor" }, h("h4", { class: "header" }, this.label), h("div", { class: "summary" }, h("span", { class: "count" }, "(", this.items.length, ' ', this.items.length === 1 ? 'property' : 'properties', ' ', "selected)")), h("div", { class: "property" }, h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index))), h("div", { class: "actions" }, h("limel-button", { label: "Add Property", icon: "plus_math", onClick: this.handleAddProperty })))));
+        return (h("div", { class: "response-format-editor" }, h("limel-header", { subheading: this.label }, this.renderPropertyCount()), h("div", { class: "property" }, h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index))), h("div", { class: "actions" }, h("limel-button", { label: "Property", icon: {
+                name: 'plus_math',
+                title: 'Add',
+            }, onClick: this.handleAddProperty })))));
+    }
+    renderPropertyCount() {
+        return [
+            h("limel-badge", { slot: "actions", id: "counter-badge", label: this.items.length.toString() }),
+            h("limel-tooltip", { elementId: "counter-badge", slot: "actions", label: "Number of selected properties" }),
+        ];
     }
     renderItem(item, index) {
         return (h("limebb-lime-query-response-format-item", { key: `${item.path}-${index}`, class: "property-item", platform: this.platform, context: this.context, limetype: this.limetype, item: item, onItemChange: this.handleItemChange(index) }));
@@ -213,7 +222,7 @@ export class ResponseFormatEditor {
                 "setter": false,
                 "attribute": "label",
                 "reflect": false,
-                "defaultValue": "'Select Properties to Return'"
+                "defaultValue": "'Properties'"
             }
         };
     }

package/dist/components/lime-query-filter-builder.js

@@ -69,7 +69,10 @@ const LimeQueryFilterBuilderComponent = /*@__PURE__*/ proxyCustomElement(class L
         return this.expression.op === Zt.NOT;
     }
     renderEmptyState() {
-        return (h("limel-button", { label: "Add a condition", icon: "plus_math", onClick: this.handleAddFirstCondition }));
+        return (h("limel-button", { label: "Condition", icon: {
+                name: 'plus_math',
+                title: 'Add',
+            }, onClick: this.handleAddFirstCondition }));
     }
     renderWithPromotionButton() {
         return (h("div", { class: "expression-with-promotion" }, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression, onExpressionChange: this.handleExpressionChange }), h("limel-button", { label: "Add another condition", icon: "plus_math", onClick: this.handlePromoteAndAdd })));

package/dist/components/lime-query-filter-expression.js

@@ -16,38 +16,8 @@ function getFilterGroupSubheading(operator, expressionCount) {
         return '';
     }
     return operator === Zt.AND
-        ? 'All of these conditions are true'
-        : 'Any of these conditions are true';
-}
-/**
- * Get the label for the "Add condition" button
- *
- * @param operator - The group's operator (AND or OR)
- * @param expressionCount - Number of child expressions
- * @returns Appropriate button label based on context
- */
-function getAddConditionButtonLabel(operator, expressionCount) {
-    if (expressionCount === 0) {
-        return 'Add a condition';
-    }
-    return operator === Zt.AND
-        ? 'Add another condition'
-        : 'Add alternative';
-}
-/**
- * Get the label for the "Add group" button
- *
- * @param operator - The group's operator (AND or OR)
- * @param expressionCount - Number of child expressions
- * @returns Appropriate button label based on context
- */
-function getAddGroupButtonLabel(operator, expressionCount) {
-    if (expressionCount === 0) {
-        return 'Add a group';
-    }
-    return operator === Zt.AND
-        ? 'Add another group'
-        : 'Add alternative group';
+        ? 'All of these conditions are met'
+        : 'Any of these conditions are met';
 }
 /**
  * Create a new empty comparison expression
@@ -223,7 +193,7 @@ function defineCustomElement$2() {
     } });
 }
 
-const limeQueryFilterGroupCss = "@charset \"UTF-8\";.expression{display:flex;flex-direction:column;margin-bottom:1rem;gap:0;background-color:rgb(var(--contrast-100));border:1px solid rgb(var(--contrast-500));border-radius:0.75rem}.expression .clickable-header{cursor:pointer;user-select:none}.expression .clickable-header:hover{background-color:rgb(var(--contrast-200))}.expression>ul{list-style:none;margin-top:0;margin-right:1rem;margin-bottom:1rem;padding-left:1rem;list-style:disc}.expression>ul li{list-style:none;margin-top:1rem}.expression>ul li.add-button{list-style:none;display:flex;gap:0.5rem}";
+const limeQueryFilterGroupCss = "@charset \"UTF-8\";.expression{display:flex;flex-direction:column;margin-bottom:1rem;gap:0;background-color:rgb(var(--contrast-100));border:1px solid rgb(var(--contrast-500));border-radius:0.75rem}.expression>ul{list-style:none;margin-top:0;margin-right:1rem;margin-bottom:1rem;padding-left:1rem;list-style:disc}.expression>ul li{list-style:none;margin-top:1rem}.expression>ul li.add-button{list-style:none;display:flex;gap:0.5rem}";
 const LimebbLimeQueryFilterGroupStyle0 = limeQueryFilterGroupCss;
 
 const LimeQueryFilterGroupComponent = /*@__PURE__*/ proxyCustomElement(class LimeQueryFilterGroupComponent extends HTMLElement {
@@ -232,13 +202,29 @@ const LimeQueryFilterGroupComponent = /*@__PURE__*/ proxyCustomElement(class Lim
         this.__registerHost();
         this.__attachShadow();
         this.expressionChange = createEvent(this, "expressionChange", 7);
-        this.renderActionButton = (action) => {
-            return (h("limel-icon-button", { class: "action-icon", elevated: true, icon: action.icon, label: action.label, onClick: this.handleToggleOperator }));
-        };
+        this.options = [
+            {
+                text: 'All',
+                secondaryText: 'AND operator',
+                value: 'and',
+            },
+            {
+                text: 'Any',
+                secondaryText: 'OR operator',
+                value: 'or',
+            },
+        ];
         this.renderChildExpression = (expression, childIndex) => (h("li", null, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleExpressionChange(childIndex) })));
-        this.handleToggleOperator = () => {
-            const newGroup = toggleGroupOperator(this.expression);
-            this.expressionChange.emit(newGroup);
+        this.handleToggleOperator = (event) => {
+            const selectedOption = Array.isArray(event.detail)
+                ? event.detail[0]
+                : event.detail;
+            this.value = selectedOption;
+            const newOp = selectedOption.value === 'and' ? Zt.AND : Zt.OR;
+            if (newOp !== this.expression.op) {
+                const newGroup = toggleGroupOperator(this.expression);
+                this.expressionChange.emit(newGroup);
+            }
         };
         this.handleAddChildExpression = () => {
             const newChild = createEmptyComparison();
@@ -257,47 +243,33 @@ const LimeQueryFilterGroupComponent = /*@__PURE__*/ proxyCustomElement(class Lim
             this.expressionChange.emit(result.expression);
         };
     }
+    // Initialize value to match current operator
+    componentWillLoad() {
+        this.value =
+            this.options.find((option) => option.value ===
+                (this.expression.op === Zt.AND ? 'and' : 'or')) || this.options[0];
+    }
     render() {
         const subheading = this.getSubheading();
-        return (h("div", { key: 'b7972fb9e34b8b0b57ae82b3bf4de3e55b66169f', class: "expression" }, subheading && (h("limel-header", { key: '9721388fa6a60018f95dbe27b2959dcc1c11211e', icon: {
-                name: this.expression.op === Zt.AND
-                    ? 'dot_bricks'
-                    : 'dot_circle',
-                color: 'rgb(var(--contrast-800))',
-            }, subheading: subheading, onClick: this.handleToggleOperator, class: "clickable-header" }, this.renderActions())), h("ul", { key: 'f3ae21204e082e81068c0e20b76e14ed4b577051' }, this.expression.exp.map(this.renderChildExpression), h("li", { key: 'd5958d8b61f348540b3dfb821de16ed0f2d0a1f4', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
-    }
-    get actions() {
-        return [
-            {
-                id: '1',
-                icon: this.expression.op === Zt.AND
-                    ? 'dot_circle'
-                    : 'dot_bricks',
-                label: this.expression.op === Zt.AND
-                    ? 'Any condition (OR)'
-                    : 'All conditions (AND)',
-            },
-        ];
+        return (h("div", { key: '741f2870c545d8e879a53244e0334d5c0cf0a4bd', class: "expression" }, subheading && (h("limel-header", { key: 'c08e664d2aaa539a47d3f5b4bbb4daa350c15131', subheading: subheading }, this.renderOperators())), h("ul", { key: '2bddf3cc8b4167845838844512aa6ab5688c46c5' }, this.expression.exp.map(this.renderChildExpression), h("li", { key: 'da86547dcf15b4c53a1991340f19d8bd54f4dee4', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
     }
-    renderActions() {
-        return (h("div", { class: "actions" }, this.actions.map(this.renderActionButton)));
+    renderOperators() {
+        return (h("limel-select", { slot: "actions", value: this.value, options: this.options, onChange: this.handleToggleOperator }));
     }
     getSubheading() {
         return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);
     }
     renderAddButton() {
-        const label = this.getAddButtonLabel();
-        return (h("limel-button", { label: label, icon: "plus_math", onClick: this.handleAddChildExpression }));
+        return (h("limel-button", { label: "Condition", icon: {
+                name: 'plus_math',
+                title: 'Add',
+            }, onClick: this.handleAddChildExpression }));
     }
     renderAddGroupButton() {
-        const label = this.getAddGroupButtonLabel();
-        return (h("limel-button", { label: label, icon: "tree_structure", onClick: this.handleAddChildGroup }));
-    }
-    getAddButtonLabel() {
-        return getAddConditionButtonLabel(this.expression.op, this.expression.exp.length);
-    }
-    getAddGroupButtonLabel() {
-        return getAddGroupButtonLabel(this.expression.op, this.expression.exp.length);
+        return (h("limel-button", { label: "Group", icon: {
+                name: 'tree_structure',
+                title: 'Add',
+            }, onClick: this.handleAddChildGroup }));
     }
     static get style() { return LimebbLimeQueryFilterGroupStyle0; }
 }, [1, "limebb-lime-query-filter-group", {
@@ -305,7 +277,8 @@ const LimeQueryFilterGroupComponent = /*@__PURE__*/ proxyCustomElement(class Lim
         "context": [16],
         "limetype": [1],
         "activeLimetype": [1, "active-limetype"],
-        "expression": [16]
+        "expression": [16],
+        "value": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {