@genesislcap/expression-builder 14.248.0

package/dist/dts/utils/data-model.d.ts

@@ -0,0 +1,27 @@
+import { Config, Group, ModelGroup, ModelRule, Rule } from '../types';
+/** @internal */
+export interface MetadataProvider {
+    getGroupId(): string;
+    getRuleId(): string;
+    getConfig(): Config;
+}
+/**
+ * Converts a Group to a ModelGroup (adds required metadata)
+ */
+export declare function groupToModelGroup(group: Group, provider: MetadataProvider): ModelGroup;
+/**
+ * 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 declare function modelGroupToGroup(modelGroup: ModelGroup): Group;
+/**
+ * Converts a ModelRule (internal data structure) to a public Rule structure.
+ *
+ * @param modelRule The internal ModelRule to convert.
+ * @returns A public Rule object.
+ */
+export declare function modelRuleToRule(modelRule: ModelRule): Rule;
+//# sourceMappingURL=data-model.d.ts.map

package/dist/dts/utils/data-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-model.d.ts","sourceRoot":"","sources":["../../../src/utils/data-model.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEtE,gBAAgB;AAChB,MAAM,WAAW,gBAAgB;IAC/B,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,IAAI,MAAM,CAAC;IACpB,SAAS,IAAI,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,GAAG,UAAU,CA4BtF;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAe/D;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAO1D"}

package/dist/dts/utils/formatting.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Gets the string representation from a `Date` which is the format a `date` input uses.
+ * `yyyy-mm-dd`
+ * @alpha
+ */
+export declare const formatDateString: (date: Date) => string;
+/**
+ * Gets the string representation from a `Date` which is the format a `datetime-local` input uses.
+ * `yyyy-mm-ddThh:mm:ss`
+ * @alpha
+ */
+export declare const formatDateTimeString: (date: Date) => string;
+//# sourceMappingURL=formatting.d.ts.map

package/dist/dts/utils/formatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../src/utils/formatting.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,SAAU,IAAI,WAK1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,SAAU,IAAI,WAM9C,CAAC"}

package/dist/dts/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './data-model';
+export * from './formatting';
+export * from './misc';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}

package/dist/dts/utils/misc.d.ts

@@ -0,0 +1,14 @@
+import { Field, Operator, Styles } from '../types';
+export declare const processOptGroups: <T extends Operator | Field>(xs: T[]) => (T | {
+    optgroup: string | null;
+    xs: T[];
+})[];
+/**
+ * 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 declare function applyCustomStyles(component: HTMLElement, styles: Styles | undefined | null, styleKey: keyof NonNullable<Styles['customStyles']>): void;
+//# sourceMappingURL=misc.d.ts.map

package/dist/dts/utils/misc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/utils/misc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEnD,eAAO,MAAM,gBAAgB;cAET,MAAM,GAAG,IAAI;;IAyChC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,WAAW,EACtB,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EACjC,QAAQ,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,GAClD,IAAI,CAeN"}

package/dist/esm/config/combinators.js

@@ -0,0 +1,31 @@
+/** @alpha */
+export const BASE_LOGICAL_COMBINATORS = [
+    {
+        type: 'AND',
+        maxRules: 'many',
+    },
+    {
+        type: 'OR',
+        maxRules: 'many',
+    },
+];
+/** @alpha */
+export const LOGICAL_COMBINATORS = [
+    ...BASE_LOGICAL_COMBINATORS,
+    {
+        type: 'NOT',
+        maxRules: 2,
+    },
+    {
+        type: 'NAND',
+        maxRules: 'many',
+    },
+    {
+        type: 'NOR',
+        maxRules: 'many',
+    },
+    {
+        type: 'XOR',
+        maxRules: 2,
+    },
+];

package/dist/esm/config/index.js

@@ -0,0 +1,2 @@
+export * from './combinators';
+export * from './operators';

package/dist/esm/config/operators.js

@@ -0,0 +1,91 @@
+const enumTypes = ['enum'];
+const numericTypes = ['int', 'short', 'long', 'bigdecimal', 'double'];
+const stringTypes = ['string'];
+const dateTypes = ['date', 'date-time'];
+const booleanTypes = ['boolean'];
+const allTypes = [
+    ...enumTypes,
+    ...numericTypes,
+    ...stringTypes,
+    ...dateTypes,
+    ...booleanTypes,
+];
+/** @alpha **/
+export const BASE_OPERATORS = [
+    {
+        type: 'equal',
+        nbInputs: 1,
+        applyTo: allTypes,
+        optgroup: 'Equality',
+    },
+    {
+        type: 'not_equal',
+        nbInputs: 1,
+        applyTo: allTypes,
+        optgroup: 'Equality',
+    },
+    {
+        type: 'greater',
+        nbInputs: 1,
+        applyTo: [...numericTypes, ...dateTypes],
+        optgroup: 'Comparison',
+    },
+    {
+        type: 'less',
+        nbInputs: 1,
+        applyTo: [...numericTypes, ...dateTypes],
+        optgroup: 'Comparison',
+    },
+    {
+        type: 'contains',
+        nbInputs: 1,
+        applyTo: ['string'],
+        optgroup: 'String',
+    },
+    {
+        type: 'starts_with',
+        nbInputs: 1,
+        applyTo: ['string'],
+        optgroup: 'String',
+    },
+    {
+        type: 'ends_with',
+        nbInputs: 1,
+        applyTo: ['string'],
+        optgroup: 'String',
+    },
+    {
+        type: 'one_of',
+        nbInputs: 'many',
+        applyTo: [...allTypes].filter((t) => t !== 'boolean'),
+    },
+    {
+        type: 'not_any_of',
+        nbInputs: 'many',
+        applyTo: [...allTypes].filter((t) => t !== 'boolean'),
+    },
+    {
+        type: 'within_inclusive',
+        nbInputs: 2,
+        applyTo: [...numericTypes, ...dateTypes],
+        optgroup: 'Range',
+    },
+    {
+        type: 'within_exclusive',
+        nbInputs: 2,
+        applyTo: [...numericTypes, ...dateTypes],
+        optgroup: 'Range',
+    },
+    {
+        type: 'is_null',
+        nbInputs: 0,
+        applyTo: [...allTypes],
+        optgroup: 'Null',
+    },
+    {
+        type: 'not_null',
+        nbInputs: 0,
+        applyTo: [...allTypes],
+        optgroup: 'Null',
+    },
+];

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+import * as Config from './config';
+import * as Types from './types/public.types';
+export { formatDateString, formatDateTimeString } from './utils';
+export * from './main';
+export { Types, Config };

package/dist/esm/main/events.js

@@ -0,0 +1,13 @@
+export var Events;
+(function (Events) {
+    Events["AddGroup"] = "add-group";
+    Events["DelGroup"] = "del-group";
+    Events["AddRule"] = "add-rule";
+    Events["DelRule"] = "del-rule";
+    Events["UpdateGroup"] = "update-group";
+    Events["UpdateRule"] = "update-rule";
+    Events["FieldSelected"] = "field-selected";
+    Events["OperatorSelected"] = "operator-selected";
+    Events["ValueUpdated"] = "value-updated";
+    Events["RemoveVarArg"] = "remove-variadic-operand";
+})(Events || (Events = {}));

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

@@ -0,0 +1,129 @@
+import rfdc from 'rfdc';
+const deepClone = rfdc(); // create the fast deep copy function
+/**
+ * Finds a group within a model and applies a function to create a new children
+ * @param model The root group to start searching from
+ * @param groupId The Group ID to find
+ * @param fn The function to apply to the children of the found group. A *new* object must be created and returned
+ * @returns A *new* root `Group` object which the function has been applied to. If the group isn't found an error is thrown
+ */
+export function findOperateOnGroup(model, groupId, fn) {
+    function findAndUpdate(node) {
+        const newNode = deepClone(node);
+        if (newNode.groupId === groupId) {
+            newNode.children = fn(newNode.children);
+            return newNode;
+        }
+        const updatedChildren = [];
+        let found = false;
+        for (const child of newNode.children) {
+            if ('children' in child) {
+                const updatedGroup = findAndUpdate(child);
+                if (updatedGroup) {
+                    updatedChildren.push(updatedGroup);
+                    found = true;
+                }
+                else {
+                    updatedChildren.push(child);
+                }
+            }
+            else {
+                updatedChildren.push(child);
+            }
+        }
+        newNode.children = updatedChildren;
+        // Only return the modified node if a group was found and modified within it
+        return found ? newNode : null;
+    }
+    const newModel = findAndUpdate(model);
+    if (!newModel)
+        throw new Error(`Unable to find group with groupId ${groupId}`);
+    return newModel;
+}
+function findNode(model, targetId, predicate) {
+    function find(node) {
+        for (const child of node.children) {
+            if (predicate(child, targetId)) {
+                return node; // Found
+            }
+            if ('children' in child) {
+                const found = find(child);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
+    return find(model);
+}
+// Helper function to find the parent
+function findParentGroupOfGroup(model, groupId) {
+    const predicate = (node, targetId) => {
+        return 'children' in node && node.groupId === targetId;
+    };
+    const res = findNode(model, groupId, predicate);
+    if (!res)
+        throw new Error(`No parent group found for group with ID ${groupId}`);
+    return res;
+}
+// Helper function to find the parent of a Rule
+function findParentGroupOfRule(model, ruleId) {
+    const predicate = (node, targetId) => {
+        return 'ruleId' in node && node.ruleId === targetId;
+    };
+    const res = findNode(model, ruleId, predicate);
+    if (!res)
+        throw new Error(`No parent group found for rule with ID ${ruleId}`);
+    return res;
+}
+export function addGroupOrRule(model, parentGroupId, newItem) {
+    const addGroupFn = (children) => {
+        return [...children, newItem];
+    };
+    return findOperateOnGroup(model, parentGroupId, addGroupFn);
+}
+export function deleteGroup(model, groupIdToDelete) {
+    const deleteGroupFn = (children) => children.filter((child) => {
+        if ('groupId' in child) {
+            return child.groupId !== groupIdToDelete;
+        }
+        return true; // Keep rules
+    });
+    const parentGroup = findParentGroupOfGroup(model, groupIdToDelete);
+    return findOperateOnGroup(model, parentGroup.groupId, deleteGroupFn);
+}
+export function deleteRule(model, ruleIdToDelete) {
+    const deleteRuleFn = (children) => children.filter((child) => {
+        if ('ruleId' in child) {
+            return child.ruleId !== ruleIdToDelete;
+        }
+        return true; // Keep Groups
+    });
+    const parentGroup = findParentGroupOfRule(model, ruleIdToDelete);
+    return findOperateOnGroup(model, parentGroup.groupId, deleteRuleFn);
+}
+export const ROOT_GROUP = 'group-root';
+export function updateGroupData(model, groupIdToUpdate, newData) {
+    if (groupIdToUpdate === ROOT_GROUP) {
+        return Object.assign(Object.assign({}, model), newData);
+    }
+    const updateGroupFn = (children) => children.map((child) => {
+        if ('groupId' in child && child.groupId === groupIdToUpdate) {
+            return Object.assign(Object.assign({}, child), newData);
+        }
+        return child;
+    });
+    const parentGroup = findParentGroupOfGroup(model, groupIdToUpdate);
+    return findOperateOnGroup(model, parentGroup.groupId, updateGroupFn);
+}
+export function updateRuleData(model, ruleIdToUpdate, newData) {
+    const updateRuleFn = (children) => children.map((child) => {
+        if ('ruleId' in child && child.ruleId === ruleIdToUpdate) {
+            return Object.assign(Object.assign({}, child), newData);
+        }
+        return child;
+    });
+    const parentGroup = findParentGroupOfRule(model, ruleIdToUpdate);
+    return findOperateOnGroup(model, parentGroup.groupId, updateRuleFn);
+}

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

@@ -0,0 +1,157 @@
+import { __decorate } from "tslib";
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { groupToModelGroup, modelGroupToGroup } from '../utils/data-model';
+import { Events } from './events';
+import { addGroupOrRule, deleteGroup, deleteRule, ROOT_GROUP, updateGroupData, updateRuleData, } from './expression-builder.helpers';
+import { styles } from './expression-builder.styles';
+import { template } from './expression-builder.template';
+import { ExpressionGroup } from './expression-group/expression-group';
+import { ExpressionRule } from './expression-rule/expression-rule';
+ExpressionGroup;
+ExpressionRule;
+/** @alpha **/
+let ExpressionBuilder = class ExpressionBuilder extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.model = null;
+        this.ruleCount = 0;
+        this.groupCount = 0;
+        this.handleAddGroup = this._handleAddGroup.bind(this);
+        this.handleAddRule = this._handleAddRule.bind(this);
+        this.handleDeleteGroup = this._handleDeleteGroup.bind(this);
+        this.handleDeleteRule = this._handleDeleteRule.bind(this);
+        this.handleUpdateGroupData = this._handleUpdateGroupData.bind(this);
+        this.handleUpdateRuleData = this._handleUpdateRuleData.bind(this);
+    }
+    /** @internal */
+    configChanged(_, newConfig) {
+        if (newConfig.model) {
+            this.ruleCount = 0;
+            this.groupCount = 0;
+            this.model = groupToModelGroup(newConfig.model, this);
+        }
+    }
+    /** @internal */
+    modelChanged(_, newModel) {
+        if (!newModel)
+            return;
+        const group = modelGroupToGroup(newModel);
+        this.dispatchChangeEvent(group);
+    }
+    /**
+     * @alpha
+     * Dispatches the provided model to the DOM.
+     *
+     * @remarks
+     * Override this to change the shape of model the component returns
+     */
+    dispatchChangeEvent(group) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: group,
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        }));
+    }
+    // Implement MetadataProvider interface
+    /** @internal */
+    getConfig() {
+        return this.config;
+    }
+    /** @internal */
+    getGroupId() {
+        this.groupCount += 1;
+        return `group-${this.groupCount}`;
+    }
+    /** @internal */
+    getRuleId() {
+        this.ruleCount += 1;
+        return `rule-${this.ruleCount}`;
+    }
+    // Behaviour
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.config || !this.config.combinators || !this.config.operators || !this.config.fields) {
+            throw new Error("Invalid config passed to ExpressionBuilder. Verify you've defined operators, fields, and combinators.");
+        }
+        this.addEventListener(Events.AddGroup, this.handleAddGroup);
+        this.addEventListener(Events.DelGroup, this.handleDeleteGroup);
+        this.addEventListener(Events.AddRule, this.handleAddRule);
+        this.addEventListener(Events.DelRule, this.handleDeleteRule);
+        this.addEventListener(Events.UpdateGroup, this.handleUpdateGroupData);
+        this.addEventListener(Events.UpdateRule, this.handleUpdateRuleData);
+        if (this.config.model)
+            return;
+        this.model = {
+            children: [],
+            level: 1,
+            groupId: ROOT_GROUP,
+            config: this.config,
+            combinator: this.config.combinators[0],
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(Events.AddGroup, this.handleAddGroup);
+        this.removeEventListener(Events.DelGroup, this.handleDeleteGroup);
+        this.removeEventListener(Events.AddRule, this.handleAddRule);
+        this.removeEventListener(Events.DelRule, this.handleDeleteRule);
+        this.removeEventListener(Events.UpdateGroup, this.handleUpdateGroupData);
+        this.removeEventListener(Events.UpdateRule, this.handleUpdateRuleData);
+    }
+    _handleAddGroup(event) {
+        const { parentGroupId, newGroup: _newGroup } = event.detail;
+        const newGroup = {
+            groupId: this.getGroupId(),
+            level: _newGroup.level,
+            children: [],
+            config: this.config,
+            combinator: this.config.combinators[0],
+        };
+        this.model = addGroupOrRule(this.model, parentGroupId, newGroup);
+    }
+    _handleAddRule(event) {
+        const { parentGroupId } = event.detail;
+        const newRule = {
+            ruleId: this.getRuleId(),
+            config: this.config,
+            field: null,
+            operator: null,
+            value: null,
+        };
+        this.model = addGroupOrRule(this.model, parentGroupId, newRule);
+    }
+    _handleDeleteGroup(event) {
+        const { groupId } = event.detail;
+        this.model = deleteGroup(this.model, groupId);
+    }
+    _handleDeleteRule(event) {
+        const { ruleId } = event.detail;
+        this.model = deleteRule(this.model, ruleId);
+    }
+    _handleUpdateGroupData(event) {
+        const { groupId, newData } = event.detail;
+        this.model = updateGroupData(this.model, groupId, newData);
+    }
+    _handleUpdateRuleData(event) {
+        const { ruleId, newData } = event.detail;
+        this.model = updateRuleData(this.model, ruleId, newData);
+    }
+};
+__decorate([
+    observable
+], ExpressionBuilder.prototype, "config", void 0);
+__decorate([
+    observable
+], ExpressionBuilder.prototype, "styles", void 0);
+__decorate([
+    observable
+], ExpressionBuilder.prototype, "model", void 0);
+ExpressionBuilder = __decorate([
+    customElement({
+        name: 'expression-builder',
+        template,
+        styles,
+    })
+], ExpressionBuilder);
+export { ExpressionBuilder };

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

@@ -0,0 +1,177 @@
+import { css } from '@genesislcap/web-core';
+/** @alpha **/
+export const styles = css `
+  :host {
+    --item-vertical-spacing: 4px;
+    --item-border-radius: 5px;
+    --group-background-color: rgb(250 240 210 / 50%);
+    --group-border-color: #dcc896;
+    --group-border: 1px solid var(--group-border-color);
+    --group-padding: 10px;
+    --rule-background-color: rgb(255 255 255 / 90%);
+    --rule-border-color: #eee;
+    --rule-border: 1px solid var(--rule-border-color);
+    --rule-padding: 5px;
+    --rule-value-separator: 1px solid #ddd;
+    --error-icon-color: #f00;
+    --error-border-color: #f99;
+    --error-background-color: #fdd;
+    --ticks-width: 2px;
+    --ticks-color: #ccc;
+  }
+
+  p.test {
+    color: black;
+  }
+
+  .query-builder {
+    font-family: sans-serif;
+  }
+
+  .rules-group-container {
+    position: relative;
+    margin: var(--item-vertical-spacing) 0;
+    border-radius: var(--item-border-radius);
+    padding: var(--group-padding);
+    border: var(--group-border);
+    background: var(--group-background-color);
+  }
+
+  .rules-group-header {
+    margin-bottom: var(--group-padding);
+  }
+
+  .group-conditions {
+    display: inline-block;
+  }
+
+  .group-conditions .btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border-radius: 0.2rem;
+    border: 1px solid #007bff;
+    color: #007bff;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  .group-conditions .btn:hover {
+    background-color: #007bff;
+    color: #fff;
+  }
+
+  .group-conditions .btn.active {
+    background-color: #007bff;
+    color: #fff;
+  }
+
+  .group-actions {
+    display: inline-block;
+    float: right;
+  }
+
+  .rules-list {
+    list-style: none;
+    padding: 0 0 0 20px; /* Adjusted ticks position */
+    margin: 0;
+  }
+
+  .rule-container {
+    position: relative;
+    margin: var(--item-vertical-spacing) 0;
+    border-radius: var(--item-border-radius);
+    padding: var(--rule-padding);
+    border: var(--rule-border);
+    background: var(--rule-background-color);
+  }
+
+  .rule-header {
+    margin-bottom: 5px;
+  }
+
+  .rule-actions {
+    display: inline-block;
+    float: right;
+  }
+
+  .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;
+  }
+
+  .error-container {
+    display: none;
+    cursor: help;
+    color: var(--error-icon-color);
+    margin-left: 5px;
+  }
+
+  .rule-container.has-error,
+  .rules-group-container.has-error {
+    background-color: var(--error-background-color);
+    border-color: var(--error-border-color);
+  }
+
+  .rule-container.has-error .error-container,
+  .rules-group-container.has-error .error-container {
+    display: inline-block !important;
+  }
+
+  /* Ticks */
+  .rules-list > * {
+    position: relative;
+  }
+
+  .rules-list > *::before,
+  .rules-list > *::after {
+    content: '';
+    position: absolute;
+    left: -10px; /* Adjusted ticks position */
+    width: 10px; /* Adjusted ticks position */
+    border-color: var(--ticks-color);
+    border-style: solid;
+  }
+
+  .rules-list > *::before {
+    top: -2px; /* Adjusted ticks position */
+    height: calc(50% + var(--item-vertical-spacing));
+    border-width: 0 0 var(--ticks-width) var(--ticks-width);
+  }
+
+  .rules-list > *::after {
+    top: 50%;
+    border-width: 0 0 0 var(--ticks-width);
+    height: 50%;
+  }
+
+  .rules-list > *:first-child::before {
+    top: calc(-1 * var(--group-padding) - var(--ticks-width));
+    height: calc(50% + var(--group-padding) + var(--item-vertical-spacing));
+  }
+
+  .rules-list > *:last-child::before {
+    border-radius: 0 0 0 calc(2 * var(--ticks-width));
+  }
+
+  .rules-list > *:last-child::after {
+    display: none;
+  }
+`;