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

package/dist/components/lime-query-value-input.js

@@ -0,0 +1,266 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { T as Te } from './index.esm.js';
+import { a as getPropertyFromPath, d as defineCustomElement$1 } from './property-selector.js';
+
+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 = (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 = /*@__PURE__*/ proxyCustomElement(class LimeQueryValueInput extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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);
+    }
+    static get style() { return LimebbLimeQueryValueInputStyle0; }
+}, [1, "limebb-lime-query-value-input", {
+        "platform": [16],
+        "context": [16],
+        "limetype": [1],
+        "activeLimetype": [1, "active-limetype"],
+        "propertyPath": [1, "property-path"],
+        "operator": [1],
+        "value": [8],
+        "label": [1],
+        "limetypes": [32],
+        "inputMode": [32]
+    }]);
+__decorate([
+    Te()
+], LimeQueryValueInput.prototype, "limetypes", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-lime-query-value-input", "limebb-property-selector"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-lime-query-value-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LimeQueryValueInput);
+            }
+            break;
+        case "limebb-property-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { LimeQueryValueInput as L, defineCustomElement as d };

package/dist/components/limebb-document-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbDocumentItem extends Components.LimebbDocumentItem, HTMLElement {}
+export const LimebbDocumentItem: {
+    prototype: LimebbDocumentItem;
+    new (): LimebbDocumentItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/limebb-document-item.js

@@ -0,0 +1,6 @@
+import { D as DocumentItemComponent, d as defineCustomElement$1 } from './document-item.js';
+
+const LimebbDocumentItem = DocumentItemComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbDocumentItem, defineCustomElement };

