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

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

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

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

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

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;
 }