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

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

@@ -0,0 +1,355 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { SelectLimeTypes as Limetypes, } from "@limetech/lime-web-components";
+import { parseResponseFormat, stringifyResponseFormat, getDefaultResponseFormat, } from "./response-format/response-format-helpers";
+import { validateResponseFormatOnly, } from "./lime-query-validation";
+/**
+ * Response Format Builder
+ *
+ * A focused component for editing Lime Query ResponseFormat in isolation.
+ * Supports both GUI and code modes for maximum flexibility.
+ *
+ * Use this component when you need to configure which properties to return
+ * from a query, but don't need filter, limit, or other query parameters.
+ *
+ * **Features**:
+ * - **GUI Mode**: Visual property selector with relation navigation
+ * - **Code Mode**: JSON editor for ResponseFormat structure
+ * - **Validation**: Ensures JSON is valid ResponseFormat (rejects other fields)
+ * - **Mode Toggle**: Switch between GUI and code modes seamlessly
+ * - **Feature Flag**: Respects `useLimeQueryBuilderGuiMode` setting
+ *
+ * @example
+ * ```tsx
+ * <limebb-lime-query-response-format-builder
+ *     platform={this.platform}
+ *     context={this.context}
+ *     limetype="deal"
+ *     value={this.responseFormat}
+ *     label="Select Properties to Return"
+ *     onChange={this.handleChange}
+ * />
+ * ```
+ *
+ * @exampleComponent limebb-example-response-format-builder-basic
+ * @private
+ */
+export class LimeQueryResponseFormatBuilder {
+    constructor() {
+        /**
+         * Optional label for the builder
+         */
+        this.label = 'Response Format';
+        this.mode = 'gui';
+        this.codeValue = '';
+        /**
+         * Switch from code mode to GUI mode
+         */
+        this.switchToGui = () => {
+            // Validate JSON before switching
+            try {
+                const parsed = parseResponseFormat(this.codeValue);
+                // Check if it's supported in GUI
+                const support = validateResponseFormatOnly(parsed, this.limetypes, this.limetype, this.guiModeEnabled);
+                if (!support.guiSupported) {
+                    // Don't switch if GUI can't render this response format
+                    return;
+                }
+                // Update internal state from parsed value
+                this.internalValue = parsed;
+                this.mode = 'gui';
+                this.change.emit(parsed);
+            }
+            catch (_a) {
+                // Don't switch if JSON is invalid (linter will show the error)
+            }
+        };
+        /**
+         * Switch from GUI mode to code mode
+         */
+        this.switchToCode = () => {
+            this.updateCodeValue();
+            this.mode = 'code';
+        };
+        /**
+         * Handle code editor changes
+         * @param event
+         */
+        this.handleCodeChange = (event) => {
+            event.stopPropagation();
+            this.codeValue = event.detail;
+            // Try to parse and emit if valid
+            try {
+                const parsed = parseResponseFormat(this.codeValue);
+                this.internalValue = parsed;
+                this.change.emit(parsed);
+            }
+            catch (_a) {
+                // Invalid JSON - don't emit change
+                // Validation errors will be shown by checkGuiSupport()
+            }
+        };
+        /**
+         * Handle GUI mode changes
+         * @param event
+         */
+        this.handleGuiChange = (event) => {
+            event.stopPropagation();
+            this.internalValue = event.detail;
+            this.updateCodeValue();
+            this.change.emit(event.detail);
+        };
+    }
+    /**
+     * Check if GUI mode is enabled via feature flag
+     */
+    get guiModeEnabled() {
+        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() {
+        // Initialize internal value
+        this.internalValue = this.value || getDefaultResponseFormat();
+        // Update code value from internal value
+        this.updateCodeValue();
+        // Force code mode if GUI is disabled
+        if (!this.guiModeEnabled) {
+            this.mode = 'code';
+            return;
+        }
+        // Check if GUI mode is supported for current value
+        const support = this.checkGuiSupport();
+        if (!support.guiSupported) {
+            this.mode = 'code';
+        }
+    }
+    componentWillUpdate() {
+        // Sync internal value when prop changes externally
+        if (this.value && this.mode === 'gui') {
+            this.internalValue = this.value;
+        }
+    }
+    render() {
+        const guiSupported = this.checkGuiSupport();
+        return (h("div", { key: '2b5e4ee360d6997a176d24e5a7aa36158461ad4a', class: "response-format-builder" }, this.label && h("h3", { key: 'b81f58824e4cf3114efd4d2978c833f7f06f2004', class: "builder-label" }, this.label), this.guiModeEnabled && (h("div", { key: '1b2ec0cd39909568732be94707a9dcadaa4a1223', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (h("div", { class: "gui-mode" }, this.renderGuiMode()))));
+    }
+    renderModeSwitch(support) {
+        const guiDisabled = !support.guiSupported;
+        return (h("div", { class: "mode-switch" }, h("limel-button", { label: "GUI", primary: this.mode === 'gui', disabled: guiDisabled, onClick: this.switchToGui }), h("limel-button", { label: "Code", primary: this.mode === 'code', onClick: this.switchToCode })));
+    }
+    renderCodeEditor(support) {
+        return (h("div", { class: "code-editor-container" }, h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }), !support.valid && support.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Response Format:"), h("ul", null, support.validationErrors.map((error) => (h("li", null, error)))))), this.guiModeEnabled &&
+            support.valid &&
+            !support.guiSupported &&
+            support.guiLimitations.length > 0 && (h("div", { class: "gui-limitations" }, h("strong", null, "Cannot switch to GUI mode:"), h("ul", null, support.guiLimitations.map((limitation) => (h("li", null, limitation))))))));
+    }
+    renderGuiMode() {
+        return (h("limebb-lime-query-response-format-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.internalValue, onChange: this.handleGuiChange }));
+    }
+    /**
+     * Check if current value can be rendered in GUI mode
+     */
+    checkGuiSupport() {
+        if (!this.limetypes) {
+            return {
+                valid: false,
+                guiSupported: false,
+                validationErrors: ['Limetypes not loaded'],
+                guiLimitations: [],
+            };
+        }
+        // Try to parse code value if in code mode
+        let valueToCheck;
+        if (this.mode === 'code') {
+            try {
+                valueToCheck = parseResponseFormat(this.codeValue);
+            }
+            catch (error) {
+                return {
+                    valid: false,
+                    guiSupported: false,
+                    validationErrors: [error.message],
+                    guiLimitations: [],
+                };
+            }
+        }
+        else {
+            valueToCheck = this.internalValue;
+        }
+        return validateResponseFormatOnly(valueToCheck, this.limetypes, this.limetype, this.guiModeEnabled);
+    }
+    /**
+     * Update code value from internal state
+     */
+    updateCodeValue() {
+        this.codeValue = stringifyResponseFormat(this.internalValue);
+    }
+    static get is() { return "limebb-lime-query-response-format-builder"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lime-query-response-format-builder.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lime-query-response-format-builder.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "platform": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentPlatform",
+                    "resolved": "LimeWebComponentPlatform",
+                    "references": {
+                        "LimeWebComponentPlatform": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentPlatform"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Platform service provider"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "context": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentContext",
+                    "resolved": "LimeWebComponentContext",
+                    "references": {
+                        "LimeWebComponentContext": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentContext"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component context"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "limetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype to configure response format for\nThis is fixed and not editable by the user"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "limetype",
+                "reflect": false
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ResponseFormat",
+                    "resolved": "ResponseFormat | undefined",
+                    "references": {
+                        "ResponseFormat": {
+                            "location": "import",
+                            "path": "./lime-query.types",
+                            "id": "src/components/lime-query-builder/lime-query.types.ts::ResponseFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current response format value"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label for the builder"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Response Format'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "limetypes": {},
+            "mode": {},
+            "codeValue": {},
+            "internalValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the response format changes"
+                },
+                "complexType": {
+                    "original": "ResponseFormat",
+                    "resolved": "ResponseFormat",
+                    "references": {
+                        "ResponseFormat": {
+                            "location": "import",
+                            "path": "./lime-query.types",
+                            "id": "src/components/lime-query-builder/lime-query.types.ts::ResponseFormat"
+                        }
+                    }
+                }
+            }];
+    }
+}
+__decorate([
+    Limetypes()
+], LimeQueryResponseFormatBuilder.prototype, "limetypes", void 0);

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

@@ -328,6 +328,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
@@ -377,14 +484,14 @@ export function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiMo
     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) {
@@ -404,3 +511,43 @@ export function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiMo
         guiLimitations,
     };
 }
+// ============================================================================
+// Specialized Validators for Modular Builders
+// ============================================================================
+/**
+ * Validate a ResponseFormat in isolation (for response-format-builder)
+ *
+ * This validator is designed for the response-format-builder component,
+ * which only handles ResponseFormat editing without the full LimeQuery context.
+ *
+ * @param responseFormat - The response format to validate
+ * @param limetypes - Record of all available limetypes
+ * @param limetype - The limetype context for validation
+ * @param guiModeEnabled - Whether GUI mode is enabled (affects validation)
+ * @returns Validation result with errors and GUI limitations
+ */
+export function validateResponseFormatOnly(responseFormat, limetypes, limetype, guiModeEnabled = true) {
+    const validationErrors = [];
+    const guiLimitations = [];
+    // Validate limetype exists
+    if (!limetypes[limetype]) {
+        validationErrors.push(`Unknown limetype: ${limetype}`);
+        // Can't proceed with property validation if limetype is unknown
+        return {
+            valid: false,
+            guiSupported: false,
+            validationErrors,
+            guiLimitations,
+        };
+    }
+    // Use internal validation logic
+    const { errors, limitations } = validateLimeQueryResponseFormatInternal(responseFormat, limetypes, limetype, guiModeEnabled);
+    validationErrors.push(...errors);
+    guiLimitations.push(...limitations);
+    return {
+        valid: validationErrors.length === 0,
+        guiSupported: guiLimitations.length === 0,
+        validationErrors,
+        guiLimitations,
+    };
+}

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

@@ -78,7 +78,7 @@ export class LimetypeField {
             value: '',
         };
         options.unshift(emptyOption);
-        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 }));
+        return (h("limel-select", { key: 'ee9fdc46424c9e6dc5897260cb16bcbedd43413a', 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 || '');

package/dist/collection/components/lime-query-builder/order-by/order-by-editor.css

@@ -0,0 +1,72 @@
+: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;
+}