@genesislcap/expression-builder 14.248.0

package/dist/esm/main/rule-field/rule-field.template.js

@@ -0,0 +1,46 @@
+import { html, repeat } from '@genesislcap/web-core';
+export const template = html `
+  ${(context) => {
+    var _a, _b, _c, _d;
+    const selectTag = ((_b = (_a = context.styles) === null || _a === void 0 ? void 0 : _a.customElements) === null || _b === void 0 ? void 0 : _b.select) || 'select';
+    const optionTag = ((_d = (_c = context.styles) === null || _c === void 0 ? void 0 : _c.customElements) === null || _d === void 0 ? void 0 : _d.option) || 'option';
+    const optgroupTag = 'optgroup'; // Not supporting custom optgroup for now
+    return html `
+      <${selectTag}
+        class="form-select"
+        @change=${(x, c) => x.dispatchFieldsChanged(c.event)}
+        value=${(x) => { var _a; return (_a = x.field) === null || _a === void 0 ? void 0 : _a.fieldId; }}
+      >
+        <${optionTag} value="">Select a field</${optionTag}>
+        ${repeat((x) => x.groupedFieldss, html `
+            ${(groupOrFields) => {
+        if ('xs' in groupOrFields) {
+            return html `
+                  <${optgroupTag} label="${(x) => x.optgroup}">
+                    ${repeat((x) => x.xs, html `
+                        <${optionTag}
+                          value="${(x) => x.fieldId}"
+                          ?selected=${(x, c) => { var _a, _b; return x.fieldId === ((_b = (_a = c.parentContext.parent) === null || _a === void 0 ? void 0 : _a.field) === null || _b === void 0 ? void 0 : _b.fieldId); }}
+                        >
+                          ${(x) => x.label}
+                        </${optionTag}>
+                      `)}
+                  </${optgroupTag}>
+                `;
+        }
+        else {
+            return html `
+                  <${optionTag}
+                    value="${(x) => x.fieldId}"
+                    ?selected=${(x, c) => { var _a, _b; return x.fieldId === ((_b = (_a = c.parent) === null || _a === void 0 ? void 0 : _a.field) === null || _b === void 0 ? void 0 : _b.fieldId); }}
+                  >
+                    ${(x) => x.label}
+                  </${optionTag}>
+                `;
+        }
+    }}
+          `)}
+      </${selectTag}>
+    `;
+}}
+`;

package/dist/esm/main/rule-operator/rule-operator.js

