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

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

@@ -1,108 +1,112 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { Operator, } from "@limetech/lime-web-components";
-import { addExpressionToGroup, createEmptyComparison, createNestedGroup, getFilterGroupSubheading, toggleGroupOperator, updateChildExpression, } from "./filter-group-logic";
+import { addExpressionToGroup, createEmptyComparison, createNestedGroup, getCombinator, getInnerAndOr, setCombinator, updateChildExpression, } from "./filter-group-logic";
+const OP_STYLE = {
+    AND: {
+        color: 'rgb(var(--contrast-900))',
+        iconName: 'dot_circle',
+        text: 'All of',
+        secondaryText: 'True when every condition is true',
+    },
+    OR: {
+        color: 'rgb(var(--color-sky-default))',
+        iconName: 'centre_point',
+        text: 'Any of',
+        secondaryText: 'True when at least one condition is true',
+    },
+    NOT_AND: {
+        color: 'rgb(var(--color-orange-default))',
+        iconName: 'dot_circle',
+        text: 'Not all of',
+        secondaryText: 'True when at least one condition is false',
+    },
+    NOT_OR: {
+        color: 'rgb(var(--color-red-default))',
+        iconName: 'centre_point',
+        text: 'None of',
+        secondaryText: 'True when every condition is false',
+    },
+};
+const COMBINATOR_OPTIONS = ['AND', 'OR', 'NOT_AND', 'NOT_OR'].map((value) => ({
+    text: OP_STYLE[value].text,
+    secondaryText: OP_STYLE[value].secondaryText,
+    value,
+    icon: { name: OP_STYLE[value].iconName, color: OP_STYLE[value].color },
+}));
 /**
  * Lime Query Filter Group Component
  *
- * Renders a group of filter expressions with AND/OR logic that can be toggled.
- * Users can click the header to toggle between "All conditions" (AND) and
- * "Any condition" (OR).
- *
- * This component displays:
- * - A clickable header showing the current logic (AND/OR)
- * - A list of child expressions (which can be comparisons or nested groups)
- * - An "Add" button to add more expressions
- *
- * Clicking the header toggles between AND and OR logic.
- * If a child component emits an ExpressionChange event with undefined, the
- * child is removed from the group.
+ * Renders a group of filter expressions with a combinator picker that selects
+ * between All, Any, Not all, and Not any. The first two map to a bare AND/OR
+ * group; the latter two wrap the same group in a NOT expression. Choosing a
+ * value re-shapes the group, preserving all children.
  *
  * @private
  */
 export class LimeQueryFilterGroupComponent {
     constructor() {
-        this.options = [
-            {
-                text: 'All',
-                secondaryText: 'AND operator',
-                value: 'and',
-            },
-            {
-                text: 'Any',
-                secondaryText: 'OR operator',
-                value: 'or',
-            },
-        ];
-        this.renderChildExpression = (expression, childIndex) => (h("limebb-lime-query-filter-expression", { role: "listitem", platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleExpressionChange(childIndex) }));
+        this.renderChildExpression = (expression, childIndex) => (h("li", { class: "row" }, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleChildExpressionChange(childIndex) })));
+        this.handleCombinatorChange = (event) => {
+            event.stopPropagation();
+            const next = event.detail.value;
+            if (!next || next === getCombinator(this.expression)) {
+                return;
+            }
+            this.expressionChange.emit(setCombinator(this.expression, next));
+        };
         this.handleDeleteGroup = () => {
             this.expressionChange.emit();
         };
-        this.handleToggleOperator = (event) => {
-            const selectedOption = Array.isArray(event.detail)
-                ? event.detail[0]
-                : event.detail;
-            this.value = selectedOption;
-            const newOp = selectedOption.value === 'and' ? Operator.AND : Operator.OR;
-            if (newOp !== this.expression.op) {
-                const newGroup = toggleGroupOperator(this.expression);
-                this.expressionChange.emit(newGroup);
-            }
-        };
         this.handleAddChildExpression = () => {
-            const newChild = createEmptyComparison();
-            const newGroup = addExpressionToGroup(this.expression, newChild);
-            this.expressionChange.emit(newGroup);
+            const inner = getInnerAndOr(this.expression);
+            const updatedInner = addExpressionToGroup(inner, createEmptyComparison());
+            this.expressionChange.emit(this.wrap(updatedInner));
         };
         this.handleAddChildGroup = () => {
-            const newChild = createNestedGroup(this.expression.op);
-            const newGroup = addExpressionToGroup(this.expression, newChild);
-            this.expressionChange.emit(newGroup);
+            const inner = getInnerAndOr(this.expression);
+            const newChild = createNestedGroup(inner.op);
+            const updatedInner = addExpressionToGroup(inner, newChild);
+            this.expressionChange.emit(this.wrap(updatedInner));
         };
