@limetech/lime-crm-building-blocks 1.104.0 → 1.104.1

package/dist/cjs/limebb-lime-query-response-format-builder.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ff255a0d.js');
 const index_esm = require('./index.esm-d785eb6e.js');
-const limeQueryValidation = require('./lime-query-validation-6be10fa7.js');
+const limeQueryValidation = require('./lime-query-validation-82aa2855.js');
 require('./property-resolution-fb42a46b.js');
 
 /**
@@ -41,7 +41,7 @@ function parseResponseFormat(json) {
             `Only 'object' and 'aggregates' are allowed.`);
     }
     // Must have at least one of object or aggregates
-    // Note: Empty objects {} are valid (starting point for GUI mode)
+    // Note: Empty objects {} are valid (starting point for visual mode)
     const hasProperties = keys.length > 0;
     if (hasProperties && !parsed.object && !parsed.aggregates) {
         throw new Error('Response format must contain at least one of: object, aggregates');
@@ -70,7 +70,7 @@ function getDefaultResponseFormat() {
     };
 }
 
-const limeQueryResponseFormatBuilderCss = ":host(limebb-lime-query-response-format-builder){display:block;width:100%}.response-format-builder{display:flex;flex-direction:column}.builder-label{color:rgb(var(--contrast-1100));font-size:1.625rem;line-height:1.25rem;font-weight:300;margin-top:1rem;margin-bottom:0.25rem}.builder-helper-text{margin-top:0px;margin-bottom:0.5rem;font-size:var(--limel-theme-default-font-size);color:rgb(var(--contrast-1100))}.mode-controls{display:flex;justify-content:flex-end;padding:0.5rem}.gui-mode,.code-mode{display:block}.code-editor-container{--code-editor-max-height:70vh;display:flex;flex-direction:column;gap:1rem}.code-editor-container .validation-errors{padding:0.75rem 1rem;color:rgb(var(--color-red-default));background-color:rgb(var(--color-red-lighter));border-left:0.25rem solid rgb(var(--color-red-default));border-radius:0.25rem;font-size:0.875rem}.code-editor-container .validation-errors strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-editor-container .validation-errors ul{margin:0;padding-left:1.5rem}.code-editor-container .validation-errors li{margin:0.25rem 0}.code-editor-container .gui-limitations{padding:0.75rem 1rem;color:rgb(var(--color-blue-dark));background-color:rgb(var(--color-blue-lighter));border-left:0.25rem solid rgb(var(--color-blue-default));border-radius:0.25rem;font-size:0.875rem}.code-editor-container .gui-limitations strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-editor-container .gui-limitations ul{margin:0;padding-left:1.5rem}.code-editor-container .gui-limitations li{margin:0.25rem 0}";
+const limeQueryResponseFormatBuilderCss = ":host(limebb-lime-query-response-format-builder){display:block;width:100%}.response-format-builder{display:flex;flex-direction:column}.builder-label{color:rgb(var(--contrast-1100));font-size:1.625rem;line-height:1.25rem;font-weight:300;margin-top:1rem;margin-bottom:0.25rem}.builder-helper-text{margin-top:0px;margin-bottom:0.5rem;font-size:var(--limel-theme-default-font-size);color:rgb(var(--contrast-1100))}.mode-controls{display:flex;justify-content:flex-end;padding:0.5rem}.visual-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 .visual-mode-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 .visual-mode-limitations strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-editor-container .visual-mode-limitations ul{margin:0;padding-left:1.5rem}.code-editor-container .visual-mode-limitations li{margin:0.25rem 0}";
 const LimebbLimeQueryResponseFormatBuilderStyle0 = limeQueryResponseFormatBuilderCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -95,34 +95,34 @@ const LimeQueryResponseFormatBuilder = class {
          * Optional helper text for the builder
          */
         this.helperText = '';