@@ -0,0 +1,60 @@
+import { __decorate } from "tslib";
+import { customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
+import { applyCustomStyles, processOptGroups } from '../../utils';
+import { Events } from '../events';
+import { template } from './rule-operator.template';
+let RuleOperator = class RuleOperator extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.operators = [];
+        this.field = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        applyCustomStyles(this, this.styles, 'operator');
+    }
+    get allowedOperators() {
+        const fieldAllows = (operator) => { var _a, _b, _c; return (_c = (_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.operators) === null || _b === void 0 ? void 0 : _b.includes(operator.type)) !== null && _c !== void 0 ? _c : true; };
+        const operatorAllows = (operator) => { var _a, _b, _c, _d; return (_d = (_b = (_a = operator === null || operator === void 0 ? void 0 : operator.applyTo) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, (_c = this.field) === null || _c === void 0 ? void 0 : _c.type)) !== null && _d !== void 0 ? _d : true; };
+        return this.operators.filter((operator) => fieldAllows(operator) && operatorAllows(operator));
+    }
+    get groupedOperators() {
+        return processOptGroups(this.allowedOperators);
+    }
+    handleOperatorChange(event) {
+        event.stopPropagation();
+        const operatorType = event.target.value;
+        const detail = {
+            operatorId: operatorType,
+        };
+        this.dispatchEvent(new CustomEvent(Events.OperatorSelected, { detail, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    observable
+], RuleOperator.prototype, "operators", void 0);
+__decorate([
+    observable
+], RuleOperator.prototype, "operator", void 0);
+__decorate([
+    observable
+], RuleOperator.prototype, "field", void 0);
+__decorate([
+    observable
+], RuleOperator.prototype, "config", void 0);
+__decorate([
+    observable
+], RuleOperator.prototype, "styles", void 0);
+__decorate([
+    volatile
+], RuleOperator.prototype, "allowedOperators", null);
+__decorate([
+    volatile
+], RuleOperator.prototype, "groupedOperators", null);
+RuleOperator = __decorate([
+    customElement({
+        name: 'expression-rule-operator',
+        template: template,
+    })
+], RuleOperator);
+export { RuleOperator };

package/dist/esm/main/rule-operator/rule-operator.template.js

@@ -0,0 +1,46 @@
+import { html, repeat } from '@genesislcap/web-core';
+export const template = html `
+  ${(context) => {
+    var _a, _b, _c, _d;
+    const selectTag = ((_b = (_a = context.styles) === null || _a === void 0 ? void 0 : _a.customElements) === null || _b === void 0 ? void 0 : _b.select) || 'select';
+    const optionTag = ((_d = (_c = context.styles) === null || _c === void 0 ? void 0 : _c.customElements) === null || _d === void 0 ? void 0 : _d.option) || 'option';
+    const optgroupTag = 'optgroup'; // Not supporting custom optgroup for now
+    return html `
+      <${selectTag}
+        class="form-select"
+        @change=${(x, c) => x.handleOperatorChange(c.event)}
+        value=${(x) => { var _a; return (_a = x.operator) === null || _a === void 0 ? void 0 : _a.type; }}
+      >
+        <${optionTag} value="">Select an operator</${optionTag}>
+        ${repeat((x) => x.groupedOperators, html `
+            ${(groupOrOperator) => {
+        if ('xs' in groupOrOperator) {
+            return html `
+                  <${optgroupTag} label="${groupOrOperator.optgroup}">
+                    ${repeat((x) => x.xs, html `
+                        <${optionTag}
+                          value="${(x) => x.type}"
+                          ?selected=${(x, c) => { var _a; return x.type === ((_a = c.parentContext.parent.operator) === null || _a === void 0 ? void 0 : _a.type); }}
+                        >
+                          ${(x) => x.type}
+                        </${optionTag}>
+                      `)}
+                  </${optgroupTag}>
+                `;
+        }
+        else {
+            return html `
+                  <${optionTag}
+                    value="${(x) => x.type}"
+                    ?selected=${(x, c) => { var _a; return ((_a = c.parent.operator) === null || _a === void 0 ? void 0 : _a.type) === x.type; }}
+                  >
+                    ${(x) => x.type}
+                  </${optionTag}>
+                `;
+        }
+    }}
+          `)}
+      </${selectTag}>
+    `;
+}}
+`;

package/dist/esm/main/rule-value/rule-value.helpers.js

@@ -0,0 +1,17 @@
+export const isIntType = (type) => ['short', 'int', 'long'].includes(type);
+export const isFloatType = (type) => ['double', 'bigdecimal'].includes(type);
+export const pattern = (type) => {
+    if (isIntType(type)) {
+        return /^[+-]?[0-9]+$/; // Integer pattern: optional leading minus sign, followed by digits
+    }
+    else if (isFloatType(type)) {
+        return /[+-]?([0-9]*[.])?[0-9]+/; // Float pattern: optional leading minus, digits, optional decimal and more digits
+    }
+    else {
+        return null;
+    }
+};
+export const numberPatternValidator = (type, value) => {
+    var _a, _b;
+    return !((_b = (_a = pattern(type)) === null || _a === void 0 ? void 0 : _a.test(value)) !== null && _b !== void 0 ? _b : true) ? 'Invalid number format' : null;
+};

package/dist/esm/main/rule-value/rule-value.js

@@ -0,0 +1,115 @@
+import { __decorate } from "tslib";
+import { attr, customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { applyCustomStyles } from '../../utils/misc';
+import { Events } from '../events';
+import { isFloatType, isIntType, numberPatternValidator } from './rule-value.helpers';
+import { styles } from './rule-value.styles';
+import { ruleValueTemplate } from './rule-value.template';
+let RuleValue = class RuleValue extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.variadic = false;
+        this.validationError = false;
+        this.field = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        applyCustomStyles(this, this.styles, 'value');
+    }
+    // Validate the input value
+    validateInput(value) {
+        if (!this.field)
+            return null;
+        const errorMsg = [
+            'validation' in this.field ? this.field.validation(value) : null,
+            numberPatternValidator(this.field.type, value),
+        ]
+            .filter((v) => !!v)
+            .join(', ');
+        return errorMsg || null;
+    }
+    // Handle input change/blur events
+    handleInputChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        // For text-like inputs, validate on blur
+        if (target.type !== 'checkbox' && target.type !== 'select-one') {
+            const errorMsg = this.validateInput(target.value);
+            if (errorMsg) {
+                this.validationError = true;
+                this.validationMsg = errorMsg;
+                return; // Don't proceed if validation fails
+            }
+            else {
+                this.validationError = false;
+                this.validationMsg = null;
+            }
+        }
+        // Process the value change
+        let newValue;
+        if (target.getAttribute('role') === 'checkbox') {
+            newValue = target.checked;
+        }
+        else if (target.type === 'select-one') {
+            newValue = event.target.value;
+        }
+        else if (this.field && isIntType(this.field.type)) {
+            newValue = parseInt(target.value);
+        }
+        else if (this.field && isFloatType(this.field.type)) {
+            newValue = parseFloat(target.value);
+        }
+        else {
+            newValue = target.value;
+        }
+        this.value = newValue;
+        const detail = {
+            value: newValue,
+            index: parseInt(this.valueIndex),
+        };
+        this.dispatchEvent(new CustomEvent(Events.ValueUpdated, { detail, bubbles: true, composed: true }));
+    }
+    handleRemoveVariadicOperand() {
+        if (!this.variadic)
+            throw new Error('Cannot remove inputs for non-variadic operator');
+        const detail = {
+            index: parseInt(this.valueIndex),
+        };
+        this.dispatchEvent(new CustomEvent(Events.RemoveVarArg, { detail, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    attr({ attribute: 'value-index' })
+], RuleValue.prototype, "valueIndex", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], RuleValue.prototype, "variadic", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'validation-error' })
+], RuleValue.prototype, "validationError", void 0);
+__decorate([
+    attr({ attribute: 'validation-msg' })
+], RuleValue.prototype, "validationMsg", void 0);
+__decorate([
+    observable
+], RuleValue.prototype, "field", void 0);
+__decorate([
+    observable
+], RuleValue.prototype, "value", void 0);
+__decorate([
+    observable
+], RuleValue.prototype, "config", void 0);
+__decorate([
+    observable
+], RuleValue.prototype, "styles", void 0);
+RuleValue = __decorate([
+    customElement({
+        name: 'expression-rule-value',
+        template: ruleValueTemplate,
+        styles: styles,
+        shadowOptions: {
+            delegatesFocus: true,
+        },
+    })
+], RuleValue);
+export { RuleValue };