-        this.handleExpressionChange = (updatedChildIndex) => (event) => {
+        this.handleChildExpressionChange = (childIndex) => (event) => {
             event.stopPropagation();
-            const updatedExpression = event.detail;
-            const result = updateChildExpression(this.expression, updatedChildIndex, updatedExpression);
+            const inner = getInnerAndOr(this.expression);
+            const result = updateChildExpression(inner, childIndex, event.detail);
+            if (result.type === 'removed') {
+                this.expressionChange.emit(undefined);
+                return;
+            }
+            if (this.isNegated) {
+                this.expressionChange.emit({
+                    op: Operator.NOT,
+                    exp: result.expression,
+                });
+                return;
+            }
             this.expressionChange.emit(result.expression);
         };
     }
-    // Initialize value to match current operator
-    componentWillLoad() {
-        this.value =
-            this.options.find((option) => option.value ===
-                (this.expression.op === Operator.AND ? 'and' : 'or')) || this.options[0];
-    }
     render() {
-        return (h(Host, { key: '4b1647c741b78253b4ce4ed1bd347800da394563', style: {
-                '--limebb-lime-query-filter-group-operator': `"${this.expression.op === Operator.AND ? 'AND' : 'OR'}"`,
-            } }, h("div", { key: '47fd3000275e17ef70d86af5e6abcb492806ffba', class: "expression" }, this.renderHeader(), h("ul", { key: '224249a4b305eb2b20c1aedad98d2c3191d47e83' }, this.expression.exp.map(this.renderChildExpression), this.renderAddButton()), this.renderAddGroupButton())));
-    }
-    renderHeader() {
-        const subheading = this.getSubheading();
-        if (!subheading) {
-            return null;
-        }
-        return (h("limel-header", { subheading: subheading }, this.renderOperators(), this.renderDeleteGroupButton()));
-    }
-    renderOperators() {
-        return (h("limel-select", { class: "operator-select", slot: "actions", value: this.value, options: this.options, onChange: this.handleToggleOperator }));
-    }
-    renderDeleteGroupButton() {
-        return (h("limel-icon-button", { class: "delete-group", slot: "actions", icon: "trash", label: "Delete This Group", onClick: this.handleDeleteGroup }));
-    }
-    getSubheading() {
-        return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);
-    }
-    renderAddButton() {
-        return (h("limel-button", { role: "listitem", label: "Condition", icon: {
+        const combinator = getCombinator(this.expression);
+        const inner = getInnerAndOr(this.expression);
+        const selected = COMBINATOR_OPTIONS.find((o) => o.value === combinator);
+        return (h(Host, { key: 'c9ca20c6b893416088807266fede19e5a24e360d', "data-op": combinator, style: {
+                '--limebb-query-filter-group-color-code': OP_STYLE[combinator].color,
+            } }, h("div", { key: '8efe9e6e4d1ba552b8a761ec23b18668a1aef7f3', class: "group" }, h("div", { key: 'e99bb85a9532431a63ce0916dc4882a2f73d2307', class: "group-header" }, h("limel-select", { key: '981fd5c1d4755ef937451144245640228ed515a9', class: "combinator", label: "Match", value: selected, options: COMBINATOR_OPTIONS, onChange: this.handleCombinatorChange }), h("limel-icon-button", { key: 'caa427e897501a12a98a370c4d2364564904c042', class: "delete-group", icon: "trash", label: "Delete this group", onClick: this.handleDeleteGroup })), h("ul", { key: '8a21efdd1d783b11bb00f39c3579eec7277a505e', class: "rows" }, inner.exp.map(this.renderChildExpression), h("limel-chip", { key: 'b4612f1899060f2f553283cc7afac53777b0c1ef', role: "listitem", class: "add-condition", text: "Condition", icon: { name: 'plus_math', title: 'Add' }, onClick: this.handleAddChildExpression })), h("limel-chip", { key: '7046abfe1929fa13f4de3e90285610280467fd76', class: "add-group", size: "small", text: "Group", icon: {
                 name: 'plus_math',
                 title: 'Add',
-            }, onClick: this.handleAddChildExpression }));
+                color: 'var(--group-rail-color)',
+            }, onClick: this.handleAddChildGroup }))));
     }
