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

package/dist/collection/components/lime-query-builder/expressions/lime-query-value-input.js

@@ -0,0 +1,457 @@
+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 { getPropertyFromPath } from "../property-resolution";
+/**
+ * Query Value Input Component
+ *
+ * Renders an appropriate input control based on the property type and operator.
+ * This component automatically adapts its UI to match the data type of the selected
+ * property, providing a better user experience and data validation.
+ *
+ * Supported input types:
+ * - **String/Text**: Standard text input field
+ * - **Integer/Decimal**: Number input with appropriate step values
+ * - **Date**: Date picker returning ISO date strings
+ * - **Time**: Time input field
+ * - **Boolean (yesno)**: True/False dropdown
+ * - **Option**: Dropdown populated with valid options from property definition
+ * - **IN operator**: Comma-separated input for multiple values (any type)
+ * - **Placeholder mode**: Select properties from active object using %activeObject%
+ *
+ * The component handles type conversions automatically:
+ * - Numbers are parsed from string inputs
+ * - Dates are converted to/from ISO strings
+ * - Booleans are converted to/from strings for dropdown compatibility
+ *
+ * @private
+ */
+export class LimeQueryValueInput {
+    constructor() {
+        /**
+         * Optional label for the input
+         */
+        this.label = 'Value';
+        this.inputMode = 'value';
+        this.handleTextChange = (event) => {
+            event.stopPropagation();
+            // Try to parse as number for number inputs
+            const value = event.detail;
+            const numValue = Number(value);
+            if (!Number.isNaN(numValue) && value !== '') {
+                this.change.emit(numValue);
+            }
+            else {
+                this.change.emit(value);
+            }
+        };
+        this.handleSelectChange = (event) => {
+            event.stopPropagation();
+            const detail = event.detail;
+            if (Array.isArray(detail)) {
+                this.change.emit(detail.map((o) => o.value));
+            }
+            else {
+                this.change.emit(detail === null || detail === void 0 ? void 0 : detail.value);
+            }
+        };
+        this.handleBooleanChange = (event) => {
+            event.stopPropagation();
+            const detail = event.detail;
+            if (!Array.isArray(detail)) {
+                // Convert string back to boolean
+                this.change.emit((detail === null || detail === void 0 ? void 0 : detail.value) === 'true');
+            }
+        };
+        this.handleDateChange = (event) => {
+            event.stopPropagation();
+            // Convert Date to ISO string for storage
+            const date = event.detail;
+            this.change.emit(date ? date.toISOString() : null);
+        };
+        this.handleMultiValueChange = (event) => {
+            event.stopPropagation();
+            // Split by comma and trim whitespace
+            const values = event.detail
+                .split(',')
+                .map((v) => v.trim())
+                .filter((v) => v.length > 0);
+            this.change.emit(values);
+        };
+        this.handleModeToggle = () => {
+            if (this.inputMode === 'value') {
+                // Switching to placeholder mode
+                this.inputMode = 'placeholder';
+                // Emit placeholder value (empty initially)
+                this.change.emit('%activeObject%');
+            }
+            else {
+                // Switching to value mode
+                this.inputMode = 'value';
+                // Emit empty value
+                this.change.emit('');
+            }
+        };
+        this.handlePlaceholderPropertyChange = (event) => {
+            event.stopPropagation();
+            const propertyPath = event.detail;
+            const placeholderValue = this.buildPlaceholderValue(propertyPath);
+            this.change.emit(placeholderValue);
+        };
+    }
+    componentWillLoad() {
+        // Detect if the current value is a placeholder
+        if (this.isPlaceholder(this.value)) {
+            this.inputMode = 'placeholder';
+        }
+    }
+    componentWillUpdate() {
+        // Update mode if value changes externally
+        if (this.isPlaceholder(this.value) &&
+            this.inputMode !== 'placeholder') {
+            this.inputMode = 'placeholder';
+        }
+        else if (!this.isPlaceholder(this.value) &&
+            this.inputMode === 'placeholder') {
+            this.inputMode = 'value';
+        }
+    }
+    isPlaceholder(value) {
+        return typeof value === 'string' && value.startsWith('%activeObject%');
+    }
+    parsePlaceholderPath(value) {
+        if (!this.isPlaceholder(value)) {
+            return '';
+        }
+        // Extract path after %activeObject%. (e.g., "%activeObject%.company.name" → "company.name")
+        return value.replace(/^%activeObject%\.?/, '');
+    }
+    buildPlaceholderValue(propertyPath) {
+        if (!propertyPath) {
+            return '%activeObject%';
+        }
+        return `%activeObject%.${propertyPath}`;
+    }
+    render() {
+        if (!this.operator) {
+            return null;
+        }
+        return (h("div", { class: "value-input-container" }, this.renderModeToggle(), this.inputMode === 'placeholder'
+            ? this.renderPlaceholderInput()
+            : this.renderValueInputByType()));
+    }
+    renderModeToggle() {
+        // Only show toggle if activeLimetype is set
+        if (!this.activeLimetype) {
+            return null;
+        }
+        const isPlaceholderMode = this.inputMode === 'placeholder';
+        const buttonLabel = isPlaceholderMode ? 'Use Value' : 'Use Placeholder';
+        const buttonIcon = isPlaceholderMode ? 'text' : 'link';
+        return (h("limel-icon-button", { class: "mode-toggle", icon: buttonIcon, label: buttonLabel, onClick: this.handleModeToggle }));
+    }
+    renderPlaceholderInput() {
+        const propertyPath = this.parsePlaceholderPath(this.value);
+        return (h("div", { class: "placeholder-input" }, h("limebb-property-selector", { platform: this.platform, context: this.context, limetype: this.activeLimetype, label: "Active Object Property", value: propertyPath, required: false, helperText: "Select property from the active object", onChange: this.handlePlaceholderPropertyChange }), this.isPlaceholder(this.value) && (h("div", { class: "placeholder-preview" }, h("limel-icon", { name: "info", size: "small" }), h("span", null, "Placeholder: ", this.value)))));
+    }
+    renderValueInputByType() {
+        // Special handling for IN operator - always use chip set for arrays
+        if (this.operator === 'IN') {
+            return this.renderMultiValueInput();
+        }
+        const property = this.getProperty();
+        if (!property) {
+            return this.renderTextInput();
+        }
+        switch (property.type) {
+            case 'integer':
+            case 'decimal': {
+                return this.renderNumberInput(property.type);
+            }
+            case 'yesno': {
+                return this.renderBooleanInput();
+            }
+            case 'option': {
+                return this.renderOptionInput(property);
+            }
+            case 'date': {
+                return this.renderDateInput();
+            }
+            case 'time': {
+                return this.renderTimeInput();
+            }
+            default: {
+                return this.renderTextInput();
+            }
+        }
+    }
+    renderTextInput() {
+        var _a;
+        return (h("limel-input-field", { label: this.label, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '', placeholder: "Enter value", onChange: this.handleTextChange }));
+    }
+    renderNumberInput(type) {
+        var _a;
+        const step = type === 'integer' ? 1 : 0.01;
+        return (h("limel-input-field", { label: this.label, type: "number", value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '', step: step, onChange: this.handleTextChange }));
+    }
+    renderBooleanInput() {
+        const options = [
+            { text: 'True', value: 'true' },
+            { text: 'False', value: 'false' },
+        ];
+        const valueAsString = this.value === true || this.value === 'true' ? 'true' : 'false';
+        const selectedOption = options.find((o) => o.value === valueAsString);
+        return (h("limel-select", { label: this.label, options: options, value: selectedOption, onChange: this.handleBooleanChange }));
+    }
+    renderOptionInput(property) {
+        if (!property.options || property.options.length === 0) {
+            return this.renderTextInput();
+        }
+        const options = property.options.map((opt) => ({
+            text: opt.text || opt.key,
+            value: opt.key,
+        }));
+        const selectedOption = options.find((o) => o.value === this.value);
+        return (h("limel-select", { label: this.label, options: options, value: selectedOption, onChange: this.handleSelectChange }));
+    }
+    renderDateInput() {
+        // Convert string to Date if needed
+        const dateValue = typeof this.value === 'string' ? new Date(this.value) : this.value;
+        return (h("limel-date-picker", { label: this.label, value: dateValue, onChange: this.handleDateChange }));
+    }
+    renderTimeInput() {
+        return (h("limel-input-field", { label: this.label, type: "time", value: this.value || '', onChange: this.handleTextChange }));
+    }
+    renderMultiValueInput() {
+        // For IN operator, allow comma-separated values
+        const displayValue = Array.isArray(this.value)
+            ? this.value.join(', ')
+            : this.value || '';
+        return (h("limel-input-field", { label: this.label + ' (comma-separated)', value: displayValue, placeholder: "e.g., won, lost, tender", onChange: this.handleMultiValueChange }));
+    }
+    getProperty() {
+        if (!this.limetypes || !this.limetype || !this.propertyPath) {
+            return;
+        }
+        return getPropertyFromPath(this.limetypes, this.limetype, this.propertyPath);
+    }
+    static get is() { return "limebb-lime-query-value-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lime-query-value-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lime-query-value-input.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 being queried"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "limetype",
+                "reflect": false
+            },
+            "activeLimetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype of the active object (for %activeObject% placeholders)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-limetype",
+                "reflect": false
+            },
+            "propertyPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The property path (e.g., \"dealstatus\", \"company.name\")"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "property-path",
+                "reflect": false
+            },
+            "operator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FilterOperator",
+                    "resolved": "\"!=\" | \"<\" | \"<=\" | \"=\" | \"=$\" | \"=?\" | \">\" | \">=\" | \"?\" | \"IN\"",
+                    "references": {
+                        "FilterOperator": {
+                            "location": "import",
+                            "path": "../lime-query.types",
+                            "id": "src/components/lime-query-builder/lime-query.types.ts::FilterOperator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The operator being used"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "operator",
+                "reflect": false
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Value'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "limetypes": {},
+            "inputMode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+__decorate([
+    Limetypes()
+], LimeQueryValueInput.prototype, "limetypes", void 0);

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

@@ -55,27 +55,6 @@ export function guiFilterToLimeQuery(filter) {
     }
     return undefined;
 }
-/**
- * Convert Lime Query filter to UI filter representation
- * Throws errors for unsupported filter structures
- * @param filter
- */
-export 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);
-}
 /**
  * Validate and convert a FilterExpression (comparison filter)
  * @param filter
@@ -156,3 +135,121 @@ 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
+ */
+export 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
+ */
+export 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],
+            },
+        ],
+    };
+}

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

@@ -1,4 +1,4 @@
-:host(limebb-lime-query-builder) {
+:host(limebb-lime-lime-query-builder) {
   display: block;
   width: 100%;
 }
@@ -14,8 +14,6 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem;
-  background-color: rgb(var(--contrast-100));
-  border-radius: var(--border-radius);
 }
 
 .mode-switch {
@@ -90,21 +88,36 @@
   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;
+.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-1100));
+  color: rgb(var(--contrast-1000));
 }
-.placeholder-message p {
-  margin: 0;
-  color: rgb(var(--contrast-900));
-  line-height: 1.5;
+
+.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;
+  }
 }