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

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

@@ -1,205 +1,131 @@
-@charset "UTF-8";
-/**
-* Root-level entry point for consuming @limetech/lime-elements SCSS utilities.
-*
-* This file enables the clean import path:
-* `@use '@limetech/lime-elements' as lime-elements;`
-*
-* It simply forwards everything from the built exports file.
-*/
-/**
-* Public SCSS exports for consumers of @limetech/lime-elements.
-*
-* This file provides reusable styling utilities.
-*
-* Import this file using:
-* `@use '@limetech/lime-elements' as lime-elements;`
-*
-* For detailed documentation of each utility, its parameters,
-* and usage examples, refer to the respective source files.
-*/
-/**
-* Note! This file is forwarded via `src/style/exports.scss`
-* and exposed to consumers through the root `index.scss`.
-*
-* Consumers import it using:
-* `@use '@limetech/lime-elements' as lime-elements;`
-*
-* Legacy import paths (`dist/scss/mixins`) are maintained
-* for backward compatibility via copy rules in the Stencil config.
-*/
-/**
-* Neutralizes the user-agent styles that browsers apply to `<button>` elements
-* (their default background, border, padding, font, etc.), without stripping
-* the useful defaults that `all: unset;` would also remove
-* (such as `display`, `cursor`, and focus behavior).
-*
-* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
-* the styling you want on top — often one of the `is-*-clickable` mixins.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-/**
-* @mixin action-bar-interactions($item-selector)
-* This mixin applies styles for the action bar interactions.
-* For example, it animates the height of the action bar from `0` to `auto`.
-*
-* :::note
-* The consumer should set:
-* `--limebb-promoted-action-bar-grid-template-rows: 0fr;`
-* when the action bar is not supposed to be visible.
-* :::
-*
-* @param {string} $item-selector - The consumer component's tag name for the item that displays the action bar.
-*/
 *,
-*::before,
+*:before,
 *::after {
   box-sizing: border-box;
 }
 
-limebb-lime-query-filter-expression {
+:host(limebb-lime-query-filter-group) {
+  --group-rail-color: var(--limebb-query-filter-group-color-code);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+:host([data-op=AND]) {
+  --combinator-symbol: "&";
+}
+
+:host([data-op=NOT_AND]) {
+  --combinator-symbol: "- &";
+}
+
+:host([data-op=OR]) {
+  --combinator-symbol: "or";
+}
+
+:host([data-op=NOT_OR]) {
+  --combinator-symbol: "- or";
+}
+
+.group {
   position: relative;
-  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.75rem;
+  background-color: rgb(var(--contrast-800), 0.15);
+  transition: box-shadow 120ms ease;
 }
-limebb-lime-query-filter-expression:not(:first-of-type):after {
+.group:before {
   content: "";
   position: absolute;
-  top: -0.5rem;
-  left: 0.75rem;
-  display: block;
-  border-radius: 1rem;
-  height: 2rem;
+  top: 1rem;
+  bottom: calc(1rem + 1.75rem);
+  left: 0;
   width: 0.125rem;
-  background-color: var(--limebb-lime-query-builder-group-color);
+  transform: translateX(-50%);
+  border-radius: 1rem;
+  background-color: var(--group-rail-color);
 }
-limebb-lime-query-filter-expression:not(:first-of-type):before {
-  position: relative;
-  z-index: 1;
+.group:has(limel-icon-button.delete-group:hover), .group:has(limel-icon-button.delete-group:focus-within) {
+  box-shadow: var(--shadow-error-state);
+}
+
+.group-header {
   display: flex;
-  justify-content: center;
   align-items: center;
-  height: 1rem;
-  content: var(--limebb-lime-query-filter-group-operator);
-  display: inline-block;
-  margin: 0 auto 0.5rem auto;
-  transform: translateY(-50%);
-  font-size: 0.625rem;
-  padding: 0 0.5rem;
-  color: rgb(var(--color-blue-dark));
-  background-color: var(--limebb-lime-query-builder-group-color);
-  border-radius: 2rem;
+  gap: 0.5rem;
 }
 
-.expression {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-  gap: 0;
-  background-color: rgb(var(--contrast-100));
-  border-radius: 0.75rem;
-  border: 1px solid var(--limebb-lime-query-builder-group-color);
+limel-select.combinator {
+  min-width: 9rem;
+}
+
+limel-icon-button.delete-group {
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+limel-chip.add-group {
+  --lime-elevated-surface-background-color: transparent;
+  --button-shadow-normal: none;
+  isolation: isolate;
+  position: relative;
+  margin-right: auto;
+}
+limel-chip.add-group:after {
+  content: "";
+  position: absolute;
+  width: 0.5rem;
+  height: 1.75rem;
+  top: 0;
+  left: calc(0.5rem * -1 - 0.125rem / 2);
+  border-width: 0 0 0.125rem 0.125rem;
+  border-color: var(--group-rail-color);
+  border-style: solid;
+  border-radius: 0 0 0 0.5rem;
+  transform: translateY(calc(-50% - 0.125rem / 2));
+}
+
+.group:hover > .group-header > limel-icon-button.delete-group,
+limel-icon-button.delete-group:focus-within {
+  opacity: 1;
 }
-.expression ul {
+
+ul.rows {
   list-style: none;
   margin: 0;
-  padding: 0.5rem;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 1rem;
+  column-gap: 0.5rem;
+  row-gap: 0.5rem;
+  padding: 0 0.5rem 0.5rem 0.5rem;
 }
-.expression ul [role=listitem] {
+
+li.row {
   list-style: none;
-  width: 100%;
+  position: relative;
 }
-
-limel-button.add-group {
-  width: fit-content;
-  margin: 0.5rem;
+li.row:has(> limebb-lime-query-filter-expression > limebb-lime-query-filter-group) {
+  flex-basis: 100%;
+  align-self: stretch;
 }
-
-limel-icon-button.delete-group {
-  margin-left: 0.5rem;
+li.row + li.row:before {
+  content: var(--combinator-symbol);
+  color: var(--limebb-query-filter-group-color-code);
+  font-size: 0.75rem;
+  font-weight: 600;
 }
-
-limel-select.operator-select {
-  min-width: 8rem;
+li.row + li.row:has(> limebb-lime-query-filter-expression > limebb-lime-query-filter-group):before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -50%);
+}
+li.row + li.row:not(:has(> limebb-lime-query-filter-expression > limebb-lime-query-filter-group)):before {
+  margin-right: 0.5rem;
 }

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) {