package/dist/esm/main/rule-value/rule-value.styles.js

@@ -0,0 +1,11 @@
+import { css } from '@genesislcap/web-core';
+export const styles = css `
+  .text-input.error {
+    color: red;
+  }
+
+  div.value-and-validation {
+    display: inline-grid;
+    align-items: center;
+  }
+`;

package/dist/esm/main/rule-value/rule-value.template.js

@@ -0,0 +1,106 @@
+import { classNames, html, repeat, when, whenElse } from '@genesislcap/web-core';
+// Simple input template with custom element tags support
+const simpleTemplate = html `
+  ${(context) => {
+    var _a, _b;
+    const inputType = context.field.input;
+    // Convert datetime-local to datetimeLocal for the config property name
+    const configKey = inputType === 'datetime-local' ? 'datetimeLocal' : inputType;
+    // Get custom tag if available
+    const customTag = (_b = (_a = context.styles) === null || _a === void 0 ? void 0 : _a.customElements) === null || _b === void 0 ? void 0 : _b[configKey];
+    // Use custom tag if available, otherwise use standard input
+    const tagName = customTag || 'input';
+    return html `
+      <${tagName}
+        ${customTag ? '' : `type="${inputType}"`}
+        class="text-input ${(x) => classNames(['error', x.validationError])}"
+        value=${(x) => x.value}
+        @blur=${(x, c) => x.handleInputChange(c.event)}
+      />
+    `;
+}}
+`;
+// Select template with custom element tags support
+const selectTemplate = html `
+  ${(context) => {
+    var _a, _b, _c, _d;
+    const selectTag = ((_b = (_a = context.styles) === null || _a === void 0 ? void 0 : _a.customElements) === null || _b === void 0 ? void 0 : _b.select) || 'select';
+    const optionTag = ((_d = (_c = context.styles) === null || _c === void 0 ? void 0 : _c.customElements) === null || _d === void 0 ? void 0 : _d.option) || 'option';
+    return html `
+      <${selectTag}
+        class="form-select"
+        @change=${(x, c) => x.handleInputChange(c.event)}
+        value=${(x) => x.value}
+      >
+        ${repeat((x) => {
+        var _a, _b;
+        // Ensure values is defined and an object before calling Object.entries
+        const values = ((_a = x.field) === null || _a === void 0 ? void 0 : _a.type) === 'enum' && ((_b = x.field) === null || _b === void 0 ? void 0 : _b.values) ? x.field.values : {};
+        return Object.entries(values);
+    }, () => html `
+            <${optionTag} value="${(x) => x[0]}" ?selected=${(x, c) => x[0] === c.parent.value}>
+              ${(x) => x[1]}
+            </${optionTag}>
+          `)}
+      </${selectTag}>
+    `;
+}}
+`;
+// Checkbox template with custom element tags support
+const checkboxTemplate = html `
+  ${(context) => {
+    var _a, _b;
+    // Get custom checkbox tag if available
+    const customTag = (_b = (_a = context.styles) === null || _a === void 0 ? void 0 : _a.customElements) === null || _b === void 0 ? void 0 : _b.checkbox;
+    // Use custom tag if available, otherwise use standard input
+    const tagName = customTag || 'input';
+    return html `
+      <label>
+        <${tagName}
+          ${customTag ? '' : 'type="checkbox"'}
+          ?checked=${(x) => !!x.value}
+          @change=${(x, c) => x.handleInputChange(c.event)}
+          role="checkbox"
+        />
+        True
+      </label>
+    `;
+}}
+`;
+// Unsupported input template
+const unsupportedTemplate = html `
+  <div>Input type "${(x) => x.field.input}" not yet supported.</div>
+`;
+// Template switcher
+const templateSwitcher = html `
+  <div class="value-and-validation">
+    ${when((x) => ['text', 'number', 'date', 'datetime-local'].includes(x.field.input), simpleTemplate)}
+    ${when((x) => x.field.input === 'select', selectTemplate)}
+    ${when((x) => x.field.input === 'checkbox', checkboxTemplate)}
+    ${when((x) => !['text', 'number', 'select', 'checkbox', 'date', 'datetime-local'].includes(x.field.input), unsupportedTemplate)}
+    ${when((x) => x.validationMsg, html `
+        <p>${(x) => x.validationMsg}</p>
+      `)}
+  </div>
+  ${when((x) => x.variadic && x.valueIndex !== '0', html `
+      ${(context) => {
+    var _a, _b;
+    const buttonTag = ((_b = (_a = context.styles) === null || _a === void 0 ? void 0 : _a.customElements) === null || _b === void 0 ? void 0 : _b.button) || 'button';
+    return html `
+          <${buttonTag}
+            type="button"
+            class="btn btn-sm btn-remove"
+            @click="${(x) => x.handleRemoveVariadicOperand()}"
+          >
+            -
+          </${buttonTag}>
+        `;
+}}
+    `)}
+`;
+// Main template
+export const ruleValueTemplate = html `
+  ${whenElse((x) => x.field, templateSwitcher, html `
+      <div>Select a field to set value</div>
+    `)}
+`;

