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

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { Z as Zt } from './index.esm.js';
+import { c, Z as Zt } from './index.esm.js';
 import { d as defineCustomElement$2 } from './lime-query-value-input.js';
 import { d as defineCustomElement$1 } from './property-selector.js';
 
@@ -7,49 +7,61 @@ const limeQueryFilterComparisonCss = ".expression-container{display:flex;flex-di
 const LimebbLimeQueryFilterComparisonStyle0 = limeQueryFilterComparisonCss;
 
 const LIME_QUERY_OPERATORS = [
-    { value: Zt.EQUALS, label: 'Equals', icon: 'equals' },
-    { value: Zt.NOT_EQUALS, label: 'Not Equals', icon: 'not-equal' },
+    {
+        value: Zt.EQUALS,
+        label: 'webclient.operator.equals',
+        icon: '-lime-filter-equal',
+    },
+    {
+        value: Zt.NOT_EQUALS,
+        label: 'webclient.operator.not-equals',
+        icon: '-lime-filter-equal-not',
+    },
     {
         value: Zt.GREATER,
-        label: 'Greater Than',
-        icon: 'greater-than',
+        label: 'webclient.operator.greater-than',
+        icon: '-lime-filter-greater',
         applicableTypes: ['integer', 'decimal', 'date', 'time'],
     },
     {
         value: Zt.GREATER_OR_EQUAL,
-        label: 'Greater or Equal',
-        icon: 'greater-or-equal',
+        label: 'webclient.operator.greater-than-or-equal-to',
+        icon: '-lime-filter-greater-equal',
         applicableTypes: ['integer', 'decimal', 'date', 'time'],
     },
     {
         value: Zt.LESS,
-        label: 'Less Than',
-        icon: 'less-than',
+        label: 'webclient.operator.less-than',
+        icon: '-lime-filter-less',
         applicableTypes: ['integer', 'decimal', 'date', 'time'],
     },
     {
         value: Zt.LESS_OR_EQUAL,
-        label: 'Less or Equal',
-        icon: 'less-or-equal',
+        label: 'webclient.operator.less-than-or-equal-to',
+        icon: '-lime-filter-less-equal',
         applicableTypes: ['integer', 'decimal', 'date', 'time'],
     },
-    { value: Zt.IN, label: 'In List', icon: 'list' },
+    {
+        value: Zt.IN,
+        label: 'webclient.operator.in-filter',
+        icon: '-lime-filter-set-included',
+    },
     {
         value: Zt.LIKE,
-        label: 'Contains',
+        label: 'webclient.operator.contains',
         icon: '-lime-filter-contain',
         applicableTypes: ['string', 'text'],
     },
     {
         value: Zt.BEGINS,
-        label: 'Begins With',
-        icon: '-lime-filter-begin',
+        label: 'webclient.operator.begins-with',
+        icon: '-lime-filter-starts-with',
         applicableTypes: ['string', 'text'],
     },
     {
         value: Zt.ENDS,
-        label: 'Ends With',
-        icon: '-lime-filter-end',
+        label: 'webclient.operator.ends-with',
+        icon: '-lime-filter-ends-with',
         applicableTypes: ['string', 'text'],
     },
 ];
@@ -82,18 +94,21 @@ const LimeQueryFilterComparisonComponent = /*@__PURE__*/ proxyCustomElement(clas
         };
     }
     render() {
-        return (h("div", { key: '41fc60ed4ce76de8bbed05ee8cc658a188347cbd', class: "expression" }, this.label && h("limel-header", { key: '95cb9b556e2e0f2c8f3fd8ebe3909c402a844fe3', heading: this.label }), h("div", { key: 'feac7dcf059a0a20ad499d1549fa45d775d6bec8', class: "expression-container" }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput(), h("limel-icon-button", { key: '0fee01518c1c4a29c347a47ce1ce7856b32dfa8f', class: "remove", icon: "trash", label: "Remove condition", onClick: this.removeExpression }))));
+        return (h("div", { key: 'cc82394cb254423d27e3f3fd946155f59d4df995', class: "expression" }, this.label && h("limel-header", { key: '11b988d6f57b7f6c0f1df70b5ef28f6c328c2326', heading: this.label }), h("div", { key: '2ead8a31fd0af9e049096b3eb489eed809435f1a', class: "expression-container" }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput(), h("limel-icon-button", { key: '3f14064d07045c45321b59c2e41bc4f788dee0f8', class: "remove", icon: "trash", label: "Remove condition", onClick: this.removeExpression }))));
     }
     renderPropertySelector() {
         return (h("limebb-property-selector", { platform: this.platform, context: this.context, label: "Property", 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) => ({
-            text: op.label,
-            value: op.value,
-            icon: op.icon ? { name: op.icon } : undefined,
-        }));
+        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 }));
     }
@@ -103,6 +118,10 @@ const LimeQueryFilterComparisonComponent = /*@__PURE__*/ proxyCustomElement(clas
         }
         return (h("limebb-lime-query-value-input", { 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 }));
     }