-        this.mode = 'gui';
+        this.mode = 'visual';
         this.codeValue = '';
         this.handleModeChange = (event) => {
             event.stopPropagation();
             const mode = event.detail.id;
-            if (mode === 'gui') {
-                this.switchToGui();
+            if (mode === 'visual') {
+                this.switchToVisualMode();
             }
             else if (mode === 'code') {
                 this.switchToCode();
             }
         };
         /**
-         * Switch from code mode to GUI mode
+         * Switch from code mode to visual mode
          */
-        this.switchToGui = () => {
+        this.switchToVisualMode = () => {
             // Validate JSON before switching
             try {
                 const parsed = parseResponseFormat(this.codeValue);
-                // Check if it's supported in GUI
-                const support = limeQueryValidation.validateResponseFormatOnly(parsed, this.limetypes, this.limetype, this.guiModeEnabled);
-                if (!support.guiSupported) {
-                    // Don't switch if GUI can't render this response format
+                // Check if it's supported in visual mode
+                const support = limeQueryValidation.validateResponseFormatOnly(parsed, this.limetypes, this.limetype, this.visualModeEnabled);
+                if (!support.visualModeSupported) {
+                    // Don't switch if visual mode can't render this response format
                     return;
                 }
                 // Update internal state from parsed value
                 this.internalValue = parsed;
-                this.mode = 'gui';
+                this.mode = 'visual';
                 this.change.emit(parsed);
             }
             catch (_a) {
@@ -130,7 +130,7 @@ const LimeQueryResponseFormatBuilder = class {
             }
         };
         /**
-         * Switch from GUI mode to code mode
+         * Switch from visual mode to code mode
          */
         this.switchToCode = () => {
             this.updateCodeValue();
@@ -151,14 +151,14 @@ const LimeQueryResponseFormatBuilder = class {
             }
             catch (_a) {
                 // Invalid JSON - don't emit change
-                // Validation errors will be shown by checkGuiSupport()
+                // Validation errors will be shown by checkVisualModeSupport()
             }
         };
         /**
-         * Handle GUI mode changes
+         * Handle visual mode changes
          * @param event
          */
-        this.handleGuiChange = (event) => {
+        this.handleVisualModeChange = (event) => {
             event.stopPropagation();
             this.internalValue = event.detail;
             this.updateCodeValue();
@@ -166,9 +166,9 @@ const LimeQueryResponseFormatBuilder = class {
         };
     }
     /**
-     * Check if GUI mode is enabled via feature flag
+     * Check if visual mode is enabled via feature flag
      */
-    get guiModeEnabled() {
+    get visualModeEnabled() {
         var _a, _b, _c;
         return ((_c = (_b = (_a = this.platform) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled) === null || _b === void 0 ? void 0 : _b.call(_a, 'useLimeQueryBuilderGuiMode')) !== null && _c !== void 0 ? _c : false);
     }
@@ -177,32 +177,32 @@ const LimeQueryResponseFormatBuilder = class {
         this.internalValue = this.value || getDefaultResponseFormat();
         // Update code value from internal value
         this.updateCodeValue();
-        // Force code mode if GUI is disabled
-        if (!this.guiModeEnabled) {
+        // Force code mode if visual mode is disabled
+        if (!this.visualModeEnabled) {
             this.mode = 'code';
             return;
         }
-        // Check if GUI mode is supported for current value
-        const support = this.checkGuiSupport();
-        if (!support.guiSupported) {
+        // Check if visual mode is supported for current value
+        const support = this.checkVisualModeSupport();
+        if (!support.visualModeSupported) {
             this.mode = 'code';
         }
     }
     componentWillUpdate() {
         // Sync internal value when prop changes externally
-        if (this.value && this.mode === 'gui') {
+        if (this.value && this.mode === 'visual') {
             this.internalValue = this.value;
         }
     }
     render() {
-        const guiSupported = this.checkGuiSupport();
-        return (index.h("div", { key: '6bc723110dcd545534e93db64a0d6a14963b6bda', class: "response-format-builder" }, this.label && index.h("h1", { key: '405d373ccb5056af3c0e6201ef5ebf819a3b8154', class: "builder-label" }, this.label), this.helperText && (index.h("p", { key: '5fb07f0fcd9e57b7c358957afc13485156bd041f', class: "builder-helper-text" }, this.helperText)), this.guiModeEnabled && (index.h("div", { key: 'd2241f702cfe9e75077542d4d21acb038be0a348', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (index.h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (index.h("div", { class: "gui-mode" }, this.renderGuiMode()))));
+        const visualModeSupported = this.checkVisualModeSupport();
+        return (index.h("div", { key: '7ae23c1366da49b591c0914f49f25c179e4d6712', class: "response-format-builder" }, this.label && index.h("h1", { key: '0cd528a69dd1b05769c678151f0827de15d167a8', class: "builder-label" }, this.label), this.helperText && (index.h("p", { key: 'b636ca0d32b244d051e74ed538cbd11438f29cd1', class: "builder-helper-text" }, this.helperText)), this.visualModeEnabled && (index.h("div", { key: 'dc7248cb27d99aa654b0f1659938c3f2933d89e0', class: "mode-controls" }, this.renderModeSwitch(visualModeSupported))), !this.visualModeEnabled || this.mode === 'code' ? (index.h("div", { class: "code-mode" }, this.renderCodeEditor(visualModeSupported))) : (index.h("div", { class: "visual-mode" }, this.renderVisualMode()))));
     }
     renderModeSwitch(support) {
-        const guiDisabled = !support.guiSupported;
+        const visualDisabled = !support.visualModeSupported;
         const buttons = [
             {
-                id: 'gui',
+                id: 'visual',
                 title: 'Visual',
             },
             {
@@ -210,27 +210,27 @@ const LimeQueryResponseFormatBuilder = class {
                 title: 'Code',
             },
         ].map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
-        return (index.h("limel-button-group", { value: buttons, disabled: guiDisabled, onChange: this.handleModeChange }));
+        return (index.h("limel-button-group", { value: buttons, disabled: visualDisabled, onChange: this.handleModeChange }));
     }
     renderCodeEditor(support) {
-        return (index.h("div", { class: "code-editor-container" }, index.h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }), !support.valid && support.validationErrors.length > 0 && (index.h("div", { class: "validation-errors" }, index.h("strong", null, "Invalid Response Format:"), index.h("ul", null, support.validationErrors.map((error) => (index.h("li", null, error)))))), this.guiModeEnabled &&
+        return (index.h("div", { class: "code-editor-container" }, index.h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }), !support.valid && support.validationErrors.length > 0 && (index.h("div", { class: "validation-errors" }, index.h("strong", null, "Invalid Response Format:"), index.h("ul", null, support.validationErrors.map((error) => (index.h("li", null, error)))))), this.visualModeEnabled &&
             support.valid &&
-            !support.guiSupported &&
-            support.guiLimitations.length > 0 && (index.h("div", { class: "gui-limitations" }, index.h("strong", null, "Cannot switch to GUI mode:"), index.h("ul", null, support.guiLimitations.map((limitation) => (index.h("li", null, limitation))))))));
+            !support.visualModeSupported &&
+            support.visualModeLimitations.length > 0 && (index.h("div", { class: "visual-mode-limitations" }, index.h("strong", null, "Cannot switch to visual mode:"), index.h("ul", null, support.visualModeLimitations.map((limitation) => (index.h("li", null, limitation))))))));
     }
-    renderGuiMode() {
-        return (index.h("limebb-lime-query-response-format-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.internalValue, onChange: this.handleGuiChange }));
+    renderVisualMode() {
+        return (index.h("limebb-lime-query-response-format-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.internalValue, onChange: this.handleVisualModeChange }));
     }
     /**
-     * Check if current value can be rendered in GUI mode
+     * Check if current value can be rendered in visual mode
      */
-    checkGuiSupport() {
+    checkVisualModeSupport() {
         if (!this.limetypes) {
             return {
                 valid: false,
-                guiSupported: false,
+                visualModeSupported: false,
                 validationErrors: ['Limetypes not loaded'],
-                guiLimitations: [],
+                visualModeLimitations: [],
             };
         }
         // Try to parse code value if in code mode
@@ -242,16 +242,16 @@ const LimeQueryResponseFormatBuilder = class {
             catch (error) {
                 return {
                     valid: false,
-                    guiSupported: false,
+                    visualModeSupported: false,
                     validationErrors: [error.message],
-                    guiLimitations: [],
+                    visualModeLimitations: [],
                 };
             }
         }
         else {
             valueToCheck = this.internalValue;
         }
-        return limeQueryValidation.validateResponseFormatOnly(valueToCheck, this.limetypes, this.limetype, this.guiModeEnabled);
+        return limeQueryValidation.validateResponseFormatOnly(valueToCheck, this.limetypes, this.limetype, this.visualModeEnabled);
     }
     /**
      * Update code value from internal state

package/dist/collection/components/lime-query-builder/lime-query-builder.css

@@ -8,7 +8,7 @@
   --header-background-color: rgb(var(--contrast-400));
   --limebb-lime-query-builder-background-color: rgb(var(--contrast-100));
   --limebb-lime-query-builder-border-radius: 0.75rem;
-  --limebb-lime-query-builder-gui-mode-padding: 1rem;
+  --limebb-lime-query-builder-visual-mode-padding: 1rem;
   --limebb-lime-query-builder-group-color: rgb(var(--color-sky-lighter));
   box-sizing: border-box;
   width: calc(100% - 1.5rem);
@@ -20,11 +20,11 @@
   box-shadow: var(--shadow-inflated-16);
 }
 
-.gui-mode {
+.visual-mode {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: var(--limebb-lime-query-builder-gui-mode-padding);
+  padding: var(--limebb-lime-query-builder-visual-mode-padding);
   border: 1px solid var(--header-background-color);
   border-radius: 0 0 var(--limebb-lime-query-builder-border-radius) var(--limebb-lime-query-builder-border-radius);
 }
@@ -55,7 +55,7 @@
 .code-mode .validation-errors li {
   margin: 0.25rem 0;
 }
-.code-mode .gui-limitations {
+.code-mode .visual-mode-limitations {
   padding: 0.75rem 1rem;
   color: rgb(var(--color-blue-dark));
   background-color: rgb(var(--color-blue-lighter));
@@ -63,16 +63,16 @@
   border-radius: 0.25rem;
   font-size: 0.875rem;
 }
-.code-mode .gui-limitations strong {
+.code-mode .visual-mode-limitations strong {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 600;
 }
-.code-mode .gui-limitations ul {
+.code-mode .visual-mode-limitations ul {
   margin: 0;
   padding-left: 1.5rem;
 }
-.code-mode .gui-limitations li {
+.code-mode .visual-mode-limitations li {
   margin: 0.25rem 0;
 }
 
@@ -92,8 +92,8 @@ section h4 {
 
 limel-header.is-narrow {
   --header-top-right-left-border-radius: 0;
-  width: calc(100% + var(--limebb-lime-query-builder-gui-mode-padding) * 2);
-  margin-left: calc(var(--limebb-lime-query-builder-gui-mode-padding) * -1);
+  width: calc(100% + var(--limebb-lime-query-builder-visual-mode-padding) * 2);
+  margin-left: calc(var(--limebb-lime-query-builder-visual-mode-padding) * -1);
 }
 
 .query-options-controls {

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

@@ -42,7 +42,7 @@ import { isLimeQuerySupported, } from "./lime-query-validation";
  */
 export class LimeQueryBuilder {
     constructor() {
-        this.mode = 'gui';
+        this.mode = 'visual';
         this.codeValue = '';
         this.limetype = '';
         this.handleLimetypeChange = (event) => {
@@ -81,11 +81,11 @@ export class LimeQueryBuilder {
         this.handleChange = (event) => {
             event.stopPropagation();
             const mode = event.detail.id;
-            if (mode === 'gui') {
+            if (mode === 'visual') {
                 try {
                     const parsed = JSON.parse(this.codeValue);
-                    const support = this.checkGuiSupport();
-                    if (!support.guiSupported) {
+                    const support = this.checkVisualModeSupport();
+                    if (!support.visualModeSupported) {
                         return;
                     }
                     this.limetype = parsed.limetype || '';
@@ -93,7 +93,7 @@ export class LimeQueryBuilder {
                     this.internalResponseFormat = parsed.responseFormat;
                     this.limit = parsed.limit;
                     this.orderBy = parsed.orderBy;
-                    this.mode = 'gui';
+                    this.mode = 'visual';
                     this.change.emit(parsed);
                 }
                 catch (_a) {
@@ -122,19 +122,19 @@ export class LimeQueryBuilder {
     getButtons() {
         return [
             {
-                id: 'gui',
+                id: 'visual',
                 title: 'Visual',
             },
             { id: 'code', title: 'Code' },
         ];
     }
-    get guiModeEnabled() {
+    get visualModeEnabled() {
         var _a, _b, _c;
         return ((_c = (_b = (_a = this.platform) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled) === null || _b === void 0 ? void 0 : _b.call(_a, 'useLimeQueryBuilderGuiMode')) !== null && _c !== void 0 ? _c : false);
     }
     componentWillLoad() {
-        // Force code mode if GUI is disabled
-        if (!this.guiModeEnabled) {
+        // Force code mode if visual mode is disabled
+        if (!this.visualModeEnabled) {
             this.mode = 'code';
             // Initialize code value from prop
             this.updateCodeValue();
@@ -149,24 +149,24 @@ export class LimeQueryBuilder {
         }
         // Initialize code value from prop
         this.updateCodeValue();
-        // Check if GUI mode is supported
-        const support = this.checkGuiSupport();
-        if (!support.guiSupported) {
+        // Check if visual mode is supported
+        const support = this.checkVisualModeSupport();
+        if (!support.visualModeSupported) {
             this.mode = 'code';
         }
     }
     render() {
-        return (h(Host, { key: '02e7367fbc718a8625c8d49d5e546acca0986ce2' }, this.renderHeader(), this.renderContent()));
+        return (h(Host, { key: '4f1481f575b1afdd63a3115761a52a62699d7f84' }, this.renderHeader(), this.renderContent()));
     }
     renderContent() {
-        const guiSupported = this.checkGuiSupport();
-        const showCodeMode = !this.guiModeEnabled || this.mode === 'code';
+        const visualModeSupported = this.checkVisualModeSupport();
+        const showCodeMode = !this.visualModeEnabled || this.mode === 'code';
         return showCodeMode
-            ? this.renderCodeMode(guiSupported)
-            : this.renderGuiMode();
+            ? this.renderCodeMode(visualModeSupported)
+            : this.renderVisualMode();
     }
     emitChange() {
-        // Only emit in GUI mode
+        // Only emit in visual mode
         if (this.mode === 'code') {
             return;
         }
@@ -202,14 +202,14 @@ export class LimeQueryBuilder {
         }
         return limeQuery;
     }
-    checkGuiSupport() {
+    checkVisualModeSupport() {
         if (!this.limetypes) {
             // Can't validate yet, assume all is good
             return {
                 valid: true,
-                guiSupported: true,
+                visualModeSupported: true,
                 validationErrors: [],
-                guiLimitations: [],
+                visualModeLimitations: [],
             };
         }
         // When in code mode, validate the parsed code value instead of current state
@@ -221,20 +221,20 @@ export class LimeQueryBuilder {
             catch (_a) {
                 return {
                     valid: false,
-                    guiSupported: false,
+                    visualModeSupported: false,
                     validationErrors: ['Invalid JSON'],
-                    guiLimitations: [],
+                    visualModeLimitations: [],
                 };
             }
         }
         else {
-            // Build query from current GUI state
+            // Build query from current visual state
             if (!this.limetype) {
                 return {
                     valid: true,
-                    guiSupported: true,
+                    visualModeSupported: true,
                     validationErrors: [],
-                    guiLimitations: [],
+                    visualModeLimitations: [],
                 };
             }
             const responseFormat = this
@@ -252,23 +252,24 @@ export class LimeQueryBuilder {
                 queryToCheck.limit = this.limit;
             }
         }
-        return isLimeQuerySupported(queryToCheck, this.limetypes, this.activeLimetype, this.guiModeEnabled);
+        return isLimeQuerySupported(queryToCheck, this.limetypes, this.activeLimetype, this.visualModeEnabled);
     }
     renderModeSwitch(support) {
-        const guiDisabled = !support.guiSupported;
+        const visualDisabled = !support.visualModeSupported;
         const buttons = this.getButtons().map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
-        return (h("limel-button-group", { slot: "actions", onChange: this.handleChange, value: buttons, disabled: guiDisabled }));
+        return (h("limel-button-group", { slot: "actions", onChange: this.handleChange, value: buttons, disabled: visualDisabled }));
     }
-    renderCodeEditor(guiSupported) {
+    renderCodeEditor(visualModeSupported) {
         return [
             h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }),
             /* Show validation errors (invalid Lime Query) */
-            !guiSupported.valid && guiSupported.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Lime Query:"), h("ul", null, guiSupported.validationErrors.map((error) => (h("li", null, error)))))),
-            /* Show GUI limitations (only when GUI mode is enabled and Lime Query is valid) */
-            this.guiModeEnabled &&
-                guiSupported.valid &&
-                !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)))))),
+            !visualModeSupported.valid &&
+                visualModeSupported.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Lime Query:"), h("ul", null, visualModeSupported.validationErrors.map((error) => (h("li", null, error)))))),
+            /* Show visual mode limitations (only when visual mode is enabled and Lime Query is valid) */
+            this.visualModeEnabled &&
+                visualModeSupported.valid &&
+                !visualModeSupported.visualModeSupported &&
+                visualModeSupported.visualModeLimitations.length > 0 && (h("div", { class: "visual-mode-limitations" }, h("strong", null, "Cannot switch to visual mode:"), h("ul", null, visualModeSupported.visualModeLimitations.map((limitation) => (h("li", null, limitation)))))),
         ];
     }
     renderLimetypeSection() {
@@ -293,15 +294,15 @@ export class LimeQueryBuilder {
         }
         return (h("section", { class: "query-options" }, h("limel-header", { class: "is-narrow", heading: "Query Options", icon: "ask_question" }), 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()));
+    renderVisualMode() {
+        return (h("div", { class: "visual-mode" }, this.renderLimetypeSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
     }
     renderHeader() {
-        const guiSupported = this.checkGuiSupport();
-        return (h("limel-header", { heading: this.label }, this.renderModeControls(guiSupported)));
+        const visualModeSupported = this.checkVisualModeSupport();
+        return (h("limel-header", { heading: this.label }, this.renderModeControls(visualModeSupported)));
     }
     renderModeControls(support) {
-        if (!this.guiModeEnabled) {
+        if (!this.visualModeEnabled) {
             return;
         }
         return this.renderModeSwitch(support);

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

@@ -30,7 +30,7 @@
   padding: 0.5rem;
 }
 
-.gui-mode,
+.visual-mode,
 .code-mode {
   display: block;
 }
@@ -61,7 +61,7 @@
 .code-editor-container .validation-errors li {
   margin: 0.25rem 0;
 }
-.code-editor-container .gui-limitations {
+.code-editor-container .visual-mode-limitations {
   padding: 0.75rem 1rem;
   color: rgb(var(--color-blue-dark));
   background-color: rgb(var(--color-blue-lighter));
@@ -69,15 +69,15 @@
   border-radius: 0.25rem;
   font-size: 0.875rem;
 }
-.code-editor-container .gui-limitations strong {
+.code-editor-container .visual-mode-limitations strong {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 600;
 }
-.code-editor-container .gui-limitations ul {
+.code-editor-container .visual-mode-limitations ul {
   margin: 0;
   padding-left: 1.5rem;
 }
-.code-editor-container .gui-limitations li {
+.code-editor-container .visual-mode-limitations li {
   margin: 0.25rem 0;
 }