@limetech/lime-crm-building-blocks 1.100.1 → 1.102.0

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

@@ -1,419 +1,18 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { Z as Zt, T as Te } from './index.esm.js';
-import { g as getNormalizedProperties, a as getPropertyFromPath, d as defineCustomElement$4 } from './property-selector.js';
-import { d as defineCustomElement$b } from './lime-query-filter-builder.js';
-import { d as defineCustomElement$a } from './lime-query-filter-comparison.js';
-import { d as defineCustomElement$7, a as defineCustomElement$8, b as defineCustomElement$9 } from './lime-query-filter-expression.js';
-import { d as defineCustomElement$6 } from './lime-query-value-input.js';
-import { d as defineCustomElement$5 } from './limetype-field.js';
-import { d as defineCustomElement$3 } from './response-format-editor.js';
-import { d as defineCustomElement$2 } from './response-format-item.js';
+import { T as Te } from './index.esm.js';
+import { i as isLimeQuerySupported } from './lime-query-validation.js';
+import { d as defineCustomElement$d } from './lime-query-filter-builder.js';
+import { d as defineCustomElement$c } from './lime-query-filter-comparison.js';
+import { d as defineCustomElement$9, a as defineCustomElement$a, b as defineCustomElement$b } from './lime-query-filter-expression.js';
+import { d as defineCustomElement$8 } from './order-by-editor.js';
+import { d as defineCustomElement$7 } from './order-by-item.js';
+import { d as defineCustomElement$6 } from './response-format-editor.js';
+import { d as defineCustomElement$5 } from './response-format-item.js';
+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';
 
