@limetech/lime-crm-building-blocks 1.96.0 → 1.97.0

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

@@ -0,0 +1,246 @@
+import { h } from "@stencil/core";
+import { LIME_QUERY_OPERATORS, } from "../lime-query.types";
+/**
+ * Lime Query Filter Comparison Component
+ *
+ * Renders a single comparison expression with three parts:
+ * 1. **Property** - The field to compare (e.g., "dealstatus", "company.name")
+ * 2. **Operator** - The comparison operator (=, !=, >, <, >=, <=, IN, ?, =?, =$)
+ * 3. **Value** - The value to compare against
+ *
+ * This is the most basic building block of a filter. Examples:
+ * - dealstatus = "won"
+ * - value > 100000
+ * - name ? "Big" (contains "Big")
+ * - dealstatus IN ["won", "tender"]
+ *
+ * The component displays:
+ * - A text input for the property (Phase 0 - will be replaced with property-path in Phase 1)
+ * - A dropdown for the operator
+ * - A value input (text/number based on operator)
+ * - A trash icon button to remove this condition
+ *
+ * @private
+ */
+export class LimeQueryFilterComparisonComponent {
+    constructor() {
+        /**
+         * The comparison expression to render
+         */
+        this.expression = {
+            filter_type: 'comparison',
+            property: '',
+            operator: '=',
+            value: '',
+        };
+        this.handlePropertyChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { property: event.detail }));
+        };
+        this.handleOperatorChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { operator: event.detail.value }));
+        };
+        this.handleValueChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { value: event.detail }));
+        };
+        this.removeExpression = () => {
+            this.expressionChange.emit({ filter_type: '' });
+        };
+    }
+    render() {
+        return (h("div", { key: '618150e84e87cdc234b5eab7cd0ef6443bcb261c', class: "expression" }, this.label && h("limel-header", { key: '7b9a35794777df5556b591ea54d1e63b64833808', heading: this.label }), h("div", { key: '4367741a9383fc268fcfe6dbcc14bea49f20871b', class: "expression-container" }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput(), h("limel-icon-button", { key: '3ad667258da994636f484c0f7a5649b1e13b063b', class: "remove", icon: "trash", label: "Remove condition", onClick: this.removeExpression }))));
+    }
+    renderPropertySelector() {
+        return (h("limebb-property-selector", { platform: this.platform, context: this.context, label: "Property", limetype: this.limetype, value: this.expression.property, required: true, onChange: this.handlePropertyChange }));
+    }
+    renderOperator() {
+        const operatorHasBeenSet = !!this.expression.operator;
+        const options = LIME_QUERY_OPERATORS.map((op) => ({
+            text: op.label,
+            value: op.value,
+            icon: op.icon ? { name: op.icon } : undefined,
+        }));
+        const selectedOption = options.find((o) => o.value === this.expression.operator);
+        return (h("limel-select", { class: "operator", label: "Operator", value: selectedOption, options: options, disabled: !operatorHasBeenSet && !this.expression.property, onChange: this.handleOperatorChange }));
+    }
+    renderValueInput() {
+        if (!this.expression.operator) {
+            return null;
+        }
+        return (h("limebb-lime-query-value-input", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, propertyPath: this.expression.property, operator: this.expression.operator, value: this.expression.value, onChange: this.handleValueChange }));
+    }
+    static get is() { return "limebb-lime-query-filter-comparison"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lime-query-filter-comparison.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lime-query-filter-comparison.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "platform": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentPlatform",
+                    "resolved": "LimeWebComponentPlatform",
+                    "references": {
+                        "LimeWebComponentPlatform": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentPlatform"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Platform service provider"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "context": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentContext",
+                    "resolved": "LimeWebComponentContext",
+                    "references": {
+                        "LimeWebComponentContext": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentContext"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component context"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label for the comparison"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "limetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype being queried (e.g., \"deal\", \"company\")"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "limetype",
+                "reflect": false
+            },
+            "activeLimetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype of the active object (for %activeObject% placeholders)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-limetype",
+                "reflect": false
+            },
+            "expression": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeQueryFilterComparison",
+                    "resolved": "LimeQueryFilterComparison",
+                    "references": {
+                        "LimeQueryFilterComparison": {
+                            "location": "import",
+                            "path": "../lime-query.types",
+                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterComparison"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The comparison expression to render"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n        filter_type: 'comparison',\n        property: '',\n        operator: '=',\n        value: '',\n    }"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expressionChange",
+                "name": "expressionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the comparison expression changes (property/operator/value modified)"
+                },
+                "complexType": {
+                    "original": "LimeQueryFilterComparison | LimeQueryFilterMissing",
+                    "resolved": "LimeQueryFilterComparison | LimeQueryFilterMissing",
+                    "references": {
+                        "LimeQueryFilterComparison": {
+                            "location": "import",
+                            "path": "../lime-query.types",
+                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterComparison"
+                        },
+                        "LimeQueryFilterMissing": {
+                            "location": "import",
+                            "path": "../lime-query.types",
+                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterMissing"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,104 @@
+@charset "UTF-8";
+/**
+* Note! This file is exported to `dist/scss/` in the published
+* node module, for consumer projects to import.
+* That means this file cannot import from any file that isn't
+* also exported, keeping the same relative path.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* 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.
+*/
+/**
+ * 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.
+*/
+.expression {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+  gap: 1rem;
+}

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

@@ -0,0 +1,220 @@
+import { h } from "@stencil/core";
+/**
+ * Lime Query Filter Expression Router
+ *
+ * This is the main entry point for rendering Lime Query filters.
+ * It routes to the appropriate sub-component based on the filter type:
+ * - `'AND'` → limebb-lime-query-filter-and
+ * - `'OR'` → limebb-lime-query-filter-or
+ * - `'NOT'` → limebb-lime-query-filter-not
+ * - `'comparison'` → limebb-lime-query-filter-comparison
+ * - `''` (missing) → limebb-lime-query-filter-comparison (default)
+ *
+ * Use this component when you need to render a complete filter expression
+ * that may contain nested AND/OR/NOT logic.
+ *
+ * @private
+ */
+export class LimeQueryFilterExpressionComponent {
+    render() {
+        var _a;
+        const props = {
+            platform: this.platform,
+            context: this.context,
+            label: this.label,
+            limetype: this.limetype,
+            activeLimetype: this.activeLimetype,
+        };
+        switch ((_a = this.expression) === null || _a === void 0 ? void 0 : _a.filter_type) {
+            case 'AND': {
+                return (h("limebb-lime-query-filter-and", Object.assign({}, props, { expression: this.expression })));
+            }
+            case 'OR': {
+                return (h("limebb-lime-query-filter-or", Object.assign({}, props, { expression: this.expression })));
+            }
+            case 'NOT': {
+                return (h("limebb-lime-query-filter-not", Object.assign({}, props, { expression: this.expression })));
+            }
+            case 'comparison': {
+                return (h("limebb-lime-query-filter-comparison", Object.assign({}, props, { expression: this.expression })));
+            }
+            default: {
+                // Default to comparison for empty/missing expressions
+                // Convert missing expression to empty comparison
+                const comparisonExpression = {
+                    filter_type: 'comparison',
+                    property: '',
+                    operator: '=',
+                    value: '',
+                };
+                return (h("limebb-lime-query-filter-comparison", Object.assign({}, props, { expression: comparisonExpression })));
+            }
+        }
+    }
+    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 properties() {
+        return {
+            "platform": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentPlatform",
+                    "resolved": "LimeWebComponentPlatform",
+                    "references": {
+                        "LimeWebComponentPlatform": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentPlatform"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Platform service provider"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "context": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentContext",
+                    "resolved": "LimeWebComponentContext",
+                    "references": {
+                        "LimeWebComponentContext": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentContext"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component context"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label for the expression"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "limetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype being queried (e.g., \"deal\", \"company\")\nUsed for property validation and type-aware inputs"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "limetype",
+                "reflect": false
+            },
+            "activeLimetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype of the active object (for %activeObject% placeholders)\nOptional - used for validation and property suggestions"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-limetype",
+                "reflect": false
+            },
+            "expression": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeQueryFilterExpression",
+                    "resolved": "LimeQueryFilterAnd | LimeQueryFilterComparison | LimeQueryFilterMissing | LimeQueryFilterNot | LimeQueryFilterOr",
+                    "references": {
+                        "LimeQueryFilterExpression": {
+                            "location": "import",
+                            "path": "../lime-query.types",
+                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterExpression"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The filter expression to render"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expressionChange",
+                "name": "expressionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the filter expression changes"
+                },
+                "complexType": {
+                    "original": "LimeQueryFilterExpression",
+                    "resolved": "LimeQueryFilterAnd | LimeQueryFilterComparison | LimeQueryFilterMissing | LimeQueryFilterNot | LimeQueryFilterOr",
+                    "references": {
+                        "LimeQueryFilterExpression": {
+                            "location": "import",
+                            "path": "../lime-query.types",
+                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterExpression"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,107 @@
+@charset "UTF-8";
+/**
+* Note! This file is exported to `dist/scss/` in the published
+* node module, for consumer projects to import.
+* That means this file cannot import from any file that isn't
+* also exported, keeping the same relative path.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* 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.
+*/
+/**
+ * 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.
+*/
+.expression {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+  gap: 1rem;
+  padding: 1rem;
+  border-left: 0.25rem solid rgb(var(--contrast-400));
+  background-color: rgb(var(--contrast-100));
+}