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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.102.4](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.102.3...v1.102.4) (2025-11-12)
+
+### Bug Fixes
+
+
+* **lime-query-builder:** sort properties alphabetically in selector ([e87508a](https://github.com/Lundalogik/lime-crm-building-blocks/commit/e87508a7c0c5d872a3e6151289826c3602dad54e)), closes [Lundalogik/crm-insights-and-intelligence#139](https://github.com/Lundalogik/crm-insights-and-intelligence/issues/139)
+
+## [1.102.3](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.102.2...v1.102.3) (2025-11-12)
+
+### Bug Fixes
+
+
+* **response-format-editor:** improve ui ([24c6f2d](https://github.com/Lundalogik/lime-crm-building-blocks/commit/24c6f2dd1ac75edad931d00eefec4badd910d333))
+
 ## [1.102.2](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.102.1...v1.102.2) (2025-11-11)
 
 ### Bug Fixes

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

@@ -7,7 +7,7 @@ const index_esm = require('./index.esm-d785eb6e.js');
 const limeQueryValidation = require('./lime-query-validation-6be10fa7.js');
 require('./property-resolution-fb42a46b.js');
 
-const limeQueryBuilderCss = ":host(limebb-lime-lime-query-builder){display:block;width:100%}.lime-query-builder{display:flex;flex-direction:column;gap:2rem}.mode-controls{display:flex;align-items:center;gap:0.5rem;padding:0.5rem}.mode-switch{display:flex;align-items:center;gap:0.5rem}.mode-switch limel-button{min-width:5rem}.mode-switch limel-helper-text{margin-left:1rem;color:rgb(var(--color-red-default))}.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}.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 = ":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 LimebbLimeQueryBuilderStyle0 = limeQueryBuilderCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -62,33 +62,33 @@ const LimeQueryBuilder = class {
             this.orderBy = event.detail;
             this.emitChange();
         };
-        this.switchToGui = () => {
-            // Validate JSON before switching
-            try {
-                const parsed = JSON.parse(this.codeValue);
-                // Check if it's supported in GUI
-                const support = this.checkGuiSupport();
-                if (!support.guiSupported) {
-                    // Don't switch if GUI can't render this query
-                    return;
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            const mode = event.detail.id;
+            if (mode === 'gui') {
+                try {
+                    const parsed = JSON.parse(this.codeValue);
+                    const support = this.checkGuiSupport();
+                    if (!support.guiSupported) {
+                        return;
+                    }
+                    this.limetype = parsed.limetype || '';
+                    this.filter = parsed.filter;
+                    this.internalResponseFormat = parsed.responseFormat;
+                    this.limit = parsed.limit;
+                    this.orderBy = parsed.orderBy;
+                    this.mode = 'gui';
+                    this.change.emit(parsed);
+                }
+                catch (_a) {
+                    // Don't switch if JSON is invalid
                 }
-                // Update internal state from parsed query
-                this.limetype = parsed.limetype || '';
-                this.filter = parsed.filter;
-                this.internalResponseFormat = parsed.responseFormat;
-                this.limit = parsed.limit;
-                this.orderBy = parsed.orderBy;
-                this.mode = 'gui';
-                this.change.emit(parsed);
             }
-            catch (_a) {
-                // Don't switch if JSON is invalid (linter will show the error)
+            else if (mode === 'code') {
+                this.updateCodeValue();
+                this.mode = 'code';
             }
         };
-        this.switchToCode = () => {
-            this.updateCodeValue();
-            this.mode = 'code';
-        };
         this.handleCodeChange = (event) => {
             event.stopPropagation();
             this.codeValue = event.detail;
@@ -102,6 +102,16 @@ const LimeQueryBuilder = class {
             }
         };
     }
+    // Buttons are generated dynamically in renderModeSwitch to allow disabling
+    getButtons() {
+        return [
+            {
+                id: 'gui',
+                title: 'Visual',
+            },
+            { id: 'code', title: 'Code' },
+        ];
+    }
     get guiModeEnabled() {
         var _a, _b, _c;
         return ((_c = (_b = (_a = this.platform) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled) === null || _b === void 0 ? void 0 : _b.call(_a, 'useLimeQueryBuilderGuiMode')) !== null && _c !== void 0 ? _c : false);
@@ -132,7 +142,7 @@ const LimeQueryBuilder = class {
     render() {
         const guiSupported = this.checkGuiSupport();
         const showCodeMode = !this.guiModeEnabled || this.mode === 'code';
-        return (index.h("div", { key: 'f51ae0459c1c7f482f3a790abb4cc3bd60b83e70', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
+        return (index.h("div", { key: '5e9c8bb860cf348b08272831bc2e252752fad24d', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
             ? this.renderCodeMode(guiSupported)
             : this.renderGuiMode()));
     }
@@ -227,7 +237,8 @@ const LimeQueryBuilder = class {
     }
     renderModeSwitch(support) {
         const guiDisabled = !support.guiSupported;
-        return (index.h("div", { class: "mode-switch" }, index.h("limel-button", { label: "GUI", primary: this.mode === 'gui', disabled: guiDisabled, onClick: this.switchToGui }), index.h("limel-button", { label: "Code", primary: this.mode === 'code', onClick: this.switchToCode })));
+        const buttons = this.getButtons().map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
+        return (index.h("limel-button-group", { onChange: this.handleChange, value: buttons, disabled: guiDisabled }));
     }
     renderCodeEditor(guiSupported) {
         return (index.h("div", { class: "code-editor-container" }, index.h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }), !guiSupported.valid &&

package/dist/cjs/limebb-lime-query-filter-builder_3.cjs.entry.js

@@ -69,7 +69,7 @@ function isEqual(value, other) {
   return _baseIsEqual.baseIsEqual(value, other);
 }
 
-const limeQueryFilterBuilderCss = ".expression-with-promotion{display:flex;flex-direction:column;gap:1rem}";
+const limeQueryFilterBuilderCss = ".expression-with-promotion{display:flex;flex-direction:column;gap:1rem}limel-button{width:100%}.query-options-section{margin-top:1rem}";
 const LimebbLimeQueryFilterBuilderStyle0 = limeQueryFilterBuilderCss;
 
 const LimeQueryFilterBuilderComponent = class {
@@ -139,7 +139,7 @@ const LimeQueryFilterBuilderComponent = class {
 };
 LimeQueryFilterBuilderComponent.style = LimebbLimeQueryFilterBuilderStyle0;
 
-const orderByEditorCss = ":host(limebb-lime-query-order-by-editor){display:block;width:100%}.order-by-editor{display:flex;flex-direction:column;gap:1rem;padding:1rem}.header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.header h4{margin:0;font-size:1rem;font-weight:600;color:rgb(var(--contrast-1000))}.order-by-list{display:flex;flex-direction:column;gap:1rem;padding:0.5rem;border:1px solid rgb(var(--contrast-300));border-radius:0.25rem;background-color:rgb(var(--contrast-50));min-height:4rem}.order-by-item{padding:0.5rem;border-radius:0.25rem;transition:background-color 0.2s}.order-by-item:hover{background-color:rgb(var(--contrast-100))}.actions{display:flex;justify-content:flex-start}.summary{display:flex;justify-content:space-between;align-items:center;padding-top:0.5rem;border-top:1px solid rgb(var(--contrast-300))}.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 orderByEditorCss = ":host(limebb-lime-query-order-by-editor){display:block;width:100%}.order-by-editor{display:flex;flex-direction:column;gap:1rem;padding:1rem 0}.header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.header h4{margin:0;font-size:1rem;font-weight:600;color:rgb(var(--contrast-1000))}.order-by-list{display:flex;flex-direction:column;gap:1rem;border:1px solid rgb(var(--contrast-300));border-radius:0.25rem;background-color:rgb(var(--contrast-50));min-height:4rem}.order-by-item{padding:0.5rem;border-radius:0.25rem;transition:background-color 0.2s}.order-by-item:hover{background-color:rgb(var(--contrast-100))}.actions{display:flex;width:100%}.summary{display:flex;justify-content:space-between;align-items:center;padding-top:0.5rem;border-top:1px solid rgb(var(--contrast-300))}.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 LimebbLimeQueryOrderByEditorStyle0 = orderByEditorCss;
 
 const OrderByEditor = class {
@@ -208,7 +208,7 @@ const OrderByEditor = class {
         return (index.h("div", { class: "order-by-list" }, this.items.map((item, index) => this.renderItem(item, index))));
     }
     renderActions() {
-        return (index.h("div", { class: "actions" }, index.h("limel-button", { label: "Add Sort Field", icon: "plus_math", onClick: this.handleAddSortField })));
+        return (index.h("limel-button", { label: "Add Sort Field", icon: "plus_math", onClick: this.handleAddSortField }));
     }
     renderItem(item, index$1) {
         const propertyPath = Object.keys(item)[0] || '';

package/dist/cjs/limebb-lime-query-filter-group_3.cjs.entry.js

@@ -156,13 +156,16 @@ function updateChildExpression(group, childIndex, updatedChild) {
     };
 }
 
-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{margin-top:0;margin-right:1rem;margin-bottom:1rem;margin-left:1rem;padding-left:1rem;list-style:disc}.expression>ul li{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 .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 LimebbLimeQueryFilterGroupStyle0 = limeQueryFilterGroupCss;
 
 const LimeQueryFilterGroupComponent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.expressionChange = index.createEvent(this, "expressionChange", 7);
+        this.renderActionButton = (action) => {
+            return (index.h("limel-icon-button", { class: "action-icon", elevated: true, icon: action.icon, label: action.label, onClick: this.handleToggleOperator }));
+        };
         this.renderChildExpression = (expression, childIndex) => (index.h("li", null, index.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);
@@ -187,7 +190,28 @@ const LimeQueryFilterGroupComponent = class {
     }
     render() {
         const subheading = this.getSubheading();
-        return (index.h("div", { key: 'bf26300a939b4a2a1b401fa7a81593ec745a2a52', class: "expression" }, subheading && (index.h("limel-header", { key: 'f5152a2ca09811540b626965f52f5793e6c99728', subheading: subheading, onClick: this.handleToggleOperator, class: "clickable-header" })), index.h("ul", { key: 'c4cad750e47e0b6c94d6a76b2a4d8b72e36b3402' }, this.expression.exp.map(this.renderChildExpression), index.h("li", { key: 'ddd614f237a0c0314c2977b74a31b365f3251f9d', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
+        return (index.h("div", { key: 'b7972fb9e34b8b0b57ae82b3bf4de3e55b66169f', class: "expression" }, subheading && (index.h("limel-header", { key: '9721388fa6a60018f95dbe27b2959dcc1c11211e', icon: {
+                name: this.expression.op === index_esm.Zt.AND
+                    ? 'dot_bricks'
+                    : 'dot_circle',
+                color: 'rgb(var(--contrast-800))',
+            }, subheading: subheading, onClick: this.handleToggleOperator, class: "clickable-header" }, this.renderActions())), index.h("ul", { key: 'f3ae21204e082e81068c0e20b76e14ed4b577051' }, this.expression.exp.map(this.renderChildExpression), index.h("li", { key: 'd5958d8b61f348540b3dfb821de16ed0f2d0a1f4', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
+    }
+    get actions() {
+        return [
+            {
+                id: '1',
+                icon: this.expression.op === index_esm.Zt.AND
+                    ? 'dot_circle'
+                    : 'dot_bricks',
+                label: this.expression.op === index_esm.Zt.AND
+                    ? 'Any condition (OR)'
+                    : 'All conditions (AND)',
+            },
+        ];
+    }
+    renderActions() {
+        return (index.h("div", { class: "actions" }, this.actions.map(this.renderActionButton)));
     }
     getSubheading() {
         return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);

package/dist/cjs/limebb-lime-query-order-by-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ff255a0d.js');
 
-const orderByItemCss = ":host(limebb-lime-query-order-by-item){display:flex;flex-direction:column;gap:0.5rem;width:100%}.order-by-controls{display:flex;flex-direction:row;align-items:flex-start;gap:0.5rem;width:100%}.property-path{flex-grow:1;min-width:min(20rem, 100%)}.control-buttons{flex-shrink:0;display:flex;flex-direction:row;gap:0.25rem;align-items:center;padding-top:0.5rem}.control-buttons limel-icon-button{opacity:0.6;transition:opacity 0.2s ease}.control-buttons limel-icon-button:hover{opacity:1}@media (max-width: 768px){.order-by-controls{flex-direction:column;gap:0.5rem}.control-buttons{padding-top:0}}";
+const orderByItemCss = ":host(limebb-lime-query-order-by-item){display:flex;flex-direction:column;gap:0.5rem;width:100%}.order-by-controls{display:flex;flex-direction:row;align-items:flex-start;gap:0.5rem;width:100%}.property-path{flex-grow:1;min-width:min(10rem, 100%)}.control-buttons{flex-shrink:0;display:flex;flex-direction:row;gap:0.25rem;align-items:center}.control-buttons limel-icon-button{opacity:0.6;transition:opacity 0.2s ease}.control-buttons limel-icon-button:hover{opacity:1}@media (max-width: 768px){.order-by-controls{flex-direction:column;gap:0.5rem}}";
 const LimebbLimeQueryOrderByItemStyle0 = orderByItemCss;
 
 const OrderByItemComponent = class {

package/dist/cjs/limebb-lime-query-response-format-builder.cjs.entry.js

@@ -68,7 +68,7 @@ function getDefaultResponseFormat() {
     };
 }
 
-const limeQueryResponseFormatBuilderCss = ":host(limebb-lime-query-response-format-builder){display:block;width:100%}.response-format-builder{display:flex;flex-direction:column;gap:1.5rem}.builder-label{margin:0;font-size:1.25rem;font-weight:600;color:rgb(var(--contrast-1100))}.mode-controls{display:flex;align-items:center;gap:0.5rem;padding:0.5rem}.mode-switch{display:flex;align-items:center;gap:0.5rem}.mode-switch limel-button{min-width: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}@media (max-width: 768px){.response-format-builder{gap:1rem}}";
+const limeQueryResponseFormatBuilderCss = ":host(limebb-lime-query-response-format-builder){display:block;width:100%}.response-format-builder{display:flex;flex-direction:column}.builder-label{margin:0;font-size:1.25rem;font-weight:600;color:rgb(var(--contrast-1100))}.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}";
 const LimebbLimeQueryResponseFormatBuilderStyle0 = limeQueryResponseFormatBuilderCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -91,6 +91,16 @@ const LimeQueryResponseFormatBuilder = class {
         this.label = 'Response Format';
         this.mode = 'gui';
         this.codeValue = '';
+        this.handleModeChange = (event) => {
+            event.stopPropagation();
+            const mode = event.detail.id;
+            if (mode === 'gui') {
+                this.switchToGui();
+            }
+            else if (mode === 'code') {
+                this.switchToCode();
+            }
+        };
         /**
          * Switch from code mode to GUI mode
          */
@@ -180,11 +190,21 @@ const LimeQueryResponseFormatBuilder = class {
     }
     render() {
         const guiSupported = this.checkGuiSupport();
-        return (index.h("div", { key: '2b5e4ee360d6997a176d24e5a7aa36158461ad4a', class: "response-format-builder" }, this.label && index.h("h3", { key: 'b81f58824e4cf3114efd4d2978c833f7f06f2004', class: "builder-label" }, this.label), this.guiModeEnabled && (index.h("div", { key: '1b2ec0cd39909568732be94707a9dcadaa4a1223', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (index.h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (index.h("div", { class: "gui-mode" }, this.renderGuiMode()))));
+        return (index.h("div", { key: '8b4116d9e6f1653ec429995647481b1df3df2712', class: "response-format-builder" }, this.label && index.h("h3", { key: 'd5e532a64f4e735b67b0533b4896165f7862561e', class: "builder-label" }, this.label), this.guiModeEnabled && (index.h("div", { key: '42af934f90de83855ff81306fe0bdb10c45fa808', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (index.h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (index.h("div", { class: "gui-mode" }, this.renderGuiMode()))));
     }
     renderModeSwitch(support) {
         const guiDisabled = !support.guiSupported;
-        return (index.h("div", { class: "mode-switch" }, index.h("limel-button", { label: "GUI", primary: this.mode === 'gui', disabled: guiDisabled, onClick: this.switchToGui }), index.h("limel-button", { label: "Code", primary: this.mode === 'code', onClick: this.switchToCode })));
+        const buttons = [
+            {
+                id: 'gui',
+                title: 'Visual',
+            },
+            {
+                id: 'code',
+                title: 'Code',
+            },
+        ].map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
+        return (index.h("limel-button-group", { value: buttons, disabled: guiDisabled, onChange: this.handleModeChange }));
     }
     renderCodeEditor(support) {
         return (index.h("div", { class: "code-editor-container" }, index.h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }), !support.valid && support.validationErrors.length > 0 && (index.h("div", { class: "validation-errors" }, index.h("strong", null, "Invalid Response Format:"), index.h("ul", null, support.validationErrors.map((error) => (index.h("li", null, error)))))), this.guiModeEnabled &&

package/dist/cjs/limebb-lime-query-response-format-editor_2.cjs.entry.js

@@ -163,7 +163,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:1rem;padding:1rem}.header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.header h4{margin:0;font-size:1rem;font-weight:600;color:rgb(var(--contrast-1000))}.property-list{display:flex;flex-direction:column;gap:1rem;padding:0.5rem;border:1px solid rgb(var(--contrast-300));border-radius:0.25rem;background-color:rgb(var(--contrast-50));min-height:4rem}.property-item{padding:0.5rem;border-radius:0.25rem;transition:background-color 0.2s}.property-item:hover{background-color:rgb(var(--contrast-100))}.actions{display:flex;justify-content:flex-start}.summary{display:flex;justify-content:space-between;align-items:center;padding-top:0.5rem;border-top:1px solid rgb(var(--contrast-300))}.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;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 LimebbLimeQueryResponseFormatEditorStyle0 = responseFormatEditorCss;
 
 const ResponseFormatEditor = class {
@@ -230,7 +230,7 @@ const ResponseFormatEditor = class {
         if (!this.limetype) {
             return (index.h("div", { class: "empty-state" }, index.h("p", null, "Select a limetype to choose properties")));
         }
-        return (index.h("div", { class: "response-format-editor" }, index.h("div", { class: "header" }, index.h("h4", null, this.label)), index.h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index))), index.h("div", { class: "actions" }, index.h("limel-button", { label: "Add Property", icon: "plus_math", onClick: this.handleAddProperty })), index.h("div", { class: "summary" }, index.h("span", { class: "count" }, this.items.length, ' ', this.items.length === 1 ? 'property' : 'properties', ' ', "selected"))));
+        return (index.h("div", { class: "response-format-editor" }, index.h("h4", { class: "header" }, this.label), index.h("div", { class: "summary" }, index.h("span", { class: "count" }, "(", this.items.length, ' ', this.items.length === 1 ? 'property' : 'properties', ' ', "selected)")), index.h("div", { class: "property" }, index.h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index))), index.h("div", { class: "actions" }, index.h("limel-button", { label: "Add Property", icon: "plus_math", onClick: this.handleAddProperty })))));
     }
     renderItem(item, index$1) {
         return (index.h("limebb-lime-query-response-format-item", { key: `${item.path}-${index$1}`, class: "property-item", platform: this.platform, context: this.context, limetype: this.limetype, item: item, onItemChange: this.handleItemChange(index$1) }));
@@ -245,7 +245,7 @@ const ResponseFormatEditor = class {
 };
 ResponseFormatEditor.style = LimebbLimeQueryResponseFormatEditorStyle0;
 
-const responseFormatItemCss = ":host(limebb-lime-query-response-format-item){display:flex;flex-direction:column;gap:0.5rem;width:100%}.property-controls{display:flex;flex-direction:row;align-items:flex-start;gap:0.5rem;width:100%}.property-path{flex-grow:1;min-width:min(20rem, 100%)}.control-buttons{flex-shrink:0;display:flex;flex-direction:row;gap:0.25rem;align-items:center;padding-top:0.5rem}.control-buttons limel-icon-button{opacity:0.6;transition:opacity 0.2s ease}.control-buttons limel-icon-button:hover{opacity:1}.control-buttons limel-icon-button.has-value{opacity:1;color:rgb(var(--color-blue-default))}.alias,.description{padding-left:1.5rem;width:calc(100% - 1.5rem);max-width:40rem}@media (max-width: 768px){.property-controls{flex-direction:column;gap:0.5rem}.control-buttons{padding-top:0}.alias,.description{padding-left:0;width:100%}}";
+const responseFormatItemCss = ":host(limebb-lime-query-response-format-item){display:flex;flex-direction:column;gap:0.5rem}.property-controls{display:flex;flex-wrap:wrap;gap:0.5rem;width:100%}.property-path{flex-grow:1;min-width:min(10rem, 100%)}.control-buttons{flex-shrink:0;display:flex;flex-direction:row;gap:0.25rem;align-items:center}.control-buttons limel-icon-button{opacity:0.6;transition:opacity 0.2s ease}.control-buttons limel-icon-button:hover{opacity:1}.control-buttons limel-icon-button.has-value{opacity:1;color:rgb(var(--color-blue-default))}.alias,.description{padding-left:1rem;width:calc(100% - 8.75rem)}@media (max-width: 768px){.property-controls{flex-direction:column;gap:0.5rem}.alias,.description{padding-left:0;width:100%}}";
 const LimebbLimeQueryResponseFormatItemStyle0 = responseFormatItemCss;
 
 const ResponseFormatItem = class {
@@ -310,11 +310,33 @@ const ResponseFormatItem = class {
     }
     render() {
         return [
-            index.h("div", { key: 'e804c4feb61b44aeb2f141c5b5d3269a76ac9320', class: "property-controls" }, index.h("div", { key: 'becbf35e823b8b16df5366c099b98ce6566d514a', class: "property-path" }, index.h("limebb-property-selector", { key: '2b35ccefecb9dbd4d2c418566482d9903a1c0d02', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: this.item.path, required: true, onChange: this.handlePathChange })), index.h("div", { key: '1e598bbbb6df1c5e93bd4ae5f6b112a745a68df9', class: "control-buttons" }, index.h("limel-icon-button", { key: 'da7ec3bf553900c96149f2d762c2d40ab97d2fbd', icon: "add_tag", label: "Add alias", class: this.item.alias ? 'has-value' : '', onClick: this.toggleAliasInput }), index.h("limel-icon-button", { key: '3936855dd72388fc581770f561be809b4ebc0267', icon: "comments", label: "Add description", class: this.item.description ? 'has-value' : '', onClick: this.toggleDescriptionInput }), index.h("limel-icon-button", { key: '221a2f7399c7c781a583bc344c273f03ae181efb', icon: "trash", label: "Remove property", onClick: this.handleRemove }))),
-            this.showAliasInput && (index.h("div", { key: 'ddd9a21a4a83a3e8fd7d41b13c293746cf5467ae', class: "alias" }, index.h("limel-input-field", { key: '1c2ec668aa6d864897a57f8aebaf8b60012addb5', label: "Alias", value: this.item.alias || '', placeholder: "Custom property name...", onChange: this.handleAliasChange, onBlur: this.handleAliasBlur }))),
-            this.showDescriptionInput && (index.h("div", { key: 'e989a6293fb50b760e6e7e46a650f27cd44722ba', class: "description" }, index.h("limel-input-field", { key: '201e61a233a14d832fe450322e782d947ff7187a', label: "Description", value: this.item.description || '', placeholder: "Describe this property for AI...", onChange: this.handleDescriptionChange, onBlur: this.handleDescriptionBlur }))),
+            index.h("div", { key: 'e804c4feb61b44aeb2f141c5b5d3269a76ac9320', class: "property-controls" }, index.h("div", { key: 'becbf35e823b8b16df5366c099b98ce6566d514a', class: "property-path" }, index.h("limebb-property-selector", { key: '2b35ccefecb9dbd4d2c418566482d9903a1c0d02', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: this.item.path, required: true, onChange: this.handlePathChange })), index.h("div", { key: '1e598bbbb6df1c5e93bd4ae5f6b112a745a68df9', class: "control-buttons" }, index.h("limel-icon-button", { key: '51d3dfaa9f3578802abf6f65ec876535740ae6a5', icon: this.getAliasIcon(), label: "Add alias", class: this.item.alias ? 'has-value' : '', onClick: this.toggleAliasInput }), index.h("limel-icon-button", { key: 'b2f6050b01d810cc20093e87a09452c625cd7847', icon: this.getDescriptionIcon(), label: "Add description", class: this.item.description ? 'has-value' : '', onClick: this.toggleDescriptionInput }), index.h("limel-icon-button", { key: 'cd58b575c383555db343ebe4a22392c51346751e', icon: "trash", label: "Remove property", onClick: this.handleRemove }))),
+            this.showAliasInput && (index.h("div", { key: 'cd95aa0e34945eb9da88e4be4e4c2326c41ec090', class: "alias" }, index.h("limel-input-field", { key: 'f62646327adfb8fcd3f0f2aa3a5325ad8a3bfcc3', label: "Alias", value: this.item.alias || '', placeholder: "Custom property name...", onChange: this.handleAliasChange, onBlur: this.handleAliasBlur }))),
+            this.showDescriptionInput && (index.h("div", { key: 'b00f9859a80df3aacf3f524fc1451473e5fcdf5a', class: "description" }, index.h("limel-input-field", { key: '044485f6a35f84816e7458a08882a40aaeacf2f4', label: "Description", value: this.item.description || '', placeholder: "Describe this property for AI...", onChange: this.handleDescriptionChange, onBlur: this.handleDescriptionBlur }))),
         ];
     }
+    getAliasIcon() {
+        const defaultIcon = {
+            name: 'add_tag',
+            color: 'rgb(var(--color-gray-600))',
+        };
+        const toggledIcon = {
+            name: 'add_tag',
+            color: 'rgb(var(--color-teal-default))',
+        };
+        return this.showAliasInput ? toggledIcon : defaultIcon;
+    }
+    getDescriptionIcon() {
+        const defaultIcon = {
+            name: 'comments',
+            color: 'rgb(var(--color-gray-600))',
+        };
+        const toggledIcon = {
+            name: 'comments',
+            color: 'rgb(var(--color-teal-default))',
+        };
+        return this.showDescriptionInput ? toggledIcon : defaultIcon;
+    }
 };
 ResponseFormatItem.style = LimebbLimeQueryResponseFormatItemStyle0;
 

package/dist/cjs/limebb-property-selector.cjs.entry.js

@@ -107,6 +107,15 @@ const PropertySelector = class {
             }
         };
     }
+    componentWillLoad() {
+        const language = this.platform
+            .get(index_esm.c.Application)
+            .getLanguage();
+        this.collator = new Intl.Collator(language, {
+            numeric: true,
+            sensitivity: 'base',
+        });
+    }
     render() {
         if (!this.limetype || !this.limetypes) {
             return null;
@@ -166,6 +175,8 @@ const PropertySelector = class {
                 items: items,
             });
         }
+        // Sort properties alphabetically by display text
+        results.sort((a, b) => { var _a, _b; return this.collator.compare((_a = a.text) !== null && _a !== void 0 ? _a : '', (_b = b.text) !== null && _b !== void 0 ? _b : ''); });
         if (results.length === 0) {
             return [
                 {

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

@@ -2,4 +2,12 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+}
+
+limel-button {
+  width: 100%;
+}
+
+.query-options-section {
+  margin-top: 1rem;
 }

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

@@ -113,14 +113,15 @@
   background-color: rgb(var(--contrast-200));
 }
 .expression > ul {
+  list-style: none;
   margin-top: 0;
   margin-right: 1rem;
   margin-bottom: 1rem;
-  margin-left: 1rem;
   padding-left: 1rem;
   list-style: disc;
 }
 .expression > ul li {
+  list-style: none;
   margin-top: 1rem;
 }
 .expression > ul li.add-button {

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

@@ -1,4 +1,5 @@
 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";
 /**
  * Lime Query Filter Group Component
@@ -20,6 +21,9 @@ 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.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);
@@ -44,7 +48,28 @@ export class LimeQueryFilterGroupComponent {
     }
     render() {
         const subheading = this.getSubheading();
-        return (h("div", { key: 'bf26300a939b4a2a1b401fa7a81593ec745a2a52', class: "expression" }, subheading && (h("limel-header", { key: 'f5152a2ca09811540b626965f52f5793e6c99728', subheading: subheading, onClick: this.handleToggleOperator, class: "clickable-header" })), h("ul", { key: 'c4cad750e47e0b6c94d6a76b2a4d8b72e36b3402' }, this.expression.exp.map(this.renderChildExpression), h("li", { key: 'ddd614f237a0c0314c2977b74a31b365f3251f9d', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
+        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()))));
+    }
+    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)));
     }
     getSubheading() {
         return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);

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

@@ -6,29 +6,16 @@
 .lime-query-builder {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
+  padding: 1rem;
 }
 
 .mode-controls {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  justify-content: flex-end;
   padding: 0.5rem;
 }
 
-.mode-switch {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.mode-switch limel-button {
-  min-width: 5rem;
-}
-.mode-switch limel-helper-text {
-  margin-left: 1rem;
-  color: rgb(var(--color-red-default));
-}
-
 .gui-mode,
 .code-mode {
   display: block;
@@ -98,6 +85,7 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  padding-top: 1rem;
 }
 
 .section-label {

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

@@ -80,33 +80,33 @@ export class LimeQueryBuilder {
             this.orderBy = event.detail;
             this.emitChange();
         };
-        this.switchToGui = () => {
-            // Validate JSON before switching
-            try {
-                const parsed = JSON.parse(this.codeValue);
-                // Check if it's supported in GUI
-                const support = this.checkGuiSupport();
-                if (!support.guiSupported) {
-                    // Don't switch if GUI can't render this query
-                    return;
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            const mode = event.detail.id;
+            if (mode === 'gui') {
+                try {
+                    const parsed = JSON.parse(this.codeValue);
+                    const support = this.checkGuiSupport();
+                    if (!support.guiSupported) {
+                        return;
+                    }
+                    this.limetype = parsed.limetype || '';
+                    this.filter = parsed.filter;
+                    this.internalResponseFormat = parsed.responseFormat;
+                    this.limit = parsed.limit;
+                    this.orderBy = parsed.orderBy;
+                    this.mode = 'gui';
+                    this.change.emit(parsed);
+                }
+                catch (_a) {
+                    // Don't switch if JSON is invalid
                 }
-                // Update internal state from parsed query
-                this.limetype = parsed.limetype || '';
-                this.filter = parsed.filter;
-                this.internalResponseFormat = parsed.responseFormat;
-                this.limit = parsed.limit;
-                this.orderBy = parsed.orderBy;
-                this.mode = 'gui';
-                this.change.emit(parsed);
             }
-            catch (_a) {
-                // Don't switch if JSON is invalid (linter will show the error)
+            else if (mode === 'code') {
+                this.updateCodeValue();
+                this.mode = 'code';
             }
         };
-        this.switchToCode = () => {
-            this.updateCodeValue();
-            this.mode = 'code';
-        };
         this.handleCodeChange = (event) => {
             event.stopPropagation();
             this.codeValue = event.detail;
@@ -120,6 +120,16 @@ export class LimeQueryBuilder {
             }
         };
     }
+    // Buttons are generated dynamically in renderModeSwitch to allow disabling
+    getButtons() {
+        return [
+            {
+                id: 'gui',
+                title: 'Visual',
+            },
+            { id: 'code', title: 'Code' },
+        ];
+    }
     get guiModeEnabled() {
         var _a, _b, _c;
         return ((_c = (_b = (_a = this.platform) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled) === null || _b === void 0 ? void 0 : _b.call(_a, 'useLimeQueryBuilderGuiMode')) !== null && _c !== void 0 ? _c : false);
@@ -150,7 +160,7 @@ export class LimeQueryBuilder {
     render() {
         const guiSupported = this.checkGuiSupport();
         const showCodeMode = !this.guiModeEnabled || this.mode === 'code';
-        return (h("div", { key: 'f51ae0459c1c7f482f3a790abb4cc3bd60b83e70', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
+        return (h("div", { key: '5e9c8bb860cf348b08272831bc2e252752fad24d', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
             ? this.renderCodeMode(guiSupported)
             : this.renderGuiMode()));
     }
@@ -245,7 +255,8 @@ export class LimeQueryBuilder {
     }
     renderModeSwitch(support) {
         const guiDisabled = !support.guiSupported;
-        return (h("div", { class: "mode-switch" }, h("limel-button", { label: "GUI", primary: this.mode === 'gui', disabled: guiDisabled, onClick: this.switchToGui }), h("limel-button", { label: "Code", primary: this.mode === 'code', onClick: this.switchToCode })));
+        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 }));
     }
     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 &&

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

@@ -6,7 +6,6 @@
 .response-format-builder {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
 }
 
 .builder-label {
@@ -18,20 +17,10 @@
 
 .mode-controls {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  justify-content: flex-end;
   padding: 0.5rem;
 }
 
-.mode-switch {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.mode-switch limel-button {
-  min-width: 5rem;
-}
-
 .gui-mode,
 .code-mode {
   display: block;
@@ -82,10 +71,4 @@
 }
 .code-editor-container .gui-limitations li {
   margin: 0.25rem 0;
-}
-
-@media (max-width: 768px) {
-  .response-format-builder {
-    gap: 1rem;
-  }
 }