package/dist/esm/types/index.js

@@ -0,0 +1,2 @@
+export * from './public.types';
+export * from './private.types';

package/dist/esm/types/private.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/public.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/data-model.js

@@ -0,0 +1,51 @@
+import { ROOT_GROUP } from '../main/expression-builder.helpers';
+/**
+ * Converts a Group to a ModelGroup (adds required metadata)
+ */
+export function groupToModelGroup(group, provider) {
+    const mapper = (child, level) => 'children' in child ? _groupToModelGroup(child, level) : _ruleToModelRule(child);
+    function _groupToModelGroup(_group, level) {
+        return Object.assign(Object.assign({}, _group), { level, config: provider.getConfig(), groupId: provider.getGroupId(), children: _group.children.map((child) => mapper(child, level + 1)) });
+    }
+    function _ruleToModelRule(rule) {
+        return Object.assign(Object.assign({}, rule), { ruleId: provider.getRuleId(), config: provider.getConfig() });
+    }
+    return Object.assign(Object.assign({}, group), { config: provider.getConfig(), level: 1, groupId: ROOT_GROUP, children: group.children.map((child) => mapper(child, 2)) });
+}
+/**
+ * Converts a ModelGroup (internal data structure) to a public Group structure.
+ * This function recursively processes the rules within the group.
+ *
+ * @param modelGroup The internal ModelGroup to convert.
+ * @returns A public Group object.
+ */
+export function modelGroupToGroup(modelGroup) {
+    const children = modelGroup.children.map((child) => {
+        if ('children' in child) {
+            // It's a nested group, recursively convert it
+            return modelGroupToGroup(child);
+        }
+        else {
+            // It's a rule, convert it
+            return modelRuleToRule(child);
+        }
+    });
+    return {
+        combinator: modelGroup.combinator,
+        children: children,
+    };
+}
+/**
+ * Converts a ModelRule (internal data structure) to a public Rule structure.
+ *
+ * @param modelRule The internal ModelRule to convert.
+ * @returns A public Rule object.
+ */
+export function modelRuleToRule(modelRule) {
+    const { operator, field, value } = modelRule;
+    return {
+        operator,
+        field,
+        value,
+    };
+}

