@limetech/lime-crm-building-blocks 1.96.0 → 1.98.0

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

@@ -1,146 +1,68 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { T as Te } from './index.esm.js';
+import { L as LIME_QUERY_OPERATORS, d as defineCustomElement$a } from './lime-query-filter-comparison.js';
+import { g as getNormalizedProperties, a as getPropertyFromPath, d as defineCustomElement$4 } from './property-selector.js';
+import { d as defineCustomElement$7, a as defineCustomElement$8, b as defineCustomElement$9, c as defineCustomElement$b } from './lime-query-filter-and.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';
 
 /**
- * Get normalized properties for a limetype
- * Adds system properties (_id, _timestamp, etc.) that map to the actual limeobject attributes
- * @param limetype The limetype to normalize
- * @returns Normalized properties with system properties prefixed with underscore
- */
-function getNormalizedProperties(limetype) {
-    if (!(limetype === null || limetype === void 0 ? void 0 : limetype.properties)) {
-        return {};
-    }
-    const properties = Object.assign({}, limetype.properties);
-    // System properties that are exposed by the backend
-    // Map from internal property name to API property name
-    const systemProperties = {
-        id: '_id',
-        timestamp: '_timestamp',
-        descriptive: '_descriptive',
-        createduser: '_createduser',
-        createdtime: '_createdtime',
-        updateduser: '_updateduser',
-    };
-    // Find and normalize system properties by name
-    for (const [propName, systemPropName] of Object.entries(systemProperties)) {
-        const property = properties[propName];
-        if (property) {
-            properties[systemPropName] = property;
-            delete properties[propName];
-        }
-    }
-    return properties;
-}
-/**
- * Get property from limetype by path (e.g., "company.name")
- * Supports relation traversal with dot-notation
- * @param limetypes
- * @param limetype
- * @param path
+ * Convert UI filter representation to Lime Query filter format
+ * @param filter
  */
