@limetech/lime-crm-building-blocks 1.96.0 → 1.98.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 };