package/dist/esm/utils/formatting.js

@@ -0,0 +1,23 @@
+/**
+ * Gets the string representation from a `Date` which is the format a `date` input uses.
+ * `yyyy-mm-dd`
+ * @alpha
+ */
+export const formatDateString = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+/**
+ * Gets the string representation from a `Date` which is the format a `datetime-local` input uses.
+ * `yyyy-mm-ddThh:mm:ss`
+ * @alpha
+ */
+export const formatDateTimeString = (date) => {
+    const datePart = formatDateString(date);
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${datePart}T${hours}:${minutes}:${seconds}`;
+};

package/dist/esm/utils/index.js

@@ -0,0 +1,3 @@
+export * from './data-model';
+export * from './formatting';
+export * from './misc';

package/dist/esm/utils/misc.js

@@ -0,0 +1,62 @@
+export const processOptGroups = (xs) => {
+    const grouped = {};
+    const ungrouped = [];
+    // Helper function to sort items consistently
+    const sortItems = (items) => {
+        return [...items].sort((a, b) => {
+            if ('fieldId' in a && 'fieldId' in b) {
+                return a.fieldId.localeCompare(b.fieldId);
+            }
+            else if ('type' in a && 'type' in b) {
+                return a.type.localeCompare(b.type);
+            }
+            return 0;
+        });
+    };
+    xs.forEach((op) => {
+        if (op.optgroup) {
+            const groupName = op.optgroup;
+            if (!grouped[groupName]) {
+                grouped[groupName] = [];
+            }
+            grouped[groupName].push(op);
+        }
+        else {
+            ungrouped.push(op);
+        }
+    });
+    const result = [];
+    // Sort group names and each group's contents
+    Object.keys(grouped)
+        .sort()
+        .forEach((groupName) => {
+        result.push({
+            optgroup: groupName,
+            xs: sortItems(grouped[groupName]),
+        });
+    });
+    return [...result, ...sortItems(ungrouped)];
+};
+/**
+ * Utility function to add custom styles to a web component's shadow root
+ *
+ * @param component The web component instance
+ * @param styles The styles configuration object
+ * @param styleKey The key in styles.customStyles to use for custom styles
+ */
+export function applyCustomStyles(component, styles, styleKey) {
+    if (!component.shadowRoot || !(styles === null || styles === void 0 ? void 0 : styles.customStyles))
+        return;
+    const customStyles = styles.customStyles[styleKey];
+    if (customStyles) {
+        const styleElement = document.createElement('style');
+        styleElement.textContent = customStyles;
+        // Insert the style element at the beginning of the shadow DOM
+        if (component.shadowRoot.firstChild) {
+            component.shadowRoot.insertBefore(styleElement, component.shadowRoot.firstChild);
+        }
+        else {
+            component.shadowRoot.appendChild(styleElement);
+        }
+    }
+}