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

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

@@ -51,6 +51,16 @@ export class LimeQueryResponseFormatBuilder {
         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
          */
@@ -140,11 +150,21 @@ export class LimeQueryResponseFormatBuilder {
     }
     render() {
         const guiSupported = this.checkGuiSupport();
-        return (h("div", { key: '2b5e4ee360d6997a176d24e5a7aa36158461ad4a', class: "response-format-builder" }, this.label && h("h3", { key: 'b81f58824e4cf3114efd4d2978c833f7f06f2004', class: "builder-label" }, this.label), this.guiModeEnabled && (h("div", { key: '1b2ec0cd39909568732be94707a9dcadaa4a1223', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (h("div", { class: "gui-mode" }, this.renderGuiMode()))));
+        return (h("div", { key: '8b4116d9e6f1653ec429995647481b1df3df2712', class: "response-format-builder" }, this.label && h("h3", { key: 'd5e532a64f4e735b67b0533b4896165f7862561e', class: "builder-label" }, this.label), this.guiModeEnabled && (h("div", { key: '42af934f90de83855ff81306fe0bdb10c45fa808', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (h("div", { class: "gui-mode" }, this.renderGuiMode()))));
     }
     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 = [
+            {
+                id: 'gui',
+                title: 'Visual',
+            },
+            {
+                id: 'code',
+                title: 'Code',
+            },
+        ].map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
+        return (h("limel-button-group", { value: buttons, disabled: guiDisabled, onChange: this.handleModeChange }));
     }
     renderCodeEditor(support) {
         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 }), !support.valid && support.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Response Format:"), h("ul", null, support.validationErrors.map((error) => (h("li", null, error)))))), this.guiModeEnabled &&

package/dist/collection/components/lime-query-builder/order-by/order-by-editor.css

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 1rem;
+  padding: 1rem 0;
 }
 
 .header {
@@ -27,7 +27,6 @@
   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));
@@ -45,7 +44,7 @@
 
 .actions {
   display: flex;
-  justify-content: flex-start;
+  width: 100%;
 }
 
 .summary {

package/dist/collection/components/lime-query-builder/order-by/order-by-editor.js

@@ -81,7 +81,7 @@ export class OrderByEditor {
         return (h("div", { class: "order-by-list" }, this.items.map((item, index) => this.renderItem(item, index))));
     }
     renderActions() {
-        return (h("div", { class: "actions" }, h("limel-button", { label: "Add Sort Field", icon: "plus_math", onClick: this.handleAddSortField })));
+        return (h("limel-button", { label: "Add Sort Field", icon: "plus_math", onClick: this.handleAddSortField }));
     }
     renderItem(item, index) {
         const propertyPath = Object.keys(item)[0] || '';

package/dist/collection/components/lime-query-builder/order-by/order-by-item.css

@@ -15,7 +15,7 @@
 
 .property-path {
   flex-grow: 1;
-  min-width: min(20rem, 100%);
+  min-width: min(10rem, 100%);
 }
 
 .control-buttons {
@@ -24,7 +24,6 @@
   flex-direction: row;
   gap: 0.25rem;
   align-items: center;
-  padding-top: 0.5rem;
 }
 .control-buttons limel-icon-button {
   opacity: 0.6;
@@ -39,7 +38,4 @@
     flex-direction: column;
     gap: 0.5rem;
   }
-  .control-buttons {
-    padding-top: 0;
-  }
 }

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

@@ -9,7 +9,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from "@stencil/core";
-import { SelectLimeTypes as Limetypes, } from "@limetech/lime-web-components";
+import { PlatformServiceName, SelectLimeTypes as Limetypes, } from "@limetech/lime-web-components";
 import { getPropertyFromPath, getNormalizedProperties, } from "../property-resolution";
 import { getIcon } from "../../../util/limetype";
 /**
@@ -114,6 +114,15 @@ export class PropertySelector {
             }
         };
     }
+    componentWillLoad() {
+        const language = this.platform
+            .get(PlatformServiceName.Application)
+            .getLanguage();
+        this.collator = new Intl.Collator(language, {
+            numeric: true,
+            sensitivity: 'base',
+        });
+    }
     render() {
         if (!this.limetype || !this.limetypes) {
             return null;
@@ -173,6 +182,8 @@ export class PropertySelector {
                 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/response-format/response-format-editor.css

@@ -6,36 +6,31 @@
 .response-format-editor {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
+  gap: 0.5rem;
+  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));
 }
 
+.property {
+  border: 1px solid rgb(var(--contrast-500));
+}
+
 .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;
+  background-color: rgb(var(--contrast-100));
+  gap: 0.5rem;
+  padding: 0.5rem;
 }
 
 .property-item {
-  padding: 0.5rem;
   border-radius: 0.25rem;
   transition: background-color 0.2s;
 }
@@ -45,15 +40,16 @@
 
 .actions {
   display: flex;
-  justify-content: flex-start;
+}
+.actions limel-button {
+  padding: 0.5rem;
+  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;

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

@@ -81,7 +81,7 @@ export class ResponseFormatEditor {
         if (!this.limetype) {
             return (h("div", { class: "empty-state" }, h("p", null, "Select a limetype to choose properties")));
         }
-        return (h("div", { class: "response-format-editor" }, h("div", { class: "header" }, h("h4", null, this.label)), 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 })), h("div", { class: "summary" }, h("span", { class: "count" }, this.items.length, ' ', this.items.length === 1 ? 'property' : 'properties', ' ', "selected"))));
+        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 })))));
     }
     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/collection/components/lime-query-builder/response-format/response-format-item.css

@@ -2,20 +2,18 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  width: 100%;
 }
 
 .property-controls {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-wrap: wrap;
   gap: 0.5rem;
   width: 100%;
 }
 
 .property-path {
   flex-grow: 1;
-  min-width: min(20rem, 100%);
+  min-width: min(10rem, 100%);
 }
 
 .control-buttons {
@@ -24,7 +22,6 @@
   flex-direction: row;
   gap: 0.25rem;
   align-items: center;
-  padding-top: 0.5rem;
 }
 .control-buttons limel-icon-button {
   opacity: 0.6;
@@ -40,9 +37,8 @@
 
 .alias,
 .description {
-  padding-left: 1.5rem;
-  width: calc(100% - 1.5rem);
-  max-width: 40rem;
+  padding-left: 1rem;
+  width: calc(100% - 8.75rem);
 }
 
 @media (max-width: 768px) {
@@ -50,9 +46,6 @@
     flex-direction: column;
     gap: 0.5rem;
   }
-  .control-buttons {
-    padding-top: 0;
-  }
   .alias,
   .description {
     padding-left: 0;

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

@@ -66,11 +66,33 @@ export class ResponseFormatItem {
     }
     render() {
         return [
-            h("div", { key: 'e804c4feb61b44aeb2f141c5b5d3269a76ac9320', class: "property-controls" }, h("div", { key: 'becbf35e823b8b16df5366c099b98ce6566d514a', class: "property-path" }, 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 })), h("div", { key: '1e598bbbb6df1c5e93bd4ae5f6b112a745a68df9', class: "control-buttons" }, h("limel-icon-button", { key: 'da7ec3bf553900c96149f2d762c2d40ab97d2fbd', icon: "add_tag", label: "Add alias", class: this.item.alias ? 'has-value' : '', onClick: this.toggleAliasInput }), h("limel-icon-button", { key: '3936855dd72388fc581770f561be809b4ebc0267', icon: "comments", label: "Add description", class: this.item.description ? 'has-value' : '', onClick: this.toggleDescriptionInput }), h("limel-icon-button", { key: '221a2f7399c7c781a583bc344c273f03ae181efb', icon: "trash", label: "Remove property", onClick: this.handleRemove }))),
-            this.showAliasInput && (h("div", { key: 'ddd9a21a4a83a3e8fd7d41b13c293746cf5467ae', class: "alias" }, h("limel-input-field", { key: '1c2ec668aa6d864897a57f8aebaf8b60012addb5', label: "Alias", value: this.item.alias || '', placeholder: "Custom property name...", onChange: this.handleAliasChange, onBlur: this.handleAliasBlur }))),
-            this.showDescriptionInput && (h("div", { key: 'e989a6293fb50b760e6e7e46a650f27cd44722ba', class: "description" }, h("limel-input-field", { key: '201e61a233a14d832fe450322e782d947ff7187a', label: "Description", value: this.item.description || '', placeholder: "Describe this property for AI...", onChange: this.handleDescriptionChange, onBlur: this.handleDescriptionBlur }))),
+            h("div", { key: 'e804c4feb61b44aeb2f141c5b5d3269a76ac9320', class: "property-controls" }, h("div", { key: 'becbf35e823b8b16df5366c099b98ce6566d514a', class: "property-path" }, 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 })), h("div", { key: '1e598bbbb6df1c5e93bd4ae5f6b112a745a68df9', class: "control-buttons" }, h("limel-icon-button", { key: '51d3dfaa9f3578802abf6f65ec876535740ae6a5', icon: this.getAliasIcon(), label: "Add alias", class: this.item.alias ? 'has-value' : '', onClick: this.toggleAliasInput }), h("limel-icon-button", { key: 'b2f6050b01d810cc20093e87a09452c625cd7847', icon: this.getDescriptionIcon(), label: "Add description", class: this.item.description ? 'has-value' : '', onClick: this.toggleDescriptionInput }), h("limel-icon-button", { key: 'cd58b575c383555db343ebe4a22392c51346751e', icon: "trash", label: "Remove property", onClick: this.handleRemove }))),
+            this.showAliasInput && (h("div", { key: 'cd95aa0e34945eb9da88e4be4e4c2326c41ec090', class: "alias" }, h("limel-input-field", { key: 'f62646327adfb8fcd3f0f2aa3a5325ad8a3bfcc3', label: "Alias", value: this.item.alias || '', placeholder: "Custom property name...", onChange: this.handleAliasChange, onBlur: this.handleAliasBlur }))),
+            this.showDescriptionInput && (h("div", { key: 'b00f9859a80df3aacf3f524fc1451473e5fcdf5a', class: "description" }, 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;
+    }
     static get is() { return "limebb-lime-query-response-format-item"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3, a as defineCustomElement$4, b as defineCust
 import { d as defineCustomElement$2 } from './lime-query-value-input.js';
 import { d as defineCustomElement$1 } from './property-selector.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class LimeQueryFilterBuilderComponent extends HTMLElement {

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

@@ -223,7 +223,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{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 = /*@__PURE__*/ proxyCustomElement(class LimeQueryFilterGroupComponent extends HTMLElement {
@@ -232,6 +232,9 @@ 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.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);
@@ -256,7 +259,28 @@ const LimeQueryFilterGroupComponent = /*@__PURE__*/ proxyCustomElement(class Lim
     }
     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 === 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)',
+            },
+        ];
+    }
+    renderActions() {
+        return (h("div", { class: "actions" }, this.actions.map(this.renderActionButton)));
     }
     getSubheading() {
         return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);

package/dist/components/limebb-lime-query-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: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) {
@@ -69,33 +69,33 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(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;
@@ -109,6 +109,16 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(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);
@@ -139,7 +149,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(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()));
     }
