@limetech/lime-crm-building-blocks 1.139.1 → 1.140.0

package/dist/collection/components/filter-chip/filter-condition-icons.js

@@ -197,3 +197,144 @@ export function getFilterConditionLabelKey(condition, propertyType) {
     }
     return undefined;
 }
+/**
+ * Conditions for text-like properties (`string`, `text`, `phone`, `link`):
+ * "Contains … Matches", with equality reading as "Is" / "Is not".
+ */
+const TEXT_CONDITIONS = [
+    'contains',
+    'not-contains',
+    'equals',
+    'not-equals',
+    'begins-with',
+    'not-begins-with',
+    'ends-with',
+    'not-ends-with',
+    'between',
+    'not-between',
+    'empty',
+    'not-empty',
+    'matches',
+];
+/**
+ * Conditions for numeric properties (`integer`, `decimal`, `percent`).
+ */
+const NUMBER_CONDITIONS = [
+    'equals',
+    'not-equals',
+    'greater-than',
+    'greater-than-or-equal',
+    'less-than',
+    'less-than-or-equal',
+    'between',
+    'not-between',
+    'empty',
+    'not-empty',
+    'matches',
+];
+/**
+ * Conditions for date/time properties. Comparisons read as "After" / "Before" /
+ * "On"; there is intentionally no `greater-than-or-equal` / `less-than-or-equal`
+ * — an inclusive bound is expressed in the date value editor, not as a separate
+ * condition.
+ */
+const DATE_CONDITIONS = [
+    'greater-than',
+    'less-than',
+    'between',
+    'not-between',
+    'equals',
+    'previous',
+    'current',
+    'next',
+    'empty',
+    'not-empty',
+    'matches',
+];
+/**
+ * Conditions for choice properties (`option`, `set`): "Is" / "Is not" (the
+ * latter was missing from the older CRM option popovers), plus "Matches".
+ */
+const OPTION_CONDITIONS = [
+    'equals',
+    'not-equals',
+    'matches',
+];
+/**
+ * Conditions for boolean (`yesno`) properties: "Is" / "Is not", plus "Empty" /
+ * "Not empty" and "Matches".
+ *
+ * A yes/no value is effectively three-state — Yes, No, or *unset* (never
+ * answered) when the property is nullable, i.e. not required and without a
+ * default. "Empty" / "Not empty" filter on that third state — whether the value
+ * was ever set — which is distinct from filtering on Yes vs No. Consumers whose
+ * booleans are always populated can narrow this list via the picker's
+ * `conditions` prop. See the "Boolean (yes/no)" example.
+ */
+const YESNO_CONDITIONS = [
+    'equals',
+    'not-equals',
+    'empty',
+    'not-empty',
+    'matches',
+];
+/**
+ * Conditions for relation properties (`belongsto`, `hasone`, `hasmany`,
+ * `hasandbelongstomany`): connected / not connected, filter-set membership,
+ * empty / not empty, and "Matches".
+ */
+const RELATION_CONDITIONS = [
+    'connected-to',
+    'not-connected-to',
+    'in-filter-set',
+    'not-in-filter-set',
+    'empty',
+    'not-empty',
+    'matches',
+];
+/** Types with no filter catalog (`user`, `xml`, `file`, `system`). */
+const NO_CONDITIONS = [];
+/**
+ * Per-property-type catalogs, in the order a condition picker should list them.
+ * An exhaustive map, so a property type added upstream is a compile error here
+ * rather than a silent fall-through to no conditions.
+ */
+const CONDITIONS_BY_PROPERTY_TYPE = {
+    string: TEXT_CONDITIONS,
+    text: TEXT_CONDITIONS,
+    phone: TEXT_CONDITIONS,
+    link: TEXT_CONDITIONS,
+    integer: NUMBER_CONDITIONS,
+    decimal: NUMBER_CONDITIONS,
+    percent: NUMBER_CONDITIONS,
+    date: DATE_CONDITIONS,
+    year: DATE_CONDITIONS,
+    quarter: DATE_CONDITIONS,
+    month: DATE_CONDITIONS,
+    time: DATE_CONDITIONS,
+    timeofday: DATE_CONDITIONS,
+    option: OPTION_CONDITIONS,
+    set: OPTION_CONDITIONS,
+    yesno: YESNO_CONDITIONS,
+    belongsto: RELATION_CONDITIONS,
+    hasone: RELATION_CONDITIONS,
+    hasmany: RELATION_CONDITIONS,
+    hasandbelongstomany: RELATION_CONDITIONS,
+    user: NO_CONDITIONS,
+    xml: NO_CONDITIONS,
+    file: NO_CONDITIONS,
+    system: NO_CONDITIONS,
+};
+/**
+ * The filter conditions a property of the given type can be filtered by, in the
+ * order `limebb-filter-condition-picker` should list them, or an empty array for
+ * a type without a catalog. A consumer that supports only a subset passes its
+ * own list to the picker instead.
+ * @param propertyType
+ */
+export function getConditionsForPropertyType(propertyType) {
+    if (!propertyType) {
+        return [];
+    }
+    return CONDITIONS_BY_PROPERTY_TYPE[propertyType];
+}

