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

package/dist/components/lime-query-filter-and.js

@@ -0,0 +1,408 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './lime-query-filter-comparison.js';
+import { i as isEqual } from './isEqual.js';
+import { d as defineCustomElement$6 } from './lime-query-value-input.js';
+import { d as defineCustomElement$5 } from './property-selector.js';
+
+const limeQueryFilterOrCss = "@charset \"UTF-8\";.expression{display:flex;flex-direction:column;margin-bottom:1rem;gap:0;background-color:rgb(var(--contrast-200));border:1px solid rgb(var(--contrast-600));border-radius:0.75rem}.expression>ul{margin-top:0;margin-right:1rem;margin-bottom:1rem;margin-left:1rem;padding-left:1rem;list-style:circle}.expression>ul li{margin-top:1rem}.expression>ul li.add-button{list-style:none;margin-top:0;text-align:right}";
+const LimebbLimeQueryFilterOrStyle0 = limeQueryFilterOrCss;
+
+const LimeQueryFilterOrComponent = /*@__PURE__*/ proxyCustomElement(class LimeQueryFilterOrComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expressionChange = createEvent(this, "expressionChange", 7);
+        this.renderChildExpression = (expression, childIndex) => {
+            const label = this.expression.expressions.length === 1 ? this.label : undefined;
+            return (h("li", null, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, label: label, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleExpressionChange(childIndex) })));
+        };
+        this.handleExpressionChange = (updatedChildIndex) => (event) => {
+            event.stopPropagation();
+            const updatedExpression = event.detail;
+            const expressions = [...this.expression.expressions];
+            const missingExpression = {
+                filter_type: '',
+            };
+            if (isEqual(updatedExpression, missingExpression)) {
+                expressions.splice(updatedChildIndex, 1);
+            }
+            else {
+                expressions[updatedChildIndex] = updatedExpression;
+            }
+            if (expressions.length === 0) {
+                this.expressionChange.emit(missingExpression);
+                return;
+            }
+            this.expressionChange.emit({
+                filter_type: 'OR',
+                expressions: expressions,
+            });
+        };
+        this.handleAddChildExpression = () => {
+            const updatedExpressionsList = [
+                ...this.expression.expressions,
+                {
+                    filter_type: '',
+                },
+            ];
+            this.expressionChange.emit({
+                filter_type: 'OR',
+                expressions: updatedExpressionsList,
+            });
+        };
+    }
+    render() {
+        return (h("div", { key: '9a0e6876f32ebcb614ab1ef0ccb122a5a5b8e978', class: "expression" }, this.expression.expressions.length > 1 && (h("limel-header", { key: 'cb1ff04ce7669582f0c4f6afefbce3402876d435', heading: this.label, subheading: "Any of these conditions is true" })), h("ul", { key: '21efcfec20f4ea04105ccbea880dbb9ed551efb9' }, this.expression.expressions.map(this.renderChildExpression), h("li", { key: '541811a52176182be501078c3cf662bbe6a71cda', class: "add-button" }, this.renderAddChildExpression()))));
+    }
+    renderAddChildExpression() {
+        return (h("limel-icon-button", { label: "Add alternative", icon: "plus_math", onClick: this.handleAddChildExpression }));
+    }
+    static get style() { return LimebbLimeQueryFilterOrStyle0; }
+}, [1, "limebb-lime-query-filter-or", {
+        "platform": [16],
+        "context": [16],
+        "label": [1],
+        "limetype": [1],
+        "activeLimetype": [1, "active-limetype"],
+        "expression": [16]
+    }]);
+function defineCustomElement$3() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-lime-query-filter-or", "limebb-lime-query-filter-and", "limebb-lime-query-filter-comparison", "limebb-lime-query-filter-expression", "limebb-lime-query-filter-not", "limebb-lime-query-filter-or"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-lime-query-filter-or":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LimeQueryFilterOrComponent);
+            }
+            break;
+        case "limebb-lime-query-filter-and":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "limebb-lime-query-filter-comparison":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "limebb-lime-query-filter-expression":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "limebb-lime-query-filter-not":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "limebb-lime-query-filter-or":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+    } });
+}
+
+const limeQueryFilterNotCss = "@charset \"UTF-8\";.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))}";
+const LimebbLimeQueryFilterNotStyle0 = limeQueryFilterNotCss;
+
+const LimeQueryFilterNotComponent = /*@__PURE__*/ proxyCustomElement(class LimeQueryFilterNotComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expressionChange = createEvent(this, "expressionChange", 7);
+        this.handleExpressionChange = (event) => {
+            event.stopPropagation();
+            const missingExpression = {
+                filter_type: '',
+            };
+            if (isEqual(event.detail, missingExpression)) {
+                this.expressionChange.emit(missingExpression);
+                return;
+            }
+            this.expressionChange.emit({
+                filter_type: 'NOT',
+                expression: event.detail,
+            });
+        };
+    }
+    render() {
+        return (h("div", { key: '005a133401b16d03bdb5d8683b6a51c2c9691dfb', class: "expression" }, this.label && h("limel-header", { key: '31b44cd46fa6cd6fbe19e77df4eef9075523733d', heading: this.label }), h("limebb-lime-query-filter-expression", { key: '487f857eccec79d6a1da6a71aa31be04204b8862', platform: this.platform, context: this.context, label: "Not", limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression.expression, onExpressionChange: this.handleExpressionChange })));
+    }
+    static get style() { return LimebbLimeQueryFilterNotStyle0; }
+}, [1, "limebb-lime-query-filter-not", {
+        "platform": [16],
+        "context": [16],
+        "label": [1],
+        "limetype": [1],
+        "activeLimetype": [1, "active-limetype"],
+        "expression": [16]
+    }]);
+function defineCustomElement$2() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-lime-query-filter-not", "limebb-lime-query-filter-and", "limebb-lime-query-filter-comparison", "limebb-lime-query-filter-expression", "limebb-lime-query-filter-not", "limebb-lime-query-filter-or"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-lime-query-filter-not":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LimeQueryFilterNotComponent);
+            }
+            break;
+        case "limebb-lime-query-filter-and":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "limebb-lime-query-filter-comparison":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "limebb-lime-query-filter-expression":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "limebb-lime-query-filter-not":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "limebb-lime-query-filter-or":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+    } });
+}
+
+const limeQueryFilterExpressionCss = "@charset \"UTF-8\";.expression{display:flex;flex-direction:column;margin-bottom:1rem;gap:1rem}";
+const LimebbLimeQueryFilterExpressionStyle0 = limeQueryFilterExpressionCss;
+
+const LimeQueryFilterExpressionComponent = /*@__PURE__*/ proxyCustomElement(class LimeQueryFilterExpressionComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expressionChange = createEvent(this, "expressionChange", 7);
+    }
+    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 style() { return LimebbLimeQueryFilterExpressionStyle0; }
+}, [1, "limebb-lime-query-filter-expression", {
+        "platform": [16],
+        "context": [16],
+        "label": [1],
+        "limetype": [1],
+        "activeLimetype": [1, "active-limetype"],
+        "expression": [16]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-lime-query-filter-expression", "limebb-lime-query-filter-and", "limebb-lime-query-filter-comparison", "limebb-lime-query-filter-expression", "limebb-lime-query-filter-not", "limebb-lime-query-filter-or", "limebb-lime-query-value-input", "limebb-property-selector"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-lime-query-filter-expression":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LimeQueryFilterExpressionComponent);
+            }
+            break;
+        case "limebb-lime-query-filter-and":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "limebb-lime-query-filter-comparison":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "limebb-lime-query-filter-expression":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "limebb-lime-query-filter-not":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "limebb-lime-query-filter-or":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "limebb-lime-query-value-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "limebb-property-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+    } });
+}
+
+const limeQueryFilterAndCss = "@charset \"UTF-8\";.expression{display:flex;flex-direction:column;margin-bottom:1rem;gap:0;background-color:rgb(var(--contrast-100));border:1px solid rgb(var(--contrast-500));border-radius:0.75rem}.expression>ul{margin-top:0;margin-right:1rem;margin-bottom:1rem;margin-left:1rem;padding-left:1rem;list-style:disc}.expression>ul li{margin-top:1rem}.expression>ul li.add-button{list-style:none}";
+const LimebbLimeQueryFilterAndStyle0 = limeQueryFilterAndCss;
+
+const LimeQueryFilterAndComponent = /*@__PURE__*/ proxyCustomElement(class LimeQueryFilterAndComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expressionChange = createEvent(this, "expressionChange", 7);
+        /**
+         * The AND expression containing child expressions
+         */
+        this.expression = {
+            filter_type: 'AND',
+            expressions: [],
+        };
+        this.renderChildExpression = (expression, childIndex) => (h("li", null, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleExpressionChange(childIndex) })));
+        this.handleAddChildExpression = () => {
+            const updatedExpressionsList = [
+                ...this.expression.expressions,
+                {
+                    filter_type: 'OR',
+                    expressions: [
+                        {
+                            filter_type: '',
+                        },
+                    ],
+                },
+            ];
+            this.expressionChange.emit({
+                filter_type: 'AND',
+                expressions: updatedExpressionsList,
+            });
+        };
+        this.handleExpressionChange = (updatedChildIndex) => (event) => {
+            event.stopPropagation();
+            const updatedExpression = event.detail;
+            const expressions = [...this.expression.expressions];
+            const missingExpression = {
+                filter_type: '',
+            };
+            if (isEqual(updatedExpression, missingExpression)) {
+                expressions.splice(updatedChildIndex, 1);
+            }
+            else {
+                expressions[updatedChildIndex] = updatedExpression;
+            }
+            if (expressions.length === 0) {
+                this.expressionChange.emit(missingExpression);
+                return;
+            }
+            this.expressionChange.emit({
+                filter_type: 'AND',
+                expressions: expressions,
+            });
+        };
+    }
+    render() {
+        let subheading = 'All of these conditions are true';
+        if (this.expression.expressions.length <= 1) {
+            subheading = '';
+        }
+        return (h("div", { key: 'b58b7c54e8f1ded42a965f430cc103e6a344dfbf', class: "expression" }, (this.label || subheading) && (h("limel-header", { key: 'd5c38eef732ccbfff6baec25f007a9accdabdec0', heading: this.label, subheading: subheading })), h("ul", { key: 'aee3cc6799ae69c1df334a826cd708a9b6cf2be6' }, this.expression.expressions.map(this.renderChildExpression), h("li", { key: 'f120182c92d6b9a0b35b21be2d3308f6e62e36ab', class: "add-button" }, this.renderAddChildExpression()))));
+    }
+    renderAddChildExpression() {
+        return (h("limel-button", { label: this.getAddButtonLabel(), icon: "plus_math", onClick: this.handleAddChildExpression }));
+    }
+    getAddButtonLabel() {
+        if (this.expression.expressions.length === 0) {
+            return 'Add a condition';
+        }
+        return 'Add another condition';
+    }
+    static get style() { return LimebbLimeQueryFilterAndStyle0; }
+}, [1, "limebb-lime-query-filter-and", {
+        "platform": [16],
+        "context": [16],
+        "label": [1],
+        "limetype": [1],
+        "activeLimetype": [1, "active-limetype"],
+        "expression": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-lime-query-filter-and", "limebb-lime-query-filter-and", "limebb-lime-query-filter-comparison", "limebb-lime-query-filter-expression", "limebb-lime-query-filter-not", "limebb-lime-query-filter-or"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-lime-query-filter-and":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LimeQueryFilterAndComponent);
+            }
+            break;
+        case "limebb-lime-query-filter-and":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "limebb-lime-query-filter-comparison":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "limebb-lime-query-filter-expression":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "limebb-lime-query-filter-not":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "limebb-lime-query-filter-or":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+    } });
+}
+
+export { LimeQueryFilterAndComponent as L, defineCustomElement$2 as a, defineCustomElement$1 as b, defineCustomElement as c, defineCustomElement$3 as d, LimeQueryFilterExpressionComponent as e, LimeQueryFilterNotComponent as f, LimeQueryFilterOrComponent as g };

