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

package/dist/components/property-selector.js

@@ -0,0 +1,317 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { T as Te } from './index.esm.js';
+
+/**
+ * Get normalized properties for a limetype
+ * Adds system properties (_id, _timestamp, etc.) that map to the actual limeobject attributes
+ * @param limetype The limetype to normalize
+ * @returns Normalized properties with system properties prefixed with underscore
+ */
+function getNormalizedProperties(limetype) {
+    if (!(limetype === null || limetype === void 0 ? void 0 : limetype.properties)) {
+        return {};
+    }
+    const properties = Object.assign({}, limetype.properties);
+    // System properties that are exposed by the backend
+    // Map from internal property name to API property name
+    const systemProperties = {
+        id: '_id',
+        timestamp: '_timestamp',
+        descriptive: '_descriptive',
+        createduser: '_createduser',
+        createdtime: '_createdtime',
+        updateduser: '_updateduser',
+    };
+    // Find and normalize system properties by name
+    for (const [propName, systemPropName] of Object.entries(systemProperties)) {
+        const property = properties[propName];
+        if (property) {
+            properties[systemPropName] = property;
+            delete properties[propName];
+        }
+    }
+    return properties;
+}
+/**
+ * Get property from limetype by path (e.g., "company.name")
+ * Supports relation traversal with dot-notation
+ * @param limetypes
+ * @param limetype
+ * @param path
+ */
+function getPropertyFromPath(limetypes, limetype, path) {
+    if (!path || !limetype || !limetypes) {
+        return undefined;
+    }
+    const parts = path.split('.');
+    let currentType = limetypes[limetype];
+    let property;
+    for (const part of parts) {
+        if (!currentType) {
+            return undefined;
+        }
+        const normalizedProperties = getNormalizedProperties(currentType);
+        property = normalizedProperties[part];
+        if (!property) {
+            return undefined;
+        }
+        // If this is a relation, get the related limetype for next iteration
+        if (property.relation) {
+            currentType = property.relation.getLimetype();
+        }
+    }
+    return property;
+}
+
+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 = /*@__PURE__*/ proxyCustomElement(class PropertySelector extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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;
+    }
+    static get style() { return LimebbPropertySelectorStyle0; }
+}, [1, "limebb-property-selector", {
+        "platform": [16],
+        "context": [16],
+        "limetype": [1],
+        "value": [1],
+        "label": [1],
+        "required": [4],
+        "helperText": [1, "helper-text"],
+        "limetypes": [32],
+        "isOpen": [32],
+        "navigationPath": [32]
+    }]);
+__decorate([
+    Te()
+], PropertySelector.prototype, "limetypes", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-property-selector"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-property-selector":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PropertySelector);
+            }
+            break;
+    } });
+}
+
+export { PropertySelector as P, getPropertyFromPath as a, defineCustomElement as d, getNormalizedProperties as g };

package/dist/components/response-format-editor.js