+    get translator() {
+        var _a;
+        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(c.Translate);
+    }
     static get style() { return LimebbLimeQueryFilterComparisonStyle0; }
 }, [1, "limebb-lime-query-filter-comparison", {
         "platform": [16],

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") {

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { T as Te } from './index.esm.js';
 import { i as isLimeQuerySupported } from './lime-query-validation.js';
 import { d as defineCustomElement$d } from './lime-query-filter-builder.js';
@@ -12,7 +12,7 @@ import { d as defineCustomElement$4 } from './lime-query-value-input.js';
 import { d as defineCustomElement$3 } from './limetype-field.js';
 import { d as defineCustomElement$2 } from './property-selector.js';
 
-const limeQueryBuilderCss = ":host(limebb-lime-lime-query-builder){display:block;width:100%}.lime-query-builder{display:flex;flex-direction:column;gap:1rem;padding:1rem}.mode-controls{display:flex;justify-content:flex-end;padding:0.5rem}.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{padding:0.75rem 1rem;color:rgb(var(--color-red-default));background-color:rgb(var(--color-red-lighter));border-left:0.25rem solid rgb(var(--color-red-default));border-radius:0.25rem;font-size:0.875rem}.code-editor-container .validation-errors strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-editor-container .validation-errors ul{margin:0;padding-left:1.5rem}.code-editor-container .validation-errors li{margin:0.25rem 0}.code-editor-container .gui-limitations{padding:0.75rem 1rem;color:rgb(var(--color-blue-dark));background-color:rgb(var(--color-blue-lighter));border-left:0.25rem solid rgb(var(--color-blue-default));border-radius:0.25rem;font-size:0.875rem}.code-editor-container .gui-limitations strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-editor-container .gui-limitations ul{margin:0;padding-left:1.5rem}.code-editor-container .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}.filter-section,.query-options-section{display:flex;flex-direction:column;gap:1rem;padding-top:1rem}.section-label{margin:0;font-size:1.125rem;font-weight:600;color:rgb(var(--contrast-1000))}.query-options-controls{display:flex;flex-direction:column;gap:1rem}@media (max-width: 768px){.lime-query-builder{gap:1.5rem}}";
+const limeQueryBuilderCss = "*,*:before,*:after{box-sizing:border-box}: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;border-radius:var(--limebb-lime-query-builder-border-radius);background-color:var(--limebb-lime-query-builder-background-color);box-shadow:var(--shadow-inflated-16)}.gui-mode{padding:1rem;border:1px solid var(--header-background-color);border-radius:0 0 0.754rem 0.75rem}.code-mode{--code-editor-max-height:70vh;display:flex;flex-direction:column;gap:1rem}.code-mode .validation-errors{padding:0.75rem 1rem;color:rgb(var(--color-red-default));background-color:rgb(var(--color-red-lighter));border-left:0.25rem solid rgb(var(--color-red-default));border-radius:0.25rem;font-size:0.875rem}.code-mode .validation-errors strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-mode .validation-errors ul{margin:0;padding-left:1.5rem}.code-mode .validation-errors li{margin:0.25rem 0}.code-mode .gui-limitations{padding:0.75rem 1rem;color:rgb(var(--color-blue-dark));background-color:rgb(var(--color-blue-lighter));border-left:0.25rem solid rgb(var(--color-blue-default));border-radius:0.25rem;font-size:0.875rem}.code-mode .gui-limitations strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-mode .gui-limitations ul{margin:0;padding-left:1.5rem}.code-mode .gui-limitations li{margin:0.25rem 0}.limetype-section{display:flex;flex-direction:column}.filter-section,.query-options-section{display:flex;flex-direction:column;gap:1rem;padding-top:1rem}.section-label{margin:0;font-size:1.125rem;font-weight:600;color:rgb(var(--contrast-1000))}.query-options-controls{display:flex;flex-direction:column;gap:1rem}";
 const LimebbLimeQueryBuilderStyle0 = limeQueryBuilderCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -147,11 +147,14 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(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
@@ -245,14 +248,19 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(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 })));
@@ -279,17 +287,15 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(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/components/response-format-editor.js

@@ -161,7 +161,7 @@ function itemsToPropertySelection(items) {
     return result;
 }
 
-const responseFormatEditorCss = ":host(limebb-lime-query-response-format-editor){display:block;width:100%}.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))}.property{border:1px solid rgb(var(--contrast-500))}.property-list{display:flex;flex-direction:column;border-radius:0.25rem;background-color:rgb(var(--contrast-100));gap:0.5rem;padding:0.5rem}.property-item{border-radius:0.25rem;transition:background-color 0.2s}.property-item:hover{background-color:rgb(var(--contrast-100))}.actions{display:flex}.actions limel-button{padding:0.5rem;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;color:rgb(var(--contrast-700));font-style:italic}.empty-state p{margin:0}";
+const responseFormatEditorCss = ":host(limebb-lime-query-response-format-editor){display:block;width:100%}.response-format-editor{display:flex;flex-direction:column;padding:1rem 0}limel-badge[slot=actions]{--badge-background-color:rgb(var(--contrast-200));margin-right:0.25rem}.property{border:1px solid var(--header-background-color);border-radius:0 0 0.75rem 0.75rem}.property-list{display:flex;flex-direction:column;border-radius:0.25rem;background-color:rgb(var(--contrast-100));gap:0.5rem;padding:0.5rem}.property-item{border-radius:0.25rem;transition:background-color 0.2s}.property-item:hover{background-color:rgb(var(--contrast-100))}.actions{display:flex}.actions limel-button{padding:0.5rem;width:100%}.empty-state{padding:2rem;text-align:center;color:rgb(var(--contrast-700));font-style:italic}.empty-state p{margin:0}";
 const LimebbLimeQueryResponseFormatEditorStyle0 = responseFormatEditorCss;
 
 const ResponseFormatEditor = /*@__PURE__*/ proxyCustomElement(class ResponseFormatEditor extends HTMLElement {
@@ -173,7 +173,7 @@ const ResponseFormatEditor = /*@__PURE__*/ proxyCustomElement(class ResponseForm
         /**
          * Optional label
          */
-        this.label = 'Select Properties to Return';
+        this.label = 'Properties';
         this.items = [{ path: '_id' }];
         this.handleItemChange = (index) => (event) => {
             event.stopPropagation();
@@ -230,7 +230,16 @@ const ResponseFormatEditor = /*@__PURE__*/ proxyCustomElement(class ResponseForm
         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) }));

package/dist/esm/lime-crm-building-blocks.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"limebb-lime-query-builder\",[[1,\"limebb-lime-query-builder\",{\"platform\":[16],\"context\":[16],\"value\":[16],\"label\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"limetypes\":[32],\"mode\":[32],\"codeValue\":[32],\"limetype\":[32],\"filter\":[32],\"internalResponseFormat\":[32],\"limit\":[32],\"orderBy\":[32]}]]],[\"limebb-feed\",[[1,\"limebb-feed\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"emptyStateMessage\":[1,\"empty-state-message\"],\"heading\":[1],\"loading\":[4],\"minutesOfProximity\":[2,\"minutes-of-proximity\"],\"totalCount\":[2,\"total-count\"],\"direction\":[513],\"lastVisitedTimestamp\":[1,\"last-visited-timestamp\"],\"highlightedItemId\":[8,\"highlighted-item-id\"]},null,{\"highlightedItemId\":[\"highlightedItemIdChanged\"]}]]],[\"limebb-kanban\",[[1,\"limebb-kanban\",{\"platform\":[16],\"context\":[16],\"groups\":[16]}]]],[\"limebb-lime-query-response-format-builder\",[[1,\"limebb-lime-query-response-format-builder\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"value\":[16],\"label\":[1],\"limetypes\":[32],\"mode\":[32],\"codeValue\":[32],\"internalValue\":[32]}]]],[\"limebb-chat-list\",[[1,\"limebb-chat-list\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"loading\":[516],\"isTypingIndicatorVisible\":[516,\"is-typing-indicator-visible\"],\"lastVisitedTimestamp\":[513,\"last-visited-timestamp\"],\"order\":[513]},null,{\"items\":[\"handleItemsChange\"]}]]],[\"limebb-limeobject-file-viewer\",[[1,\"limebb-limeobject-file-viewer\",{\"platform\":[16],\"context\":[16],\"property\":[1],\"fileTypes\":[16],\"limeobject\":[32],\"limetype\":[32]}]]],[\"limebb-text-editor\",[[1,\"limebb-text-editor\",{\"platform\":[16],\"context\":[16],\"allowMentioning\":[4,\"allow-mentioning\"],\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"required\":[516],\"selectedContext\":[16],\"ui\":[513],\"allowResize\":[4,\"allow-resize\"],\"value\":[1],\"draftIdentifier\":[1,\"draft-identifier\"],\"triggerMap\":[16],\"customElements\":[16],\"allowInlineImages\":[4,\"allow-inline-images\"],\"items\":[32],\"highlightedItemIndex\":[32],\"editorPickerQuery\":[32],\"searchableLimetypes\":[32],\"isPickerOpen\":[32],\"isSearching\":[32]},null,{\"isPickerOpen\":[\"watchOpen\"],\"editorPickerQuery\":[\"watchQuery\"]}]]],[\"limebb-date-range\",[[1,\"limebb-date-range\",{\"platform\":[16],\"context\":[16],\"startTime\":[16],\"endTime\":[16],\"startTimeLabel\":[1,\"start-time-label\"],\"endTimeLabel\":[1,\"end-time-label\"],\"language\":[1],\"timeFormat\":[1,\"time-format\"],\"type\":[1]}]]],[\"limebb-document-picker\",[[1,\"limebb-document-picker\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"invalid\":[516],\"required\":[516],\"type\":[513]}]]],[\"limebb-info-tile-currency-format\",[[1,\"limebb-info-tile-currency-format\",{\"platform\":[16],\"context\":[16],\"value\":[16]}]]],[\"limebb-notification-list\",[[1,\"limebb-notification-list\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"loading\":[4],\"lastVisitedTimestamp\":[1,\"last-visited-timestamp\"]},null,{\"items\":[\"handleItemsChange\"]}]]],[\"limebb-browser\",[[17,\"limebb-browser\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"layout\":[1],\"filter\":[32]}]]],[\"limebb-component-config\",[[1,\"limebb-component-config\",{\"platform\":[16],\"context\":[16],\"value\":[16],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"],\"formInfo\":[16],\"type\":[1],\"nameField\":[1,\"name-field\"],\"configComponent\":[32],\"configViewType\":[32]},null,{\"formInfo\":[\"watchFormInfo\"],\"configComponent\":[\"watchconfigComponent\"]}]]],[\"limebb-component-picker\",[[1,\"limebb-component-picker\",{\"platform\":[16],\"context\":[16],\"type\":[1],\"tags\":[16],\"value\":[1],\"copyLabel\":[1,\"copy-label\"],\"hideCopyButton\":[4,\"hide-copy-button\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"]}]]],[\"limebb-dashboard-widget\",[[1,\"limebb-dashboard-widget\",{\"heading\":[513],\"subheading\":[513],\"supportingText\":[513,\"supporting-text\"],\"icon\":[513]}]]],[\"limebb-icon-picker\",[[1,\"limebb-icon-picker\",{\"value\":[1],\"required\":[4],\"readonly\":[4],\"invalid\":[4],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"]}]]],[\"limebb-info-tile\",[[1,\"limebb-info-tile\",{\"platform\":[16],\"context\":[16],\"filterId\":[513,\"filter-id\"],\"disabled\":[4],\"icon\":[513],\"label\":[1],\"prefix\":[1],\"suffix\":[1],\"propertyName\":[1,\"property-name\"],\"aggregateOperator\":[1,\"aggregate-operator\"],\"format\":[16],\"config\":[32],\"filters\":[32],\"value\":[32],\"loading\":[32],\"error\":[32]},null,{\"filterId\":[\"watchFilterId\"],\"propertyName\":[\"watchPropertyName\"],\"aggregateOperator\":[\"watchAggregateOperator\"]}]]],[\"limebb-info-tile-date-format\",[[1,\"limebb-info-tile-date-format\",{\"value\":[16]}]]],[\"limebb-info-tile-decimal-format\",[[1,\"limebb-info-tile-decimal-format\",{\"value\":[16]}]]],[\"limebb-info-tile-format\",[[1,\"limebb-info-tile-format\",{\"platform\":[16],\"context\":[16],\"type\":[1],\"value\":[16]}]]],[\"limebb-info-tile-relative-date-format\",[[1,\"limebb-info-tile-relative-date-format\",{\"value\":[16]}]]],[\"limebb-info-tile-unit-format\",[[1,\"limebb-info-tile-unit-format\",{\"value\":[16]}]]],[\"limebb-loader\",[[1,\"limebb-loader\",{\"platform\":[16],\"context\":[16]}]]],[\"limebb-locale-picker\",[[1,\"limebb-locale-picker\",{\"platform\":[16],\"context\":[16],\"value\":[1],\"required\":[4],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"],\"readonly\":[4],\"multipleChoice\":[4,\"multiple-choice\"],\"allLanguages\":[32]}]]],[\"limebb-mention\",[[1,\"limebb-mention\",{\"limetype\":[1],\"objectid\":[2],\"limeobject\":[32]}]]],[\"limebb-mention-group-counter\",[[1,\"limebb-mention-group-counter\",{\"count\":[2],\"limetype\":[16],\"helperLabel\":[1,\"helper-label\"]}]]],[\"limebb-percentage-visualizer\",[[1,\"limebb-percentage-visualizer\",{\"platform\":[16],\"context\":[16],\"value\":[520],\"rangeMax\":[514,\"range-max\"],\"rangeMin\":[514,\"range-min\"],\"multiplier\":[514],\"label\":[513],\"invalid\":[516],\"required\":[516],\"helperText\":[513,\"helper-text\"],\"reducePresence\":[516,\"reduce-presence\"],\"displayPercentageColors\":[516,\"display-percentage-colors\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"limebb-trend-indicator\",[[1,\"limebb-trend-indicator\",{\"platform\":[16],\"context\":[16],\"value\":[520],\"formerValue\":[514,\"former-value\"],\"suffix\":[513],\"label\":[513],\"invalid\":[516],\"required\":[516],\"helperText\":[513,\"helper-text\"],\"reducePresence\":[516,\"reduce-presence\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"limebb-feed-timeline-item\",[[1,\"limebb-feed-timeline-item\",{\"platform\":[16],\"context\":[16],\"item\":[16],\"ui\":[513],\"helperText\":[1,\"helper-text\"],\"hasError\":[516,\"has-error\"],\"isBundled\":[516,\"is-bundled\"],\"headingCanExpand\":[32],\"isHeadingExpanded\":[32],\"showMore\":[32],\"isTall\":[32]}]]],[\"limebb-kanban-item\",[[1,\"limebb-kanban-item\",{\"platform\":[16],\"context\":[16],\"item\":[16]}]]],[\"limebb-kanban-group\",[[1,\"limebb-kanban-group\",{\"platform\":[16],\"context\":[16],\"identifier\":[1],\"heading\":[513],\"help\":[1],\"items\":[16],\"summary\":[1],\"loading\":[516],\"totalCount\":[514,\"total-count\"]}]]],[\"limebb-text-editor-picker\",[[1,\"limebb-text-editor-picker\",{\"items\":[16],\"open\":[516],\"isSearching\":[4,\"is-searching\"],\"emptyMessage\":[1,\"empty-message\"]},null,{\"open\":[\"watchOpen\"]}]]],[\"limebb-currency-picker\",[[1,\"limebb-currency-picker\",{\"platform\":[16],\"context\":[16],\"label\":[513],\"currencies\":[16],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"value\":[1]}]]],[\"limebb-date-picker\",[[1,\"limebb-date-picker\",{\"platform\":[16],\"context\":[16],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[1],\"type\":[513]}]]],[\"limebb-document-item\",[[17,\"limebb-document-item\",{\"platform\":[16],\"context\":[16],\"item\":[16],\"type\":[513]}]]],[\"limebb-live-docs-info\",[[1,\"limebb-live-docs-info\"]]],[\"limebb-notification-item\",[[1,\"limebb-notification-item\",{\"platform\":[16],\"context\":[16],\"item\":[16]}]]],[\"limebb-lime-query-order-by-item\",[[1,\"limebb-lime-query-order-by-item\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"item\":[16]}]]],[\"limebb-chat-item_2\",[[1,\"limebb-chat-item\",{\"platform\":[16],\"context\":[16],\"item\":[16],\"helperText\":[1,\"helper-text\"],\"hasError\":[516,\"has-error\"]}],[1,\"limebb-typing-indicator\"]]],[\"limebb-feed-item-thumbnail-file-info\",[[1,\"limebb-feed-item-thumbnail-file-info\",{\"description\":[1]}]]],[\"limebb-lime-query-filter-builder_3\",[[1,\"limebb-lime-query-filter-builder\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}],[1,\"limebb-lime-query-order-by-editor\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"value\":[16],\"label\":[1],\"items\":[32]},null,{\"value\":[\"handleValueChange\"]}],[0,\"limebb-limetype-field\",{\"platform\":[16],\"context\":[16],\"label\":[513],\"required\":[516],\"readonly\":[516],\"disabled\":[516],\"value\":[513],\"helperText\":[513,\"helper-text\"],\"invalid\":[4],\"limetypes\":[16],\"propertyFields\":[16],\"fieldName\":[1,\"field-name\"],\"formInfo\":[16]}]]],[\"limebb-empty-state\",[[1,\"limebb-empty-state\",{\"heading\":[513],\"value\":[513],\"icon\":[16]}]]],[\"limebb-property-selector\",[[1,\"limebb-property-selector\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"value\":[1],\"label\":[1],\"required\":[4],\"helperText\":[1,\"helper-text\"],\"limetypes\":[32],\"isOpen\":[32],\"navigationPath\":[32]}]]],[\"limebb-lime-query-response-format-editor_2\",[[1,\"limebb-lime-query-response-format-editor\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"value\":[16],\"label\":[1],\"items\":[32]}],[1,\"limebb-lime-query-response-format-item\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"item\":[16],\"showAliasInput\":[32],\"showDescriptionInput\":[32]}]]],[\"limebb-navigation-button_2\",[[1,\"limebb-summary-popover\",{\"triggerDelay\":[514,\"trigger-delay\"],\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"openDirection\":[513,\"open-direction\"],\"popoverMaxWidth\":[513,\"popover-max-width\"],\"popoverMaxHeight\":[513,\"popover-max-height\"],\"actions\":[16],\"isPopoverOpen\":[32]}],[17,\"limebb-navigation-button\",{\"href\":[513],\"tooltipLabel\":[513,\"tooltip-label\"],\"tooltipHelperLabel\":[513,\"tooltip-helper-label\"],\"type\":[513]}]]],[\"limebb-lime-query-filter-group_3\",[[1,\"limebb-lime-query-value-input\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"propertyPath\":[1,\"property-path\"],\"operator\":[1],\"value\":[8],\"label\":[1],\"limetypes\":[32],\"inputMode\":[32]}],[1,\"limebb-lime-query-filter-group\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}],[1,\"limebb-lime-query-filter-not\",{\"platform\":[16],\"context\":[16],\"label\":[1],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}]]],[\"limebb-lime-query-filter-comparison_2\",[[1,\"limebb-lime-query-filter-expression\",{\"platform\":[16],\"context\":[16],\"label\":[1],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}],[1,\"limebb-lime-query-filter-comparison\",{\"platform\":[16],\"context\":[16],\"label\":[1],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"limebb-lime-query-builder\",[[1,\"limebb-lime-query-builder\",{\"platform\":[16],\"context\":[16],\"value\":[16],\"label\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"limetypes\":[32],\"mode\":[32],\"codeValue\":[32],\"limetype\":[32],\"filter\":[32],\"internalResponseFormat\":[32],\"limit\":[32],\"orderBy\":[32]}]]],[\"limebb-feed\",[[1,\"limebb-feed\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"emptyStateMessage\":[1,\"empty-state-message\"],\"heading\":[1],\"loading\":[4],\"minutesOfProximity\":[2,\"minutes-of-proximity\"],\"totalCount\":[2,\"total-count\"],\"direction\":[513],\"lastVisitedTimestamp\":[1,\"last-visited-timestamp\"],\"highlightedItemId\":[8,\"highlighted-item-id\"]},null,{\"highlightedItemId\":[\"highlightedItemIdChanged\"]}]]],[\"limebb-kanban\",[[1,\"limebb-kanban\",{\"platform\":[16],\"context\":[16],\"groups\":[16]}]]],[\"limebb-lime-query-response-format-builder\",[[1,\"limebb-lime-query-response-format-builder\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"value\":[16],\"label\":[1],\"limetypes\":[32],\"mode\":[32],\"codeValue\":[32],\"internalValue\":[32]}]]],[\"limebb-chat-list\",[[1,\"limebb-chat-list\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"loading\":[516],\"isTypingIndicatorVisible\":[516,\"is-typing-indicator-visible\"],\"lastVisitedTimestamp\":[513,\"last-visited-timestamp\"],\"order\":[513]},null,{\"items\":[\"handleItemsChange\"]}]]],[\"limebb-limeobject-file-viewer\",[[1,\"limebb-limeobject-file-viewer\",{\"platform\":[16],\"context\":[16],\"property\":[1],\"fileTypes\":[16],\"limeobject\":[32],\"limetype\":[32]}]]],[\"limebb-text-editor\",[[1,\"limebb-text-editor\",{\"platform\":[16],\"context\":[16],\"allowMentioning\":[4,\"allow-mentioning\"],\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"required\":[516],\"selectedContext\":[16],\"ui\":[513],\"allowResize\":[4,\"allow-resize\"],\"value\":[1],\"draftIdentifier\":[1,\"draft-identifier\"],\"triggerMap\":[16],\"customElements\":[16],\"allowInlineImages\":[4,\"allow-inline-images\"],\"items\":[32],\"highlightedItemIndex\":[32],\"editorPickerQuery\":[32],\"searchableLimetypes\":[32],\"isPickerOpen\":[32],\"isSearching\":[32]},null,{\"isPickerOpen\":[\"watchOpen\"],\"editorPickerQuery\":[\"watchQuery\"]}]]],[\"limebb-date-range\",[[1,\"limebb-date-range\",{\"platform\":[16],\"context\":[16],\"startTime\":[16],\"endTime\":[16],\"startTimeLabel\":[1,\"start-time-label\"],\"endTimeLabel\":[1,\"end-time-label\"],\"language\":[1],\"timeFormat\":[1,\"time-format\"],\"type\":[1]}]]],[\"limebb-document-picker\",[[1,\"limebb-document-picker\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"invalid\":[516],\"required\":[516],\"type\":[513]}]]],[\"limebb-info-tile-currency-format\",[[1,\"limebb-info-tile-currency-format\",{\"platform\":[16],\"context\":[16],\"value\":[16]}]]],[\"limebb-notification-list\",[[1,\"limebb-notification-list\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"loading\":[4],\"lastVisitedTimestamp\":[1,\"last-visited-timestamp\"]},null,{\"items\":[\"handleItemsChange\"]}]]],[\"limebb-browser\",[[17,\"limebb-browser\",{\"platform\":[16],\"context\":[16],\"items\":[16],\"layout\":[1],\"filter\":[32]}]]],[\"limebb-component-config\",[[1,\"limebb-component-config\",{\"platform\":[16],\"context\":[16],\"value\":[16],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"],\"formInfo\":[16],\"type\":[1],\"nameField\":[1,\"name-field\"],\"configComponent\":[32],\"configViewType\":[32]},null,{\"formInfo\":[\"watchFormInfo\"],\"configComponent\":[\"watchconfigComponent\"]}]]],[\"limebb-component-picker\",[[1,\"limebb-component-picker\",{\"platform\":[16],\"context\":[16],\"type\":[1],\"tags\":[16],\"value\":[1],\"copyLabel\":[1,\"copy-label\"],\"hideCopyButton\":[4,\"hide-copy-button\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"]}]]],[\"limebb-dashboard-widget\",[[1,\"limebb-dashboard-widget\",{\"heading\":[513],\"subheading\":[513],\"supportingText\":[513,\"supporting-text\"],\"icon\":[513]}]]],[\"limebb-icon-picker\",[[1,\"limebb-icon-picker\",{\"value\":[1],\"required\":[4],\"readonly\":[4],\"invalid\":[4],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"]}]]],[\"limebb-info-tile\",[[1,\"limebb-info-tile\",{\"platform\":[16],\"context\":[16],\"filterId\":[513,\"filter-id\"],\"disabled\":[4],\"icon\":[513],\"label\":[1],\"prefix\":[1],\"suffix\":[1],\"propertyName\":[1,\"property-name\"],\"aggregateOperator\":[1,\"aggregate-operator\"],\"format\":[16],\"config\":[32],\"filters\":[32],\"value\":[32],\"loading\":[32],\"error\":[32]},null,{\"filterId\":[\"watchFilterId\"],\"propertyName\":[\"watchPropertyName\"],\"aggregateOperator\":[\"watchAggregateOperator\"]}]]],[\"limebb-info-tile-date-format\",[[1,\"limebb-info-tile-date-format\",{\"value\":[16]}]]],[\"limebb-info-tile-decimal-format\",[[1,\"limebb-info-tile-decimal-format\",{\"value\":[16]}]]],[\"limebb-info-tile-format\",[[1,\"limebb-info-tile-format\",{\"platform\":[16],\"context\":[16],\"type\":[1],\"value\":[16]}]]],[\"limebb-info-tile-relative-date-format\",[[1,\"limebb-info-tile-relative-date-format\",{\"value\":[16]}]]],[\"limebb-info-tile-unit-format\",[[1,\"limebb-info-tile-unit-format\",{\"value\":[16]}]]],[\"limebb-loader\",[[1,\"limebb-loader\",{\"platform\":[16],\"context\":[16]}]]],[\"limebb-locale-picker\",[[1,\"limebb-locale-picker\",{\"platform\":[16],\"context\":[16],\"value\":[1],\"required\":[4],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"],\"readonly\":[4],\"multipleChoice\":[4,\"multiple-choice\"],\"allLanguages\":[32]}]]],[\"limebb-mention\",[[1,\"limebb-mention\",{\"limetype\":[1],\"objectid\":[2],\"limeobject\":[32]}]]],[\"limebb-mention-group-counter\",[[1,\"limebb-mention-group-counter\",{\"count\":[2],\"limetype\":[16],\"helperLabel\":[1,\"helper-label\"]}]]],[\"limebb-percentage-visualizer\",[[1,\"limebb-percentage-visualizer\",{\"platform\":[16],\"context\":[16],\"value\":[520],\"rangeMax\":[514,\"range-max\"],\"rangeMin\":[514,\"range-min\"],\"multiplier\":[514],\"label\":[513],\"invalid\":[516],\"required\":[516],\"helperText\":[513,\"helper-text\"],\"reducePresence\":[516,\"reduce-presence\"],\"displayPercentageColors\":[516,\"display-percentage-colors\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"limebb-trend-indicator\",[[1,\"limebb-trend-indicator\",{\"platform\":[16],\"context\":[16],\"value\":[520],\"formerValue\":[514,\"former-value\"],\"suffix\":[513],\"label\":[513],\"invalid\":[516],\"required\":[516],\"helperText\":[513,\"helper-text\"],\"reducePresence\":[516,\"reduce-presence\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"limebb-feed-timeline-item\",[[1,\"limebb-feed-timeline-item\",{\"platform\":[16],\"context\":[16],\"item\":[16],\"ui\":[513],\"helperText\":[1,\"helper-text\"],\"hasError\":[516,\"has-error\"],\"isBundled\":[516,\"is-bundled\"],\"headingCanExpand\":[32],\"isHeadingExpanded\":[32],\"showMore\":[32],\"isTall\":[32]}]]],[\"limebb-kanban-item\",[[1,\"limebb-kanban-item\",{\"platform\":[16],\"context\":[16],\"item\":[16]}]]],[\"limebb-kanban-group\",[[1,\"limebb-kanban-group\",{\"platform\":[16],\"context\":[16],\"identifier\":[1],\"heading\":[513],\"help\":[1],\"items\":[16],\"summary\":[1],\"loading\":[516],\"totalCount\":[514,\"total-count\"]}]]],[\"limebb-text-editor-picker\",[[1,\"limebb-text-editor-picker\",{\"items\":[16],\"open\":[516],\"isSearching\":[4,\"is-searching\"],\"emptyMessage\":[1,\"empty-message\"]},null,{\"open\":[\"watchOpen\"]}]]],[\"limebb-currency-picker\",[[1,\"limebb-currency-picker\",{\"platform\":[16],\"context\":[16],\"label\":[513],\"currencies\":[16],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"value\":[1]}]]],[\"limebb-date-picker\",[[1,\"limebb-date-picker\",{\"platform\":[16],\"context\":[16],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[1],\"type\":[513]}]]],[\"limebb-document-item\",[[17,\"limebb-document-item\",{\"platform\":[16],\"context\":[16],\"item\":[16],\"type\":[513]}]]],[\"limebb-live-docs-info\",[[1,\"limebb-live-docs-info\"]]],[\"limebb-notification-item\",[[1,\"limebb-notification-item\",{\"platform\":[16],\"context\":[16],\"item\":[16]}]]],[\"limebb-lime-query-order-by-item\",[[1,\"limebb-lime-query-order-by-item\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"item\":[16]}]]],[\"limebb-chat-item_2\",[[1,\"limebb-chat-item\",{\"platform\":[16],\"context\":[16],\"item\":[16],\"helperText\":[1,\"helper-text\"],\"hasError\":[516,\"has-error\"]}],[1,\"limebb-typing-indicator\"]]],[\"limebb-feed-item-thumbnail-file-info\",[[1,\"limebb-feed-item-thumbnail-file-info\",{\"description\":[1]}]]],[\"limebb-lime-query-filter-builder_3\",[[1,\"limebb-lime-query-filter-builder\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}],[1,\"limebb-lime-query-order-by-editor\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"value\":[16],\"label\":[1],\"items\":[32]},null,{\"value\":[\"handleValueChange\"]}],[0,\"limebb-limetype-field\",{\"platform\":[16],\"context\":[16],\"label\":[513],\"required\":[516],\"readonly\":[516],\"disabled\":[516],\"value\":[513],\"helperText\":[513,\"helper-text\"],\"invalid\":[4],\"limetypes\":[16],\"propertyFields\":[16],\"fieldName\":[1,\"field-name\"],\"formInfo\":[16]}]]],[\"limebb-empty-state\",[[1,\"limebb-empty-state\",{\"heading\":[513],\"value\":[513],\"icon\":[16]}]]],[\"limebb-property-selector\",[[1,\"limebb-property-selector\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"value\":[1],\"label\":[1],\"required\":[4],\"helperText\":[1,\"helper-text\"],\"limetypes\":[32],\"isOpen\":[32],\"navigationPath\":[32]}]]],[\"limebb-lime-query-response-format-editor_2\",[[1,\"limebb-lime-query-response-format-editor\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"value\":[16],\"label\":[1],\"items\":[32]}],[1,\"limebb-lime-query-response-format-item\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"item\":[16],\"showAliasInput\":[32],\"showDescriptionInput\":[32]}]]],[\"limebb-navigation-button_2\",[[1,\"limebb-summary-popover\",{\"triggerDelay\":[514,\"trigger-delay\"],\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"openDirection\":[513,\"open-direction\"],\"popoverMaxWidth\":[513,\"popover-max-width\"],\"popoverMaxHeight\":[513,\"popover-max-height\"],\"actions\":[16],\"isPopoverOpen\":[32]}],[17,\"limebb-navigation-button\",{\"href\":[513],\"tooltipLabel\":[513,\"tooltip-label\"],\"tooltipHelperLabel\":[513,\"tooltip-helper-label\"],\"type\":[513]}]]],[\"limebb-lime-query-filter-group_3\",[[1,\"limebb-lime-query-value-input\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"propertyPath\":[1,\"property-path\"],\"operator\":[1],\"value\":[8],\"label\":[1],\"limetypes\":[32],\"inputMode\":[32]}],[1,\"limebb-lime-query-filter-group\",{\"platform\":[16],\"context\":[16],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16],\"value\":[32]}],[1,\"limebb-lime-query-filter-not\",{\"platform\":[16],\"context\":[16],\"label\":[1],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}]]],[\"limebb-lime-query-filter-comparison_2\",[[1,\"limebb-lime-query-filter-expression\",{\"platform\":[16],\"context\":[16],\"label\":[1],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}],[1,\"limebb-lime-query-filter-comparison\",{\"platform\":[16],\"context\":[16],\"label\":[1],\"limetype\":[1],\"activeLimetype\":[1,\"active-limetype\"],\"expression\":[16]}]]]]"), options);
 });

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h } from './index-96dd111f.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-96dd111f.js';
 import { T as Te } from './index.esm-bb569663.js';
 import { i as isLimeQuerySupported } from './lime-query-validation-573223a5.js';
 import './property-resolution-c21a1369.js';
 