package/dist/components/limebb-document-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbDocumentPicker extends Components.LimebbDocumentPicker, HTMLElement {}
+export const LimebbDocumentPicker: {
+    prototype: LimebbDocumentPicker;
+    new (): LimebbDocumentPicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/limebb-document-picker.js

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createRandomString } from './random-string.js';
+import { d as defineCustomElement$2 } from './document-item.js';
+
+const documentPickerCss = "@charset \"UTF-8\";:host(limebb-document-picker:not([invalid]):not([invalid=true])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}div[slot=content]{display:block;width:100%;padding:0.75rem 0.5rem;columns:10rem;gap:clamp(0.25rem, 2vmin, 0.75rem)}div[slot=content]>limebb-document-item{display:block;break-inside:avoid;margin-bottom:clamp(0.25rem, 2vmin, 0.75rem)}@supports (grid-template-rows: masonry){div[slot=content]{column-width:initial;column-gap:initial;display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));grid-template-rows:masonry;grid-auto-flow:dense;gap:0.5rem}div[slot=content]>limebb-document-item{display:block;width:auto;margin:0;break-inside:auto}}:host(limebb-document-picker:focus),:host(limebb-document-picker:focus-visible),:host(limebb-document-picker:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limebb-document-picker){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limebb-document-picker:focus) limel-helper-line,:host(limebb-document-picker:focus-visible) limel-helper-line,:host(limebb-document-picker:focus-within) limel-helper-line,:host(limebb-document-picker:hover) limel-helper-line{will-change:grid-template-rows}";
+const LimebbDocumentPickerStyle0 = documentPickerCss;
+
+const DocumentPicker = /*@__PURE__*/ proxyCustomElement(class DocumentPicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "change", 7);
+        /**
+         * The list of document items to display in the picker.
+         */
+        this.items = [];
+        /**
+         * Set to `true` to indicate that the current selection is invalid.
+         */
+        this.invalid = false;
+        /**
+         * Set to `true` to indicate that selecting an item is required.
+         */
+        this.required = false;
+        /**
+         * Defines whether the picker allows single or multiple selection.
+         * - 'radio': Allows single selection within a group.
+         * - 'checkbox': Allows multiple selection.
+         */
+        this.type = 'checkbox';
+        this.handleItemInteract = (event) => {
+            event.stopPropagation();
+            const interactedItem = event.detail;
+            if (!interactedItem) {
+                return;
+            }
+            let updatedItems;
+            if (this.type === 'radio') {
+                // For radio buttons: either select the clicked item (and deselect others)
+                // or allow deselecting if clicking the already selected item
+                updatedItems = this.items
+                    .map((item) => {
+                    if (item.id === interactedItem.id) {
+                        return Object.assign(Object.assign({}, item), { selected: interactedItem.selected });
+                    }
+                    return Object.assign(Object.assign({}, item), { selected: false });
+                })
+                    .find((item) => item.selected);
+            }
+            else {
+                updatedItems = this.items
+                    .map((item) => {
+                    if (item.id === interactedItem.id) {
+                        return Object.assign(Object.assign({}, item), { selected: interactedItem.selected });
+                    }
+                    return item;
+                })
+                    .filter((item) => item.selected);
+            }
+            this.change.emit(updatedItems);
+        };
+        this.renderHelperLine = () => {
+            if (!this.helperText) {
+                return;
+            }
+            return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
+        };
+        this.helperTextId = createRandomString();
+        this.labelId = createRandomString();
+    }
+    render() {
+        return (h(Host, { key: '28bf6afd1999efc62689bc43b7d63d8c308d3663' }, h("limel-notched-outline", { key: '0b6f3d9f0cc88e9e1b782e3d12e7a08853211be6', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("div", { key: 'a3d64740ca2139a3435884526b9a6195929d8060', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
+    }
+    renderItems() {
+        return this.items.map((item) => (h("limebb-document-item", { platform: this.platform, context: this.context, item: item, key: item.id, type: this.type, onInteract: this.handleItemInteract })));
+    }
+    static get style() { return LimebbDocumentPickerStyle0; }
+}, [1, "limebb-document-picker", {
+        "platform": [16],
+        "context": [16],
+        "items": [16],
+        "label": [513],
+        "helperText": [513, "helper-text"],
+        "invalid": [516],
+        "required": [516],
+        "type": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-document-picker", "limebb-document-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-document-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DocumentPicker);
+            }
+            break;
+        case "limebb-document-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LimebbDocumentPicker = DocumentPicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbDocumentPicker, defineCustomElement };

package/dist/components/limebb-feed.js

@@ -244,7 +244,7 @@ const Feed = /*@__PURE__*/ proxyCustomElement(class Feed extends HTMLElement {
         this.highlighter.unregisterFeed(this.feedItemElement);
     }
     render() {
-        return (h(Host, { key: '78617233bbe38626901f6d266d495483f2bfd523', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
+        return (h(Host, { key: '8b53e0a71a8921ed0cb7fcd50273c1070eef365e', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
                 '--limebb-feed-highlight-duration': `${ITEM_HIGHLIGHT_DURATION}ms`,
             } }, this.renderLoadMore(), this.renderEmptyFeedMessage(), this.renderSpinner(), this.renderFeedItems()));
     }

package/dist/components/limebb-icon-picker.js

@@ -52965,7 +52965,7 @@ const IconPicker = /*@__PURE__*/ proxyCustomElement(class IconPicker extends HTM
                 icon: this.value,
             };
         }
-        return (h("limel-picker", { key: '4be7dd4855e9fb6bbb0f6167a9c3e478f262b23c', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
+        return (h("limel-picker", { key: 'cfb1562215c69464d6736ec96fd39e0d45c92d7d', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
     }
 }, [1, "limebb-icon-picker", {
         "value": [1],

package/dist/components/limebb-info-tile-format.js

@@ -94,7 +94,7 @@ const InfoTileAdminConfig = /*@__PURE__*/ proxyCustomElement(class InfoTileAdmin
             },
         ];
         return [
-            h("limel-button-group", { key: '74a794bc61c9692587bf35e54712c649d3768f9b', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
+            h("limel-button-group", { key: '8c7bba2402e84e73df2bc5e906780aeb66b1af58', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
             this.renderFormatConfig(),
         ];
     }

package/dist/components/limebb-info-tile.js

@@ -377,7 +377,7 @@ const InfoTile = /*@__PURE__*/ proxyCustomElement(class InfoTile extends HTMLEle
         const errorProps = Object.assign(Object.assign({}, baseProps), { icon: 'error', prefix: 'ERROR', loading: true, label: this.getLabel(filter) });
         const normalProps = Object.assign(Object.assign({}, baseProps), { label: this.getLabel(filter), link: this.getLink(filter), loading: this.loading, value: value === null || value === void 0 ? void 0 : value.value.trim() });
         const props = !filter || this.error ? errorProps : normalProps;
-        return (h("limel-info-tile", Object.assign({ key: '4fca09fbc878e3960ed691f68c6041ce53eb12da', class: { error: !filter || this.error } }, props)));
+        return (h("limel-info-tile", Object.assign({ key: 'bb8b9eede8bdd3fdd17934753e463d134c46f7df', class: { error: !filter || this.error } }, props)));
     }
     getFormattedValue() {
         if (!this.value && this.value !== 0) {