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

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

@@ -1,412 +1,9 @@
 import { r as registerInstance, c as createEvent, h } from './index-96dd111f.js';
-import { Z as Zt, T as Te } from './index.esm-bb569663.js';
-import { g as getNormalizedProperties, a as getPropertyFromPath } from './property-resolution-fde2375e.js';
+import { T as Te } from './index.esm-bb569663.js';
+import { i as isLimeQuerySupported } from './lime-query-validation-573223a5.js';
+import './property-resolution-c21a1369.js';
 
-/**
- * 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) {
@@ -456,6 +53,11 @@ const LimeQueryBuilder = class {
             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 {
@@ -471,6 +73,7 @@ const LimeQueryBuilder = class {
                 this.filter = parsed.filter;
                 this.internalResponseFormat = parsed.responseFormat;
                 this.limit = parsed.limit;
+                this.orderBy = parsed.orderBy;
                 this.mode = 'gui';
                 this.change.emit(parsed);
             }
@@ -512,6 +115,7 @@ const LimeQueryBuilder = class {
             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();
@@ -524,7 +128,7 @@ const LimeQueryBuilder = class {
     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()));
     }
@@ -536,27 +140,16 @@ const LimeQueryBuilder = class {
         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: {
@@ -571,7 +164,10 @@ const LimeQueryBuilder = class {
         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) {
@@ -643,7 +239,7 @@ const LimeQueryBuilder = class {
         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) {
@@ -656,7 +252,7 @@ const LimeQueryBuilder = class {
         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()));