@genesislcap/foundation-forms 14.4.0 → 14.6.0

package/dist/dts/filters/filters.d.ts

@@ -0,0 +1,98 @@
+import { UISchemaElement } from '@jsonforms/core';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { JSONSchema7 } from 'json-schema';
+import { RendererEntry } from '../types';
+/** @internal */
+export declare const filtersLogger: import("@genesislcap/foundation-utils").Logger;
+/** @public */
+export declare const filtersRenderers: any[];
+/**
+ * Foundation filters component for automatically generated filters based on json schema
+ * obtained from the api, supplied initial data or supplied JSON schema.
+ * Allowing customisable filters elements using UI schema and set of custom renderers
+ * @beta
+ */
+export declare class Filters extends FoundationElement {
+    /**
+     * Name of the backend resource which will provide metadata
+     * used to generate filters
+     * @public
+     */
+    resourceName: string;
+    private resourceNameChanged;
+    clearFiltersData(): void;
+    /**
+     * UI schema used to define configuration of the layout and elements in the filters
+     * Check {@link UiSchemaElement} for possible options
+     *
+     * @remarks
+     * If not provided will be autogenerated based on json schema or initial data
+     *
+     * @example
+     * Here's a simple example:
+     * ```
+     * const sampleUISchema = {
+     *   type: 'VerticalLayout',
+     *   elements: [
+     *     {
+     *       type: 'Control',
+     *       scope: '#/properties/QUANTITY',
+     *       label: 'Quantity',
+     *     },
+     *     {
+     *       type: 'Control',
+     *       scope: '#/properties/INSTRUMENT_ID',
+     *       options: {
+     *         allOptionsResourceName: 'INSTRUMENT',
+     *         valueField: 'INSTRUMENT_ID',
+     *         labelField: 'INSTRUMENT_ID',
+     *       },
+     *       label: 'Instrument',
+     *     },
+     *     {
+     *       type: 'Control',
+     *       scope: '#/properties/SIDE',
+     *       label: 'Side',
+     *     },
+     *   ],
+     * };
+     * ```
+     * @public
+     */
+    uischema: UISchemaElement;
+    /**
+     * Allows to provide set of renderers used by the filters. If not provided it will default to text-field inputs
+     * @public
+     */
+    renderers: RendererEntry[];
+    /**
+     * Alternatively to providing {@link Form.resourceName} you can hardcode the JSON schema on the client.
+     * @public
+     * @remarks
+     * Use this when you want to avoid fetching metadata from the server but
+     * be aware that it could get out of sync if metadata changes on the server
+     */
+    jsonSchema: JSONSchema7;
+    private connect;
+    /**
+     * Initial data for the filters
+     * @public
+     */
+    data: any;
+    /**
+     * Created criteria based on the given data that can be used to filter the data
+     * @public
+     */
+    value: string;
+    valueChanged(): void;
+    /**
+     * @internal
+     */
+    searchFilters(): void;
+    /**
+     * @internal
+     */
+    onChange(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=filters.d.ts.map

package/dist/dts/filters/filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.ts"],"names":[],"mappings":"AAGA,OAAO,EAKL,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAY1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzC,gBAAgB;AAChB,eAAO,MAAM,aAAa,gDAAqC,CAAC;AAchE,cAAc;AACd,eAAO,MAAM,gBAAgB,OAY5B,CAAC;AACF;;;;;GAKG;AAEH,qBAKa,OAAQ,SAAQ,iBAAiB;IAC5C;;;;OAIG;IACG,YAAY,EAAE,MAAM,CAAC;YACb,mBAAmB;IAW1B,gBAAgB;IAIvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;IACS,QAAQ,EAAE,eAAe,CAAC;IACtC;;;OAGG;IACS,SAAS,EAAE,aAAa,EAAE,CAAoB;IAC1D;;;;;;OAMG;IACS,UAAU,EAAE,WAAW,CAAC;IAE3B,OAAO,CAAC,OAAO,CAAW;IACnC;;;OAGG;IACS,IAAI,EAAE,GAAG,CAAM;IAC3B;;;OAGG;IACS,KAAK,EAAE,MAAM,CAAC;IAC1B,YAAY;IAIZ;;OAEG;IACH,aAAa;IAqBb;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW;IAO3B,oBAAoB;CAKrB"}

package/dist/dts/filters/filters.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const foundationFiltersStyles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=filters.styles.d.ts.map

package/dist/dts/filters/filters.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.styles.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,uBAAuB,iDA2DnC,CAAC"}

package/dist/dts/filters/filters.template.d.ts

@@ -0,0 +1,3 @@
+import type { Filters } from './filters';
+export declare const foundationFiltersTemplate: import("@microsoft/fast-element").ViewTemplate<Filters, any>;
+//# sourceMappingURL=filters.template.d.ts.map

package/dist/dts/filters/filters.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.template.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAMzC,eAAO,MAAM,yBAAyB,8DAgCrC,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './filters';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/dts/index.d.ts

@@ -1,3 +1,4 @@
+export * from './filters';
 export * from './form';
 export * from './types';
 export * from './utils';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/dts/jsonforms/renderers/ControlWrapperRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/ControlWrapperRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EAML,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,8BAA8B,0DA4B1C,CAAC;AA0BF,qBAKa,cAAe,SAAQ,WAAW;IACjC,OAAO,MAAC;IACR,OAAO,MAAC;IAEpB,IACI,eAAe,YAOlB;IAED,IACI,aAAa,WAMhB;CACF"}
+{"version":3,"file":"ControlWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/ControlWrapperRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EAML,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,8BAA8B,0DA4B1C,CAAC;AA2BF,qBAKa,cAAe,SAAQ,WAAW;IACjC,OAAO,MAAC;IACR,OAAO,MAAC;IAEpB,IACI,eAAe,YAOlB;IAED,IACI,aAAa,WAMhB;CACF"}

package/dist/dts/jsonforms/renderers/FilterDateControlRenderer.d.ts

@@ -0,0 +1,3 @@
+export declare const DateControlRendererTemplate: import("@microsoft/fast-element").ViewTemplate<any, any>;
+export declare const FilterDateControlRendererEntry: any;
+//# sourceMappingURL=FilterDateControlRenderer.d.ts.map

package/dist/dts/jsonforms/renderers/FilterDateControlRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDateControlRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/FilterDateControlRenderer.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,2BAA2B,0DAmDvC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,GAI5C,CAAC"}

package/dist/dts/jsonforms/renderers/FilterNumberControlRenderer.d.ts

@@ -0,0 +1,3 @@
+export declare const FilterNumberControlRendererTemplate: import("@microsoft/fast-element").ViewTemplate<any, any>;
+export declare const FilterNumberControlRendererEntry: any;
+//# sourceMappingURL=FilterNumberControlRenderer.d.ts.map

package/dist/dts/jsonforms/renderers/FilterNumberControlRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterNumberControlRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/FilterNumberControlRenderer.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mCAAmC,0DAsD/C,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,GAI9C,CAAC"}

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

@@ -0,0 +1,13 @@
+import { Expression } from '@genesislcap/foundation-criteria';
+type Expressions = {
+    options: Expression[];
+    numberOptions: Expression[];
+    dateOptions: Expression[];
+};
+/**
+ * Creates a expressions/criteria from given payload
+ * @public
+ */
+export declare const createExpressions: (payload: any) => Expressions;
+export {};
+//# sourceMappingURL=filters.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../src/utils/filters.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkC,MAAM,kCAAkC,CAAC;AAM9F,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,YAAa,GAAG,gBAyC7C,CAAC"}

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

@@ -1,3 +1,4 @@
+export * from './filters';
 export * from './translation';
 export * from './validation';
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/filters/filters.js

@@ -0,0 +1,144 @@
+import { __awaiter, __decorate } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { CriteriaBuilder, Join } from '@genesislcap/foundation-criteria';
+import { createLogger } from '@genesislcap/foundation-utils';
+import { isControl, isStringControl, mapStateToControlProps, rankWith, } from '@jsonforms/core';
+import { attr, customElement, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { BooleanControlEntry } from '../jsonforms/renderers/BooleanControlRenderer';
+import { ConnectedMultiselectControlRendererEntry } from '../jsonforms/renderers/ConnectedMultiselectControlRenderer';
+import { ConnectedSelectControlRendererEntry } from '../jsonforms/renderers/ConnectedSelectControlRenderer';
+import { EnumControlRendererEntry } from '../jsonforms/renderers/EnumControlRenderer';
+import { FilterDateControlRendererEntry } from '../jsonforms/renderers/FilterDateControlRenderer';
+import { FilterNumberControlRendererEntry } from '../jsonforms/renderers/FilterNumberControlRenderer';
+import { InvisibleControlEntry } from '../jsonforms/renderers/InvisibleControlRenderer';
+import { LayoutRendererEntry } from '../jsonforms/renderers/LayoutRenderer';
+import { LayoutVertical2ColumnsEntry } from '../jsonforms/renderers/LayoutVertical2ColumnsRenderer';
+import { StringControlRendererTemplate } from '../jsonforms/renderers/StringControlRenderer';
+import { createExpressions } from '../utils/filters';
+import { foundationFiltersStyles as styles } from './filters.styles';
+import { foundationFiltersTemplate as template } from './filters.template';
+/** @internal */
+export const filtersLogger = createLogger('foundation-filters');
+const stringEntry = {
+    renderer: StringControlRendererTemplate,
+    tester: rankWith(2, isStringControl),
+    mapper: mapStateToControlProps,
+};
+const fallbackEntry = {
+    renderer: StringControlRendererTemplate,
+    tester: rankWith(1, isControl),
+    mapper: mapStateToControlProps,
+};
+/** @public */
+export const filtersRenderers = [
+    fallbackEntry,
+    stringEntry,
+    BooleanControlEntry,
+    LayoutVertical2ColumnsEntry,
+    LayoutRendererEntry,
+    FilterNumberControlRendererEntry,
+    ConnectedMultiselectControlRendererEntry,
+    EnumControlRendererEntry,
+    ConnectedSelectControlRendererEntry,
+    FilterDateControlRendererEntry,
+    InvisibleControlEntry,
+];
+/**
+ * Foundation filters component for automatically generated filters based on json schema
+ * obtained from the api, supplied initial data or supplied JSON schema.
+ * Allowing customisable filters elements using UI schema and set of custom renderers
+ * @beta
+ */
+let Filters = class Filters extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Allows to provide set of renderers used by the filters. If not provided it will default to text-field inputs
+         * @public
+         */
+        this.renderers = filtersRenderers;
+        /**
+         * Initial data for the filters
+         * @public
+         */
+        this.data = {};
+    }
+    resourceNameChanged() {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.jsonSchema = undefined;
+            if (this.resourceName) {
+                const jsonSchemaResponse = yield this.connect.getJSONSchema(this.resourceName);
+                this.jsonSchema = (_b = (_a = jsonSchemaResponse === null || jsonSchemaResponse === void 0 ? void 0 : jsonSchemaResponse.OUTBOUND) === null || _a === void 0 ? void 0 : _a.$defs) === null || _b === void 0 ? void 0 : _b['global.genesis.message.core.dataserver.QueryRow'];
+                (_c = this.jsonSchema) === null || _c === void 0 ? true : delete _c.properties['DETAILS'];
+            }
+        });
+    }
+    clearFiltersData() {
+        this.data = {};
+    }
+    valueChanged() {
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    /**
+     * @internal
+     */
+    searchFilters() {
+        this.value = '';
+        const payload = Object.assign({}, this.data);
+        const expressions = createExpressions(payload);
+        const criteriaBuilder = new CriteriaBuilder();
+        filtersLogger.debug({ payload });
+        if (expressions.dateOptions.length > 0 ||
+            expressions.numberOptions.length > 0 ||
+            expressions.options.length > 0) {
+            for (const [key, value] of Object.entries(expressions)) {
+                value.length > 0 ? criteriaBuilder.withExpression(value, { join: Join.And() }) : '';
+            }
+            this.value = criteriaBuilder.build();
+        }
+    }
+    /**
+     * @internal
+     */
+    onChange(event) {
+        filtersLogger.debug({ event });
+        if (event.detail) {
+            this.data = event.detail.data;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.data = {};
+    }
+};
+__decorate([
+    attr
+], Filters.prototype, "resourceName", void 0);
+__decorate([
+    observable
+], Filters.prototype, "uischema", void 0);
+__decorate([
+    observable
+], Filters.prototype, "renderers", void 0);
+__decorate([
+    observable
+], Filters.prototype, "jsonSchema", void 0);
+__decorate([
+    Connect
+], Filters.prototype, "connect", void 0);
+__decorate([
+    observable
+], Filters.prototype, "data", void 0);
+__decorate([
+    observable
+], Filters.prototype, "value", void 0);
+Filters = __decorate([
+    customElement({
+        name: 'foundation-filters',
+        template,
+        styles,
+    })
+], Filters);
+export { Filters };

package/dist/esm/filters/filters.styles.js

@@ -0,0 +1,62 @@
+import { controlCornerRadius, designUnit, strokeWidth } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+export const foundationFiltersStyles = css `
+  :host {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    border: calc(${strokeWidth} * 1px) solid transparent;
+    margin: 0;
+    border-radius: calc(${controlCornerRadius} * 1px);
+    min-width: 64px;
+  }
+
+  .header {
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  .header h2 {
+    margin: 0;
+  }
+
+  .container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container-forms {
+    overflow: hidden;
+    overflow-y: scroll;
+    display: flex;
+  }
+
+  .container-forms json-forms {
+    width: 100%;
+    padding: 0 15px;
+  }
+
+  .label {
+    font-size: calc(${designUnit} * 1px + 0.7vmin);
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding: calc(${designUnit} * 4px);
+    gap: calc(${designUnit} * 2px);
+  }
+
+  .action-button {
+    width: 70px;
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host {
+      background: ${SystemColors.Canvas};
+      border-color: ${SystemColors.CanvasText};
+    }
+  `));

package/dist/esm/filters/filters.template.js

@@ -0,0 +1,40 @@
+import { html } from '@microsoft/fast-element';
+import { JSONForms } from '../jsonforms/json-forms';
+import { ControlWrapper } from '../jsonforms/renderers/ControlWrapperRenderer';
+import { DispatchRenderer } from '../jsonforms/renderers/dispatch-renderer';
+JSONForms;
+ControlWrapper;
+DispatchRenderer;
+export const foundationFiltersTemplate = html `
+  <template>
+    <div class="container" part="container">
+      <div class="container-forms" part="container-forms">
+        <json-forms
+          :renderers=${(x) => x.renderers}
+          :uischema=${(x) => x.uischema}
+          :schema=${(x) => x.jsonSchema}
+          :data=${(x) => x.data}
+          @data-change=${(x, c) => x.onChange(c.event)}
+        ></json-forms>
+      </div>
+      <div class="actions">
+        <fast-button
+          @click="${(x) => x.clearFiltersData()}"
+          class="action-button"
+          appearance="neutral"
+          data-test-id="clear-filters-button"
+        >
+          Clear
+        </fast-button>
+        <fast-button
+          @click="${(x) => x.searchFilters()}"
+          data-test-id="search-filters-button"
+          class="action-button"
+          appearance="accent"
+        >
+          Search
+        </fast-button>
+      </div>
+    </div>
+  </template>
+`;

package/dist/esm/filters/index.js

@@ -0,0 +1 @@
+export * from './filters';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+export * from './filters';
 export * from './form';
 export * from './types';
 export * from './utils';

package/dist/esm/jsonforms/renderers/ControlWrapperRenderer.js

@@ -47,6 +47,7 @@ const styles = css `
   .wrapper {
     display: flex;
     width: 100%;
+    align-items: center;
   }
 `;
 let ControlWrapper = class ControlWrapper extends FASTElement {

package/dist/esm/jsonforms/renderers/FilterDateControlRenderer.js

@@ -0,0 +1,67 @@
+import { mapStateToControlProps, rankWith } from '@jsonforms/core';
+import { html } from '@microsoft/fast-element';
+import { isDate } from '../testers/isDate';
+import { DATE_CONTROL_RANK } from './RenderersRanks';
+export const DateControlRendererTemplate = html `
+  <template>
+    <control-wrapper :control=${(x) => x.control} ?submitted=${(x) => x.submitted}>
+      <zero-text-field
+        :value=${(x) => {
+    var _a, _b;
+    return ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min) === undefined || ((_b = x.control.data) === null || _b === void 0 ? void 0 : _b.min) === null
+        ? ''
+        : new Intl.DateTimeFormat('fr-CA', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        }).format(x.control.data.min);
+}}
+        @change="${(x, c) => {
+    var _a, _b;
+    const value = c.event.target.control.valueAsNumber;
+    return x.control.handleChange(x.control.path, {
+        min: value ? value : undefined,
+        max: ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max) < value ? undefined : (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.max,
+        type: 'date',
+    });
+}}"
+        id=${(x) => `min-${x.control.path}`}
+        type="date"
+        data-test-id=${(x) => `min-${x.control.path}`}
+        @blur=${(x) => x.onBlur()}
+        style="width: 100%"
+      ></zero-text-field>
+      <zero-text-field
+        :value=${(x) => {
+    var _a, _b;
+    return ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max) === undefined || ((_b = x.control.data) === null || _b === void 0 ? void 0 : _b.max) === null
+        ? ''
+        : new Intl.DateTimeFormat('fr-CA', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        }).format(x.control.data.max);
+}}
+        @change="${(x, c) => {
+    var _a, _b;
+    const value = c.event.target.control.valueAsNumber;
+    return x.control.handleChange(x.control.path, {
+        min: ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min) > value ? undefined : (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.min,
+        max: value ? value : undefined,
+        type: 'date',
+    });
+}}"
+        id=${(x) => `max-${x.control.path}`}
+        type="date"
+        data-test-id=${(x) => `max-${x.control.path}`}
+        @blur=${(x) => x.onBlur()}
+        style="width: 100%"
+      ></zero-text-field>
+    </control-wrapper>
+  </template>
+`;
+export const FilterDateControlRendererEntry = {
+    renderer: DateControlRendererTemplate,
+    tester: rankWith(DATE_CONTROL_RANK, isDate),
+    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
+};

package/dist/esm/jsonforms/renderers/FilterNumberControlRenderer.js

@@ -0,0 +1,60 @@
+import { mapStateToControlProps, rankWith } from '@jsonforms/core';
+import { html } from '@microsoft/fast-element';
+import { isOneOfNumber } from '../testers/isOneOfNumber';
+import { NUMBER_CONTROL_RANK } from './RenderersRanks';
+export const FilterNumberControlRendererTemplate = html `
+  <template>
+    <control-wrapper :control=${(x) => x.control} ?submitted=${(x) => x.submitted}>
+      <zero-text-field
+        :value=${(x) => { var _a; return (((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min) === undefined ? '' : x.control.data.min); }}
+        @change=${(x, c) => {
+    var _a, _b;
+    const value = parseFloat(c.event.target.value);
+    return x.control.handleChange(x.control.path, !isNaN(value)
+        ? {
+            min: value,
+            max: ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max) < value ? undefined : (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.max,
+            type: 'number',
+        }
+        : Object.assign(Object.assign({}, x.control.data), { min: undefined }));
+}}
+        placeholder="Min"
+        id=${(x) => `min-${x.control.path}`}
+        data-test-id=${(x) => `min-${x.control.path}`}
+        @blur=${(x) => x.onBlur()}
+        style="width: 100%"
+      ></zero-text-field>
+      <span
+        style="
+        font-size: xx-large; 
+        color: rgb(135, 155, 166);"
+      >
+        -
+      </span>
+      <zero-text-field
+        :value=${(x) => { var _a; return (((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max) === undefined ? '' : x.control.data.max); }}
+        @change=${(x, c) => {
+    var _a, _b;
+    const value = parseFloat(c.event.target.value);
+    return x.control.handleChange(x.control.path, !isNaN(value)
+        ? {
+            min: ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min) > value ? undefined : (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.min,
+            max: value,
+            type: 'number',
+        }
+        : Object.assign(Object.assign({}, x.control.data), { max: undefined }));
+}}
+        placeholder="Max"
+        id=${(x) => `max-${x.control.path}`}
+        data-test-id=${(x) => `max-${x.control.path}`}
+        @blur=${(x) => x.onBlur()}
+        style="width: 100%"
+      ></zero-text-field>
+    </control-wrapper>
+  </template>
+`;
+export const FilterNumberControlRendererEntry = {
+    renderer: FilterNumberControlRendererTemplate,
+    tester: rankWith(NUMBER_CONTROL_RANK, isOneOfNumber),
+    mapper: mapStateToControlProps,
+};