-/**
- * Dynamic filter values and placeholders that are valid in Lime Query
- */
-const VALID_DYNAMIC_VALUES = new Set([
-    // Temporal
-    '$yesterday',
-    '$now',
-    '$today',
-    '$tomorrow',
-    // Ranges
-    '$this_week',
-    '$this_month',
-    '$this_quarter',
-    '$this_year',
-]);
-/**
- * Pattern for relative date functions: $previous_day(x), $next_month(x), etc.
- */
-const RELATIVE_DATE_PATTERN = /^\$(previous|next)_(day|week|month|quarter|year)\(\d+\)$/;
-/**
- * Pattern for user context variables: $me, $me.office.name, etc.
- */
-const USER_CONTEXT_PATTERN = /^\$me(\.\w+)*$/;
-/**
- * Check if a value is a valid dynamic value or placeholder
- * @param value
- */
-function isValidDynamicValue(value) {
-    if (typeof value !== 'string') {
-        return false;
-    }
-    return (VALID_DYNAMIC_VALUES.has(value) ||
-        RELATIVE_DATE_PATTERN.test(value) ||
-        USER_CONTEXT_PATTERN.test(value));
-}
-/**
- * Validate a placeholder value
- * @param value The value to check (might be a placeholder)
- * @param activeLimetype The limetype of the active object
- * @param limetypes Record of all available limetypes
- * @returns Validation result with error message if invalid
- */
-function validatePlaceholder(value, activeLimetype, limetypes) {
-    // Check if it's a valid dynamic value ($today, $me, etc.)
-    if (isValidDynamicValue(value)) {
-        return { valid: true };
-    }
-    // Not a placeholder, no validation needed
-    if (typeof value !== 'string' || !value.startsWith('%activeObject%')) {
-        return { valid: true };
-    }
-    // Placeholder used but no active limetype specified
-    // This is always valid - activeLimetype is optional and only used for validation
-    if (!activeLimetype) {
-        return { valid: true };
-    }
-    // Extract property path from placeholder
-    const propertyPath = value.replace(/^%activeObject%\.?/, '');
-    // %activeObject% without property path is valid (references the ID)
-    if (!propertyPath) {
-        return { valid: true };
-    }
-    // Validate the property path exists on the active limetype
-    try {
-        const property = getPropertyFromPath(limetypes, activeLimetype, propertyPath);
-        if (!property) {
-            return {
-                valid: false,
-                error: `Property path '${propertyPath}' does not exist on limetype '${activeLimetype}'`,
-            };
-        }
-        // Path validation is already done by getPropertyFromPath
-        // If we can traverse the path successfully, it means all intermediate
-        // properties are valid single relations (belongsTo/hasOne).
-        // hasMany relations cannot be traversed in paths.
-        return { valid: true };
-    }
-    catch (error) {
-        return {
-            valid: false,
-            error: `Invalid placeholder path: ${error.message}`,
-        };
-    }
-}
-/**
- * Validate a response format against limetype schemas
- * Throws errors for invalid property references
- * Returns GUI limitations for features not yet supported in GUI
- * @param responseFormat
- * @param limetypes Record of all available limetypes
- * @param limetype The root limetype for this query
- * @param guiModeEnabled Whether GUI mode is enabled
- * @returns GUI limitations found (if any)
- */
-function validateResponseFormat(responseFormat, limetypes, limetype, guiModeEnabled = true) {
-    const guiLimitations = [];
-    // Check for GUI-unsupported features
-    if (guiModeEnabled && responseFormat.aggregates) {
-        guiLimitations.push('responseFormat.aggregates is not yet supported in GUI mode');
-    }
-    // Validate object properties (throws on invalid properties)
-    if (responseFormat.object) {
-        const objectLimitations = validatePropertySelection(responseFormat.object, limetypes, limetype, guiModeEnabled);
-        guiLimitations.push(...objectLimitations);
-    }
-    return guiLimitations;
-}
-/**
- * Extract non-metadata keys from a property value object
- * Filters out _alias and all # properties (which are treated as comments)
- * @param propValue Property value object
- * @param propName Property name (for error messages)
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns Object with non-metadata keys and any GUI limitations found
- */
-function extractNonMetadataKeys(propValue, propName, guiModeEnabled = true) {
-    const keys = Object.keys(propValue);
-    const guiLimitations = [];
-    // Check for # properties other than #description (GUI limitation)
-    if (guiModeEnabled) {
-        const unsupportedHashProps = keys.filter((k) => k.startsWith('#') && k !== '#description');
-        if (unsupportedHashProps.length > 0) {
-            guiLimitations.push(`Property '${propName}' contains # properties not supported in GUI: ${unsupportedHashProps.join(', ')}`);
-        }
-    }
-    // Filter out _alias and all # properties (they are metadata/comments)
-    const nonMetadataKeys = keys.filter((k) => k !== '_alias' && !k.startsWith('#'));
-    return { keys: nonMetadataKeys, guiLimitations };
-}
-/**
- * Validate a relation property value
- * @param propName Property name
- * @param propValue Property value
- * @param limetypes Record of all available limetypes
- * @param property
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns GUI limitations found (if any)
- */
-function validateRelationProperty(propName, propValue, limetypes, property, guiModeEnabled = true) {
-    // null is valid - just return the relation ID
-    if (propValue === null) {
-        return [];
-    }
-    if (typeof propValue !== 'object') {
-        throw new TypeError(`Relation property '${propName}' must be null or an object`);
-    }
-    const propValueObj = propValue;
-    const { keys: otherKeys, guiLimitations } = extractNonMetadataKeys(propValueObj, propName, guiModeEnabled);
-    // If it's just {} or { _alias: "...", "#...": "..." }, that's valid
-    if (otherKeys.length === 0) {
-        return guiLimitations;
-    }
-    // Otherwise, validate nested properties
-    const relatedLimetype = property.relation.getLimetype();
-    if (!relatedLimetype) {
-        throw new Error(`Could not determine related limetype for property '${propName}'`);
-    }
-    // Build a clean PropertySelection without metadata for recursive validation
-    const cleanSelection = {};
-    for (const key of otherKeys) {
-        cleanSelection[key] = propValueObj[key];
-    }
-    const nestedLimitations = validatePropertySelection(cleanSelection, limetypes, relatedLimetype.name, guiModeEnabled);
-    return [...guiLimitations, ...nestedLimitations];
-}
-/**
- * Validate a non-relation property value
- * @param propName Property name
- * @param propValue Property value
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns GUI limitations found (if any)
- */
-function validateNonRelationProperty(propName, propValue, guiModeEnabled = true) {
-    // null is valid
-    if (propValue === null) {
-        return [];
-    }
-    // Allow empty object {} or object with only metadata (_alias, #...)
-    if (typeof propValue === 'object') {
-        const { keys: nonMetadataKeys, guiLimitations } = extractNonMetadataKeys(propValue, propName, guiModeEnabled);
-        if (nonMetadataKeys.length === 0) {
-            // {} or { _alias: "...", "#...": "..." } is valid
-            return guiLimitations;
-        }
-        throw new Error(`Non-relation property '${propName}' cannot have nested properties other than _alias or # properties (got: ${nonMetadataKeys.join(', ')})`);
-    }
-    throw new Error(`Non-relation property '${propName}' must be null or an object (got ${typeof propValue})`);
-}
-/**
- * Validate a single property entry
- * @param propName Property name
- * @param propValue Property value
- * @param normalizedProperties Normalized properties of the limetype
- * @param limetypes Record of all available limetypes
- * @param limetype Current limetype name
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns GUI limitations found (if any)
- */
-function validateSinglePropertyEntry(propName, propValue, normalizedProperties, limetypes, limetype, guiModeEnabled = true) {
-    // Allow empty string (editing state in GUI)
-    if (propName === '') {
-        // Only validate empty property name in GUI mode
-        if (guiModeEnabled && propValue !== null) {
-            throw new Error('Empty property name must have null value');
-        }
-        return [];
-    }
-    // Validate property exists on limetype
-    const property = normalizedProperties[propName];
-    if (!property) {
-        throw new Error(`Property '${propName}' does not exist on limetype '${limetype}'`);
-    }
-    // Validate value based on property type
-    if (property.relation) {
-        return validateRelationProperty(propName, propValue, limetypes, property, guiModeEnabled);
-    }
-    else {
-        return validateNonRelationProperty(propName, propValue, guiModeEnabled);
-    }
-}
-/**
- * Validate a property selection object against a limetype schema
- * Recursively validates nested property selections for relations
- * @param selection
- * @param limetypes Record of all available limetypes
- * @param limetype The limetype for this level of the selection
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns GUI limitations found (if any)
- */
-function validatePropertySelection(selection, limetypes, limetype, guiModeEnabled = true) {
-    const limetypeObj = limetypes[limetype];
-    if (!limetypeObj) {
-        throw new Error(`Unknown limetype: ${limetype}`);
-    }
-    const normalizedProperties = getNormalizedProperties(limetypeObj);
-    const allGuiLimitations = [];
-    for (const [propName, propValue] of Object.entries(selection)) {
-        // Skip # properties (comments/metadata that backend accepts via unknown=INCLUDE)
-        // Note: _alias only appears inside property value objects, not at this level
-        if (propName.startsWith('#')) {
-            continue;
-        }
-        const limitations = validateSinglePropertyEntry(propName, propValue, normalizedProperties, limetypes, limetype, guiModeEnabled);
-        allGuiLimitations.push(...limitations);
-    }
-    return allGuiLimitations;
-}
-/**
- * Validate a comparison expression (has 'key' property)
- * @param filter
- * @param activeLimetype
- * @param limetypes
- */
-function validateComparisonExpression(filter, activeLimetype, limetypes) {
-    // Validate operator
-    const allValidOperators = Object.values(Zt);
-    if (!allValidOperators.includes(filter.op)) {
-        throw new Error(`Unsupported filter operator: ${filter.op}`);
-    }
-    // Validate placeholder
-    const result = validatePlaceholder(filter.exp, activeLimetype, limetypes);
-    if (!result.valid) {
-        throw new Error(`Invalid placeholder in filter '${filter.key}': ${result.error}`);
-    }
-}
-/**
- * Validate a group expression (AND/OR/NOT)
- * @param filter
- * @param activeLimetype
- * @param limetypes
- * @param guiModeEnabled
- */
-function validateGroupExpression(filter, activeLimetype, limetypes, guiModeEnabled) {
-    // Validate operator
-    if (filter.op !== Zt.AND &&
-        filter.op !== Zt.OR &&
-        filter.op !== Zt.NOT) {
-        throw new Error(`Unsupported group operator: ${filter.op}`);
-    }
-    // Recursively validate children
-    if (filter.op === Zt.NOT) {
-        validateFilterPlaceholders(filter.exp, activeLimetype, limetypes, guiModeEnabled);
-    }
-    else if (filter.op === Zt.AND || filter.op === Zt.OR) {
-        const expressions = filter.exp;
-        for (const expr of expressions) {
-            validateFilterPlaceholders(expr, activeLimetype, limetypes, guiModeEnabled);
-        }
-    }
-}
-/**
- * Validate placeholders in a filter expression
- * @param filter Filter expression to validate
- * @param activeLimetype The limetype of the active object
- * @param limetypes Record of all available limetypes
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- */
-function validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEnabled = true) {
-    if (!filter) {
-        return;
-    }
-    if ('key' in filter) {
-        validateComparisonExpression(filter, activeLimetype, limetypes);
-        return;
-    }
-    if ('exp' in filter) {
-        validateGroupExpression(filter, activeLimetype, limetypes, guiModeEnabled);
-    }
-}
-/**
- * Validate Lime Query filter and collect errors
- * @param filter The filter expression or group to validate
- * @param activeLimetype Optional active object limetype for placeholder validation
- * @param limetypes Record of all available limetypes
- * @param guiModeEnabled Whether GUI mode is enabled
- * @returns Array of validation error messages
- */
-function validateLimeQueryFilterInternal(filter, activeLimetype, limetypes, guiModeEnabled) {
-    const errors = [];
-    try {
-        validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEnabled);
-    }
-    catch (error) {
-        errors.push(`Invalid filter: ${error.message}`);
-    }
-    return errors;
-}
-/**
- * Validate Lime Query response format and collect errors/limitations
- * @param responseFormat The response format to validate
- * @param limetypes Record of all available limetypes
- * @param limetype The limetype for this Lime Query
- * @param guiModeEnabled Whether GUI mode is enabled
- * @returns Object with validation errors and GUI limitations
- */
-function validateLimeQueryResponseFormatInternal(responseFormat, limetypes, limetype, guiModeEnabled) {
-    const errors = [];
-    const limitations = [];
-    try {
-        const formatLimitations = validateResponseFormat(responseFormat, limetypes, limetype, guiModeEnabled);
-        limitations.push(...formatLimitations);
-    }
-    catch (error) {
-        errors.push(`Invalid responseFormat: ${error.message}`);
-    }
-    return { errors, limitations };
-}
-/**
- * Validate a Lime Query
- * Returns validation result with separate arrays for validity errors and GUI limitations
- * @param limeQuery The Lime Query to validate
- * @param limetypes Record of all available limetypes
- * @param activeLimetype Optional active object limetype for placeholder validation
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns LimeQueryValidationResult with validity status and any errors/limitations
- */
-function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiModeEnabled = true) {
-    // Handle empty/undefined Lime Query
-    if (!limeQuery) {
-        return {
-            valid: true,
-            guiSupported: true,
-            validationErrors: [],
-            guiLimitations: [],
-        };
-    }
-    const validationErrors = [];
-    const guiLimitations = [];
-    // Validate limetype exists
-    if (limeQuery.limetype && !limetypes[limeQuery.limetype]) {
-        validationErrors.push(`Unknown limetype: ${limeQuery.limetype}`);
-    }
-    // Check for offset without orderBy (Lime Query requirement)
-    if (limeQuery.offset !== undefined && !limeQuery.orderBy) {
-        validationErrors.push('offset requires orderBy to be specified');
-    }
-    // Check for GUI-unsupported top-level properties
-    if (guiModeEnabled) {
-        if (limeQuery.orderBy) {
-            guiLimitations.push('orderBy is not yet supported in GUI mode');
-        }
-        if (limeQuery.offset !== undefined) {
-            guiLimitations.push('offset is not yet supported in GUI mode');
-        }
-    }
-    // Validate filter
-    if (limeQuery.filter) {
-        const filterErrors = validateLimeQueryFilterInternal(limeQuery.filter, activeLimetype, limetypes, guiModeEnabled);
-        validationErrors.push(...filterErrors);
-    }
-    // Validate responseFormat
-    if (limeQuery.responseFormat) {
-        const { errors, limitations } = validateLimeQueryResponseFormatInternal(limeQuery.responseFormat, limetypes, limeQuery.limetype, guiModeEnabled);
-        validationErrors.push(...errors);
-        guiLimitations.push(...limitations);
-    }
-    return {
-        valid: validationErrors.length === 0,
-        guiSupported: guiLimitations.length === 0,
-        validationErrors,
-        guiLimitations,
-    };
-}
-
-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:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1rem}@media (max-width: 768px){.lime-query-builder{gap:1.5rem}.query-options-controls{grid-template-columns:1fr}}";
+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 LimebbLimeQueryBuilderStyle0 = limeQueryBuilderCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -465,6 +64,11 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
             this.limit = value ? Number.parseInt(value, 10) : undefined;
             this.emitChange();
         };
+        this.handleOrderByChange = (event) => {
+            event.stopPropagation();
+            this.orderBy = event.detail;
+            this.emitChange();
+        };
         this.switchToGui = () => {
             // Validate JSON before switching
             try {
@@ -480,6 +84,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
                 this.filter = parsed.filter;
                 this.internalResponseFormat = parsed.responseFormat;
                 this.limit = parsed.limit;
+                this.orderBy = parsed.orderBy;
                 this.mode = 'gui';
                 this.change.emit(parsed);
             }
@@ -521,6 +126,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
             this.filter = this.value.filter;
             this.internalResponseFormat = this.value.responseFormat;
             this.limit = this.value.limit;
+            this.orderBy = this.value.orderBy;
         }
         // Initialize code value from prop
         this.updateCodeValue();
@@ -533,7 +139,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
     render() {
         const guiSupported = this.checkGuiSupport();
         const showCodeMode = !this.guiModeEnabled || this.mode === 'code';
-        return (h("div", { key: '0b4d2bb5b4d503a775d8d3215e1e4c74fdb1eceb', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
+        return (h("div", { key: 'f51ae0459c1c7f482f3a790abb4cc3bd60b83e70', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
             ? this.renderCodeMode(guiSupported)
             : this.renderGuiMode()));
     }
@@ -545,27 +151,16 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         if (!this.limetype) {
             return;
         }
-        // Use internal state, then default to returning just _id
-        const responseFormat = this.internalResponseFormat || {
-            object: {
-                _id: null,
-            },
-        };
-        const limeQuery = {
-            limetype: this.limetype,
-            responseFormat: responseFormat,
-            filter: this.filter,
-        };
-        if (this.limit !== undefined && this.limit > 0) {
-            limeQuery.limit = this.limit;
-        }
-        this.change.emit(limeQuery);
+        this.change.emit(this.buildLimeQuery());
     }
     updateCodeValue() {
         if (!this.limetype) {
             this.codeValue = JSON.stringify(this.value || {}, null, 2);
             return;
         }
+        this.codeValue = JSON.stringify(this.buildLimeQuery(), null, 2);
+    }
+    buildLimeQuery() {
         // Use internal state, then default to returning just _id
         const responseFormat = this.internalResponseFormat || {
             object: {
@@ -580,7 +175,10 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         if (this.limit !== undefined && this.limit > 0) {
             limeQuery.limit = this.limit;
         }
-        this.codeValue = JSON.stringify(limeQuery, null, 2);
+        if (this.orderBy && this.orderBy.length > 0) {
+            limeQuery.orderBy = this.orderBy;
+        }
+        return limeQuery;
     }
     checkGuiSupport() {
         if (!this.limetypes) {
@@ -652,7 +250,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         if (!this.limetype) {
             return;
         }
-        return (h("div", { class: "response-format-section" }, h("limebb-response-format-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.internalResponseFormat, onChange: this.handleResponseFormatChange })));
+        return (h("div", { class: "response-format-section" }, h("limebb-lime-query-response-format-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.internalResponseFormat, onChange: this.handleResponseFormatChange })));
     }
     renderFilterSection() {
         if (!this.limetype) {
@@ -665,7 +263,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         if (!this.limetype) {
             return;
         }
-        return (h("div", { class: "query-options-section" }, h("h4", { class: "section-label" }, "Query Options"), h("div", { class: "query-options-controls" }, h("limel-input-field", { label: "Limit", type: "number", value: ((_a = this.limit) === null || _a === void 0 ? void 0 : _a.toString()) || '', placeholder: "No limit", helperText: "Maximum number of results", onChange: this.handleLimitChange }))));
+        return (h("div", { class: "query-options-section" }, h("h4", { class: "section-label" }, "Query Options"), h("div", { class: "query-options-controls" }, h("limel-input-field", { label: "Limit", type: "number", value: ((_a = this.limit) === null || _a === void 0 ? void 0 : _a.toString()) || '', placeholder: "No limit", helperText: "Maximum number of results", onChange: this.handleLimitChange }), h("limebb-lime-query-order-by-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.orderBy, onChange: this.handleOrderByChange }))));
     }
     renderGuiMode() {
         return (h("div", { class: "gui-mode" }, this.renderLimetypeSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
@@ -698,7 +296,8 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         "limetype": [32],
         "filter": [32],
         "internalResponseFormat": [32],
-        "limit": [32]
+        "limit": [32],
+        "orderBy": [32]
     }]);
 __decorate([
     Te()
@@ -707,7 +306,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["limebb-lime-query-builder", "limebb-lime-query-filter-builder", "limebb-lime-query-filter-comparison", "limebb-lime-query-filter-expression", "limebb-lime-query-filter-group", "limebb-lime-query-filter-not", "limebb-lime-query-value-input", "limebb-limetype-field", "limebb-property-selector", "limebb-response-format-editor", "limebb-response-format-item"];
+    const components = ["limebb-lime-query-builder", "limebb-lime-query-filter-builder", "limebb-lime-query-filter-comparison", "limebb-lime-query-filter-expression", "limebb-lime-query-filter-group", "limebb-lime-query-filter-not", "limebb-lime-query-order-by-editor", "limebb-lime-query-order-by-item", "limebb-lime-query-response-format-editor", "limebb-lime-query-response-format-item", "limebb-lime-query-value-input", "limebb-limetype-field", "limebb-property-selector"];
     components.forEach(tagName => { switch (tagName) {
         case "limebb-lime-query-builder":
             if (!customElements.get(tagName)) {
@@ -716,50 +315,60 @@ function defineCustomElement$1() {
             break;
         case "limebb-lime-query-filter-builder":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "limebb-lime-query-filter-comparison":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "limebb-lime-query-filter-expression":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "limebb-lime-query-filter-group":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "limebb-lime-query-filter-not":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "limebb-lime-query-order-by-editor":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "limebb-lime-query-order-by-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "limebb-lime-query-value-input":
+        case "limebb-lime-query-response-format-editor":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "limebb-limetype-field":
+        case "limebb-lime-query-response-format-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "limebb-property-selector":
+        case "limebb-lime-query-value-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "limebb-response-format-editor":
+        case "limebb-limetype-field":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "limebb-response-format-item":
+        case "limebb-property-selector":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/limebb-lime-query-order-by-editor.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbLimeQueryOrderByEditor extends Components.LimebbLimeQueryOrderByEditor, HTMLElement {}
+export const LimebbLimeQueryOrderByEditor: {
+    prototype: LimebbLimeQueryOrderByEditor;
+    new (): LimebbLimeQueryOrderByEditor;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { O as OrderByEditor, d as defineCustomElement$1 } from './order-by-editor.js';
+
+const LimebbLimeQueryOrderByEditor = OrderByEditor;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbLimeQueryOrderByEditor, defineCustomElement };

package/dist/components/limebb-lime-query-order-by-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbLimeQueryOrderByItem extends Components.LimebbLimeQueryOrderByItem, HTMLElement {}
+export const LimebbLimeQueryOrderByItem: {
+    prototype: LimebbLimeQueryOrderByItem;
+    new (): LimebbLimeQueryOrderByItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { O as OrderByItemComponent, d as defineCustomElement$1 } from './order-by-item.js';
+
+const LimebbLimeQueryOrderByItem = OrderByItemComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbLimeQueryOrderByItem, defineCustomElement };

package/dist/components/limebb-lime-query-response-format-builder.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbLimeQueryResponseFormatBuilder extends Components.LimebbLimeQueryResponseFormatBuilder, HTMLElement {}
+export const LimebbLimeQueryResponseFormatBuilder: {
+    prototype: LimebbLimeQueryResponseFormatBuilder;
+    new (): LimebbLimeQueryResponseFormatBuilder;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;