-function getPropertyFromPath(limetypes, limetype, path) {
-    if (!path || !limetype || !limetypes) {
+function guiFilterToLimeQuery(filter) {
+    if (filter.filter_type === '') {
         return undefined;
     }
-    const parts = path.split('.');
-    let currentType = limetypes[limetype];
-    let property;
-    for (const part of parts) {
-        if (!currentType) {
+    if (filter.filter_type === 'comparison') {
+        return {
+            key: filter.property,
+            op: filter.operator,
+            exp: filter.value,
+        };
+    }
+    if (filter.filter_type === 'AND') {
+        const expressions = filter.expressions
+            .map(guiFilterToLimeQuery)
+            .filter((f) => f !== undefined);
+        if (expressions.length === 0) {
             return undefined;
         }
-        const normalizedProperties = getNormalizedProperties(currentType);
-        property = normalizedProperties[part];
-        if (!property) {
+        if (expressions.length === 1) {
+            return expressions[0];
+        }
+        return {
+            op: 'AND',
+            exp: expressions,
+        };
+    }
+    if (filter.filter_type === 'OR') {
+        const expressions = filter.expressions
+            .map(guiFilterToLimeQuery)
+            .filter((f) => f !== undefined);
+        if (expressions.length === 0) {
             return undefined;
         }
-        // If this is a relation, get the related limetype for next iteration
-        if (property.relation) {
-            currentType = property.relation.getLimetype();
+        if (expressions.length === 1) {
+            return expressions[0];
         }
-    }
-    return property;
-}
-
-/**
- * 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'],
-    },
-];
-
-/**
- * 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: [],
+            op: 'OR',
+            exp: expressions,
         };
     }
-    // Check if it's a FilterExpression (has 'key' property)
-    if ('key' in filter) {
-        return validateAndConvertFilterExpression(filter);
+    if (filter.filter_type === 'NOT') {
+        const innerFilter = guiFilterToLimeQuery(filter.expression);
+        if (innerFilter) {
+            return {
+                op: '!',
+                exp: innerFilter,
+            };
+        }
     }
-    // It's a FilterGroup
-    return validateAndConvertFilterGroup(filter);
+    return undefined;
 }
 /**
  * Validate and convert a FilterExpression (comparison filter)
@@ -222,6 +144,124 @@ function validateAndConvertFilterGroup(filter) {
     // 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);
+}
+/**
+ * Normalize filter for GUI mode by ensuring proper AND/OR wrapper structure.
+ * GUI mode requires filters to be wrapped in AND([OR(...)]) so users have
+ * access to add/remove buttons on the AND and OR components.
+ *
+ * This function ensures that:
+ * - Single comparisons are wrapped in AND([OR([comparison])])
+ * - OR groups are wrapped in AND([OR group])
+ * - AND groups have their comparison children wrapped in OR
+ * - Empty/undefined filters become AND([])
+ *
+ * When converting back to Lime Query JSON, limeQueryFilterToLimeQuery()
+ * automatically unwraps single-item AND/OR groups.
+ *
+ * @param filter The filter expression from limeQueryToLimeQueryFilter
+ * @returns Normalized filter suitable for GUI editing
+ */
+function normalizeLimeQueryFilterForGui(filter) {
+    // Empty AND is already correct for GUI
+    if (filter.filter_type === 'AND' && filter.expressions.length === 0) {
+        return filter;
+    }
+    // Single comparison needs wrapping
+    if (filter.filter_type === 'comparison') {
+        return {
+            filter_type: 'AND',
+            expressions: [
+                {
+                    filter_type: 'OR',
+                    expressions: [filter],
+                },
+            ],
+        };
+    }
+    // OR needs wrapping in AND
+    if (filter.filter_type === 'OR') {
+        return {
+            filter_type: 'AND',
+            expressions: [filter],
+        };
+    }
+    // NOT needs wrapping
+    if (filter.filter_type === 'NOT') {
+        return {
+            filter_type: 'AND',
+            expressions: [
+                {
+                    filter_type: 'OR',
+                    expressions: [filter],
+                },
+            ],
+        };
+    }
+    // AND group - check if children need OR wrappers
+    if (filter.filter_type === 'AND') {
+        const normalizedChildren = filter.expressions.map((child) => {
+            // If child is already OR, keep it
+            if (child.filter_type === 'OR') {
+                return child;
+            }
+            // If child is NOT, keep it (NOT can be a direct child of AND)
+            if (child.filter_type === 'NOT') {
+                return child;
+            }
+            // If child is comparison, wrap in OR
+            if (child.filter_type === 'comparison') {
+                return {
+                    filter_type: 'OR',
+                    expressions: [child],
+                };
+            }
+            // If child is nested AND, recursively normalize and wrap in OR
+            if (child.filter_type === 'AND') {
+                return {
+                    filter_type: 'OR',
+                    expressions: [normalizeLimeQueryFilterForGui(child)],
+                };
+            }
+            // Unknown filter type, keep as is
+            return child;
+        });
+        return {
+            filter_type: 'AND',
+            expressions: normalizedChildren,
+        };
+    }
+    // Fallback: wrap in AND/OR structure
+    return {
+        filter_type: 'AND',
+        expressions: [
+            {
+                filter_type: 'OR',
+                expressions: [filter],
+            },
+        ],
+    };
+}
 
 /**
  * Dynamic filter values and placeholders that are valid in Lime Query
@@ -600,7 +640,7 @@ function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiModeEnabl
     };
 }
 
-const limeQueryBuilderCss = ":host(limebb-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;background-color:rgb(var(--contrast-100));border-radius:var(--border-radius)}.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))}.placeholder-message{padding:2rem;text-align:center;background-color:rgb(var(--contrast-100));border-radius:var(--border-radius);border:1px solid rgb(var(--contrast-300))}.placeholder-message h4{margin:0 0 1rem 0;font-size:1.125rem;font-weight:600;color:rgb(var(--contrast-1100))}.placeholder-message p{margin:0;color:rgb(var(--contrast-900));line-height:1.5}";
+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 LimebbLimeQueryBuilderStyle0 = limeQueryBuilderCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -621,10 +661,76 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         this.change = createEvent(this, "change", 7);
         this.mode = 'gui';
         this.codeValue = '';
+        this.limetype = '';
+        this.filter = {
+            filter_type: 'AND',
+            expressions: [],
+        };
+        this.handleLimetypeChange = (event) => {
+            event.stopPropagation();
+            this.limetype = event.detail;
+            // Reset filter when limetype changes
+            this.filter = {
+                filter_type: 'AND',
+                expressions: [],
+            };
+            // Reset response format when limetype changes
+            this.internalResponseFormat = {
+                object: {
+                    _id: null,
+                },
+            };
+            this.emitChange();
+        };
+        this.handleFilterChange = (event) => {
+            event.stopPropagation();
+            // Convert missing expression back to empty AND to keep the UI consistent
+            if (event.detail.filter_type === '') {
+                this.filter = {
+                    filter_type: 'AND',
+                    expressions: [],
+                };
+            }
+            else {
+                this.filter = event.detail;
+            }
+            this.emitChange();
+        };
+        this.handleResponseFormatChange = (event) => {
+            event.stopPropagation();
+            this.internalResponseFormat = event.detail;
+            this.emitChange();
+        };
+        this.handleLimitChange = (event) => {
+            event.stopPropagation();
+            const value = event.detail;
+            this.limit = value ? Number.parseInt(value, 10) : undefined;
+            this.emitChange();
+        };
         this.switchToGui = () => {
-            this.mode = 'gui';
+            // 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;
+                }
+                // Update internal state from parsed query
+                this.limetype = parsed.limetype || '';
+                this.filter = normalizeLimeQueryFilterForGui(limeQueryToGuiFilter(parsed.filter));
+                this.internalResponseFormat = parsed.responseFormat;
+                this.limit = parsed.limit;
+                this.mode = 'gui';
+                this.change.emit(parsed);
+            }
+            catch (_a) {
+                // Don't switch if JSON is invalid (linter will show the error)
+            }
         };
         this.switchToCode = () => {
+            this.updateCodeValue();
             this.mode = 'code';
         };
         this.handleCodeChange = (event) => {
@@ -645,43 +751,130 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         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);
     }
     componentWillLoad() {
-        // Initialize code value from input prop
-        this.codeValue = JSON.stringify(this.value || {}, null, 2);
         // Force code mode if GUI is disabled
         if (!this.guiModeEnabled) {
             this.mode = 'code';
+            // Initialize code value from prop
+            this.updateCodeValue();
+            return;
+        }
+        if (this.value) {
+            this.limetype = this.value.limetype || '';
+            this.filter = normalizeLimeQueryFilterForGui(limeQueryToGuiFilter(this.value.filter));
+            this.internalResponseFormat = this.value.responseFormat;
+            this.limit = this.value.limit;
+        }
+        // Initialize code value from prop
+        this.updateCodeValue();
+        // Check if GUI mode is supported
+        const support = this.checkGuiSupport();
+        if (!support.guiSupported) {
+            this.mode = 'code';
         }
     }
     render() {
         const guiSupported = this.checkGuiSupport();
-        return (h("div", { key: '77e93d0277a99b8ff1c777d7ee0b63259755f740', class: "lime-query-builder" }, this.label && (h("h3", { key: '4089d69ea3404c656f1c24ec73aef6df2cc8baec', class: "lime-query-builder-label" }, this.label)), this.guiModeEnabled && (h("div", { key: '5d18a749386651cc1361b712693bad105dba9b03', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (h("div", { class: "gui-mode" }, h("div", { class: "placeholder-message" }, h("h4", null, "GUI Mode Not Yet Supported"), h("p", null, "The visual query builder interface is not yet available. Please use Code mode to write queries in JSON format."))))));
+        const showCodeMode = !this.guiModeEnabled || this.mode === 'code';
+        return (h("div", { key: '96d1a933f699404c3806af3742e9ad30d53562aa', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
+            ? this.renderCodeMode(guiSupported)
+            : this.renderGuiMode()));
+    }
+    emitChange() {
+        // Only emit in GUI mode
+        if (this.mode === 'code') {
+            return;
+        }
+        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: guiFilterToLimeQuery(this.filter),
+        };
+        if (this.limit !== undefined && this.limit > 0) {
+            limeQuery.limit = this.limit;
+        }
+        this.change.emit(limeQuery);
+    }
+    updateCodeValue() {
+        if (!this.limetype) {
+            this.codeValue = JSON.stringify(this.value || {}, null, 2);
+            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: guiFilterToLimeQuery(this.filter),
+        };
+        if (this.limit !== undefined && this.limit > 0) {
+            limeQuery.limit = this.limit;
+        }
+        this.codeValue = JSON.stringify(limeQuery, null, 2);
     }
     checkGuiSupport() {
-        if (!this.limetypes || !this.codeValue) {
+        if (!this.limetypes) {
             // Can't validate yet, assume all is good
             return {
                 valid: true,
-                guiSupported: false,
+                guiSupported: true,
                 validationErrors: [],
                 guiLimitations: [],
             };
         }
-        // Parse and validate the code value
-        let limeQueryToCheck;
-        try {
-            limeQueryToCheck = JSON.parse(this.codeValue);
+        // When in code mode, validate the parsed code value instead of current state
+        let queryToCheck;
+        if (this.mode === 'code' && this.codeValue) {
+            try {
+                queryToCheck = JSON.parse(this.codeValue);
+            }
+            catch (_a) {
+                return {
+                    valid: false,
+                    guiSupported: false,
+                    validationErrors: ['Invalid JSON'],
+                    guiLimitations: [],
+                };
+            }
         }
-        catch (_a) {
-            return {
-                valid: false,
-                guiSupported: false,
-                validationErrors: ['Invalid JSON'],
-                guiLimitations: [],
+        else {
+            // Build query from current GUI state
+            if (!this.limetype) {
+                return {
+                    valid: true,
+                    guiSupported: true,
+                    validationErrors: [],
+                    guiLimitations: [],
+                };
+            }
+            const responseFormat = this
+                .internalResponseFormat || {
+                object: {
+                    _id: null,
+                },
+            };
+            queryToCheck = {
+                limetype: this.limetype,
+                responseFormat: responseFormat,
+                filter: guiFilterToLimeQuery(this.filter),
             };
+            if (this.limit !== undefined && this.limit > 0) {
+                queryToCheck.limit = this.limit;
+            }
         }
-        // In code-only mode, we don't track activeLimetype separately
-        // Pass undefined since it's not needed for code mode validation
-        return isLimeQuerySupported(limeQueryToCheck, this.limetypes, undefined, this.guiModeEnabled);
+        return isLimeQuerySupported(queryToCheck, this.limetypes, this.activeLimetype, this.guiModeEnabled);
     }
     renderModeSwitch(support) {
         const guiDisabled = !support.guiSupported;
@@ -694,15 +887,60 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
             !guiSupported.guiSupported &&
             guiSupported.guiLimitations.length > 0 && (h("div", { class: "gui-limitations" }, h("strong", null, "Cannot switch to GUI mode:"), h("ul", null, guiSupported.guiLimitations.map((limitation) => (h("li", null, limitation))))))));
     }
+    renderLimetypeSection() {
+        return (h("div", { class: "limetype-section" }, h("limebb-limetype-field", { platform: this.platform, context: this.context, label: "Object Type", value: this.limetype, required: true, fieldName: "limetype", helperText: "Select the type of object you want to query", onChange: this.handleLimetypeChange })));
+    }
+    renderResponseFormatSection() {
+        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 })));
+    }
+    renderFilterSection() {
+        if (!this.limetype) {
+            return;
+        }
+        return (h("div", { class: "filter-section" }, h("h4", { class: "section-label" }, "Filter Conditions"), h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.filter, onExpressionChange: this.handleFilterChange })));
+    }
+    renderQueryOptionsSection() {
+        var _a;
+        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 }))));
+    }
+    renderGuiMode() {
+        return (h("div", { class: "gui-mode" }, this.renderLimetypeSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
+    }
+    renderLabel() {
+        if (!this.label) {
+            return;
+        }
+        return h("h3", { class: "lime-query-builder-label" }, this.label);
+    }
+    renderModeControls(support) {
+        if (!this.guiModeEnabled) {
+            return;
+        }
+        return (h("div", { class: "mode-controls" }, this.renderModeSwitch(support)));
+    }
+    renderCodeMode(support) {
+        return h("div", { class: "code-mode" }, this.renderCodeEditor(support));
+    }
     static get style() { return LimebbLimeQueryBuilderStyle0; }
 }, [1, "limebb-lime-query-builder", {
         "platform": [16],
         "context": [16],
         "value": [16],
         "label": [1],
+        "activeLimetype": [1, "active-limetype"],
         "limetypes": [32],
         "mode": [32],
-        "codeValue": [32]
+        "codeValue": [32],
+        "limetype": [32],
+        "filter": [32],
+        "internalResponseFormat": [32],
+        "limit": [32]
     }]);
 __decorate([
     Te()
@@ -711,13 +949,63 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["limebb-lime-query-builder"];
+    const components = ["limebb-lime-query-builder", "limebb-lime-query-filter-and", "limebb-lime-query-filter-comparison", "limebb-lime-query-filter-expression", "limebb-lime-query-filter-not", "limebb-lime-query-filter-or", "limebb-lime-query-value-input", "limebb-limetype-field", "limebb-property-selector", "limebb-response-format-editor", "limebb-response-format-item"];
     components.forEach(tagName => { switch (tagName) {
         case "limebb-lime-query-builder":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LimeQueryBuilder);
             }
             break;
+        case "limebb-lime-query-filter-and":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "limebb-lime-query-filter-comparison":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "limebb-lime-query-filter-expression":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "limebb-lime-query-filter-not":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "limebb-lime-query-filter-or":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "limebb-lime-query-value-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "limebb-limetype-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "limebb-property-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "limebb-response-format-editor":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "limebb-response-format-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }