@limetech/lime-crm-building-blocks 1.98.0 → 1.100.0

package/dist/esm/limebb-lime-query-filter-comparison_5.entry.js

@@ -0,0 +1,697 @@
+import { r as registerInstance, c as createEvent, h } from './index-96dd111f.js';
+import { Z as Zt, T as Te } from './index.esm-bb569663.js';
+import { a as getPropertyFromPath, g as getNormalizedProperties } from './property-resolution-fde2375e.js';
+
+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 LIME_QUERY_OPERATORS = [
+    { value: Zt.EQUALS, label: 'Equals', icon: 'equals' },
+    { value: Zt.NOT_EQUALS, label: 'Not Equals', icon: 'not-equal' },
+    {
+        value: Zt.GREATER,
+        label: 'Greater Than',
+        icon: 'greater-than',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: Zt.GREATER_OR_EQUAL,
+        label: 'Greater or Equal',
+        icon: 'greater-or-equal',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: Zt.LESS,
+        label: 'Less Than',
+        icon: 'less-than',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: Zt.LESS_OR_EQUAL,
+        label: 'Less or Equal',
+        icon: 'less-or-equal',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    { value: Zt.IN, label: 'In List', icon: 'list' },
+    {
+        value: Zt.LIKE,
+        label: 'Contains',
+        icon: '-lime-filter-contain',
+        applicableTypes: ['string', 'text'],
+    },
+    {
+        value: Zt.BEGINS,
+        label: 'Begins With',
+        icon: '-lime-filter-begin',
+        applicableTypes: ['string', 'text'],
+    },
+    {
+        value: Zt.ENDS,
+        label: 'Ends With',
+        icon: '-lime-filter-end',
+        applicableTypes: ['string', 'text'],
+    },
+];
+const LimeQueryFilterComparisonComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.expressionChange = createEvent(this, "expressionChange", 7);
+        this.handlePropertyChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { key: event.detail }));
+        };
+        this.handleOperatorChange = (event) => {
+            event.stopPropagation();
+            // TODO: Clear value when switching between IN and other operators
+            // since array values are incompatible with single-value operators
+            this.expressionChange.emit({
+                key: this.expression.key,
+                op: event.detail.value,
+                exp: this.expression.exp,
+            });
+        };
+        this.handleValueChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { exp: event.detail }));
+        };
+        this.removeExpression = () => {
+            this.expressionChange.emit(undefined);
+        };
+    }
+    render() {
+        return (h("div", { key: '668e0f05bdb1fb25ffd652ea650c34e5431a3332', class: "expression" }, this.label && h("limel-header", { key: '5034070b58afe31cf90699dd2a27f884e647f540', heading: this.label }), h("div", { key: '14a2b1270e5e6d7e158e29ebc5f61051e5670e80', class: "expression-container" }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput(), h("limel-icon-button", { key: 'b69bde6e88c40d2623ef015794db28cec3676c73', 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.key, required: true, onChange: this.handlePropertyChange }));
+    }
+    renderOperator() {
+        const operatorHasBeenSet = !!this.expression.op;
+        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.op);
+        return (h("limel-select", { class: "operator", label: "Operator", value: selectedOption, options: options, disabled: !operatorHasBeenSet && !this.expression.key, onChange: this.handleOperatorChange }));
+    }
+    renderValueInput() {
+        if (!this.expression.op) {
+            return null;
+        }
+        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 }));
+    }
+};
+LimeQueryFilterComparisonComponent.style = LimebbLimeQueryFilterComparisonStyle0;
+
+const limeQueryFilterGroupCss = "@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 .clickable-header{cursor:pointer;user-select:none}.expression .clickable-header:hover{background-color:rgb(var(--contrast-200))}.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;display:flex;gap:0.5rem}";
+const LimebbLimeQueryFilterGroupStyle0 = limeQueryFilterGroupCss;
+
+const LimeQueryFilterGroupComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.expressionChange = createEvent(this, "expressionChange", 7);
+        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.handleToggleOperator = () => {
+            const newOperator = this.expression.op === Zt.AND ? Zt.OR : Zt.AND;
+            this.expressionChange.emit({
+                op: newOperator,
+                exp: this.expression.exp,
+            });
+        };
+        this.handleAddChildExpression = () => {
+            // Always add a new comparison directly to the list
+            const newChild = {
+                key: '',
+                op: Zt.EQUALS,
+                exp: '',
+            };
+            this.expressionChange.emit({
+                op: this.expression.op,
+                exp: [...this.expression.exp, newChild],
+            });
+        };
+        this.handleAddChildGroup = () => {
+            // Add a nested group of the opposite type
+            const oppositeOp = this.expression.op === Zt.AND ? Zt.OR : Zt.AND;
+            const newChild = {
+                op: oppositeOp,
+                exp: [
+                    {
+                        key: '',
+                        op: Zt.EQUALS,
+                        exp: '',
+                    },
+                ],
+            };
+            this.expressionChange.emit({
+                op: this.expression.op,
+                exp: [...this.expression.exp, newChild],
+            });
+        };
+        this.handleExpressionChange = (updatedChildIndex) => (event) => {
+            event.stopPropagation();
+            const updatedExpression = event.detail;
+            const expressions = [...this.expression.exp];
+            if (updatedExpression === undefined) {
+                // Deletion - remove the child and potentially unwrap
+                expressions.splice(updatedChildIndex, 1);
+                if (expressions.length === 0) {
+                    this.expressionChange.emit(undefined);
+                    return;
+                }
+                if (expressions.length === 1) {
+                    // Unwrap when only one child remains after deletion
+                    this.expressionChange.emit(expressions[0]);
+                    return;
+                }
+            }
+            else {
+                // Update - replace the child, don't unwrap
+                expressions[updatedChildIndex] = updatedExpression;
+            }
+            this.expressionChange.emit({
+                op: this.expression.op,
+                exp: expressions,
+            });
+        };
+    }
+    render() {
+        const subheading = this.getSubheading();
+        return (h("div", { key: '43a1d99fd896e3ad49dd97594e54bccaf74c3aa0', class: "expression" }, subheading && (h("limel-header", { key: '534eb0a3db2f0194e8a28e2fb071beb545f38458', subheading: subheading, onClick: this.handleToggleOperator, class: "clickable-header" })), h("ul", { key: '9d29d98ab034bf2878e7dc19828bc045dbdd492f' }, this.expression.exp.map(this.renderChildExpression), h("li", { key: '44b266c8aeb390b8a68b3e08a51a0760a6421f93', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
+    }
+    getSubheading() {
+        if (this.expression.exp.length <= 1) {
+            return '';
+        }
+        return this.expression.op === Zt.AND
+            ? 'All of these conditions are true'
+            : 'Any of these conditions are true';
+    }
+    renderAddButton() {
+        const label = this.getAddButtonLabel();
+        return (h("limel-button", { label: label, icon: "plus_math", onClick: this.handleAddChildExpression }));
+    }
+    renderAddGroupButton() {
+        const label = this.getAddGroupButtonLabel();
+        return (h("limel-button", { label: label, icon: "tree_structure", onClick: this.handleAddChildGroup }));
+    }
+    getAddButtonLabel() {
+        const isAnd = this.expression.op === Zt.AND;
+        if (this.expression.exp.length === 0) {
+            return 'Add a condition';
+        }
+        return isAnd ? 'Add another condition' : 'Add alternative';
+    }
+    getAddGroupButtonLabel() {
+        const isAnd = this.expression.op === Zt.AND;
+        if (this.expression.exp.length === 0) {
+            return 'Add a group';
+        }
+        return isAnd ? 'Add another group' : 'Add alternative group';
+    }
+};
+LimeQueryFilterGroupComponent.style = LimebbLimeQueryFilterGroupStyle0;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.expressionChange = createEvent(this, "expressionChange", 7);
+        this.handleExpressionChange = (event) => {
+            var _a;
+            event.stopPropagation();
+            const updatedExpression = (_a = event.detail) !== null && _a !== void 0 ? _a : undefined;
+            if (updatedExpression === undefined) {
+                this.expressionChange.emit(undefined);
+                return;
+            }
+            this.expressionChange.emit({
+                op: Zt.NOT,
+                exp: updatedExpression,
+            });
+        };
+    }
+    render() {
+        return (h("div", { key: 'f1dfd7fd4ec7dc1873841d1c8b3d2bb6677634fd', class: "expression" }, this.label && h("limel-header", { key: '91e1b754f6e45c70f49bf2a770898a590defaf22', heading: this.label }), h("limebb-lime-query-filter-expression", { key: 'bf42f3c71521a413e5ecc49a8e0d6401b34384a2', platform: this.platform, context: this.context, label: "Not", limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression.exp, onExpressionChange: this.handleExpressionChange })));
+    }
+};
+LimeQueryFilterNotComponent.style = LimebbLimeQueryFilterNotStyle0;
+
+const limeQueryValueInputCss = ":host{display:block}.value-input-container{display:flex;flex-direction:row;align-items:flex-start;gap:0.5rem;width:100%}.mode-toggle{flex-shrink:0;margin-top:0.5rem;opacity:0.7;transition:opacity 0.2s ease}.mode-toggle:hover{opacity:1}.placeholder-input{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}.placeholder-preview{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;background-color:rgba(var(--color-blue-light), 0.1);border-radius:var(--border-radius-small);font-size:0.875rem;color:rgb(var(--color-blue-default));border-left:3px solid rgb(var(--color-blue-default))}.placeholder-preview limel-icon{flex-shrink:0;color:rgb(var(--color-blue-default))}.placeholder-preview span{font-family:var(--font-monospace);word-break:break-all}";
+const LimebbLimeQueryValueInputStyle0 = limeQueryValueInputCss;
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const LimeQueryValueInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change", 7);
+        /**
+         * Optional label for the input
+         */
+        this.label = 'Value';
+        this.inputMode = 'value';
+        this.handleTextChange = (event) => {
+            event.stopPropagation();
+            // Try to parse as number for number inputs
+            const value = event.detail;
+            const numValue = Number(value);
+            if (!Number.isNaN(numValue) && value !== '') {
+                this.change.emit(numValue);
+            }
+            else {
+                this.change.emit(value);
+            }
+        };
+        this.handleSelectChange = (event) => {
+            event.stopPropagation();
+            const detail = event.detail;
+            if (Array.isArray(detail)) {
+                this.change.emit(detail.map((o) => o.value));
+            }
+            else {
+                this.change.emit(detail === null || detail === void 0 ? void 0 : detail.value);
+            }
+        };
+        this.handleBooleanChange = (event) => {
+            event.stopPropagation();
+            const detail = event.detail;
+            if (!Array.isArray(detail)) {
+                // Convert string back to boolean
+                this.change.emit((detail === null || detail === void 0 ? void 0 : detail.value) === 'true');
+            }
+        };
+        this.handleDateChange = (event) => {
+            event.stopPropagation();
+            // Convert Date to ISO string for storage
+            const date = event.detail;
+            this.change.emit(date ? date.toISOString() : null);
+        };
+        this.handleMultiValueChange = (event) => {
+            event.stopPropagation();
+            // Split by comma and trim whitespace
+            const values = event.detail
+                .split(',')
+                .map((v) => v.trim())
+                .filter((v) => v.length > 0);
+            this.change.emit(values);
+        };
+        this.handleModeToggle = () => {
+            if (this.inputMode === 'value') {
+                // Switching to placeholder mode
+                this.inputMode = 'placeholder';
+                // Emit placeholder value (empty initially)
+                this.change.emit('%activeObject%');
+            }
+            else {
+                // Switching to value mode
+                this.inputMode = 'value';
+                // Emit empty value
+                this.change.emit('');
+            }
+        };
+        this.handlePlaceholderPropertyChange = (event) => {
+            event.stopPropagation();
+            const propertyPath = event.detail;
+            const placeholderValue = this.buildPlaceholderValue(propertyPath);
+            this.change.emit(placeholderValue);
+        };
+    }
+    componentWillLoad() {
+        // Detect if the current value is a placeholder
+        if (this.isPlaceholder(this.value)) {
+            this.inputMode = 'placeholder';
+        }
+    }
+    componentWillUpdate() {
+        // Update mode if value changes externally
+        if (this.isPlaceholder(this.value) &&
+            this.inputMode !== 'placeholder') {
+            this.inputMode = 'placeholder';
+        }
+        else if (!this.isPlaceholder(this.value) &&
+            this.inputMode === 'placeholder') {
+            this.inputMode = 'value';
+        }
+    }
+    isPlaceholder(value) {
+        return typeof value === 'string' && value.startsWith('%activeObject%');
+    }
+    parsePlaceholderPath(value) {
+        if (!this.isPlaceholder(value)) {
+            return '';
+        }
+        // Extract path after %activeObject%. (e.g., "%activeObject%.company.name" → "company.name")
+        return value.replace(/^%activeObject%\.?/, '');
+    }
+    buildPlaceholderValue(propertyPath) {
+        if (!propertyPath) {
+            return '%activeObject%';
+        }
+        return `%activeObject%.${propertyPath}`;
+    }
+    render() {
+        if (!this.operator) {
+            return null;
+        }
+        return (h("div", { class: "value-input-container" }, this.renderModeToggle(), this.inputMode === 'placeholder'
+            ? this.renderPlaceholderInput()
+            : this.renderValueInputByType()));
+    }
+    renderModeToggle() {
+        // Only show toggle if activeLimetype is set
+        if (!this.activeLimetype) {
+            return null;
+        }
+        const isPlaceholderMode = this.inputMode === 'placeholder';
+        const buttonLabel = isPlaceholderMode ? 'Use Value' : 'Use Placeholder';
+        const buttonIcon = isPlaceholderMode ? 'text' : 'link';
+        return (h("limel-icon-button", { class: "mode-toggle", icon: buttonIcon, label: buttonLabel, onClick: this.handleModeToggle }));
+    }
+    renderPlaceholderInput() {
+        const propertyPath = this.parsePlaceholderPath(this.value);
+        return (h("div", { class: "placeholder-input" }, h("limebb-property-selector", { platform: this.platform, context: this.context, limetype: this.activeLimetype, label: "Active Object Property", value: propertyPath, required: false, helperText: "Select property from the active object", onChange: this.handlePlaceholderPropertyChange }), this.isPlaceholder(this.value) && (h("div", { class: "placeholder-preview" }, h("limel-icon", { name: "info", size: "small" }), h("span", null, "Placeholder: ", this.value)))));
+    }
+    renderValueInputByType() {
+        // Special handling for IN operator - always use chip set for arrays
+        if (this.operator === 'IN') {
+            return this.renderMultiValueInput();
+        }
+        const property = this.getProperty();
+        if (!property) {
+            return this.renderTextInput();
+        }
+        switch (property.type) {
+            case 'integer':
+            case 'decimal': {
+                return this.renderNumberInput(property.type);
+            }
+            case 'yesno': {
+                return this.renderBooleanInput();
+            }
+            case 'option': {
+                return this.renderOptionInput(property);
+            }
+            case 'date': {
+                return this.renderDateInput();
+            }
+            case 'time': {
+                return this.renderTimeInput();
+            }
+            default: {
+                return this.renderTextInput();
+            }
+        }
+    }
+    renderTextInput() {
+        var _a;
+        return (h("limel-input-field", { label: this.label, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '', placeholder: "Enter value", onChange: this.handleTextChange }));
+    }
+    renderNumberInput(type) {
+        var _a;
+        const step = type === 'integer' ? 1 : 0.01;
+        return (h("limel-input-field", { label: this.label, type: "number", value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '', step: step, onChange: this.handleTextChange }));
+    }
+    renderBooleanInput() {
+        const options = [
+            { text: 'True', value: 'true' },
+            { text: 'False', value: 'false' },
+        ];
+        const valueAsString = this.value === true || this.value === 'true' ? 'true' : 'false';
+        const selectedOption = options.find((o) => o.value === valueAsString);
+        return (h("limel-select", { label: this.label, options: options, value: selectedOption, onChange: this.handleBooleanChange }));
+    }
+    renderOptionInput(property) {
+        if (!property.options || property.options.length === 0) {
+            return this.renderTextInput();
+        }
+        const options = property.options.map((opt) => ({
+            text: opt.text || opt.key,
+            value: opt.key,
+        }));
+        const selectedOption = options.find((o) => o.value === this.value);
+        return (h("limel-select", { label: this.label, options: options, value: selectedOption, onChange: this.handleSelectChange }));
+    }
+    renderDateInput() {
+        // Convert string to Date if needed
+        const dateValue = typeof this.value === 'string' ? new Date(this.value) : this.value;
+        return (h("limel-date-picker", { label: this.label, value: dateValue, onChange: this.handleDateChange }));
+    }
+    renderTimeInput() {
+        return (h("limel-input-field", { label: this.label, type: "time", value: this.value || '', onChange: this.handleTextChange }));
+    }
+    renderMultiValueInput() {
+        // For IN operator, allow comma-separated values
+        const displayValue = Array.isArray(this.value)
+            ? this.value.join(', ')
+            : this.value || '';
+        return (h("limel-input-field", { label: this.label + ' (comma-separated)', value: displayValue, placeholder: "e.g., won, lost, tender", onChange: this.handleMultiValueChange }));
+    }
+    getProperty() {
+        if (!this.limetypes || !this.limetype || !this.propertyPath) {
+            return;
+        }
+        return getPropertyFromPath(this.limetypes, this.limetype, this.propertyPath);
+    }
+};
+__decorate$1([
+    Te()
+], LimeQueryValueInput.prototype, "limetypes", void 0);
+LimeQueryValueInput.style = LimebbLimeQueryValueInputStyle0;
+
+const propertySelectorCss = ":host(limebb-property-selector){display:block}limel-menu{display:block;width:100%}";
+const LimebbPropertySelectorStyle0 = propertySelectorCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PropertySelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change", 7);
+        /**
+         * Label for the input
+         */
+        this.label = 'Property';
+        /**
+         * Whether the field is required
+         */
+        this.required = false;
+        this.isOpen = false;
+        this.navigationPath = '';
+        this.menuItems = [];
+        this.handleChipSetWrapperClick = (event) => {
+            // Stop all clicks on the chip-set from bubbling
+            // This prevents the menu from opening when clicking chip remove buttons
+            event.stopPropagation();
+        };
+        this.handleChipSetFocus = () => {
+            // Open menu when the chip-set input receives focus
+            // This happens when user clicks to type/edit
+            if (!this.isOpen) {
+                this.navigationPath = this.value || '';
+                this.loadMenuItems();
+                this.isOpen = true;
+            }
+        };
+        this.handleSelect = (event) => {
+            event.stopPropagation();
+            const selectedPath = event.detail.value;
+            if (!selectedPath) {
+                return;
+            }
+            // Check if this is a complete path (leaf property, not a relation)
+            const property = getPropertyFromPath(this.limetypes, this.limetype, selectedPath);
+            if (property === null || property === void 0 ? void 0 : property.relation) {
+                // This is a relation - update navigation but don't emit
+                this.navigationPath = selectedPath;
+            }
+            else {
+                // This is a leaf property - emit and close
+                this.change.emit(selectedPath);
+                this.isOpen = false;
+                this.navigationPath = '';
+            }
+        };
+        this.handleNavigateMenu = (event) => {
+            var _a;
+            event.stopPropagation();
+            if ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value) {
+                // Update navigation path when drilling down
+                this.navigationPath = event.detail.value;
+            }
+        };
+        this.handleCancel = () => {
+            this.isOpen = false;
+            this.navigationPath = '';
+        };
+        this.handleChipSetChange = (event) => {
+            event.stopPropagation();
+            const detail = event.detail;
+            // Handle both single chip and array of chips
+            if (!detail) {
+                // Clear all was clicked
+                this.change.emit('');
+                this.navigationPath = '';
+                return;
+            }
+            // Convert to array if it's a single chip
+            const chips = Array.isArray(detail) ? detail : [detail];
+            if (chips.length === 0) {
+                // All chips removed
+                this.change.emit('');
+                this.navigationPath = '';
+            }
+            else {
+                // A chip was removed - emit the last remaining chip's value
+                const lastChip = chips.at(-1);
+                if (lastChip) {
+                    this.change.emit(lastChip.value);
+                }
+                this.navigationPath = '';
+            }
+        };
+    }
+    render() {
+        if (!this.limetype || !this.limetypes) {
+            return null;
+        }
+        const chips = this.getChipsForPath(this.navigationPath || this.value || '');
+        return (h("limel-menu", { items: this.menuItems, open: this.isOpen, emptyResultMessage: "No available properties", surfaceWidth: "inherit-from-trigger", openDirection: "bottom-end", onSelect: this.handleSelect, onNavigateMenu: this.handleNavigateMenu, onCancel: this.handleCancel }, h("div", { slot: "trigger" }, h("div", { onClick: this.handleChipSetWrapperClick }, h("limel-chip-set", { type: "input", label: this.label, value: chips, required: this.required, helperText: this.helperText, delimiter: "\u203A", maxItems: 1, onChange: this.handleChipSetChange, onFocus: this.handleChipSetFocus })))));
+    }
+    loadMenuItems() {
+        // Get the limetype we're currently navigating in
+        const currentLimetype = this.getCurrentLimetype();
+        if (!currentLimetype) {
+            this.menuItems = [];
+            return;
+        }
+        this.menuItems = this.createMenuItems(currentLimetype, '');
+    }
+    getCurrentLimetype() {
+        if (!this.navigationPath) {
+            return this.limetypes[this.limetype];
+        }
+        // Get the limetype at the current navigation path
+        const property = getPropertyFromPath(this.limetypes, this.limetype, this.navigationPath);
+        if (property === null || property === void 0 ? void 0 : property.relation) {
+            return property.relation.getLimetype();
+        }
+        return this.limetypes[this.limetype];
+    }
+    createMenuItems(limetype, pathPrefix) {
+        const results = [];
+        if (!limetype) {
+            return results;
+        }
+        const normalizedProperties = getNormalizedProperties(limetype);
+        for (const [propName, property] of Object.entries(normalizedProperties)) {
+            // Skip hasMany and hasAndBelongsToMany relations
+            if (property.type === 'hasmany' ||
+                property.type === 'hasandbelongstomany') {
+                continue;
+            }
+            const fullPath = pathPrefix
+                ? `${pathPrefix}.${propName}`
+                : propName;
+            const isRelation = !!property.relation;
+            let items;
+            if (isRelation && property.relation) {
+                // Create submenu for relation (only belongsto at this point)
+                const relatedLimetype = property.relation.getLimetype();
+                if (relatedLimetype) {
+                    items = async () => this.createMenuItems(relatedLimetype, fullPath);
+                }
+            }
+            results.push({
+                text: property.localname || propName,
+                secondaryText: this.getSecondaryText(property),
+                icon: this.getIconForProperty(property),
+                value: fullPath,
+                items: items,
+            });
+        }
+        if (results.length === 0) {
+            return [
+                {
+                    text: 'No available properties',
+                    value: '',
+                    disabled: true,
+                },
+            ];
+        }
+        return results;
+    }
+    getSecondaryText(property) {
+        var _a;
+        if (property.relation) {
+            const relatedLimetype = property.relation.getLimetype();
+            return ((_a = relatedLimetype === null || relatedLimetype === void 0 ? void 0 : relatedLimetype.localname) === null || _a === void 0 ? void 0 : _a.singular) || 'Object';
+        }
+        // Return the property type as the secondary text
+        return property.type.charAt(0).toUpperCase() + property.type.slice(1);
+    }
+    getIconForProperty(property) {
+        if (property.relation) {
+            return {
+                name: 'link',
+                color: 'rgb(var(--color-sky-default))',
+            };
+        }
+        // Use generic property icon
+        return {
+            name: 'decision',
+            color: 'rgb(var(--color-gray-default))',
+        };
+    }
+    getChipsForPath(path) {
+        if (!path) {
+            return [];
+        }
+        const parts = path.split('.');
+        const chips = [];
+        let currentLimetype = this.limetypes[this.limetype];
+        let currentPath = '';
+        for (const part of parts) {
+            currentPath = currentPath ? `${currentPath}.${part}` : part;
+            // Use getNormalizedProperties to include _id and _timestamp
+            const normalizedProperties = getNormalizedProperties(currentLimetype);
+            const property = normalizedProperties[part];
+            if (property) {
+                chips.push({
+                    id: currentPath,
+                    text: property.localname || part,
+                    icon: this.getIconForProperty(property),
+                    value: currentPath,
+                });
+                if (property.relation) {
+                    currentLimetype = property.relation.getLimetype();
+                }
+            }
+        }
+        return chips;
+    }
+};
+__decorate([
+    Te()
+], PropertySelector.prototype, "limetypes", void 0);
+PropertySelector.style = LimebbPropertySelectorStyle0;
+
+export { LimeQueryFilterComparisonComponent as limebb_lime_query_filter_comparison, LimeQueryFilterGroupComponent as limebb_lime_query_filter_group, LimeQueryFilterNotComponent as limebb_lime_query_filter_not, LimeQueryValueInput as limebb_lime_query_value_input, PropertySelector as limebb_property_selector };