-const limeQueryBuilderCss = ":host(limebb-lime-lime-query-builder){display:block;width:100%}.lime-query-builder{display:flex;flex-direction:column;gap:1rem;padding:1rem}.mode-controls{display:flex;justify-content:flex-end;padding:0.5rem}.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{padding:0.75rem 1rem;color:rgb(var(--color-red-default));background-color:rgb(var(--color-red-lighter));border-left:0.25rem solid rgb(var(--color-red-default));border-radius:0.25rem;font-size:0.875rem}.code-editor-container .validation-errors strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-editor-container .validation-errors ul{margin:0;padding-left:1.5rem}.code-editor-container .validation-errors li{margin:0.25rem 0}.code-editor-container .gui-limitations{padding:0.75rem 1rem;color:rgb(var(--color-blue-dark));background-color:rgb(var(--color-blue-lighter));border-left:0.25rem solid rgb(var(--color-blue-default));border-radius:0.25rem;font-size:0.875rem}.code-editor-container .gui-limitations strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-editor-container .gui-limitations ul{margin:0;padding-left:1.5rem}.code-editor-container .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}.filter-section,.query-options-section{display:flex;flex-direction:column;gap:1rem;padding-top:1rem}.section-label{margin:0;font-size:1.125rem;font-weight:600;color:rgb(var(--contrast-1000))}.query-options-controls{display:flex;flex-direction:column;gap:1rem}@media (max-width: 768px){.lime-query-builder{gap:1.5rem}}";
+const limeQueryBuilderCss = "*,*:before,*:after{box-sizing:border-box}: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;border-radius:var(--limebb-lime-query-builder-border-radius);background-color:var(--limebb-lime-query-builder-background-color);box-shadow:var(--shadow-inflated-16)}.gui-mode{padding:1rem;border:1px solid var(--header-background-color);border-radius:0 0 0.754rem 0.75rem}.code-mode{--code-editor-max-height:70vh;display:flex;flex-direction:column;gap:1rem}.code-mode .validation-errors{padding:0.75rem 1rem;color:rgb(var(--color-red-default));background-color:rgb(var(--color-red-lighter));border-left:0.25rem solid rgb(var(--color-red-default));border-radius:0.25rem;font-size:0.875rem}.code-mode .validation-errors strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-mode .validation-errors ul{margin:0;padding-left:1.5rem}.code-mode .validation-errors li{margin:0.25rem 0}.code-mode .gui-limitations{padding:0.75rem 1rem;color:rgb(var(--color-blue-dark));background-color:rgb(var(--color-blue-lighter));border-left:0.25rem solid rgb(var(--color-blue-default));border-radius:0.25rem;font-size:0.875rem}.code-mode .gui-limitations strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-mode .gui-limitations ul{margin:0;padding-left:1.5rem}.code-mode .gui-limitations li{margin:0.25rem 0}.limetype-section{display:flex;flex-direction:column}.filter-section,.query-options-section{display:flex;flex-direction:column;gap:1rem;padding-top:1rem}.section-label{margin:0;font-size:1.125rem;font-weight:600;color:rgb(var(--contrast-1000))}.query-options-controls{display:flex;flex-direction:column;gap:1rem}";
 const LimebbLimeQueryBuilderStyle0 = limeQueryBuilderCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -136,11 +136,14 @@ const LimeQueryBuilder = class {
         }
     }
     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
@@ -234,14 +237,19 @@ const LimeQueryBuilder = class {
     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 })));
@@ -268,17 +276,15 @@ const LimeQueryBuilder = class {
     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/esm/limebb-lime-query-filter-builder_3.entry.js

@@ -127,7 +127,10 @@ const LimeQueryFilterBuilderComponent = class {
         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 })));