@@ -234,7 +244,8 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(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/components/limebb-lime-query-response-format-builder.js

@@ -66,7 +66,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 = /*@__PURE__*/ proxyCustomElement(class Li
         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 = /*@__PURE__*/ proxyCustomElement(class Li
     }
     render() {
         const guiSupported = this.checkGuiSupport();
-        return (h("div", { key: '2b5e4ee360d6997a176d24e5a7aa36158461ad4a', class: "response-format-builder" }, this.label && h("h3", { key: 'b81f58824e4cf3114efd4d2978c833f7f06f2004', class: "builder-label" }, this.label), this.guiModeEnabled && (h("div", { key: '1b2ec0cd39909568732be94707a9dcadaa4a1223', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (h("div", { class: "gui-mode" }, this.renderGuiMode()))));
+        return (h("div", { key: '8b4116d9e6f1653ec429995647481b1df3df2712', class: "response-format-builder" }, this.label && h("h3", { key: 'd5e532a64f4e735b67b0533b4896165f7862561e', class: "builder-label" }, this.label), this.guiModeEnabled && (h("div", { key: '42af934f90de83855ff81306fe0bdb10c45fa808', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (h("div", { class: "gui-mode" }, this.renderGuiMode()))));
     }
     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 = [
+            {
+                id: 'gui',
+                title: 'Visual',
+            },
+            {
+                id: 'code',
+                title: 'Code',
+            },
+        ].map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
+        return (h("limel-button-group", { value: buttons, disabled: guiDisabled, onChange: this.handleModeChange }));
     }
     renderCodeEditor(support) {
         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 }), !support.valid && support.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Response Format:"), h("ul", null, support.validationErrors.map((error) => (h("li", null, error)))))), this.guiModeEnabled &&

package/dist/components/order-by-editor.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { d as defineCustomElement$2 } from './order-by-item.js';
 import { d as defineCustomElement$1 } from './property-selector.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class OrderByEditor extends HTMLElement {
@@ -73,7 +73,7 @@ const OrderByEditor = /*@__PURE__*/ proxyCustomElement(class OrderByEditor exten
         return (h("div", { class: "order-by-list" }, this.items.map((item, index) => this.renderItem(item, index))));
     }
     renderActions() {
-        return (h("div", { class: "actions" }, h("limel-button", { label: "Add Sort Field", icon: "plus_math", onClick: this.handleAddSortField })));
+        return (h("limel-button", { label: "Add Sort Field", icon: "plus_math", onClick: this.handleAddSortField }));
     }
     renderItem(item, index) {
         const propertyPath = Object.keys(item)[0] || '';

package/dist/components/order-by-item.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './property-selector.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 = /*@__PURE__*/ proxyCustomElement(class OrderByItemComponent extends HTMLElement {

package/dist/components/property-selector.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { T as Te } from './index.esm.js';
+import { T as Te, c } from './index.esm.js';
 import { g as getIcon } from './limetype.js';
 
 /**
@@ -166,6 +166,15 @@ const PropertySelector = /*@__PURE__*/ proxyCustomElement(class PropertySelector
             }
         };
     }
+    componentWillLoad() {
+        const language = this.platform
+            .get(c.Application)
+            .getLanguage();
+        this.collator = new Intl.Collator(language, {
+            numeric: true,
+            sensitivity: 'base',
+        });
+    }
     render() {
         if (!this.limetype || !this.limetypes) {
             return null;
@@ -225,6 +234,8 @@ const PropertySelector = /*@__PURE__*/ proxyCustomElement(class PropertySelector
                 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/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: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 = /*@__PURE__*/ proxyCustomElement(class ResponseFormatEditor extends HTMLElement {
@@ -230,7 +230,7 @@ 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("div", { class: "header" }, h("h4", null, this.label)), 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 })), h("div", { class: "summary" }, h("span", { class: "count" }, this.items.length, ' ', this.items.length === 1 ? 'property' : 'properties', ' ', "selected"))));
+        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 })))));
     }
     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) }));