@limetech/lime-crm-building-blocks 1.100.0 → 1.101.0

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

@@ -1,166 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-96dd111f.js';
-import { T as Te } from './index.esm-bb569663.js';
-import { g as getNormalizedProperties, a as getPropertyFromPath } from './property-resolution-fde2375e.js';
-
-/**
- * TypeScript type definitions for Lime Query DSL
- *
- * These types represent the structure of Lime Query as defined in:
- * - lime-core/lime_query/schema.py
- * - lime-core/lime_filter/schema.py
- */
-/**
- * Available operators with display metadata
- */
-const LIME_QUERY_OPERATORS = [
-    { value: '=', label: 'Equals', icon: 'equals' },
-    { value: '!=', label: 'Not Equals', icon: 'not-equal' },
-    {
-        value: '>',
-        label: 'Greater Than',
-        icon: 'greater-than',
-        applicableTypes: ['integer', 'decimal', 'date', 'time'],
-    },
-    {
-        value: '>=',
-        label: 'Greater or Equal',
-        icon: 'greater-or-equal',
-        applicableTypes: ['integer', 'decimal', 'date', 'time'],
-    },
-    {
-        value: '<',
-        label: 'Less Than',
-        icon: 'less-than',
-        applicableTypes: ['integer', 'decimal', 'date', 'time'],
-    },
-    {
-        value: '<=',
-        label: 'Less or Equal',
-        icon: 'less-or-equal',
-        applicableTypes: ['integer', 'decimal', 'date', 'time'],
-    },
-    { value: 'IN', label: 'In List', icon: 'list' },
-    {
-        value: '?',
-        label: 'Contains',
-        icon: '-lime-filter-contain',
-        applicableTypes: ['string', 'text'],
-    },
-    {
-        value: '=?',
-        label: 'Begins With',
-        icon: '-lime-filter-begin',
-        applicableTypes: ['string', 'text'],
-    },
-    {
-        value: '=$',
-        label: 'Ends With',
-        icon: '-lime-filter-end',
-        applicableTypes: ['string', 'text'],
-    },
-];
-
-/**
- * Validate and convert a FilterExpression (comparison filter)
- * @param filter
- */
-function validateAndConvertFilterExpression(filter) {
-    // Validate required properties exist
-    if (!('op' in filter) || !('exp' in filter)) {
-        throw new Error('Invalid filter: comparison must have key, op, and exp properties');
-    }
-    // Validate operator is supported
-    const supportedOps = LIME_QUERY_OPERATORS.map((o) => o.value);
-    if (!supportedOps.includes(filter.op)) {
-        throw new Error(`Unsupported filter operator: ${filter.op}`);
-    }
-    // Check for unexpected properties
-    // Note: 'type' property is allowed for filter references
-    const knownProps = new Set(['key', 'op', 'exp', 'type']);
-    const unexpectedProps = Object.keys(filter).filter((k) => !knownProps.has(k));
-    if (unexpectedProps.length > 0) {
-        throw new Error(`Unexpected properties in filter comparison: ${unexpectedProps.join(', ')}`);
-    }
-    return {
-        filter_type: 'comparison',
-        property: filter.key,
-        operator: filter.op,
-        value: filter.exp,
-    };
-}
-/**
- * Validate and convert a FilterGroup (AND/OR/NOT filter)
- * @param filter
- */
-function validateAndConvertFilterGroup(filter) {
-    // Validate it has 'op' property
-    if (!('op' in filter)) {
-        throw new Error('Invalid filter: filter group must have op property');
-    }
-    // Validate it has 'exp' property
-    if (!('exp' in filter)) {
-        throw new Error('Invalid filter: filter group must have exp property');
-    }
-    // Check for unexpected properties in filter groups
-    const knownGroupProps = new Set(['op', 'exp']);
-    const unexpectedGroupProps = Object.keys(filter).filter((k) => !knownGroupProps.has(k));
-    if (unexpectedGroupProps.length > 0) {
-        throw new Error(`Unexpected properties in filter group: ${unexpectedGroupProps.join(', ')}`);
-    }
-    if (filter.op === '!') {
-        // NOT filter: exp should be a single expression (not array)
-        if (Array.isArray(filter.exp)) {
-            throw new TypeError('Invalid NOT filter: exp should be a single expression, not an array');
-        }
-        return {
-            filter_type: 'NOT',
-            expression: limeQueryToGuiFilter(filter.exp),
-        };
-    }
-    if (filter.op === 'AND') {
-        // AND filter: exp should be an array
-        if (!Array.isArray(filter.exp)) {
-            throw new TypeError('Invalid AND filter: exp must be an array');
-        }
-        return {
-            filter_type: 'AND',
-            expressions: filter.exp.map(limeQueryToGuiFilter),
-        };
-    }
-    if (filter.op === 'OR') {
-        // OR filter: exp should be an array
-        if (!Array.isArray(filter.exp)) {
-            throw new TypeError('Invalid OR filter: exp must be an array');
-        }
-        return {
-            filter_type: 'OR',
-            expressions: filter.exp.map(limeQueryToGuiFilter),
-        };
-    }
-    // If we reach here, the operator is unsupported
-    throw new Error(`Unsupported filter operator: ${filter.op}`);
-}
-/**
- * Convert Lime Query filter to UI filter representation
- * Throws errors for unsupported filter structures
- * @param filter
- */
-function limeQueryToGuiFilter(filter) {
-    if (!filter) {
-        // Return empty AND instead of missing expression
-        // This ensures users see the "Add a condition" button
-        return {
-            filter_type: 'AND',
-            expressions: [],
-        };
-    }
-    // Check if it's a FilterExpression (has 'key' property)
-    if ('key' in filter) {
-        return validateAndConvertFilterExpression(filter);
-    }
-    // It's a FilterGroup
-    return validateAndConvertFilterGroup(filter);
-}
+import { Z as Zt, T as Te } from './index.esm-bb569663.js';
+import { g as getPropertyFromPath, a as getNormalizedProperties } from './property-resolution-c21a1369.js';
 
 /**
  * Dynamic filter values and placeholders that are valid in Lime Query
@@ -409,6 +249,49 @@ function validatePropertySelection(selection, limetypes, limetype, guiModeEnable
     }
     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
@@ -420,27 +303,12 @@ function validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEn
     if (!filter) {
         return;
     }
-    // Check if it's a FilterExpression (has 'key' property)
     if ('key' in filter) {
-        const result = validatePlaceholder(filter.exp, activeLimetype, limetypes);
-        if (!result.valid) {
-            throw new Error(`Invalid placeholder in filter '${filter.key}': ${result.error}`);
-        }
+        validateComparisonExpression(filter, activeLimetype, limetypes);
         return;
     }
-    // It's a FilterGroup - recursively validate children
     if ('exp' in filter) {
-        if (filter.op === '!') {
-            // NOT has a single expression
-            validateFilterPlaceholders(filter.exp, activeLimetype, limetypes, guiModeEnabled);
-        }
-        else if (filter.op === 'AND' || filter.op === 'OR') {
-            // AND/OR have array of expressions
-            const expressions = filter.exp;
-            for (const expr of expressions) {
-                validateFilterPlaceholders(expr, activeLimetype, limetypes, guiModeEnabled);
-            }
-        }
+        validateGroupExpression(filter, activeLimetype, limetypes, guiModeEnabled);
     }
 }
 /**
@@ -454,7 +322,6 @@ function validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEn
 function validateLimeQueryFilterInternal(filter, activeLimetype, limetypes, guiModeEnabled) {
     const errors = [];
     try {
-        limeQueryToGuiFilter(filter);
         validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEnabled);
     }
     catch (error) {
@@ -462,6 +329,113 @@ function validateLimeQueryFilterInternal(filter, activeLimetype, limetypes, guiM
     }
     return errors;
 }
+/**
+ * Validate orderBy specification
+ * @param orderBy Array of orderBy items to validate
+ * @param limetypes Record of all available limetypes
+ * @param limetype The limetype for this Lime Query
+ * @returns Array of validation error messages
+ */
+function validateOrderBy(orderBy, limetypes, limetype) {
+    const errors = [];
+    if (!Array.isArray(orderBy)) {
+        errors.push('orderBy must be an array');
+        return errors;
+    }
+    if (!limetype || !limetypes[limetype]) {
+        // Can't validate property paths without limetype
+        return errors;
+    }
+    for (const [index, item] of orderBy.entries()) {
+        const itemErrors = validateOrderByItem(item, index, limetypes, limetype);
+        errors.push(...itemErrors);
+    }
+    return errors;
+}
+/**
+ * Validate a single orderBy item
+ * @param item The orderBy item to validate
+ * @param index The index of the item in the array (for error messages)
+ * @param limetypes Record of all available limetypes
+ * @param limetype The limetype for this Lime Query
+ * @returns Array of validation error messages for this item
+ */
+function validateOrderByItem(item, index, limetypes, limetype) {
+    const errors = [];
+    const objectError = validateOrderByItemIsObject(item, index);
+    if (objectError) {
+        return [objectError];
+    }
+    const keys = Object.keys(item);
+    const keyError = validateOrderByItemHasSingleKey(keys, index);
+    if (keyError) {
+        return [keyError];
+    }
+    const propertyPath = keys[0];
+    const direction = item[propertyPath];
+    const directionError = validateOrderByDirection(direction, index);
+    if (directionError) {
+        errors.push(directionError);
+    }
+    const pathError = validateOrderByPropertyPath(propertyPath, limetypes, limetype, index);
+    if (pathError) {
+        errors.push(pathError);
+    }
+    return errors;
+}
+/**
+ * Validate that the orderBy item is an object
+ * @param item
+ * @param index
+ */
+function validateOrderByItemIsObject(item, index) {
+    if (typeof item !== 'object' || item === null) {
+        return `orderBy[${index}] must be an object`;
+    }
+    return null;
+}
+/**
+ * Validate that the orderBy item has exactly one property key
+ * @param keys
+ * @param index
+ */
+function validateOrderByItemHasSingleKey(keys, index) {
+    if (keys.length === 0) {
+        return `orderBy[${index}] must have a property path`;
+    }
+    if (keys.length > 1) {
+        return `orderBy[${index}] must have exactly one property, got ${keys.length}`;
+    }
+    return null;
+}
+/**
+ * Validate that the sort direction is either ASC or DESC
+ * @param direction
+ * @param index
+ */
+function validateOrderByDirection(direction, index) {
+    if (direction !== 'ASC' && direction !== 'DESC') {
+        return `orderBy[${index}]: direction must be 'ASC' or 'DESC', got '${direction}'`;
+    }
+    return null;
+}
+/**
+ * Validate that the property path exists on the limetype
+ * @param propertyPath
+ * @param limetypes
+ * @param limetype
+ * @param index
+ */
+function validateOrderByPropertyPath(propertyPath, limetypes, limetype, index) {
+    if (!propertyPath || propertyPath === '') {
+        return null;
+    }
+    const property = getPropertyFromPath(limetypes, limetype, propertyPath);
+    if (!property) {
+        return `orderBy[${index}]: property path '${propertyPath}' does not exist on limetype '${limetype}'`;
+    }
+    return null;
+}
 /**
  * Validate Lime Query response format and collect errors/limitations
  * @param responseFormat The response format to validate
@@ -511,14 +485,14 @@ function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiModeEnabl
     if (limeQuery.offset !== undefined && !limeQuery.orderBy) {
         validationErrors.push('offset requires orderBy to be specified');
     }
+    // Validate orderBy
+    if (limeQuery.orderBy) {
+        const orderByErrors = validateOrderBy(limeQuery.orderBy, limetypes, limeQuery.limetype);
+        validationErrors.push(...orderByErrors);
+    }
     // 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');
-        }
+    if (guiModeEnabled && limeQuery.offset !== undefined) {
+        guiLimitations.push('offset is not yet supported in GUI mode');
     }
     // Validate filter
     if (limeQuery.filter) {
@@ -539,7 +513,7 @@ function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiModeEnabl
     };
 }
 
-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) {
@@ -589,6 +563,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 {
@@ -604,6 +583,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);
             }
@@ -645,6 +625,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();
@@ -657,7 +638,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()));
     }
@@ -669,27 +650,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: {
@@ -704,7 +674,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) {
@@ -789,7 +762,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()));

package/dist/esm/{limebb-lime-query-filter-builder_3.entry.js → limebb-lime-query-filter-builder_4.entry.js}

@@ -135,6 +135,90 @@ const LimeQueryFilterBuilderComponent = class {
 };
 LimeQueryFilterBuilderComponent.style = LimebbLimeQueryFilterBuilderStyle0;
 
+const orderByEditorCss = ":host(limebb-lime-query-order-by-editor){display:block;width:100%}.order-by-editor{display:flex;flex-direction:column;gap:1rem;padding:1rem}.header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.header h4{margin:0;font-size:1rem;font-weight:600;color:rgb(var(--contrast-1000))}.order-by-list{display:flex;flex-direction:column;gap:1rem;padding:0.5rem;border:1px solid rgb(var(--contrast-300));border-radius:0.25rem;background-color:rgb(var(--contrast-50));min-height:4rem}.order-by-item{padding:0.5rem;border-radius:0.25rem;transition:background-color 0.2s}.order-by-item:hover{background-color:rgb(var(--contrast-100))}.actions{display:flex;justify-content:flex-start}.summary{display:flex;justify-content:space-between;align-items:center;padding-top:0.5rem;border-top:1px solid rgb(var(--contrast-300))}.summary .count{font-size:0.875rem;font-weight:500;color:rgb(var(--contrast-900))}.empty-state{padding:2rem;text-align:center;color:rgb(var(--contrast-700));font-style:italic}.empty-state p{margin:0}";
+const LimebbLimeQueryOrderByEditorStyle0 = orderByEditorCss;
+
+const OrderByEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change", 7);
+        /**
+         * Optional label
+         */
+        this.label = 'Sort Order';
+        this.items = [];
+        this.handleItemChange = (index) => (event) => {
+            event.stopPropagation();
+            const newItems = [...this.items];
+            if (event.detail === null) {
+                // Remove item
+                newItems.splice(index, 1);
+            }
+            else {
+                // Update item
+                newItems[index] = event.detail;
+            }
+            this.items = newItems;
+            this.emitChange();
+        };
+        this.handleAddSortField = () => {
+            // Add new item with empty path and ASC direction
+            this.items = [...this.items, { '': 'ASC' }];
+            this.emitChange();
+        };
+    }
+    componentWillLoad() {
+        if (this.value && this.value.length > 0) {
+            this.items = [...this.value];
+        }
+    }
+    handleValueChange(newValue) {
+        if (!newValue) {
+            return;
+        }
+        // Check if items have changed
+        const itemsChanged = newValue.length !== this.items.length ||
+            !newValue.every((item, index) => {
+                const currentItem = this.items[index];
+                if (!currentItem)
+                    return false;
+                const itemKey = Object.keys(item)[0];
+                const currentKey = Object.keys(currentItem)[0];
+                return (itemKey === currentKey &&
+                    item[itemKey] === currentItem[currentKey]);
+            });
+        if (itemsChanged) {
+            this.items = newValue.length > 0 ? [...newValue] : [];
+        }
+    }
+    render() {
+        if (!this.limetype) {
+            return (h("div", { class: "empty-state" }, h("p", null, "Select a limetype to configure sorting")));
+        }
+        return (h("div", { class: "order-by-editor" }, h("div", { class: "header" }, h("h4", null, this.label)), this.renderOrderByList(), this.renderActions()));
+    }
+    renderOrderByList() {
+        if (this.items.length === 0) {
+            return null;
+        }
+        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 })));
+    }
+    renderItem(item, index) {
+        const propertyPath = Object.keys(item)[0] || '';
+        return (h("limebb-lime-query-order-by-item", { key: `${propertyPath}-${index}`, class: "order-by-item", platform: this.platform, context: this.context, limetype: this.limetype, item: item, onItemChange: this.handleItemChange(index) }));
+    }
+    emitChange() {
+        this.change.emit(this.items);
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+OrderByEditor.style = LimebbLimeQueryOrderByEditorStyle0;
+
 const RELATION_PROPERTY_TYPES = [
     'belongsto',
     'hasone',
@@ -220,7 +304,7 @@ const LimetypeField = class {
             value: '',
         };
         options.unshift(emptyOption);
-        return (h("limel-select", { key: 'cf27b83c4751838e85436af443a275b3d7c9dfee', label: this.label, options: options, value: selectedOption, required: this.required, helperText: this.helperText, invalid: invalid, disabled: this.disabled || this.readonly, onChange: this.handleChange }));
+        return (h("limel-select", { key: 'fd9522c5df730f65a5ac57140bca6c05c5acd63d', label: this.label, options: options, value: selectedOption, required: this.required, helperText: this.helperText, invalid: invalid, disabled: this.disabled || this.readonly, onChange: this.handleChange }));
     }
     componentWillRender() {
         this.updatePropertyFields(this.value || '');
@@ -499,4 +583,4 @@ const ResponseFormatEditor = class {
 };
 ResponseFormatEditor.style = LimebbResponseFormatEditorStyle0;
 
-export { LimeQueryFilterBuilderComponent as limebb_lime_query_filter_builder, LimetypeField as limebb_limetype_field, ResponseFormatEditor as limebb_response_format_editor };
+export { LimeQueryFilterBuilderComponent as limebb_lime_query_filter_builder, OrderByEditor as limebb_lime_query_order_by_editor, LimetypeField as limebb_limetype_field, ResponseFormatEditor as limebb_response_format_editor };