package/dist/collection/components/filter-chip/filter-operators.js

@@ -0,0 +1,54 @@
+import { Operator } from "@limetech/lime-web-components";
+/**
+ * The canonical operator↔condition translation for the *authoring* (write)
+ * direction, so consumers (the query builder, the rule editor, the CRM property
+ * filters) keep the mapping in one place instead of repeating it.
+ *
+ * Intentionally separate from the structural read-side map in `compound-leaf.ts`,
+ * which interprets *existing* expressions and maps some operators differently
+ * (a bare `NOT` reads as `not-equals`, a bare `IN` as `equals`). Do not merge
+ * the two.
+ */
+const OPERATOR_CONDITION_PAIRS = [
+    [Operator.EQUALS, 'equals'],
+    [Operator.NOT_EQUALS, 'not-equals'],
+    [Operator.GREATER, 'greater-than'],
+    [Operator.GREATER_OR_EQUAL, 'greater-than-or-equal'],
+    [Operator.LESS, 'less-than'],
+    [Operator.LESS_OR_EQUAL, 'less-than-or-equal'],
+    [Operator.IN, 'in-filter-set'],
+    [Operator.LIKE, 'contains'],
+    [Operator.BEGINS, 'begins-with'],
+    [Operator.ENDS, 'ends-with'],
+];
+/**
+ * The {@link Operator} that authors a condition, or `undefined` for a condition
+ * with no single operator (e.g. `between`, `empty`, `previous`).
+ * @param condition
+ */
+export function conditionToOperator(condition) {
+    var _a;
+    return (_a = OPERATOR_CONDITION_PAIRS.find(([, mapped]) => mapped === condition)) === null || _a === void 0 ? void 0 : _a[0];
+}
+/**
+ * The conditions a list of operators authors, in order, dropping any operator
+ * with no authoring condition. Lets a consumer declare which operators it offers
+ * and hand the matching conditions to `limebb-filter-condition-picker`.
+ * @param operators
+ */
+export function operatorsToConditions(operators) {
+    return operators
+        .map((operator) => { var _a; return (_a = OPERATOR_CONDITION_PAIRS.find(([op]) => op === operator)) === null || _a === void 0 ? void 0 : _a[1]; })
+        .filter((condition) => condition !== undefined);
+}
+/**
+ * The {@link FilterCondition} an operator authors, or `undefined` for an
+ * operator with no authoring condition (e.g. the structural `AND`/`OR`/`NOT`).
+ * @param operator
+ */
+export function operatorToCondition(operator) {
+    if (!operator) {
+        return;
+    }
+    return operatorsToConditions([operator])[0];
+}

package/dist/collection/components/filter-condition-picker/filter-condition-picker.css

@@ -0,0 +1,7 @@
+:host(limebb-filter-condition-picker) {
+  display: inline-block;
+}
+
+.condition {
+  --limel-notched-outline-label-color: transparent;
+}

package/dist/collection/components/filter-condition-picker/filter-condition-picker.js