-    renderAddGroupButton() {
-        return (h("limel-button", { class: "add-group", label: "Group", icon: {
-                name: 'plus_math',
-                title: 'Add',
-            }, onClick: this.handleAddChildGroup }));
+    get isNegated() {
+        return this.expression.op === Operator.NOT;
+    }
+    wrap(inner) {
+        if (this.isNegated) {
+            const wrapped = { op: Operator.NOT, exp: inner };
+            return wrapped;
+        }
+        return inner;
     }
     static get is() { return "limebb-lime-query-filter-group"; }
     static get encapsulation() { return "shadow"; }
@@ -208,14 +212,14 @@ export class LimeQueryFilterGroupComponent {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "AndOrExpression",
-                    "resolved": "{ op: Operator.AND | Operator.OR; exp: Expression[]; }",
+                    "original": "GroupExpression",
+                    "resolved": "{ op: Operator.AND | Operator.OR; exp: Expression[]; } | { op: Operator.NOT; exp: AndOrExpression; }",
                     "references": {
-                        "AndOrExpression": {
+                        "GroupExpression": {
                             "location": "import",
-                            "path": "@limetech/lime-web-components",
-                            "id": "node_modules::AndOrExpression",
-                            "referenceLocation": "AndOrExpression"
+                            "path": "./filter-group-logic",
+                            "id": "src/components/lime-query-builder/expressions/filter-group-logic.ts::GroupExpression",
+                            "referenceLocation": "GroupExpression"
                         }
                     }
                 },
@@ -223,18 +227,13 @@ export class LimeQueryFilterGroupComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The group expression (AND or OR)"
+                    "text": "The group expression: an AND/OR group, optionally wrapped in NOT"
                 },
                 "getter": false,
                 "setter": false
             }
         };
     }
-    static get states() {
-        return {
-            "value": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "expressionChange",
@@ -244,7 +243,7 @@ export class LimeQueryFilterGroupComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the group expression changes\nEmits undefined when expression should be removed\nCan emit any Expression type when unwrapping (single child)"
+                    "text": "Emitted when the group expression changes.\nEmits undefined when the group itself should be removed."
                 },
                 "complexType": {
                     "original": "Expression | undefined",

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

@@ -35,7 +35,7 @@ export class LimeQueryFilterNotComponent {
         };
     }
     render() {
-        return (h("div", { key: '16246e10be820ad18713cb097146040d30e242bf', class: "expression" }, this.label && h("limel-header", { key: '539d60a4567727282463dec2a90e06a3630501aa', heading: this.label }), h("limebb-lime-query-filter-expression", { key: '67f892704ea3e5a061acdcb8f3ffe22271971569', platform: this.platform, context: this.context, label: "Not", limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression.exp, onExpressionChange: this.handleExpressionChange })));
+        return (h("div", { key: '30b9f2fbe27c8277633ef02fbebbafb227387ed8', class: "expression" }, this.label && h("limel-header", { key: '05b193ac0ec191b1f9394ed48691c24e534ba66c', heading: this.label }), h("limebb-lime-query-filter-expression", { key: '83b6a42631b886735502a8ec6454f5e9c868cc4c', platform: this.platform, context: this.context, label: "Not", limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression.exp, onExpressionChange: this.handleExpressionChange })));
     }
     static get is() { return "limebb-lime-query-filter-not"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,60 @@
+import { Operator, } from "@limetech/lime-web-components";
+export 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'],
+    },
+];

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

