@limetech/lime-crm-building-blocks 1.103.5 → 1.103.7

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.103.7](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.103.6...v1.103.7) (2025-11-17)
+
+### Bug Fixes
+
+
+* **lime-query-builder:** fix problem where visual mode would not be in sync with underlying value ([5333966](https://github.com/Lundalogik/lime-crm-building-blocks/commit/5333966b845ad7d980a0280d3e9d52331b37523b)), closes [Lundalogik/crm-insights-and-intelligence#149](https://github.com/Lundalogik/crm-insights-and-intelligence/issues/149)
+
+## [1.103.6](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.103.5...v1.103.6) (2025-11-14)
+
+### Bug Fixes
+
+
+* **lime-query-builder:** render correct input types for date/time properties ([9c8fa6a](https://github.com/Lundalogik/lime-crm-building-blocks/commit/9c8fa6a659ba71dc4b9675f1ce60b4fd7eb30d69)), closes [Lundalogik/crm-insights-and-intelligence#143](https://github.com/Lundalogik/crm-insights-and-intelligence/issues/143)
+
 ## [1.103.5](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.103.4...v1.103.5) (2025-11-13)
 
 ### Bug Fixes

package/dist/cjs/limebb-lime-query-builder.cjs.entry.js

@@ -32,11 +32,9 @@ const LimeQueryBuilder = class {
             this.limetype = event.detail;
             // Reset filter when limetype changes
             this.filter = undefined;
-            // Reset response format when limetype changes
+            // Reset response format when limetype changes - empty state
             this.internalResponseFormat = {
-                object: {
-                    _id: null,
-                },
+                object: {},
             };
             this.emitChange();
         };

package/dist/cjs/limebb-lime-query-filter-group_3.cjs.entry.js

@@ -246,6 +246,115 @@ const LimeQueryFilterNotComponent = class {
 };
 LimeQueryFilterNotComponent.style = LimebbLimeQueryFilterNotStyle0;
 
+/**
+ * System property name to actual type mapping.
+ *
+ * Maps system property names (with or without underscore prefix) to their actual data types.
+ * This mapping is necessary because system properties have `type='system'` in the metadata
+ * (for historical reasons - database schema fieldtype 255), but we need to know their
+ * actual data types to render appropriate inputs.
+ */
+const SYSTEM_TYPE_MAP = {
+    timestamp: 'time',
+    createdtime: 'time',
+    updatedtime: 'time',
+    id: 'integer',
+    createduser: 'integer',
+    updateduser: 'integer',
+    descriptive: 'string',
+};
+/**
+ * Lime CRM date/time property type to Lime Elements date picker type mapping.
+ *
+ * Maps Lime CRM property types to the corresponding Lime Elements date picker types,
+ * as they use different naming conventions.
+ */
+const DATE_TIME_TYPE_MAP = {
+    date: 'date',
+    time: 'datetime',
+    timeofday: 'time',
+    month: 'month',
+    quarter: 'quarter',
+    year: 'year',
+};
+/**
+ * Get the actual type of a property, resolving 'system' type to the underlying type.
+ *
+ * System properties in Lime CRM have `type: 'system'` in the metadata (a categorical marker
+ * from the database schema fieldtype 255), but we need to know their actual data types
+ * to render appropriate input controls.
+ *
+ * @param property - The property to get the type for
+ * @param property.type
+ * @param property.name
+ * @returns The actual property type (resolves 'system' to the underlying type)
+ *
+ * @example
+ * ```typescript
+ * const property = { name: '_timestamp', type: 'system' };
+ * getActualPropertyType(property); // Returns 'time'
+ * ```
+ */
+function getActualPropertyType(property) {
+    if (property.type === 'system') {
+        return resolveSystemPropertyType(property.name);
+    }
+    return property.type;
+}
+/**
+ * Map system property names to their actual data types.
+ *
+ * This mapping is necessary because system properties have `type='system'` in the metadata
+ * (for historical reasons - database schema fieldtype 255), but we need to know their
+ * actual data types to render appropriate inputs.
+ *
+ * The mapping is based on the Lime CRM database schema:
+ * - System datetime fields: `timestamp`, `createdtime`, `updatedtime`
+ * - System integer fields: `id`, `createduser`, `updateduser`
+ * - System string fields: `descriptive`
+ *
+ * @param propertyName - The system property name (with or without underscore prefix)
+ * @returns The actual property type
+ *
+ * @example
+ * ```typescript
+ * resolveSystemPropertyType('_timestamp');  // Returns 'time'
+ * resolveSystemPropertyType('timestamp');   // Returns 'time'
+ * resolveSystemPropertyType('_id');         // Returns 'integer'
+ * resolveSystemPropertyType('unknown');     // Returns 'string' (default)
+ * ```
+ */
+function resolveSystemPropertyType(propertyName) {
+    const name = propertyName.replace(/^_/, '');
+    return SYSTEM_TYPE_MAP[name] || 'string';
+}
+/**
+ * Map Lime CRM property types to Lime Elements date picker types.
+ *
+ * Lime CRM and Lime Elements use different naming conventions for date/time types,
+ * so we need to translate between them:
+ *
+ * - `'date'` → `'date'` - Date only
+ * - `'time'` → `'datetime'` - Full datetime (date + time) in Lime CRM
+ * - `'timeofday'` → `'time'` - Time only (hh:mm)
+ * - `'month'` → `'month'` - Month picker (YYYY-MM)
+ * - `'quarter'` → `'quarter'` - Quarter picker
+ * - `'year'` → `'year'` - Year picker
+ *
+ * @param propertyType - The Lime CRM date/time property type
+ * @returns The corresponding Lime Elements date picker type
+ *
+ * @example
+ * ```typescript
+ * mapPropertyTypeToPickerType('time');      // Returns 'datetime'
+ * mapPropertyTypeToPickerType('timeofday'); // Returns 'time'
+ * mapPropertyTypeToPickerType('date');      // Returns 'date'
+ * ```
+ */
+function mapPropertyTypeToPickerType(propertyType) {
+    return DATE_TIME_TYPE_MAP[propertyType] || 'date';
+}
+
 const limeQueryValueInputCss = ":host{display:flex;gap:0.5rem}:host>*{flex-grow:1}*{box-sizing:border-box}.value-input-container{display:flex;flex-direction:row;align-items:flex-start;gap:0.5rem;width:100%}.mode-toggle{flex-shrink:0;flex-grow:0}.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;
 
@@ -408,10 +517,12 @@ const LimeQueryValueInput = class {
         if (!property) {
             return this.renderTextInput();
         }
-        switch (property.type) {
+        // Resolve 'system' type to actual type
+        const actualType = getActualPropertyType(property);
+        switch (actualType) {
             case 'integer':
             case 'decimal': {
-                return this.renderNumberInput(property.type);
+                return this.renderNumberInput(actualType);
             }
             case 'yesno': {
                 return this.renderBooleanInput();
@@ -419,11 +530,13 @@ const LimeQueryValueInput = class {
             case 'option': {
                 return this.renderOptionInput(property);
             }
-            case 'date': {
-                return this.renderDateInput();
-            }
-            case 'time': {
-                return this.renderTimeInput();
+            case 'date':
+            case 'time':
+            case 'timeofday':
+            case 'year':
+            case 'month':
+            case 'quarter': {
+                return this.renderDateTimeInput(actualType);
             }
             default: {
                 return this.renderTextInput();
@@ -459,13 +572,11 @@ const LimeQueryValueInput = class {
         const selectedOption = options.find((o) => o.value === this.value);
         return (index.h("limel-select", { label: this.label, options: options, value: selectedOption, onChange: this.handleSelectChange }));
     }
-    renderDateInput() {
+    renderDateTimeInput(type) {
         // Convert string to Date if needed
         const dateValue = typeof this.value === 'string' ? new Date(this.value) : this.value;
-        return (index.h("limel-date-picker", { label: this.label, value: dateValue, onChange: this.handleDateChange }));
-    }
-    renderTimeInput() {
-        return (index.h("limel-input-field", { label: this.label, type: "time", value: this.value || '', onChange: this.handleTextChange }));
+        const pickerType = mapPropertyTypeToPickerType(type);
+        return (index.h("limel-date-picker", { label: this.label, value: dateValue, type: pickerType, onChange: this.handleDateChange }));
     }
     renderMultiValueInput() {
         // For IN operator, allow comma-separated values

package/dist/cjs/limebb-lime-query-response-format-editor_2.cjs.entry.js

@@ -196,46 +196,29 @@ const ResponseFormatEditor = class {
         };
     }
     componentWillLoad() {
-        var _a;
-        // Check if value is truly empty ({}) - no object or aggregates
-        const isTrulyEmpty = this.value &&
-            Object.keys(this.value).length === 0 &&
-            !this.value.object &&
-            !this.value.aggregates;
-        if (isTrulyEmpty) {
-            // Keep items empty for truly empty objects
+        if (!this.value) {
+            // No value provided at all, use default _id
+            this.items = [{ path: '_id' }];
+            return;
+        }
+        if (this.isEmptyResponseFormat(this.value)) {
+            // Show empty state for explicit empty objects
             this.items = [];
         }
-        else if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.object) {
-            const converted = propertySelectionToItems(this.value.object);
-            if (converted.length > 0) {
-                this.items = converted;
-            }
-            else {
-                // Empty object property, but not a truly empty value
-                // Use default _id for backward compatibility
-                this.items = [{ path: '_id' }];
-            }
+        else if (this.value.object) {
+            // Has object property with actual properties
+            this.items = propertySelectionToItems(this.value.object);
         }
-        else if (!this.value) {
-            // No value provided at all, use default _id
-            this.items = [{ path: '_id' }];
+        else {
+            // If value has aggregates but no object property, initialize items to empty array
+            this.items = [];
         }
     }
     componentWillUpdate() {
-        var _a;
-        // Check if value is truly empty ({})
-        const isTrulyEmpty = this.value &&
-            Object.keys(this.value).length === 0 &&
-            !this.value.object &&
-            !this.value.aggregates;
-        if (isTrulyEmpty) {
-            // Keep items empty for truly empty objects
-            if (this.items.length > 0) {
-                this.items = [];
-            }
+        if (!this.value) {
+            return;
         }
-        else if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.object) {
+        if (this.value.object && !this.isEmptyResponseFormat(this.value)) {
             const currentItems = propertySelectionToItems(this.value.object);
             // Check if items have changed
             const itemsChanged = currentItems.length !== this.items.length ||
@@ -247,10 +230,15 @@ const ResponseFormatEditor = class {
                         item.description === current.description);
                 });
             if (itemsChanged) {
-                // Allow empty items array - don't force _id
                 this.items = currentItems;
             }
         }
+        else {
+            // Either empty response format or no object property - clear items
+            if (this.items.length > 0) {
+                this.items = [];
+            }
+        }
     }
     render() {
         if (!this.limetype) {
@@ -281,6 +269,32 @@ const ResponseFormatEditor = class {
         };
         this.change.emit(responseFormat);
     }
+    /**
+     * Check if the response format is empty
+     *
+     * A response format is considered empty in the following cases:
+     * - Empty object: `{}`
+     * - Object with empty object property and no aggregates: `{ object: {} }`
+     *
+     * Returns false for:
+     * - `null` or `undefined`
+     * - Objects with properties: `{ object: { _id: null } }`
+     * - Objects with aggregates: `{ aggregates: {...} }`
+     *
+     * @param value - The ResponseFormat to check
+     * @returns True if the response format is empty, false otherwise
+     */
+    isEmptyResponseFormat(value) {
+        if (!value) {
+            return false;
+        }
+        if (Object.keys(value).length === 0) {
+            return true;
+        }
+        return !!(value.object &&
+            Object.keys(value.object).length === 0 &&
+            !value.aggregates);
+    }
 };
 ResponseFormatEditor.style = LimebbLimeQueryResponseFormatEditorStyle0;
 

package/dist/collection/components/lime-query-builder/expressions/lime-query-value-input.js

@@ -11,6 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h, Host, } from "@stencil/core";
 import { Operator, SelectLimeTypes as Limetypes, } from "@limetech/lime-web-components";
 import { getPropertyFromPath } from "../property-resolution";
+import { getActualPropertyType, mapPropertyTypeToPickerType, } from "../type-resolution";
 /**
  * Query Value Input Component
  *
@@ -182,10 +183,12 @@ export class LimeQueryValueInput {
         if (!property) {
             return this.renderTextInput();
         }
-        switch (property.type) {
+        // Resolve 'system' type to actual type
+        const actualType = getActualPropertyType(property);
+        switch (actualType) {
             case 'integer':
             case 'decimal': {
-                return this.renderNumberInput(property.type);
+                return this.renderNumberInput(actualType);
             }
             case 'yesno': {
                 return this.renderBooleanInput();
@@ -193,11 +196,13 @@ export class LimeQueryValueInput {
             case 'option': {
                 return this.renderOptionInput(property);
             }
-            case 'date': {
-                return this.renderDateInput();
-            }
-            case 'time': {
-                return this.renderTimeInput();
+            case 'date':
+            case 'time':
+            case 'timeofday':
+            case 'year':
+            case 'month':
+            case 'quarter': {
+                return this.renderDateTimeInput(actualType);
             }
             default: {
                 return this.renderTextInput();
@@ -233,13 +238,11 @@ export class LimeQueryValueInput {
         const selectedOption = options.find((o) => o.value === this.value);
         return (h("limel-select", { label: this.label, options: options, value: selectedOption, onChange: this.handleSelectChange }));
     }
-    renderDateInput() {
+    renderDateTimeInput(type) {
         // 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 }));
+        const pickerType = mapPropertyTypeToPickerType(type);
+        return (h("limel-date-picker", { label: this.label, value: dateValue, type: pickerType, onChange: this.handleDateChange }));
     }
     renderMultiValueInput() {
         // For IN operator, allow comma-separated values

package/dist/collection/components/lime-query-builder/lime-query-builder.js

@@ -50,11 +50,9 @@ export class LimeQueryBuilder {
             this.limetype = event.detail;
             // Reset filter when limetype changes
             this.filter = undefined;
-            // Reset response format when limetype changes
+            // Reset response format when limetype changes - empty state
             this.internalResponseFormat = {
-                object: {
-                    _id: null,
-                },
+                object: {},
             };
             this.emitChange();
         };

package/dist/collection/components/lime-query-builder/response-format/response-format-editor.js

@@ -47,46 +47,29 @@ export class ResponseFormatEditor {
         };
     }
     componentWillLoad() {
-        var _a;
-        // Check if value is truly empty ({}) - no object or aggregates
-        const isTrulyEmpty = this.value &&
-            Object.keys(this.value).length === 0 &&
-            !this.value.object &&
-            !this.value.aggregates;
-        if (isTrulyEmpty) {
-            // Keep items empty for truly empty objects
+        if (!this.value) {
+            // No value provided at all, use default _id
+            this.items = [{ path: '_id' }];
+            return;
+        }
+        if (this.isEmptyResponseFormat(this.value)) {
+            // Show empty state for explicit empty objects
             this.items = [];
         }
-        else if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.object) {
-            const converted = propertySelectionToItems(this.value.object);
-            if (converted.length > 0) {
-                this.items = converted;
-            }
-            else {
-                // Empty object property, but not a truly empty value
-                // Use default _id for backward compatibility
-                this.items = [{ path: '_id' }];
-            }
+        else if (this.value.object) {
+            // Has object property with actual properties
+            this.items = propertySelectionToItems(this.value.object);
         }
-        else if (!this.value) {
-            // No value provided at all, use default _id
-            this.items = [{ path: '_id' }];
+        else {
+            // If value has aggregates but no object property, initialize items to empty array
+            this.items = [];
         }
     }
     componentWillUpdate() {
-        var _a;
-        // Check if value is truly empty ({})
-        const isTrulyEmpty = this.value &&
-            Object.keys(this.value).length === 0 &&
-            !this.value.object &&
-            !this.value.aggregates;
-        if (isTrulyEmpty) {
-            // Keep items empty for truly empty objects
-            if (this.items.length > 0) {
-                this.items = [];
-            }
+        if (!this.value) {
+            return;
         }
-        else if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.object) {
+        if (this.value.object && !this.isEmptyResponseFormat(this.value)) {
             const currentItems = propertySelectionToItems(this.value.object);
             // Check if items have changed
             const itemsChanged = currentItems.length !== this.items.length ||
@@ -98,10 +81,15 @@ export class ResponseFormatEditor {
                         item.description === current.description);
                 });
             if (itemsChanged) {
-                // Allow empty items array - don't force _id
                 this.items = currentItems;
             }
         }
+        else {
+            // Either empty response format or no object property - clear items
+            if (this.items.length > 0) {
+                this.items = [];
+            }
+        }
     }
     render() {
         if (!this.limetype) {
@@ -132,6 +120,32 @@ export class ResponseFormatEditor {
         };
         this.change.emit(responseFormat);
     }
+    /**
+     * Check if the response format is empty
+     *
+     * A response format is considered empty in the following cases:
+     * - Empty object: `{}`
+     * - Object with empty object property and no aggregates: `{ object: {} }`
+     *
+     * Returns false for:
+     * - `null` or `undefined`
+     * - Objects with properties: `{ object: { _id: null } }`
+     * - Objects with aggregates: `{ aggregates: {...} }`
+     *
+     * @param value - The ResponseFormat to check
+     * @returns True if the response format is empty, false otherwise
+     */
+    isEmptyResponseFormat(value) {
+        if (!value) {
+            return false;
+        }
+        if (Object.keys(value).length === 0) {
+            return true;
+        }
+        return !!(value.object &&
+            Object.keys(value.object).length === 0 &&
+            !value.aggregates);
+    }
     static get is() { return "limebb-lime-query-response-format-editor"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {

package/dist/collection/components/lime-query-builder/type-resolution.js

@@ -0,0 +1,108 @@
+/**
+ * System property name to actual type mapping.
+ *
+ * Maps system property names (with or without underscore prefix) to their actual data types.
+ * This mapping is necessary because system properties have `type='system'` in the metadata
+ * (for historical reasons - database schema fieldtype 255), but we need to know their
+ * actual data types to render appropriate inputs.
+ */
+const SYSTEM_TYPE_MAP = {
+    timestamp: 'time',
+    createdtime: 'time',
+    updatedtime: 'time',
+    id: 'integer',
+    createduser: 'integer',
+    updateduser: 'integer',
+    descriptive: 'string',
+};
+/**
+ * Lime CRM date/time property type to Lime Elements date picker type mapping.
+ *
+ * Maps Lime CRM property types to the corresponding Lime Elements date picker types,
+ * as they use different naming conventions.
+ */
+const DATE_TIME_TYPE_MAP = {
+    date: 'date',
+    time: 'datetime',
+    timeofday: 'time',
+    month: 'month',
+    quarter: 'quarter',
+    year: 'year',
+};
+/**
+ * Get the actual type of a property, resolving 'system' type to the underlying type.
+ *
+ * System properties in Lime CRM have `type: 'system'` in the metadata (a categorical marker
+ * from the database schema fieldtype 255), but we need to know their actual data types
+ * to render appropriate input controls.
+ *
+ * @param property - The property to get the type for
+ * @param property.type
+ * @param property.name
+ * @returns The actual property type (resolves 'system' to the underlying type)
+ *
+ * @example
+ * ```typescript
+ * const property = { name: '_timestamp', type: 'system' };
+ * getActualPropertyType(property); // Returns 'time'
+ * ```
+ */
+export function getActualPropertyType(property) {
+    if (property.type === 'system') {
+        return resolveSystemPropertyType(property.name);
+    }
+    return property.type;
+}
+/**
+ * Map system property names to their actual data types.
+ *
+ * This mapping is necessary because system properties have `type='system'` in the metadata
+ * (for historical reasons - database schema fieldtype 255), but we need to know their
+ * actual data types to render appropriate inputs.
+ *
+ * The mapping is based on the Lime CRM database schema:
+ * - System datetime fields: `timestamp`, `createdtime`, `updatedtime`
+ * - System integer fields: `id`, `createduser`, `updateduser`
+ * - System string fields: `descriptive`
+ *
+ * @param propertyName - The system property name (with or without underscore prefix)
+ * @returns The actual property type
+ *
+ * @example
+ * ```typescript
+ * resolveSystemPropertyType('_timestamp');  // Returns 'time'
+ * resolveSystemPropertyType('timestamp');   // Returns 'time'
+ * resolveSystemPropertyType('_id');         // Returns 'integer'
+ * resolveSystemPropertyType('unknown');     // Returns 'string' (default)
+ * ```
+ */
+export function resolveSystemPropertyType(propertyName) {
+    const name = propertyName.replace(/^_/, '');
+    return SYSTEM_TYPE_MAP[name] || 'string';
+}
+/**
+ * Map Lime CRM property types to Lime Elements date picker types.
+ *
+ * Lime CRM and Lime Elements use different naming conventions for date/time types,
+ * so we need to translate between them:
+ *
+ * - `'date'` → `'date'` - Date only
+ * - `'time'` → `'datetime'` - Full datetime (date + time) in Lime CRM
+ * - `'timeofday'` → `'time'` - Time only (hh:mm)
+ * - `'month'` → `'month'` - Month picker (YYYY-MM)
+ * - `'quarter'` → `'quarter'` - Quarter picker
+ * - `'year'` → `'year'` - Year picker
+ *
+ * @param propertyType - The Lime CRM date/time property type
+ * @returns The corresponding Lime Elements date picker type
+ *
+ * @example
+ * ```typescript
+ * mapPropertyTypeToPickerType('time');      // Returns 'datetime'
+ * mapPropertyTypeToPickerType('timeofday'); // Returns 'time'
+ * mapPropertyTypeToPickerType('date');      // Returns 'date'
+ * ```
+ */
+export function mapPropertyTypeToPickerType(propertyType) {
+    return DATE_TIME_TYPE_MAP[propertyType] || 'date';
+}