@@ -0,0 +1,278 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './property-selector.js';
+import { d as defineCustomElement$1 } from './response-format-item.js';
+
+/**
+ * Process a single property value and add to items array
+ * @param items Array to add items to
+ * @param fullPath Full property path
+ * @param value Property value to process
+ */
+function processPropertyValue(items, fullPath, value) {
+    if (value === null) {
+        items.push({ path: fullPath });
+        return;
+    }
+    // Cast to record for checking
+    const valueObj = value;
+    const keys = Object.keys(valueObj);
+    const hasAlias = '_alias' in valueObj;
+    const hasDescription = '#description' in valueObj;
+    const otherKeys = keys.filter((k) => k !== '_alias' && k !== '#description');
+    // If it's {} or only has metadata (_alias, #description), treat as simple property
+    if (otherKeys.length === 0) {
+        const aliasValue = valueObj._alias;
+        const descriptionValue = valueObj['#description'];
+        if (aliasValue || descriptionValue) {
+            items.push({
+                path: fullPath,
+                alias: aliasValue,
+                description: descriptionValue,
+            });
+        }
+        else {
+            items.push({ path: fullPath });
+        }
+        return;
+    }
+    // If has metadata + other properties, we need to handle both
+    // Add the nested properties (metadata is preserved in conversion back)
+    if (hasAlias || hasDescription) {
+        // Build a PropertySelection without the metadata for recursion
+        const nestedSelection = {};
+        for (const key of otherKeys) {
+            nestedSelection[key] = valueObj[key];
+        }
+        items.push(...propertySelectionToItems(nestedSelection, fullPath));
+        return;
+    }
+    // Nested property selection without metadata
+    items.push(...propertySelectionToItems(value, fullPath));
+}
+/**
+ * Convert a nested PropertySelection to a flat list of property items
+ * @param selection The nested PropertySelection object
+ * @param prefix Current path prefix (used for recursion)
+ * @returns Flat array of PropertySelectionItem objects
+ */
+function propertySelectionToItems(selection, prefix = '') {
+    if (!selection) {
+        return [];
+    }
+    const items = [];
+    for (const [key, value] of Object.entries(selection)) {
+        const fullPath = prefix ? `${prefix}.${key}` : key;
+        if (typeof value === 'object') {
+            // NOTE: We want to send null values to the processPropertyValue
+            // function but we don't need a special check for null, since
+            // `typeof null === 'object'`
+            processPropertyValue(items, fullPath, value);
+        }
+    }
+    return items;
+}
+/**
+ * Set the final property value (with or without alias/description)
+ * @param current Current PropertySelection object
+ * @param part Property name/key
+ * @param item Property selection item with path and optional alias/description
+ */
+function setPropertyValue(current, part, item) {
+    // Check if there's already a nested PropertySelection with properties
+    const existing = current[part];
+    if (existing &&
+        typeof existing === 'object' &&
+        !('_alias' in existing) &&
+        !('#description' in existing)) {
+        // There's already a nested PropertySelection object with properties
+        // Don't overwrite it - preserve the nested selections
+        return;
+    }
+    // Build metadata object, stripping empty values
+    const metadata = {};
+    if (item.alias && item.alias.trim() !== '') {
+        metadata._alias = item.alias;
+    }
+    if (item.description && item.description.trim() !== '') {
+        metadata['#description'] = item.description;
+    }
+    // If we have metadata, use it; otherwise use null
+    if (Object.keys(metadata).length > 0) {
+        current[part] = metadata;
+    }
+    else {
+        current[part] = null;
+    }
+}
+/**
+ * Ensure a nested object exists and return it
+ * Preserves any existing _alias and #description when converting to nested object
+ * @param current Current PropertySelection object
+ * @param part Property name/key
+ * @returns The nested PropertySelection object
+ */
+function ensureNestedObject(current, part) {
+    const existing = current[part];
+    // If doesn't exist or is null, create empty object
+    if (!existing) {
+        current[part] = {};
+        return current[part];
+    }
+    // If it's already a PropertySelection object, check for metadata
+    if (typeof existing === 'object') {
+        const existingObj = existing;
+        // If it has metadata but no other properties, preserve the metadata
+        const keys = Object.keys(existingObj);
+        const hasMetadata = '_alias' in existingObj || '#description' in existingObj;
+        const otherKeys = keys.filter((k) => k !== '_alias' && k !== '#description');
+        if (hasMetadata && otherKeys.length === 0) {
+            // Convert { _alias: "...", "#description": "..." } to { _alias: "...", "#description": "...", ...nested }
+            // Keep the existing object and return it (caller will add nested props)
+            return existingObj;
+        }
+        // Already has nested properties, return as is
+        return existingObj;
+    }
+    // Shouldn't reach here, but fallback to creating new object
+    current[part] = {};
+    return current[part];
+}
+/**
+ * Convert a flat list of property items to a nested PropertySelection structure
+ * @param items Array of PropertySelectionItem objects
+ * @returns Nested PropertySelection object
+ */
+function itemsToPropertySelection(items) {
+    const result = {};
+    for (const item of items) {
+        const parts = item.path.split('.');
+        let current = result;
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            const isLast = i === parts.length - 1;
+            if (isLast) {
+                setPropertyValue(current, part, item);
+            }
+            else {
+                current = ensureNestedObject(current, part);
+            }
+        }
+    }
+    return result;
+}
+
+const responseFormatEditorCss = ":host(limebb-response-format-editor){display:block;width:100%}.response-format-editor{display:flex;flex-direction:column;gap:1rem;padding:1rem}.header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.header h4{margin:0;font-size:1rem;font-weight:600;color:rgb(var(--contrast-1000))}.property-list{display:flex;flex-direction:column;gap:1rem;padding:0.5rem;border:1px solid rgb(var(--contrast-300));border-radius:0.25rem;background-color:rgb(var(--contrast-50));min-height:4rem}.property-item{padding:0.5rem;border-radius:0.25rem;transition:background-color 0.2s}.property-item:hover{background-color:rgb(var(--contrast-100))}.actions{display:flex;justify-content:flex-start}.summary{display:flex;justify-content:space-between;align-items:center;padding-top:0.5rem;border-top:1px solid rgb(var(--contrast-300))}.summary .count{font-size:0.875rem;font-weight:500;color:rgb(var(--contrast-900))}.empty-state{padding:2rem;text-align:center;color:rgb(var(--contrast-700));font-style:italic}.empty-state p{margin:0}";
+const LimebbResponseFormatEditorStyle0 = responseFormatEditorCss;
+
+const ResponseFormatEditor = /*@__PURE__*/ proxyCustomElement(class ResponseFormatEditor extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "change", 7);
+        /**
+         * Optional label
+         */
+        this.label = 'Select Properties to Return';
+        this.items = [{ path: '_id' }];
+        this.handleItemChange = (index) => (event) => {
+            event.stopPropagation();
+            const newItems = [...this.items];
+            if (event.detail === null) {
+                // Remove item
+                newItems.splice(index, 1);
+            }
+            else {
+                // Update item
+                newItems[index] = event.detail;
+            }
+            // Ensure we always have at least _id
+            if (newItems.length === 0) {
+                newItems.push({ path: '_id' });
+            }
+            this.items = newItems;
+            this.emitChange();
+        };
+        this.handleAddProperty = () => {
+            this.items = [...this.items, { path: '' }];
+            this.emitChange();
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        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;
+            }
+        }
+    }
+    componentWillUpdate() {
+        var _a;
+        if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.object) {
+            const currentItems = propertySelectionToItems(this.value.object);
+            // Check if items have changed
+            const itemsChanged = currentItems.length !== this.items.length ||
+                !currentItems.every((item, index) => {
+                    const current = this.items[index];
+                    return (current &&
+                        item.path === current.path &&
+                        item.alias === current.alias &&
+                        item.description === current.description);
+                });
+            if (itemsChanged) {
+                this.items =
+                    currentItems.length > 0 ? currentItems : [{ path: '_id' }];
+            }
+        }
+    }
+    render() {
+        if (!this.limetype) {
+            return (h("div", { class: "empty-state" }, h("p", null, "Select a limetype to choose properties")));
+        }
+        return (h("div", { class: "response-format-editor" }, h("div", { class: "header" }, h("h4", null, this.label)), h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index))), h("div", { class: "actions" }, h("limel-button", { label: "Add Property", icon: "plus_math", onClick: this.handleAddProperty })), h("div", { class: "summary" }, h("span", { class: "count" }, this.items.length, ' ', this.items.length === 1 ? 'property' : 'properties', ' ', "selected"))));
+    }
+    renderItem(item, index) {
+        return (h("limebb-response-format-item", { key: `${item.path}-${index}`, class: "property-item", platform: this.platform, context: this.context, limetype: this.limetype, item: item, onItemChange: this.handleItemChange(index) }));
+    }
+    emitChange() {
+        const propertySelection = itemsToPropertySelection(this.items);
+        const responseFormat = {
+            object: propertySelection,
+        };
+        this.change.emit(responseFormat);
+    }
+    static get style() { return LimebbResponseFormatEditorStyle0; }
+}, [1, "limebb-response-format-editor", {
+        "platform": [16],
+        "context": [16],
+        "limetype": [1],
+        "value": [16],
+        "label": [1],
+        "items": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-response-format-editor", "limebb-property-selector", "limebb-response-format-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-response-format-editor":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ResponseFormatEditor);
+            }
+            break;
+        case "limebb-property-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "limebb-response-format-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ResponseFormatEditor as R, defineCustomElement as d };