@limetech/lime-crm-building-blocks 1.129.0 → 1.131.0

package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-comparison-editor.js

@@ -0,0 +1,231 @@
+import { Operator, PlatformServiceName, } from "@limetech/lime-web-components";
+import { Host, h } from "@stencil/core";
+import { LIME_QUERY_OPERATORS, } from "./lime-query-operators";
+/**
+ * Inline editor for a single comparison expression. `shadow: true` so
+ * its stylesheet travels with the host when `limel-popover` portals it
+ * out of the parent's shadow root.
+ *
+ * @private
+ */
+export class LimeQueryFilterComparisonEditorComponent {
+    constructor() {
+        this.handlePropertyChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { key: event.detail }));
+        };
+        this.handleOperatorChange = (event) => {
+            event.stopPropagation();
+            const newOperator = event.detail.value;
+            const oldOperator = this.expression.op;
+            let convertedValue = this.expression.exp;
+            // IN expects an array; other operators expect a single value.
+            if (newOperator === Operator.IN && !Array.isArray(convertedValue)) {
+                convertedValue =
+                    convertedValue !== undefined && convertedValue !== ''
+                        ? [convertedValue]
+                        : [];
+            }
+            else if (oldOperator === Operator.IN &&
+                newOperator !== Operator.IN &&
+                Array.isArray(convertedValue)) {
+                convertedValue = convertedValue.length > 0 ? convertedValue[0] : '';
+            }
+            this.expressionChange.emit({
+                key: this.expression.key,
+                op: newOperator,
+                exp: convertedValue,
+            });
+        };
+        this.handleValueChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { exp: event.detail }));
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        // limel-popover does not auto-focus its portaled content.
+        (_a = this.propertySelectorEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (h(Host, { key: '8b70eaef1906fd9eaa69c9e4d6c42937406d2fcc' }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput()));
+    }
+    renderPropertySelector() {
+        return (h("limebb-property-selector", { ref: (el) => (this.propertySelectorEl = el), class: "property", label: "Property", platform: this.platform, context: this.context, limetype: this.limetype, value: this.expression.key, required: true, onChange: this.handlePropertyChange }));
+    }
+    renderOperator() {
+        const operatorHasBeenSet = !!this.expression.op;
+        const options = LIME_QUERY_OPERATORS.map((op) => {
+            var _a, _b;
+            return ({
+                text: (_b = (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get(op.label)) !== null && _b !== void 0 ? _b : op.label,
+                value: op.value,
+                icon: op.icon ? { name: op.icon } : undefined,
+            });
+        });
+        const selectedOption = options.find((o) => o.value === this.expression.op);
+        return (h("limel-select", { class: "operator", label: "Operator", value: selectedOption, options: options, disabled: !operatorHasBeenSet && !this.expression.key, onChange: this.handleOperatorChange }));
+    }
+    renderValueInput() {
+        if (!this.expression.op) {
+            return null;
+        }
+        return (h("limebb-lime-query-value-input", { class: "value", label: "Value", platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, propertyPath: this.expression.key, operator: this.expression.op, value: this.expression.exp, onChange: this.handleValueChange }));
+    }
+    get translator() {
+        var _a;
+        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.Translate);
+    }
+    static get is() { return "limebb-lime-query-filter-comparison-editor"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lime-query-filter-comparison-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lime-query-filter-comparison-editor.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",
+                            "referenceLocation": "LimeWebComponentPlatform"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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",
+                            "referenceLocation": "LimeWebComponentContext"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "limetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "limetype"
+            },
+            "activeLimetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-limetype"
+            },
+            "expression": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComparisonExpression",
+                    "resolved": "{ key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
+                    "references": {
+                        "ComparisonExpression": {
+                            "location": "import",
+                            "path": "./lime-query-operators",
+                            "id": "src/components/lime-query-builder/expressions/lime-query-operators.ts::ComparisonExpression",
+                            "referenceLocation": "ComparisonExpression"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expressionChange",
+                "name": "expressionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComparisonExpression",
+                    "resolved": "{ key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
+                    "references": {
+                        "ComparisonExpression": {
+                            "location": "import",
+                            "path": "./lime-query-operators",
+                            "id": "src/components/lime-query-builder/expressions/lime-query-operators.ts::ComparisonExpression",
+                            "referenceLocation": "ComparisonExpression"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-comparison.css

@@ -1,19 +1,4 @@
 :host(limebb-lime-query-filter-comparison) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.expression-container {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  grid-gap: 0.5rem;
-  padding-right: 2.75rem;
-}
-
-.remove {
-  position: absolute;
-  right: 0;
-  top: 0.125rem;
+  display: inline-block;
+  max-width: 25rem;
 }

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

@@ -1,64 +1,7 @@
-import { Operator, PlatformServiceName, } from "@limetech/lime-web-components";
-import { Host, h } from "@stencil/core";
-const LIME_QUERY_OPERATORS = [
-    {
-        value: Operator.EQUALS,
-        label: 'webclient.operator.equals',
-        icon: '-lime-filter-equal',
-    },
-    {
-        value: Operator.NOT_EQUALS,
-        label: 'webclient.operator.not-equals',
-        icon: '-lime-filter-equal-not',
-    },
-    {
-        value: Operator.GREATER,
-        label: 'webclient.operator.greater-than',
-        icon: '-lime-filter-greater',
-        applicableTypes: ['integer', 'decimal', 'date', 'time'],
-    },
-    {
-        value: Operator.GREATER_OR_EQUAL,
-        label: 'webclient.operator.greater-than-or-equal-to',
-        icon: '-lime-filter-greater-equal',
-        applicableTypes: ['integer', 'decimal', 'date', 'time'],
-    },
-    {
-        value: Operator.LESS,
-        label: 'webclient.operator.less-than',
-        icon: '-lime-filter-less',
-        applicableTypes: ['integer', 'decimal', 'date', 'time'],
-    },
-    {
-        value: Operator.LESS_OR_EQUAL,
-        label: 'webclient.operator.less-than-or-equal-to',
-        icon: '-lime-filter-less-equal',
-        applicableTypes: ['integer', 'decimal', 'date', 'time'],
-    },
-    {
-        value: Operator.IN,
-        label: 'webclient.operator.in-filter',
-        icon: '-lime-filter-set-included',
-    },
-    {
-        value: Operator.LIKE,
-        label: 'webclient.operator.contains',
-        icon: '-lime-filter-contain',
-        applicableTypes: ['string', 'text'],
-    },
-    {
-        value: Operator.BEGINS,
-        label: 'webclient.operator.begins-with',
-        icon: '-lime-filter-starts-with',
-        applicableTypes: ['string', 'text'],
-    },
-    {
-        value: Operator.ENDS,
-        label: 'webclient.operator.ends-with',
-        icon: '-lime-filter-ends-with',
-        applicableTypes: ['string', 'text'],
-    },
-];
+import { PlatformServiceName, } from "@limetech/lime-web-components";
+import { Host, h, } from "@stencil/core";
+import { LIME_QUERY_OPERATORS, } from "./lime-query-operators";
+import { getNormalizedProperties } from "../property-resolution";
 /**
  * Lime Query Filter Comparison Component
  *
@@ -83,74 +26,95 @@ const LIME_QUERY_OPERATORS = [
  */
 export class LimeQueryFilterComparisonComponent {
     constructor() {
-        this.handlePropertyChange = (event) => {
-            event.stopPropagation();
-            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { key: event.detail }));
+        this.isOpen = false;
+        this.handleOpen = () => {
+            this.isOpen = true;
         };
-        this.handleOperatorChange = (event) => {
-            event.stopPropagation();
-            const newOperator = event.detail.value;
-            const oldOperator = this.expression.op;
-            let convertedValue = this.expression.exp;
-            // Convert value when switching between IN and other operators
-            // IN operator expects an array, other operators expect a single value
-            if (newOperator === Operator.IN && !Array.isArray(convertedValue)) {
-                // Switching TO IN operator: wrap non-array value in array
-                convertedValue =
-                    convertedValue !== undefined && convertedValue !== ''
-                        ? [convertedValue]
-                        : [];
-            }
-            else if (oldOperator === Operator.IN &&
-                newOperator !== Operator.IN &&
-                Array.isArray(convertedValue)) {
-                // Switching FROM IN operator: extract first element from array
-                convertedValue = convertedValue.length > 0 ? convertedValue[0] : '';
-            }
-            this.expressionChange.emit({
-                key: this.expression.key,
-                op: newOperator,
-                exp: convertedValue,
-            });
+        this.handleClose = () => {
+            this.isOpen = false;
         };
-        this.handleValueChange = (event) => {
+        this.handleEditorChange = (event) => {
             event.stopPropagation();
-            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { exp: event.detail }));
+            this.expressionChange.emit(event.detail);
         };
         this.removeExpression = () => {
             this.expressionChange.emit(undefined);
         };
     }
+    componentWillLoad() {
+        var _a;
+        if (!((_a = this.expression) === null || _a === void 0 ? void 0 : _a.key)) {
+            this.isOpen = true;
+        }
+    }
     render() {
-        return (h(Host, { key: '29ddf92b2e83eafe695faeb9a4ce6b8d29aa973e' }, this.renderHeader(), h("div", { key: '258f8aeee98a2435d324a1e5b816f111188cf3cc', class: "expression-container" }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput(), h("limel-icon-button", { key: 'c9e4cf456908fb82507e2599af631691e96ab8e4', class: "remove", icon: "trash", label: "Remove condition", onClick: this.removeExpression }))));
+        return (h(Host, { key: 'f85d1669dccffd7a0905ac5549eeea2f4c350782' }, this.renderHeader(), h("limel-popover", { key: '793a3ea0377182b86511165e39ff30212736d030', open: this.isOpen, openDirection: "bottom-start", onClose: this.handleClose }, h("limel-chip", { key: '0d4c7c565268c096d390994a862920c8066e1f11', slot: "trigger", text: this.summaryText(), icon: this.summaryIcon(), removable: true, onClick: this.handleOpen, onRemove: this.removeExpression }), h("limebb-lime-query-filter-comparison-editor", { key: 'a4ddad5edc49c4de265e9b3e237fb31455ae48e0', platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression, onExpressionChange: this.handleEditorChange }))));
     }
-    renderHeader() {
-        if (!this.label) {
-            return;
+    summaryText() {
+        var _a;
+        const key = (_a = this.expression) === null || _a === void 0 ? void 0 : _a.key;
+        if (!key) {
+            return 'New condition';
         }
-        return h("limel-header", { subheading: this.label });
+        const propertyLabel = this.getPropertyLabel(key);
+        const opLabel = this.getOperatorLabel(this.expression.op);
+        const value = this.formatValue(this.expression.exp);
+        return `${propertyLabel} ${opLabel} ${value}`.trim();
     }
-    renderPropertySelector() {
-        return (h("limebb-property-selector", { platform: this.platform, context: this.context, label: "Property", limetype: this.limetype, value: this.expression.key, required: true, onChange: this.handlePropertyChange }));
+    getPropertyLabel(key) {
+        var _a, _b;
+        const repository = (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.LimeTypeRepository);
+        if (!repository || !this.limetype) {
+            return key;
+        }
+        const parts = key.split('.');
+        const labels = [];
+        let currentType = repository.getLimeType(this.limetype);
+        for (const part of parts) {
+            if (!currentType) {
+                labels.push(part);
+                continue;
+            }
+            const property = getNormalizedProperties(currentType)[part];
+            labels.push((property === null || property === void 0 ? void 0 : property.localname) || part);
+            currentType = (_b = property === null || property === void 0 ? void 0 : property.relation) === null || _b === void 0 ? void 0 : _b.getLimetype();
+        }
+        return labels.join(' › ');
     }
-    renderOperator() {
-        const operatorHasBeenSet = !!this.expression.op;
-        const options = LIME_QUERY_OPERATORS.map((op) => {
-            var _a, _b;
-            return ({
-                text: (_b = (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get(op.label)) !== null && _b !== void 0 ? _b : op.label,
-                value: op.value,
-                icon: op.icon ? { name: op.icon } : undefined,
-            });
-        });
-        const selectedOption = options.find((o) => o.value === this.expression.op);
-        return (h("limel-select", { class: "operator", label: "Operator", value: selectedOption, options: options, disabled: !operatorHasBeenSet && !this.expression.key, onChange: this.handleOperatorChange }));
+    summaryIcon() {
+        var _a;
+        if (!((_a = this.expression) === null || _a === void 0 ? void 0 : _a.op)) {
+            return undefined;
+        }
+        const meta = LIME_QUERY_OPERATORS.find((op) => op.value === this.expression.op);
+        return meta === null || meta === void 0 ? void 0 : meta.icon;
+    }
+    getOperatorLabel(op) {
+        var _a, _b;
+        if (!op)
+            return '';
+        const meta = LIME_QUERY_OPERATORS.find((m) => m.value === op);
+        if (!meta)
+            return '';
+        return (_b = (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get(meta.label)) !== null && _b !== void 0 ? _b : meta.label;
     }
-    renderValueInput() {
-        if (!this.expression.op) {
-            return null;
+    formatValue(value) {
+        if (value === undefined || value === null || value === '') {
+            return '…';
+        }
+        if (Array.isArray(value)) {
+            return value.map((v) => this.formatValue(v)).join(', ');
+        }
+        if (typeof value === 'string') {
+            return `"${value}"`;
         }
-        return (h("limebb-lime-query-value-input", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, propertyPath: this.expression.key, operator: this.expression.op, value: this.expression.exp, onChange: this.handleValueChange }));
+        return String(value);
+    }
+    renderHeader() {
+        if (!this.label) {
+            return;
+        }
+        return h("limel-header", { subheading: this.label });
     }
     get translator() {
         var _a;
@@ -283,8 +247,10 @@ export class LimeQueryFilterComparisonComponent {
                     "resolved": "{ key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
                     "references": {
                         "ComparisonExpression": {
-                            "location": "global",
-                            "id": "global::ComparisonExpression"
+                            "location": "import",
+                            "path": "./lime-query-operators",
+                            "id": "src/components/lime-query-builder/expressions/lime-query-operators.ts::ComparisonExpression",
+                            "referenceLocation": "ComparisonExpression"
                         }
                     }
                 },
@@ -299,6 +265,11 @@ export class LimeQueryFilterComparisonComponent {
             }
         };
     }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "expressionChange",
@@ -315,8 +286,10 @@ export class LimeQueryFilterComparisonComponent {
                     "resolved": "undefined | { key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
                     "references": {
                         "ComparisonExpression": {
-                            "location": "global",
-                            "id": "global::ComparisonExpression"
+                            "location": "import",
+                            "path": "./lime-query-operators",
+                            "id": "src/components/lime-query-builder/expressions/lime-query-operators.ts::ComparisonExpression",
+                            "referenceLocation": "ComparisonExpression"
                         }
                     }
                 }

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { Operator, } from "@limetech/lime-web-components";
+import { asGroupExpression } from "./filter-group-logic";
 /**
  * Lime Query Filter Expression Router
  *
@@ -9,6 +10,10 @@ import { Operator, } from "@limetech/lime-web-components";
  * - `op: Operator.AND | Operator.OR` → limebb-lime-query-filter-group
  * - `op: Operator.NOT` → limebb-lime-query-filter-not
  *
+ * Uses `scoped: true` (no shadow root) so the dispatched child element
+ * participates in the parent's light DOM — that lets the parent drive
+ * its own layout off the rendered tag (e.g. `:has(limebb-lime-query-filter-group)`).
+ *
  * @private
  */
 export class LimeQueryFilterExpressionComponent {
@@ -32,26 +37,16 @@ export class LimeQueryFilterExpressionComponent {
         if ('key' in this.expression) {
             return (h("limebb-lime-query-filter-comparison", Object.assign({}, props, { expression: this.expression, onExpressionChange: this.handleExpressionChange })));
         }
-        if (this.expression.op === Operator.AND ||
-            this.expression.op === Operator.OR) {
-            return (h("limebb-lime-query-filter-group", Object.assign({}, props, { expression: this.expression, onExpressionChange: this.handleExpressionChange })));
+        const groupShaped = asGroupExpression(this.expression);
+        if (groupShaped) {
+            return (h("limebb-lime-query-filter-group", Object.assign({}, props, { expression: groupShaped, onExpressionChange: this.handleExpressionChange })));
         }
         if (this.expression.op === Operator.NOT) {
             return (h("limebb-lime-query-filter-not", Object.assign({}, props, { expression: this.expression, onExpressionChange: this.handleExpressionChange })));
         }
     }
     static get is() { return "limebb-lime-query-filter-expression"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["lime-query-filter-expression.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["lime-query-filter-expression.css"]
-        };
-    }
+    static get encapsulation() { return "scoped"; }
     static get properties() {
         return {
             "platform": {