@genesislcap/expression-builder 14.248.0

package/dist/esm/main/expression-builder.template.js

@@ -0,0 +1,13 @@
+import { html } from '@genesislcap/web-core';
+import { ExpressionGroup } from './expression-group/expression-group';
+ExpressionGroup;
+/** @alpha **/
+export const template = html `
+  <div class="query-builder">
+    <expression-group
+      :model=${(x) => x.model}
+      :config=${(x) => x.config}
+      :styles=${(x) => x.styles}
+    ></expression-group>
+  </div>
+`;

package/dist/esm/main/expression-group/expression-group.js

@@ -0,0 +1,121 @@
+import { __decorate } from "tslib";
+import { customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
+import { applyCustomStyles } from '../../utils/misc';
+import { Events } from '../events';
+import { styles } from './expression-group.styles';
+import { template } from './expression-group.template';
+let ExpressionGroup = class ExpressionGroup extends GenesisElement {
+    connectedCallback() {
+        super.connectedCallback();
+        applyCustomStyles(this, this.styles, 'group');
+    }
+    get allowNestedGroup() {
+        var _a, _b;
+        if (!this.model)
+            return false;
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.maxNesting) || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.maxNesting) < 1)
+            return true;
+        return this.config.maxNesting > this.model.level;
+    }
+    // configChanged(_, newConfig: Config) {
+    // if (!this.combinator) {
+    // this.combinator =  newConfig.combinators[0];
+    // }
+    // }
+    //
+    // modelChanged(_, newModel: ModelGroup) {
+    // if (!newModel) return;
+    // this.combinator = newModel.combinator;
+    // }
+    dispatchAddRule(event) {
+        event.stopPropagation();
+        const detail = {
+            parentGroupId: this.model.groupId,
+        };
+        this.dispatchEvent(new CustomEvent(Events.AddRule, { detail, bubbles: true, composed: true }));
+    }
+    dispatchAddGroup(event) {
+        event.stopPropagation();
+        if (!this.allowNestedGroup)
+            throw new Error('Cannot add further nested groups');
+        const detail = {
+            parentGroupId: this.model.groupId,
+            newGroup: {
+                level: this.model.level + 1,
+            },
+        };
+        this.dispatchEvent(new CustomEvent(Events.AddGroup, { detail, bubbles: true, composed: true }));
+    }
+    dispatchDeleteGroup(event) {
+        event.stopPropagation();
+        const detail = {
+            groupId: this.model.groupId,
+        };
+        this.dispatchEvent(new CustomEvent(Events.DelGroup, { detail, bubbles: true, composed: true }));
+    }
+    handleCombinatorChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        const value = target.value;
+        this.updateCombinator(value);
+    }
+    handleCustomCombinatorChange(event) {
+        var _a;
+        event.stopPropagation();
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.groupId) || !event.target)
+            return; // can happen when the radio is first initialised
+        const target = event.target;
+        const value = target.getAttribute('value');
+        if (!value) {
+            throw new Error('No value found in the custom radio group event target');
+        }
+        this.updateCombinator(value);
+    }
+    updateCombinator(value) {
+        var _a, _b;
+        const combinator = this.config.combinators.find(({ type }) => type === value);
+        if (!combinator) {
+            throw new Error(`Cannot find selected combinator ${value}`);
+        }
+        // Can happen when web component is initialised
+        if (((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.combinator) === null || _b === void 0 ? void 0 : _b.type) === combinator.type) {
+            return;
+        }
+        this.dispatchGroupDataUpdated(combinator);
+    }
+    dispatchGroupDataUpdated(combinator) {
+        const detail = {
+            groupId: this.model.groupId,
+            newData: {
+                combinator,
+            },
+        };
+        this.dispatchEvent(new CustomEvent(Events.UpdateGroup, { detail, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    observable
+], ExpressionGroup.prototype, "config", void 0);
+__decorate([
+    observable
+], ExpressionGroup.prototype, "styles", void 0);
+__decorate([
+    observable
+], ExpressionGroup.prototype, "model", void 0);
+__decorate([
+    observable
+], ExpressionGroup.prototype, "index", void 0);
+__decorate([
+    volatile
+], ExpressionGroup.prototype, "allowNestedGroup", null);
+ExpressionGroup = __decorate([
+    customElement({
+        name: 'expression-group',
+        template,
+        styles: styles,
+        shadowOptions: {
+            delegatesFocus: true, // Ensure the element can be focused
+        },
+    })
+], ExpressionGroup);
+export { ExpressionGroup };

package/dist/esm/main/expression-group/expression-group.styles.js

@@ -0,0 +1,45 @@
+import { css } from '@genesislcap/web-core';
+export const styles = css `
+  .rules-group-container {
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+
+  .rules-group-header {
+    margin-bottom: 5px;
+  }
+
+  .btn-group {
+    margin-right: 5px;
+  }
+
+  .btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border-radius: 0.2rem;
+    cursor: pointer;
+  }
+
+  .btn-success {
+    color: #fff;
+    background-color: #28a745;
+    border-color: #28a745;
+  }
+
+  .btn-danger {
+    color: #fff;
+    background-color: #dc3545;
+    border-color: #dc3545;
+  }
+
+  .radio-group-container {
+    display: flex;
+  }
+
+  .rules-list {
+    list-style: none;
+    padding-left: 0;
+  }
+`;

package/dist/esm/main/expression-group/expression-group.template.js

@@ -0,0 +1,102 @@
+import { html, repeat, when, whenElse } from '@genesislcap/web-core';
+export const template = html `
+  ${(context) => {
+    var _a, _b, _c, _d;
+    const buttonTag = ((_b = (_a = context.styles) === null || _a === void 0 ? void 0 : _a.customElements) === null || _b === void 0 ? void 0 : _b.button) || 'button';
+    const maybeRadioBlock = (_d = (_c = context.styles) === null || _c === void 0 ? void 0 : _c.customElements) === null || _d === void 0 ? void 0 : _d.radio;
+    const { radioTag, radioGroupTag } = maybeRadioBlock
+        ? { radioTag: maybeRadioBlock.input, radioGroupTag: maybeRadioBlock.group }
+        : { radioTag: 'input', radioGroupTag: 'div' };
+    return html `
+      <div class="rules-group-container">
+        <div class="rules-group-header">
+          <div class="btn-group float-end group-actions">
+            <${buttonTag}
+              type="button"
+              class="btn btn-sm btn-success"
+              data-add="rule"
+              @click="${(x, c) => x.dispatchAddRule(c.event)}"
+            >
+              Add Rule
+            </${buttonTag}>
+            ${when((x) => x.allowNestedGroup, html `
+                <${buttonTag}
+                  type="button"
+                  class="btn btn-sm btn-success"
+                  data-add="group"
+                  @click="${(x, c) => x.dispatchAddGroup(c.event)}"
+                >
+                  Add Group
+                </${buttonTag}>
+              `)}
+            ${when((x) => typeof x.index === 'number', html `
+                <${buttonTag}
+                  type="button"
+                  class="btn btn-sm btn-danger"
+                  data-delete="group"
+                  @click="${(x, c) => x.dispatchDeleteGroup(c.event)}"
+                >
+                  Delete Group
+                </${buttonTag}>
+              `)}
+            <div class="btn-group group-conditions">
+              ${whenElse((_) => radioTag !== 'input', html `
+                  <${radioGroupTag}
+                    class="radio-group-container"
+                    name="combinator"
+                    @change="${(x, c) => x.handleCombinatorChange(c.event)}"
+                    value="${(x) => { var _a, _b; return (_b = (_a = x.model) === null || _a === void 0 ? void 0 : _a.combinator) === null || _b === void 0 ? void 0 : _b.type; }}"
+                  >
+                    ${repeat((x) => x.config.combinators, html `
+                          <${radioTag}
+                            value="${(x) => x.type}"
+                            ?checked=${(x, c) => { var _a, _b; return ((_b = (_a = c.parent.model) === null || _a === void 0 ? void 0 : _a.combinator) === null || _b === void 0 ? void 0 : _b.type) === x.type; }}
+                          >
+                            ${(x) => { var _a; return (_a = x.label) !== null && _a !== void 0 ? _a : x.type; }}
+                          </${radioTag}>
+                      `)}
+                  </${radioGroupTag}>
+                `, html `
+                  <div class="radio-group-container">
+                    ${repeat((x) => x.config.combinators, html `
+                        <label class="btn btn-sm btn-primary">
+                          <input
+                            type="radio"
+                            name="combinator"
+                            value="${(x) => x.type}"
+                            @change="${(_, c) => c.parent.handleCombinatorChange(c.event)}"
+                            ?checked=${(x, c) => { var _a, _b; return ((_b = (_a = c.parent.model) === null || _a === void 0 ? void 0 : _a.combinator) === null || _b === void 0 ? void 0 : _b.type) === x.type; }}
+                          />
+                          ${(x) => { var _a; return (_a = x.label) !== null && _a !== void 0 ? _a : x.type; }}
+                        </label>
+                      `)}
+                  </div>
+                `)}
+            </div>
+          </div>
+          <div class="rules-group-body">
+            <div class="rules-list">
+              ${repeat((x) => { var _a, _b; return (_b = (_a = x.model) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []; }, html `
+                  ${whenElse((x) => 'children' in x, html `
+                      <expression-group
+                        :config=${(_, c) => c.parent.config}
+                        :styles=${(_, c) => c.parent.styles}
+                        :model=${(x) => x}
+                        :index=${(_, c) => c.index}
+                      ></expression-group>
+                    `, html `
+                      <expression-rule
+                        :config=${(_, c) => c.parent.config}
+                        :styles=${(_, c) => c.parent.styles}
+                        :model=${(x) => x}
+                        :index=${(_, c) => c.index}
+                      ></expression-rule>
+                    `)}
+                `, { recycle: false, positioning: true })}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+}}
+`;

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

@@ -0,0 +1,25 @@
+import { formatDateString, formatDateTimeString } from '../../utils';
+export const defaultVal = (f) => f.defaultValue !== undefined ? f.defaultValue : fieldDefault(f);
+export const fieldDefault = (f) => {
+    switch (f.type) {
+        case 'string':
+            return '';
+        case 'boolean':
+            return false;
+        case 'date':
+            return formatDateString(new Date());
+        case 'date-time':
+            return formatDateTimeString(new Date());
+        case 'double':
+        case 'int':
+        case 'bigdecimal':
+        case 'short':
+        case 'long':
+            return 0;
+        case 'enum': {
+            if (Object.keys(f.values).length === 0)
+                throw new Error('Enums require configured values');
+            return Object.keys(f.values)[0];
+        }
+    }
+};

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

@@ -0,0 +1,203 @@
+import { __decorate } from "tslib";
+import { customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
+import { applyCustomStyles } from '../../utils/misc';
+import { Events } from '../events';
+import { RuleField } from '../rule-field/rule-field';
+import { RuleOperator } from '../rule-operator/rule-operator';
+import { RuleValue } from '../rule-value/rule-value';
+import { defaultVal } from './expression-rule.helpers';
+import { styles } from './expression-rule.styles';
+import { template } from './expression-rule.template';
+RuleOperator;
+RuleField;
+RuleValue;
+let ExpressionRule = class ExpressionRule extends GenesisElement {
+    connectedCallback() {
+        super.connectedCallback();
+        applyCustomStyles(this, this.styles, 'rule');
+    }
+    variadicRule(model) {
+        return model.operator.nbInputs === 'many' && 'value' in model && Array.isArray(model.value);
+    }
+    /**
+     * @internal
+     * Creates an array of length n to represent to number of argument to the operator
+     */
+    get operandIterator() {
+        var _a, _b, _c;
+        if (((_a = this.model.operator) === null || _a === void 0 ? void 0 : _a.nbInputs) === 'many') {
+            if (!this.variadicRule(this.model))
+                throw new Error('Varargs disabled for many nbInputs');
+            return Array(this.model.value.length).fill(true);
+        }
+        return Array((_c = (_b = this.model.operator) === null || _b === void 0 ? void 0 : _b.nbInputs) !== null && _c !== void 0 ? _c : 0).fill(true);
+    }
+    operandValue(index) {
+        if (!this.model.operator)
+            return undefined;
+        if (this.model.operator.nbInputs === 1 && 'value' in this.model) {
+            return this.model.value;
+        }
+        else if ((this.model.operator.nbInputs === 2 || this.model.operator.nbInputs === 'many') &&
+            'value' in this.model &&
+            Array.isArray(this.model.value)) {
+            return this.model.value[index];
+        }
+        throw new Error('Invalid operand lookup');
+    }
+    dispatchAddVarArg() {
+        if (!this.variadicRule(this.model))
+            throw new Error('Cannot add inputs for non-variadic operator, or invalid format');
+        const detail = {
+            ruleId: this.model.ruleId,
+            newData: {
+                operator: this.model.operator,
+                field: this.model.field,
+                value: [...this.model.value, defaultVal(this.model.field)],
+            },
+        };
+        this.dispatchEvent(new CustomEvent(Events.UpdateRule, { detail, bubbles: true, composed: true }));
+    }
+    handleRemoveVarArg(event) {
+        const { index } = event.detail;
+        if (!this.variadicRule(this.model))
+            throw new Error('Cannot remove inputs for non-variadic operator, or invalid format');
+        const detail = {
+            ruleId: this.model.ruleId,
+            newData: {
+                operator: this.model.operator,
+                field: this.model.field,
+                value: this.model.value.filter((_, i) => i !== index),
+            },
+        };
+        this.dispatchEvent(new CustomEvent(Events.UpdateRule, { detail, bubbles: true, composed: true }));
+    }
+    dispatchDeleteRule(event) {
+        event.stopPropagation();
+        const detail = {
+            ruleId: this.model.ruleId,
+        };
+        this.dispatchEvent(new CustomEvent(Events.DelRule, { detail, bubbles: true, composed: true }));
+    }
+    handleFieldSelected(event) {
+        var _a;
+        event.stopPropagation();
+        const { fieldId } = event.detail;
+        const newFiler = (_a = this.config.fields.find((filter) => filter.fieldId === fieldId)) !== null && _a !== void 0 ? _a : null;
+        if (!newFiler) {
+            throw new Error(`Unable to find field with id ${fieldId}`);
+        }
+        const detail = {
+            ruleId: this.model.ruleId,
+            newData: {
+                field: newFiler,
+                value: null,
+                operator: null,
+            },
+        };
+        this.dispatchEvent(new CustomEvent(Events.UpdateRule, { detail, bubbles: true, composed: true }));
+    }
+    handleValueChanged(event) {
+        event.stopPropagation();
+        const { value, index } = event.detail;
+        const buildUpdatedModel = (operator) => {
+            switch (operator.nbInputs) {
+                case 0:
+                    throw new Error('Cannot set the value for a UniraryOperator');
+                case 1:
+                    return {
+                        field: this.model.field,
+                        operator: operator,
+                        value,
+                    };
+                case 2:
+                case 'many': {
+                    if (!('value' in this.model) || !Array.isArray(this.model.value))
+                        throw new Error('Invalid value shape for rule');
+                    return {
+                        field: this.model.field,
+                        operator: operator,
+                        value: this.model.value.map((v, i) => (i === index ? value : v)),
+                    };
+                }
+            }
+        };
+        const detail = {
+            ruleId: this.model.ruleId,
+            newData: buildUpdatedModel(this.model.operator),
+        };
+        this.dispatchEvent(new CustomEvent(Events.UpdateRule, { detail, bubbles: true, composed: true }));
+    }
+    handleOperatorSelected(event) {
+        var _a;
+        event.stopPropagation();
+        const { operatorId: operatorType } = event.detail;
+        if (!operatorType)
+            return; // occurs when selecting "Select an operator"
+        const newOperator = (_a = this.config.operators.find((operator) => operator.type === operatorType)) !== null && _a !== void 0 ? _a : null;
+        if (!newOperator) {
+            throw new Error(`Unable to find operator of type ${operatorType}`);
+        }
+        const buildUpdatedModel = (operator) => {
+            switch (operator.nbInputs) {
+                case 0:
+                    return {
+                        field: this.model.field,
+                        operator: operator,
+                    };
+                case 1:
+                    return {
+                        field: this.model.field,
+                        operator: operator,
+                        value: defaultVal(this.model.field),
+                    };
+                case 2:
+                    return {
+                        field: this.model.field,
+                        operator: operator,
+                        value: [defaultVal(this.model.field), defaultVal(this.model.field)],
+                    };
+                case 'many':
+                    return {
+                        field: this.model.field,
+                        operator: operator,
+                        value: [defaultVal(this.model.field)],
+                    };
+            }
+        };
+        this.dispatchEvent(new CustomEvent(Events.UpdateRule, {
+            detail: {
+                ruleId: this.model.ruleId,
+                newData: buildUpdatedModel(newOperator),
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+__decorate([
+    observable
+], ExpressionRule.prototype, "config", void 0);
+__decorate([
+    observable
+], ExpressionRule.prototype, "styles", void 0);
+__decorate([
+    observable
+], ExpressionRule.prototype, "model", void 0);
+__decorate([
+    observable
+], ExpressionRule.prototype, "index", void 0);
+__decorate([
+    volatile
+], ExpressionRule.prototype, "operandIterator", null);
+ExpressionRule = __decorate([
+    customElement({
+        name: 'expression-rule',
+        template,
+        styles: styles,
+        shadowOptions: {
+            delegatesFocus: true, // Ensure the element can be focused
+        },
+    })
+], ExpressionRule);
+export { ExpressionRule };

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

@@ -0,0 +1,57 @@
+import { css } from '@genesislcap/web-core';
+export const styles = css `
+  .rule-container {
+    border: 1px solid #eee;
+    margin-bottom: 5px;
+    padding: 5px;
+    display: grid;
+    grid-template-columns: auto 1fr;
+  }
+
+  .margin {
+    margin-left: calc(var(--design-unit) * 1px);
+    margin-right: calc(var(--design-unit) * 1px);
+  }
+
+  .rule-header {
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .rule-actions {
+    display: inline-block;
+  }
+
+  .rule-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .rule-field-container,
+  .rule-operator-container,
+  .rule-value-container {
+    display: inline-block;
+    margin: 0 5px 0 0;
+    vertical-align: middle;
+  }
+
+  .rule-value-container {
+    border-left: var(--rule-value-separator);
+    padding-left: 5px;
+  }
+
+  .rule-value-container label {
+    margin-bottom: 0;
+    font-weight: normal;
+  }
+
+  .rule-value-container label.block {
+    display: block;
+  }
+
+  expression-rule-value {
+    display: flex;
+  }
+`;

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

@@ -0,0 +1,65 @@
+import { html, repeat, when } from '@genesislcap/web-core';
+export const template = 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 `
+      <div class="rule-container">
+        <div class="rule-content">
+          <expression-rule-field
+class="margin"
+          :fields=${(x) => x.config.fields}
+          :field=${(x) => { var _a; return (_a = x.model) === null || _a === void 0 ? void 0 : _a.field; }}
+          :config=${(x) => x.config}
+          :styles=${(x) => x.styles}
+          @field-selected=${(x, c) => x.handleFieldSelected(c.event)}
+        ></expression-rule-field>
+        <expression-rule-operator
+class="margin"
+          :operators=${(x) => x.config.operators}
+          :field=${(x) => x.model.field}
+          :operator=${(x) => { var _a; return (_a = x.model) === null || _a === void 0 ? void 0 : _a.operator; }}
+          :config=${(x) => x.config}
+          :styles=${(x) => x.styles}
+          @operator-selected=${(x, c) => x.handleOperatorSelected(c.event)}
+        ></expression-rule-operator>
+        ${repeat((x) => x.operandIterator, html `
+            <expression-rule-value
+              class="margin"
+              :config=${(_, c) => c.parent.config}
+              :styles=${(_, c) => c.parent.styles}
+              :field=${(_, c) => c.parent.model.field}
+              :value=${(_, c) => c.parent.operandValue(c.index)}
+              value-index=${(_, c) => c.index}
+              ?variadic=${(_, c) => { var _a, _b; return ((_b = (_a = c.parent.model) === null || _a === void 0 ? void 0 : _a.operator) === null || _b === void 0 ? void 0 : _b.nbInputs) === 'many'; }}
+              @value-updated=${(_, c) => c.parent.handleValueChanged(c.event)}
+              @remove-variadic-operand=${(_, c) => c.parent.handleRemoveVarArg(c.event)}
+            ></expression-rule-value>
+          `, { positioning: true, recycle: false })}
+        ${when((x) => { var _a, _b; return ((_b = (_a = x.model) === null || _a === void 0 ? void 0 : _a.operator) === null || _b === void 0 ? void 0 : _b.nbInputs) === 'many'; }, html `
+            <${buttonTag}
+              type="button"
+              class="btn btn-sm btn-accept"
+              @click="${(x) => x.dispatchAddVarArg()}"
+            >
+              +
+            </${buttonTag}>
+          `)}
+        </div>
+
+        <div class="rule-header">
+          <div class="btn-group rule-actions">
+            <${buttonTag}
+              type="button"
+              class="btn btn-sm btn-danger"
+              data-delete="rule"
+              @click="${(x, c) => x.dispatchDeleteRule(c.event)}"
+            >
+              Delete Rule
+            </${buttonTag}>
+          </div>
+        </div>
+      </div>
+    `;
+}}
+`;

package/dist/esm/main/index.js

@@ -0,0 +1,3 @@
+export * from './expression-builder';
+export * from './expression-builder.styles';
+export * from './expression-builder.template';

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

@@ -0,0 +1,48 @@
+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-field.template';
+let RuleField = class RuleField extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.fields = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        applyCustomStyles(this, this.styles, 'field');
+    }
+    get groupedFieldss() {
+        return processOptGroups(this.fields);
+    }
+    dispatchFieldsChanged(event) {
+        event.stopPropagation();
+        const fieldId = event.target.value;
+        const detail = {
+            fieldId: fieldId,
+        };
+        this.dispatchEvent(new CustomEvent(Events.FieldSelected, { detail, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    observable
+], RuleField.prototype, "fields", void 0);
+__decorate([
+    observable
+], RuleField.prototype, "field", void 0);
+__decorate([
+    observable
+], RuleField.prototype, "config", void 0);
+__decorate([
+    observable
+], RuleField.prototype, "styles", void 0);
+__decorate([
+    volatile
+], RuleField.prototype, "groupedFieldss", null);
+RuleField = __decorate([
+    customElement({
+        name: 'expression-rule-field',
+        template: template,
+    })
+], RuleField);
+export { RuleField };