@@ -0,0 +1,256 @@
+import { Host, h } from "@stencil/core";
+import { PlatformServiceName, } from "@limetech/lime-web-components";
+import { getConditionsForPropertyType, getFilterConditionIcon, getFilterConditionLabelKey, } from "../filter-chip/filter-condition-icons";
+/**
+ * Accessible label for the control: set for screen readers but hidden visually
+ * (see the stylesheet). Reuses the shared, localized "Operator" label.
+ */
+const LABEL_KEY = 'webclient.operator';
+/**
+ * Filter condition picker
+ *
+ * A dropdown for choosing a single filter condition, such as Is / Is not /
+ * Greater than / Contains / Between / After / Empty / …
+ *
+ * It is presentational and speaks the shared filter vocabulary: give it a
+ * `propertyType` and it lists the right conditions for that data type, each with
+ * the correct icon and localized wording (e.g. `greater-than` reads "Greater
+ * than" for a number but "After" for a date, and `equals` reads "Is" for an
+ * option).
+ *
+ * A consumer that supports only a subset of conditions passes its own
+ * list via `conditions`; the consumer maps its domain operators to and from the
+ * `FilterCondition` values itself.
+ *
+ * @exampleComponent limebb-example-filter-condition-picker-basic
+ * @exampleComponent limebb-example-filter-condition-picker-property-types
+ * @exampleComponent limebb-example-filter-condition-picker-boolean
+ * @exampleComponent limebb-example-filter-condition-picker-custom
+ */
+export class FilterConditionPicker {
+    constructor() {
+        /**
+         * Whether the picker is disabled.
+         */
+        this.disabled = false;
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            if (event.detail) {
+                this.change.emit(event.detail.value);
+            }
+        };
+    }
+    render() {
+        const items = this.buildItems();
+        const selected = this.selectedOption(items);
+        return (h(Host, { key: 'ca926963d368460db20fa8961f49825d19ae2c07' }, h("limel-select", { key: '5571b580b7da63d1a95fef6cb9b204ed3b32cf75', class: "condition", label: this.accessibleLabel, disabled: this.disabled, options: items, value: selected, onChange: this.handleChange })));
+    }
+    buildItems() {
+        var _a;
+        const conditions = (_a = this.conditions) !== null && _a !== void 0 ? _a : getConditionsForPropertyType(this.propertyType);
+        // Divider before the empty / not-empty group and before "matches".
+        const emptyGroupStart = conditions.findIndex((condition) => condition === 'empty' || condition === 'not-empty');
+        const matchesIndex = conditions.indexOf('matches');
+        const items = [];
+        for (const [index, condition] of conditions.entries()) {
+            if (index > 0 &&
+                (index === emptyGroupStart || index === matchesIndex)) {
+                items.push({ separator: true });
+            }
+            items.push({
+                value: condition,
+                text: this.conditionLabel(condition),
+                icon: getFilterConditionIcon(condition, this.propertyType),
+            });
+        }
+        return items;
+    }
+    selectedOption(items) {
+        const options = items.filter((item) => !('separator' in item));
+        return options.find((option) => option.value === this.value);
+    }
+    get accessibleLabel() {
+        var _a;
+        return (_a = this.translate(LABEL_KEY)) !== null && _a !== void 0 ? _a : 'Operator';
+    }
+    conditionLabel(condition) {
+        var _a;
+        const key = getFilterConditionLabelKey(condition, this.propertyType);
+        return (_a = (key ? this.translate(key) : undefined)) !== null && _a !== void 0 ? _a : condition;
+    }
+    translate(key) {
+        var _a;
+        const translated = (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get(key);
+        return translated && translated !== key ? translated : undefined;
+    }
+    get translator() {
+        var _a;
+        try {
+            return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.Translate);
+        }
+        catch (_b) {
+            return;
+        }
+    }
+    static get is() { return "limebb-filter-condition-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["filter-condition-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["filter-condition-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "platform": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentPlatform",
+                    "resolved": "LimeWebComponentPlatform | undefined",
+                    "references": {
+                        "LimeWebComponentPlatform": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentPlatform",
+                            "referenceLocation": "LimeWebComponentPlatform"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Platform service provider"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FilterCondition",
+                    "resolved": "\"begins-with\" | \"between\" | \"connected-to\" | \"contains\" | \"current\" | \"empty\" | \"ends-with\" | \"equals\" | \"greater-than\" | \"greater-than-or-equal\" | \"in-filter-set\" | \"less-than\" | \"less-than-or-equal\" | \"matches\" | \"next\" | \"not-begins-with\" | \"not-between\" | \"not-connected-to\" | \"not-contains\" | \"not-empty\" | \"not-ends-with\" | \"not-equals\" | \"not-in-filter-set\" | \"previous\" | undefined",
+                    "references": {
+                        "FilterCondition": {
+                            "location": "import",
+                            "path": "../filter-chip/filter-chip.types",
+                            "id": "src/components/filter-chip/filter-chip.types.ts::FilterCondition",
+                            "referenceLocation": "FilterCondition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently selected condition."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "propertyType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PropertyType",
+                    "resolved": "\"belongsto\" | \"date\" | \"decimal\" | \"file\" | \"hasandbelongstomany\" | \"hasmany\" | \"hasone\" | \"integer\" | \"link\" | \"month\" | \"option\" | \"percent\" | \"phone\" | \"quarter\" | \"set\" | \"string\" | \"system\" | \"text\" | \"time\" | \"timeofday\" | \"user\" | \"xml\" | \"year\" | \"yesno\" | undefined",
+                    "references": {
+                        "PropertyType": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::PropertyType",
+                            "referenceLocation": "PropertyType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Data type of the filtered property; selects which conditions are listed\nand their type-specific wording and icons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "property-type"
+            },
+            "conditions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FilterCondition[]",
+                    "resolved": "FilterCondition[] | undefined",
+                    "references": {
+                        "FilterCondition": {
+                            "location": "import",
+                            "path": "../filter-chip/filter-chip.types",
+                            "id": "src/components/filter-chip/filter-chip.types.ts::FilterCondition",
+                            "referenceLocation": "FilterCondition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Explicit conditions to offer, overriding the per-type catalog."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the picker is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects a condition."
+                },
+                "complexType": {
+                    "original": "FilterCondition",
+                    "resolved": "\"begins-with\" | \"between\" | \"connected-to\" | \"contains\" | \"current\" | \"empty\" | \"ends-with\" | \"equals\" | \"greater-than\" | \"greater-than-or-equal\" | \"in-filter-set\" | \"less-than\" | \"less-than-or-equal\" | \"matches\" | \"next\" | \"not-begins-with\" | \"not-between\" | \"not-connected-to\" | \"not-contains\" | \"not-empty\" | \"not-ends-with\" | \"not-equals\" | \"not-in-filter-set\" | \"previous\"",
+                    "references": {
+                        "FilterCondition": {
+                            "location": "import",
+                            "path": "../filter-chip/filter-chip.types",
+                            "id": "src/components/filter-chip/filter-chip.types.ts::FilterCondition",
+                            "referenceLocation": "FilterCondition"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/icon-picker/icon-picker.js

@@ -35,7 +35,7 @@ export class IconPicker {
                 icon: this.value,
             };
         }
-        return (h("limel-picker", { key: 'd71d9babaf189723ccb3ece1722826054e109f70', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
+        return (h("limel-picker", { key: 'bf6b76bbcea838150261e9e0037b1d7ca1ee08d1', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
     }
     static get is() { return "limebb-icon-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-tile/format/config/info-tile-format.js

@@ -92,7 +92,7 @@ export class InfoTileAdminConfig {
             },
         ];
         return [
-            h("limel-button-group", { key: '5ec61e22f0049afba77310ef1162c361a71f3290', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
+            h("limel-button-group", { key: '68999f607fd66a5a451929d6720200734c6505ea', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
             this.renderFormatConfig(),
         ];
     }

package/dist/collection/components/info-tile/info-tile.js

@@ -116,7 +116,7 @@ export class InfoTile {
         const errorProps = Object.assign(Object.assign({}, baseProps), { icon: 'error', prefix: 'ERROR', loading: true, label: this.getLabel(filter) });
         const normalProps = Object.assign(Object.assign({}, baseProps), { label: this.getLabel(filter), link: this.getLink(filter), loading: this.loading, value: value === null || value === void 0 ? void 0 : value.value.trim() });
         const props = !filter || this.error ? errorProps : normalProps;
-        return (h("limel-info-tile", Object.assign({ key: '8ce57413673c0feddc8cff70c66845ddacee5f74', class: { error: !filter || this.error } }, props)));
+        return (h("limel-info-tile", Object.assign({ key: '802c93fade2b3aff10e53c1a970798b994bff2d2', class: { error: !filter || this.error } }, props)));
     }
     /**
      * Effective `reducedPresence` for this render. The boolean prop

package/dist/collection/components/kanban/kanban-group/kanban-group.js

@@ -27,7 +27,7 @@ export class KanbanGroup {
         };
     }
     render() {
-        return (h(Host, { key: '074640215f29d21e8d3f38b81850823e8a93ce3c' }, this.renderHelp(), this.renderGroupHeading(), this.renderGroupSummary(), this.renderItems()));
+        return (h(Host, { key: '5c0675c4edff236ac8b4d90c93d418e3b0c18a9c' }, this.renderHelp(), this.renderGroupHeading(), this.renderGroupSummary(), this.renderItems()));
     }
     renderGroupSummary() {
         if (!this.summary || !this.totalCount) {

package/dist/collection/components/kanban/kanban-item/kanban-item.js

@@ -55,7 +55,7 @@ export class KanbanItemComponent {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '6eb7fa30141a62e40588a59f17d27392dac78b90', id: this.item.id.toString(), class: {
+        return (h(Host, { key: '282342e6a11234154e4cbcc8df113aafd5cd9cd2', id: this.item.id.toString(), class: {
                 'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
                 'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),
             }, style: {

package/dist/collection/components/lime-query-builder/expressions/compound-leaf.js

@@ -1,10 +1,10 @@
 import { Operator, } from "@limetech/lime-web-components";
-// Intentionally diverges from the same-named map in
-// `lime-query-filter-comparison.tsx` (the comparison-editor's operator
-// vocabulary): that map has no `NOT` entry and maps `IN` to `'in-filter-set'`,
-// whereas here a keyed bare `NOT` reads as `not-equals` and a bare `IN` set
-// reads as `equals` (see `describeKeyed`). They are deliberately not the same
-// table — do not reconcile them into one.
+// Intentionally diverges from the write-side map in `filter-operators.ts` (the
+// operator vocabulary the query builder and rule editor author with): that map
+// has no `NOT` entry and maps `IN` to `'in-filter-set'`, whereas here a keyed
+// bare `NOT` reads as `not-equals` and a bare `IN` set reads as `equals` (see
+// `describeKeyed`). They are deliberately not the same table — do not reconcile
+// them into one.
 // Prototype-free (`Object.create(null)`): a junk `op` such as `'__proto__'` or
 // `'constructor'` resolves to `undefined` rather than an inherited
 // `Object.prototype` member, so a malformed expression falls through to "stays

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

@@ -1,6 +1,7 @@
-import { Operator, PlatformServiceName, } from "@limetech/lime-web-components";
+import { Operator, } from "@limetech/lime-web-components";
 import { Host, h } from "@stencil/core";
-import { LIME_QUERY_OPERATORS, } from "./lime-query-operators";
+import { conditionToOperator, operatorToCondition, } from "../../filter-chip/filter-operators";
+import { LIME_QUERY_CONDITIONS, } 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
@@ -14,9 +15,12 @@ export class LimeQueryFilterComparisonEditorComponent {
             event.stopPropagation();
             this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { key: event.detail }));
         };
-        this.handleOperatorChange = (event) => {
+        this.handleConditionChange = (event) => {
             event.stopPropagation();
-            const newOperator = event.detail.value;
+            const newOperator = conditionToOperator(event.detail);
+            if (!newOperator) {
+                return;
+            }
             const oldOperator = this.expression.op;
             let convertedValue = this.expression.exp;
             // IN expects an array; other operators expect a single value.
@@ -48,23 +52,14 @@ export class LimeQueryFilterComparisonEditorComponent {
         (_a = this.propertySelectorEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '05ca2dc867f8c42e2ca1299cd33c0f3faae0ed31' }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput()));
+        return (h(Host, { key: '528f313843bb6e8e779fc3a5603c10769cbd183b' }, this.renderPropertySelector(), this.renderConditionPicker(), 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() {
+    renderConditionPicker() {
         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 }));
+        return (h("limebb-filter-condition-picker", { class: "operator", platform: this.platform, propertyType: this.propertyType, conditions: LIME_QUERY_CONDITIONS, value: operatorToCondition(this.expression.op), disabled: !operatorHasBeenSet && !this.expression.key, onChange: this.handleConditionChange }));
     }
     renderValueInput() {
         if (!this.expression.op) {
@@ -72,10 +67,6 @@ export class LimeQueryFilterComparisonEditorComponent {
         }
         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; }
@@ -200,6 +191,32 @@ export class LimeQueryFilterComparisonEditorComponent {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "propertyType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PropertyType",
+                    "resolved": "\"belongsto\" | \"date\" | \"decimal\" | \"file\" | \"hasandbelongstomany\" | \"hasmany\" | \"hasone\" | \"integer\" | \"link\" | \"month\" | \"option\" | \"percent\" | \"phone\" | \"quarter\" | \"set\" | \"string\" | \"system\" | \"text\" | \"time\" | \"timeofday\" | \"user\" | \"xml\" | \"year\" | \"yesno\" | undefined",
+                    "references": {
+                        "PropertyType": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::PropertyType",
+                            "referenceLocation": "PropertyType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Data type of the selected property; lets the picker pick type-specific\nwording and icons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "property-type"
             }
         };
     }