package/dist/components/lime-query-filter-comparison.js

@@ -0,0 +1,152 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './lime-query-value-input.js';
+import { d as defineCustomElement$1 } from './property-selector.js';
+
+/**
+ * TypeScript type definitions for Lime Query DSL
+ *
+ * These types represent the structure of Lime Query as defined in:
+ * - lime-core/lime_query/schema.py
+ * - lime-core/lime_filter/schema.py
+ */
+/**
+ * Available operators with display metadata
+ */
+const LIME_QUERY_OPERATORS = [
+    { value: '=', label: 'Equals', icon: 'equals' },
+    { value: '!=', label: 'Not Equals', icon: 'not-equal' },
+    {
+        value: '>',
+        label: 'Greater Than',
+        icon: 'greater-than',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: '>=',
+        label: 'Greater or Equal',
+        icon: 'greater-or-equal',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: '<',
+        label: 'Less Than',
+        icon: 'less-than',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: '<=',
+        label: 'Less or Equal',
+        icon: 'less-or-equal',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    { value: 'IN', label: 'In List', icon: 'list' },
+    {
+        value: '?',
+        label: 'Contains',
+        icon: '-lime-filter-contain',
+        applicableTypes: ['string', 'text'],
+    },
+    {
+        value: '=?',
+        label: 'Begins With',
+        icon: '-lime-filter-begin',
+        applicableTypes: ['string', 'text'],
+    },
+    {
+        value: '=$',
+        label: 'Ends With',
+        icon: '-lime-filter-end',
+        applicableTypes: ['string', 'text'],
+    },
+];
+
+const limeQueryFilterComparisonCss = ".expression-container{display:flex;flex-direction:row;align-items:flex-start;gap:1rem;flex-wrap:wrap}.expression-container>*{flex-grow:2;width:30%;max-width:calc(100% - 3.25rem)}.expression-container>.operator{flex-grow:1;width:calc(30% + 1rem);min-width:4rem}.expression-container>.remove{flex-grow:0;width:auto;margin-left:auto}@media (max-width: 768px){.expression-container{flex-direction:column}.expression-container>*{width:100%;max-width:100%}.expression-container>.operator{width:100%}.expression-container>.remove{margin-left:0;align-self:flex-end}}";
+const LimebbLimeQueryFilterComparisonStyle0 = limeQueryFilterComparisonCss;
+
+const LimeQueryFilterComparisonComponent = /*@__PURE__*/ proxyCustomElement(class LimeQueryFilterComparisonComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expressionChange = createEvent(this, "expressionChange", 7);
+        /**
+         * 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 style() { return LimebbLimeQueryFilterComparisonStyle0; }
+}, [1, "limebb-lime-query-filter-comparison", {
+        "platform": [16],
+        "context": [16],
+        "label": [1],
+        "limetype": [1],
+        "activeLimetype": [1, "active-limetype"],
+        "expression": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-lime-query-filter-comparison", "limebb-lime-query-value-input", "limebb-property-selector"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-lime-query-filter-comparison":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LimeQueryFilterComparisonComponent);
+            }
+            break;
+        case "limebb-lime-query-value-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "limebb-property-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { LIME_QUERY_OPERATORS as L, LimeQueryFilterComparisonComponent as a, defineCustomElement as d };