@@ -172,7 +172,7 @@ export class LimeQueryBuilder {
         }
     }
     render() {
-        return (h(Host, { key: '9a121529165f1691e32b2b156b128977c5b5ba3a' }, this.renderHeader(), this.renderContent()));
+        return (h(Host, { key: '08917b4c102db24180be24f392067ba5ec14569f' }, this.renderHeader(), this.renderContent()));
     }
     renderContent() {
         const visualModeSupported = this.checkVisualModeSupport();

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

@@ -154,7 +154,7 @@ export class LimeQueryResponseFormatBuilder {
     }
     render() {
         const visualModeSupported = this.checkVisualModeSupport();
-        return (h("div", { key: '65a41f46fe1088f0d52be0337c427177a1aa1a44', class: "response-format-builder" }, this.label && h("h1", { key: '5a75e321aee3ff6753baccbd72d17c5377f28d28', class: "builder-label" }, this.label), this.helperText && (h("p", { key: 'e13518253b52ff8f847575b4465dc2295c7452f0', class: "builder-helper-text" }, this.helperText)), this.visualModeEnabled && (h("div", { key: '2122357f51fd2185d1b544381eb2199de5b1f56c', class: "mode-controls" }, this.renderModeSwitch(visualModeSupported))), !this.visualModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(visualModeSupported))) : (h("div", { class: "visual-mode" }, this.renderVisualMode()))));
+        return (h("div", { key: '6f59c4ff1f5ef1ee726bacbe3b8333cd5f6dff77', class: "response-format-builder" }, this.label && h("h1", { key: '28d5825c0ca043f6f671cf812c174aa028950524', class: "builder-label" }, this.label), this.helperText && (h("p", { key: '1e35efbfaa73c0fd871f813059660eea3d026063', class: "builder-helper-text" }, this.helperText)), this.visualModeEnabled && (h("div", { key: '8cbe1f088d88cbdefbdd092cdf879facdbb807a3', class: "mode-controls" }, this.renderModeSwitch(visualModeSupported))), !this.visualModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(visualModeSupported))) : (h("div", { class: "visual-mode" }, this.renderVisualMode()))));
     }
     renderModeSwitch(support) {
         const visualDisabled = !support.visualModeSupported;

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: '20a7d5eb86c746d11ad805083be5ef9f5fd2397d', 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: '85956ae62a4975a7706b4a561b1e321078e0dc2a', 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.js

@@ -69,7 +69,7 @@ export class OrderByEditor {
         }
     }
     render() {
-        return (h(Host, { key: '6ef5ee3cf7b67cc0f821272f9d552eab48b60065' }, this.renderEmptyState(), this.renderOrderByEditor()));
+        return (h(Host, { key: '59e3bb0334e5528fc8a0f8747086348d1a195c82' }, this.renderEmptyState(), this.renderOrderByEditor()));
     }
     renderEmptyState() {
         if (this.limetype) {

package/dist/collection/components/lime-query-builder/order-by/order-by-item.js

@@ -38,9 +38,9 @@ export class OrderByItemComponent {
     render() {
         const propertyPath = Object.keys(this.item)[0] || '';
         const direction = this.item[propertyPath] || 'ASC';
-        return (h(Host, { key: 'f8b1d7505feec325eae8668672afe3768a4892aa' }, h("limebb-property-selector", { key: '03f71edd8692c6a46612f87a9df21aabd2bf71eb', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: propertyPath, required: true, onChange: this.handlePathChange }), h("div", { key: 'a1a6db7060f8dc862d7acfb5750861293e2411d3', class: "control-buttons" }, h("limel-icon-button", { key: '76703911899c38d71f116dc8256d00cb7c937971', icon: direction === 'ASC'
+        return (h(Host, { key: '8d91628467c6ec1912d1f87a7922464e5341c8e1' }, h("limebb-property-selector", { key: '26e7729c7c43f91e02446ad45aa59c56922b377c', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: propertyPath, required: true, onChange: this.handlePathChange }), h("div", { key: '1926ad94ddb9d4c2112007068ab4cbf38057622b', class: "control-buttons" }, h("limel-icon-button", { key: '96e4595c737c68ccb30d90295ba6115ec2c7a014', icon: direction === 'ASC'
                 ? 'sort_ascending'
-                : 'sort_descending', label: direction === 'ASC' ? 'Ascending' : 'Descending', onClick: this.handleToggleDirection }), h("limel-icon-button", { key: '91a3370d5c6151370b96e7b67d59f226ad526f21', icon: "trash", label: "Remove", onClick: this.handleRemove }))));
+                : 'sort_descending', label: direction === 'ASC' ? 'Ascending' : 'Descending', onClick: this.handleToggleDirection }), h("limel-icon-button", { key: 'eee7957506516cc344007ae12a94381a33f9171b', icon: "trash", label: "Remove", onClick: this.handleRemove }))));
     }
     static get is() { return "limebb-lime-query-order-by-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,6 +56,23 @@ export class PropertySelector {
                 this.isOpen = true;
             }
         };
+        this.handleChipSetBlur = () => {
+            var _a;
+            // Ignore blurs caused by `limel-menu` auto-focusing its list/items
+            // for keyboard navigation when it opens. That focus shift moves into
+            // *our* menu surface (portal-rendered, so `document.activeElement`
+            // reports it as `LIMEL-MENU-LIST`) — the user hasn't navigated away.
+            const active = document.activeElement;
+            if ((_a = active === null || active === void 0 ? void 0 : active.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('LIMEL-MENU')) {
+                return;
+            }
+            // When focus genuinely leaves the chip-set (user clicked Value,
+            // closed the popover, etc.), close the menu so the next focus can
+            // re-open it cleanly. Without this, `isOpen` stays stuck `true` and
+            // subsequent focus events short-circuit on the `!this.isOpen` guard.
+            this.isOpen = false;
+            this.navigationPath = '';
+        };
         this.handleSelect = (event) => {
             event.stopPropagation();
             const selectedPath = event.detail.value;
@@ -128,7 +145,7 @@ export class PropertySelector {
             return null;
         }
         const chips = this.getChipsForPath(this.navigationPath || this.value || '');
-        return (h("limel-menu", { items: this.menuItems, open: this.isOpen, emptyResultMessage: "No available properties", surfaceWidth: "inherit-from-trigger", openDirection: "bottom-end", onSelect: this.handleSelect, onNavigateMenu: this.handleNavigateMenu, onCancel: this.handleCancel }, h("div", { slot: "trigger" }, h("div", { onClick: this.handleChipSetWrapperClick }, h("limel-chip-set", { type: "input", label: this.label, value: chips, required: this.required, helperText: this.helperText, delimiter: "\u203A", maxItems: 1, onChange: this.handleChipSetChange, onFocus: this.handleChipSetFocus })))));
+        return (h("limel-menu", { items: this.menuItems, open: this.isOpen, emptyResultMessage: "No available properties", surfaceWidth: "inherit-from-trigger", openDirection: "bottom-end", onSelect: this.handleSelect, onNavigateMenu: this.handleNavigateMenu, onCancel: this.handleCancel }, h("div", { slot: "trigger" }, h("div", { onClick: this.handleChipSetWrapperClick }, h("limel-chip-set", { type: "input", label: this.label, value: chips, required: this.required, helperText: this.helperText, delimiter: "\u203A", maxItems: 1, onChange: this.handleChipSetChange, onFocus: this.handleChipSetFocus, onStopEdit: this.handleChipSetBlur })))));
     }
     loadMenuItems() {
         // Get the limetype we're currently navigating in
@@ -219,30 +236,36 @@ export class PropertySelector {
             return [];
         }
         const parts = path.split('.');
-        const chips = [];
+        const labels = [];
+        let leafIcon;
         let currentLimetype = this.limetypes[this.limetype];
-        let currentPath = '';
         for (const part of parts) {
-            currentPath = currentPath ? `${currentPath}.${part}` : part;
-            // Use getNormalizedProperties to include _id and _timestamp
             const normalizedProperties = getNormalizedProperties(currentLimetype);
             const property = normalizedProperties[part];
-            if (property) {
-                chips.push({
-                    id: currentPath,
-                    text: property.localname || part,
-                    icon: this.getIconForProperty(property),
-                    value: currentPath,
-                });
-                if (property.relation) {
-                    currentLimetype = property.relation.getLimetype();
-                }
+            if (!property) {
+                continue;
+            }
+            labels.push(property.localname || part);
+            leafIcon = this.getIconForProperty(property);
+            if (property.relation) {
+                currentLimetype = property.relation.getLimetype();
             }
         }
-        return chips;
+        if (labels.length === 0) {
+            return [];
+        }
+        return [
+            {
+                id: path,
+                text: labels.join('.'),
+                icon: leafIcon,
+                value: path,
+            },
+        ];
     }
     static get is() { return "limebb-property-selector"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["property-selector.scss"]

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

@@ -66,7 +66,7 @@ export class ResponseFormatItem {
     }
     render() {
         return [
-            h("div", { key: '1fc4a0dbdaa2b362e56a53a82483ca3afe21f6bf', class: "property-controls" }, h("div", { key: '5269250030c559943d4f610734d1ac490a8355ad', class: "property-path" }, h("limebb-property-selector", { key: '2602b66035849922fc413cbc0c82b8163a928ecd', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: this.item.path, required: true, onChange: this.handlePathChange }), h("div", { key: '4974a2c7ff30c527b0328d0fbed3b8bac519fdcd', class: "input-grid" }, this.renderAliasInput()), h("div", { key: 'fb058b3a5d5599c387b852e409bd5ac8e8afbc30', class: "input-grid" }, this.renderDescriptionInput()), h("div", { key: '97a5e7e2ed68fdbac160bdd60498541f3a16371d', class: "button-group" }, this.renderAliasButton(), this.renderDescriptionButton())), h("limel-icon-button", { key: '42ab29e5e8e5fc08e90bc4afe6c6d504e434d33e', icon: "trash", label: "Remove property", onClick: this.handleRemove })),
+            h("div", { key: '98518fb21bacceef31e398faf0e7d66d92152a9f', class: "property-controls" }, h("div", { key: '1d636436ce63b930abdfb40600106d0d8f643663', class: "property-path" }, h("limebb-property-selector", { key: '3e0fa6a5c5c414c70e38b52f7157a806be8358df', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: this.item.path, required: true, onChange: this.handlePathChange }), h("div", { key: '03bc814455e46812ad7365ddf893431e97b255df', class: "input-grid" }, this.renderAliasInput()), h("div", { key: '8d6b47ff44a01288e9875494b1fea5a57649205f', class: "input-grid" }, this.renderDescriptionInput()), h("div", { key: 'e2e4741bc80c0fef0741f153c7183b8a12da7aa9', class: "button-group" }, this.renderAliasButton(), this.renderDescriptionButton())), h("limel-icon-button", { key: '7f204e6331dbcd0e8e62a5e9a61676f62b14a045', icon: "trash", label: "Remove property", onClick: this.handleRemove })),
         ];
     }
     renderAliasButton() {

package/dist/collection/components/limeobject/file-viewer/live-docs-info.js

@@ -5,8 +5,8 @@ import { h } from "@stencil/core";
 export class LiveDocsInfo {
     render() {
         return [
-            h("div", { key: 'ace2c3e78a926a405e6bb9a15db259953820ca1a', class: "header" }, h("limel-icon", { key: 'd1d94917a24d4b066ee2a389082a48c3b3ab29af', name: "not_showing_video_frames" }), h("h2", { key: '3d164cdece408fef99df8a0c18b03a33118f6737' }, "Viewing this file type requires ", h("em", { key: '3f46b83b55eb9474df36b18c71cd02a12696a41f' }, "Live Docs"))),
-            h("p", { key: 'e691f783583a0a3d421a033087accf825981e935' }, h("em", { key: '9bd0d29362de47d35cdc1e765c85dfd2c459b5d6' }, "Live Docs"), " not only enables you to view many file formats such as Microsoft Office documents, but it also empowers you to edit them right in the CRM. No need to download anything on your device!", h("a", { key: 'e4a575a382890c7c52e78dd363e695f2b97b9a9f', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
+            h("div", { key: '36018d23b4f56d1ef1cba8aaf6d24c9e1913fc51', class: "header" }, h("limel-icon", { key: 'e262d9b9b22f4ab604f8786ae20964da908c5179', name: "not_showing_video_frames" }), h("h2", { key: '283107fa6651f1de7308d805b3aa48c479c1b281' }, "Viewing this file type requires ", h("em", { key: '4bb7d2d83e4ae2c073f35038827b5b606448af2d' }, "Live Docs"))),
+            h("p", { key: '8f5a3fd0b9958f4bdaa11c0f3b82990706100c65' }, h("em", { key: '23aed14b3a3b54c82f63f2fa4aa6016290aebf26' }, "Live Docs"), " not only enables you to view many file formats such as Microsoft Office documents, but it also empowers you to edit them right in the CRM. No need to download anything on your device!", h("a", { key: 'a018062eefaa0c9b3fff92504e330700979cc407', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
         ];
     }
     static get is() { return "limebb-live-docs-info"; }

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

@@ -53,7 +53,7 @@ export class LocalePicker {
             const value = this.value;
             selectedOptions = options.find((option) => option.value === value);
         }
-        return (h("limel-select", { key: 'b5aad60b10237826f58f096a343beb7fcbfe2b9b', value: selectedOptions, options: sortBy(options, 'text'), helperText: this.helperText, label: this.label, required: this.required, disabled: this.disabled, readonly: this.readonly, onChange: this.handleChange, multiple: this.multipleChoice }));
+        return (h("limel-select", { key: 'b42d403250d57155547eaa97731bfc471596c224', value: selectedOptions, options: sortBy(options, 'text'), helperText: this.helperText, label: this.label, required: this.required, disabled: this.disabled, readonly: this.readonly, onChange: this.handleChange, multiple: this.multipleChoice }));
     }
     static get is() { return "limebb-locale-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notification-list/notification-item/notification-item.js

@@ -56,7 +56,7 @@ export class NotificationListItem {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '951b650d804bfe49133743bc461e344d9dd0324b', id: this.item.id, class: {
+        return (h(Host, { key: 'dff09ced1e8ae05c746912e249f2557de6fce96e', id: this.item.id, class: {
                 'is-clickable': this.isItemClickable(),
                 'is-read': !!((_a = this.item) === null || _a === void 0 ? void 0 : _a.read),
                 'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),

package/dist/collection/components/percentage-visualizer/percentage-visualizer.js

@@ -108,11 +108,11 @@ export class PercentageVisualizer {
     render() {
         const normalizedValue = this.getNormalizedValue();
         const zeroPoint = this.getZeroPointPosition();
-        return (h(Host, { key: 'c57fbde9785115a91c28db17ccebee42a335a80f', class: this.getContainerClassList(), style: {
+        return (h(Host, { key: 'ea0690be403aa9c1e4e1fc82b788ad159a8a4cc3', class: this.getContainerClassList(), style: {
                 '--limebb-percentage-visualizer-zero-point-position': `${zeroPoint}%`,
                 '--limebb-percentage-visualizer-width': `${Math.abs(normalizedValue)}%`,
                 '--limebb-percentage-visualizer-rotate': `${normalizedValue >= 0 ? '0deg' : '180deg'}`,
-            } }, h("limel-notched-outline", { key: '27d6dada52041ce9ebec9d987bae303afacfff89', tabIndex: 0, role: "meter", "aria-valuemin": this.rangeMin, "aria-valuemax": this.rangeMax, "aria-valuenow": this.numValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-controls": this.helperTextId }, h("div", { key: '2afd6d0ff95eace6fac444fd3e2732d22ab97728', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
+            } }, h("limel-notched-outline", { key: '77b09269ca09806a33b6297692ca7cf79ee68a53', tabIndex: 0, role: "meter", "aria-valuemin": this.rangeMin, "aria-valuemax": this.rangeMax, "aria-valuenow": this.numValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-controls": this.helperTextId }, h("div", { key: '7b3905e69e8d5b372f7736a9ec40576a23b10385', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {

package/dist/collection/components/rule-editor/rule-chip-popover/rule-chip-popover.js

@@ -37,7 +37,7 @@ export class RuleChipPopover {
         };
     }
     render() {
-        return (h("div", { key: '14ab805ec2930bb31fa1aeb4a987b97a9c816f3c', class: "popover" }, this.renderHeader(), this.renderBody()));
+        return (h("div", { key: 'ca7901be2a99590faddea0c678d149b13b5d564f', class: "popover" }, this.renderHeader(), this.renderBody()));
     }
     renderHeader() {
         var _a, _b, _c, _d;

package/dist/collection/components/rule-editor/rule-editor.css

@@ -67,6 +67,7 @@
 
 limel-popover.rule-node__chips-popover {
   display: contents;
+  --popover-surface-width: min(calc(100vw - 4rem), 50rem);
 }
 
 .rule-node__chips {

package/dist/collection/components/rule-editor/rule-editor.js

@@ -100,7 +100,7 @@ export class RuleEditor {
             'rule-editor': true,
             'rule-editor--disabled': this.disabled,
         };
-        return (h("div", { key: 'dfdc801d8c0d48b8276b9d4cff8a4a2c0754c52f', class: containerClasses }, this.renderLabel(), h(RuleNodeView, { key: '250d53eba7681872f181003c709303238971be2a', node: this.normalizedValue, path: [], ctx: this.createRenderContext() }), this.renderHelperText()));
+        return (h("div", { key: 'f1479b58e37918312e4e47031e6fd3e7d6129449', class: containerClasses }, this.renderLabel(), h(RuleNodeView, { key: '3c49ff3c08a6f0b51a4ab6608521d571a2ec1625', node: this.normalizedValue, path: [], ctx: this.createRenderContext() }), this.renderHelperText()));
     }
     renderLabel() {
         if (!this.label) {

package/dist/collection/components/rule-gate/rule-gate.js

@@ -26,7 +26,7 @@ export class RuleGate {
         this.compileAndEvaluate();
     }
     render() {
-        return (h(Host, { key: '365df6908301371b8b964671382ad936971b6624', hidden: !this.shouldRender }, h("slot", { key: 'ca7c2a9febf0189dfae882a2ae894d1d0262a213' })));
+        return (h(Host, { key: '8fe8b9fad90211b80b4672563f6d599ce1cb11c3', hidden: !this.shouldRender }, h("slot", { key: 'f434d25308b85fd084d369ccf2b0e22bd3513210' })));
     }
     get ruleRegistry() {
         return this.platform.get(PlatformServiceName.RuleRegistry);

package/dist/collection/components/summary-popover/summary-popover.js

@@ -128,9 +128,9 @@ export class SummaryPopover {
             top: '0.125rem',
             right: '0.125rem',
         };
-        return (h("limel-popover", { key: '901e726d37719331f2b30df6e35f2375951c161f', style: {
+        return (h("limel-popover", { key: '7e4e777539c58689faf6a0e69c5f2cf8ed771641', style: {
                 '--limebb-summary-popover-timeout': `${this.triggerDelay}ms`,
-            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("div", { key: 'a9a73b0a0f16cf12aaa6fa3434071c56a26a1038', slot: "trigger", onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocusin: this.openPopoverWithDelay }, h("slot", { key: '594bcc9e419e33ef97fd6ca863cf44a67617fa48', name: "trigger" }), h("div", { key: 'a6f548eeb737f4392e2c938682a1c9a509523658', class: "opening-countdown-indicator" })), this.renderCard(closeButtonStyle)));
+            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("div", { key: '21e0e2569a1abdb404c0c6dbd80714f7ff794ca1', slot: "trigger", onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocusin: this.openPopoverWithDelay }, h("slot", { key: 'c771e4d9aa10acd6a0a044be4d01d611e22bcc13', name: "trigger" }), h("div", { key: '0c25b9418a311fdf7b700f76a8dbadeea5fb8010', class: "opening-countdown-indicator" })), this.renderCard(closeButtonStyle)));
     }
     renderCard(closeButtonStyle) {
         return (h("limel-card", { style: {

package/dist/collection/components/text-editor/mention-group-counter.js

@@ -13,8 +13,8 @@ export class MentionGroupCounter {
     render() {
         const label = this.getLabel();
         return [
-            h("span", { key: 'b2dca0d50a70b8c7bf187ef2f6c29960c4caf563', id: this.tooltipId }, label),
-            h("limel-tooltip", { key: '97adc0a2b91b830a6fe040712cbdfc1d9839c8f8', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
+            h("span", { key: '24bc1b7b14ada4e19a4f560455cbb26bfd0b83b7', id: this.tooltipId }, label),
+            h("limel-tooltip", { key: '81a8ce747eea55013b9968a2f3eceb652257355f', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
         ];
     }
     getLabel() {

package/dist/collection/components/text-editor/text-editor.js

@@ -391,7 +391,7 @@ export class LimeBBTextEditor {
     }
     render() {
         return [
-            h("limel-text-editor", { key: '3ef0538b3df2cfbd3e363868add7dad46559e035', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, onImagePasted: this.handleImagePasted, onMetadataChange: this.handleMetadataChange, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
+            h("limel-text-editor", { key: '58b3a06b62159010bab0d99fe48ae3d9ebc0bc5e', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, onImagePasted: this.handleImagePasted, onMetadataChange: this.handleMetadataChange, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
             this.renderPicker(),
         ];
     }

package/dist/collection/components/trend-indicator/trend-indicator.js

@@ -69,7 +69,7 @@ export class TrendIndicator {
         this.numValue = this.parseValue(this.value);
     }
     render() {
-        return (h(Host, { key: 'fd3bce29b7cd49a4642904fa630616b10e7d55b8', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '3502f060569abb0e12c5b6bca84fdf9b190e840f', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: '4f007fec33a71fe2205c1fbb861b45b8d41f440e', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
+        return (h(Host, { key: 'ea5709dccccd0ca07684bd221e7f5fe79b76dae4', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '952a07d4e934d589460a8848a52bad130f351cdf', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: 'a620318b3edea23636d656654da65c9532b4a5f0', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {