@genesislcap/foundation-forms 14.429.1 → 14.429.2

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

@@ -1,8 +1,151 @@
 import { __decorate } from "tslib";
 import { computeLabel, isDescriptionHidden } from '@jsonforms/core';
-import { html, css, when, observable, customElement, FASTElement, volatile, attr, } from '@microsoft/fast-element';
+import { FASTElement, attr, css, customElement, html, observable, volatile, when, } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
+import { logger } from '../../utils/logger';
 import { getAnyOfErrorMessage } from '../../utils/validation';
+/**
+ * Styles formerly scoped to the <control-wrapper> element. After the light-DOM
+ * refactor these are composed into `foundationFormStyles` so they reach every
+ * rendered control. Exported for consumers that render controls outside of
+ * `foundation-form` and need the same wrapper styling.
+ *
+ * @internal
+ */
+export const controlWrapperStyles = css `
+  foundation-form .foundation-control-wrapper-root {
+    margin-bottom: var(--wrapper-root-margin-bottom, calc(var(--design-unit) * 4px));
+  }
+  foundation-form .foundation-control-wrapper-root.labelLeft {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  foundation-form .foundation-control-wrapper-label {
+    color: var(--neutral-foreground-hint);
+    margin-bottom: var(--control-label-margin, calc(var(--design-unit) * 2px));
+    display: flex;
+    justify-content: space-between;
+    font-weight: 700;
+    cursor: default;
+  }
+  foundation-form .foundation-control-wrapper-label.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  foundation-form .labelLeft .foundation-control-wrapper {
+    flex: 1 1 auto;
+    width: auto;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  foundation-form .labelLeft .foundation-control-wrapper-label {
+    flex: 0 1 auto;
+    width: calc(var(--design-unit) * 30px);
+    margin-right: calc(var(--design-unit) * 2px);
+    align-items: center;
+    margin-bottom: 0;
+  }
+  foundation-form .labelLeft .foundation-control-wrapper-error {
+    margin-left: 0;
+    flex: 1 1 100%;
+    text-align: right;
+  }
+  foundation-form .foundation-control-wrapper-error {
+    font-size: 12px;
+    color: #f9644d;
+    margin-left: 10px;
+  }
+  foundation-form .foundation-control-wrapper {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+`;
+/**
+ * Light-DOM-friendly control wrapper that replaces the former `<control-wrapper>`
+ * custom element. Renders label, error/description slots, and composes a provided
+ * inner control template inline within the renderer's template so that bindings
+ * stay on the `DispatchRenderer` source.
+ *
+ * @public
+ */
+export const controlWrapperTemplate = (options) => {
+    const { innerTemplate, prefix, hideLabel = false } = options;
+    return html `
+    ${when((x) => { var _a; return (_a = x.control) === null || _a === void 0 ? void 0 : _a.visible; }, html `
+        <div
+          class=${(x) => {
+        var _a, _b, _c, _d;
+        return classNames(['foundation-control-wrapper-root', true], ['labelLeft', ((_d = (_c = (_b = (_a = x.jsonforms) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.labelPlacement) === 'left']);
+    }}
+          id=${(x) => x.control.path + '-wrapper'}
+          data-test-id=${(x) => x.control.path + '-wrapper'}
+          role="group"
+          aria-labelledby=${(x) => (computeControlLabel(x) ? x.control.path + '-label' : null)}
+        >
+          ${when((x) => computeControlLabel(x), html `
+              <label
+                id="${(x) => x.control.path + '-label'}"
+                for="${(x) => x.control.path}"
+                class="${() => classNames('foundation-control-wrapper-label', ['visually-hidden', hideLabel])}"
+              >
+                <span>
+                  ${(x) => computeControlLabel(x)}${when((x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tooltip; }, html `
+                      <${prefix}-icon
+                        tooltip="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tooltip; }}"
+                        tooltip-id="${(x) => x.control.path + '-tooltip'}"
+                      ></${prefix}-icon>
+                    `)}
+                </span>
+              </label>
+            `)}
+
+          <div class="foundation-control-wrapper" part="wrapper">${innerTemplate}</div>
+          <div
+            class="${(x) => (x.control.errors || computeAnyOfError(x)) && x.touched
+        ? 'foundation-control-wrapper-error'
+        : 'foundation-control-wrapper-description'}"
+          >
+            ${(x) => x.touched && (x.control.errors || computeAnyOfError(x))
+        ? [x.control.errors, computeAnyOfError(x)].filter(Boolean).join(' ')
+        : computeShowDescription(x)
+            ? x.control.description
+            : ''}
+          </div>
+        </div>
+      `)}
+  `;
+};
+function computeShowDescription(x) {
+    var _a;
+    if (!(x === null || x === void 0 ? void 0 : x.control))
+        return false;
+    return !isDescriptionHidden(x.control.visible, x.control.description, x.control.isFocused, !!((_a = x.control.config) === null || _a === void 0 ? void 0 : _a.showUnfocusedDescription));
+}
+function computeControlLabel(x) {
+    var _a, _b, _c;
+    if (!(x === null || x === void 0 ? void 0 : x.control))
+        return '';
+    if ((_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.hideLabel)
+        return '';
+    return computeLabel(x.control.label, x.control.required, !!((_c = x.control.config) === null || _c === void 0 ? void 0 : _c.hideRequiredAsterisk));
+}
+function computeAnyOfError(x) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return getAnyOfErrorMessage((_b = (_a = x.jsonforms) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.errors, (_d = (_c = x.jsonforms) === null || _c === void 0 ? void 0 : _c.core) === null || _d === void 0 ? void 0 : _d.schema, (_e = x.control) === null || _e === void 0 ? void 0 : _e.path, (_h = (_g = (_f = x.control) === null || _f === void 0 ? void 0 : _f.uischema) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.anyOfErrorMessage);
+}
+// ---------------------------------------------------------------------------
+// Deprecated: <control-wrapper> custom element
+// ---------------------------------------------------------------------------
+/** @internal @deprecated */
 export const ControlWrapperRendererTemplate = html `
   <template>
     ${when((x) => { var _a; return (_a = x.control) === null || _a === void 0 ? void 0 : _a.visible; }, html `
@@ -44,7 +187,7 @@ export const ControlWrapperRendererTemplate = html `
       `)}
   </template>
 `;
-const styles = css `
+const deprecatedControlWrapperStyles = css `
   .visually-hidden {
     position: absolute;
     width: 1px;
@@ -73,7 +216,6 @@ const styles = css `
     display: flex;
     justify-content: space-between;
     font-weight: 700;
-    /* Reset label defaults to match former div appearance */
     cursor: default;
   }
 
@@ -110,19 +252,30 @@ const styles = css `
     align-items: center;
   }
 `;
+/**
+ * @deprecated Use `controlWrapperTemplate` instead. The `<control-wrapper>` custom element
+ * will be removed in a future major version. Migrate to the light-DOM `controlWrapperTemplate`
+ * function which renders inline within the parent renderer's template.
+ */
 let ControlWrapper = class ControlWrapper extends FASTElement {
     constructor() {
         super(...arguments);
         this.hideLabel = false;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        logger.warn('<control-wrapper> is deprecated and will be removed in a future major version. ' +
+            'Migrate to the `controlWrapperTemplate` function for light-DOM rendering.');
+    }
     get showDescription() {
-        return !isDescriptionHidden(this.control.visible, this.control.description, this.control.isFocused, !!this.control.config.showUnfocusedDescription);
+        var _a;
+        return !isDescriptionHidden(this.control.visible, this.control.description, this.control.isFocused, !!((_a = this.control.config) === null || _a === void 0 ? void 0 : _a.showUnfocusedDescription));
     }
     get computedLabel() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if ((_c = (_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.uischema) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.hideLabel)
             return '';
-        return computeLabel(this.control.label, this.control.required, !!this.control.config.hideRequiredAsterisk);
+        return computeLabel(this.control.label, this.control.required, !!((_d = this.control.config) === null || _d === void 0 ? void 0 : _d.hideRequiredAsterisk));
     }
     get getPrefixedTooltip() {
         var _a, _b;
@@ -164,7 +317,7 @@ __decorate([
 ControlWrapper = __decorate([
     customElement({
         name: 'control-wrapper',
-        styles,
+        styles: deprecatedControlWrapperStyles,
         template: ControlWrapperRendererTemplate,
     })
 ], ControlWrapper);

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

@@ -2,6 +2,7 @@ import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { GenesisType } from '../../utils';
 import { isOneOfDate } from '../testers/isDate';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { DATE_CONTROL_RANK } from './RenderersRanks';
 /**
  * @internal
@@ -18,48 +19,45 @@ const typeSwitch = (control) => {
 };
 export const DateControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <control-wrapper
-      :control=${(x) => x.control}
-      :jsonForms=${(x) => x.jsonforms}
-      :touched=${(x) => x.touched}
-      ?submitted=${(x) => x.submitted}
-      prefix="${prefix}"
-    >
-      <${prefix}-text-field
-        :value=${(x) => {
-    if (!x.control.data)
-        return '';
-    const type = typeSwitch(x.control);
-    const date = new Date(x.control.data);
-    const padded = (dateComponent) => dateComponent.toString().padStart(2, '0');
-    const year = date.getFullYear();
-    const month = padded(date.getMonth() + 1);
-    const day = padded(date.getDate());
-    const hour = padded(date.getHours());
-    const minute = padded(date.getMinutes());
-    return (`${year}-${month}-${day}` + (type === 'datetime-local' ? `T${hour}:${minute}` : ''));
-}}
-        id=${(x) => x.control.path}
-        type="${(x) => typeSwitch(x.control)}"
-        data-test-id=${(x) => x.control.path}
-        ?required=${(x) => x.control.required}
-        ?disabled=${(x) => !x.control.enabled}
-        tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
-        @blur=${(x, c) => {
-    const target = c.event.target;
-    const inputValue = target.value;
-    x.onBlur();
-    if (inputValue) {
-        const timestamp = new Date(inputValue).getTime();
-        x.control.handleChange(x.control.path, timestamp);
-    }
-    else {
-        x.control.handleChange(x.control.path, undefined);
-    }
-}}"
-        style="width: 100%"
-      ></${prefix}-text-field>
-    </control-wrapper>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-text-field
+          :value=${(x) => {
+        if (!x.control.data)
+            return '';
+        const type = typeSwitch(x.control);
+        const date = new Date(x.control.data);
+        const padded = (dateComponent) => dateComponent.toString().padStart(2, '0');
+        const year = date.getFullYear();
+        const month = padded(date.getMonth() + 1);
+        const day = padded(date.getDate());
+        const hour = padded(date.getHours());
+        const minute = padded(date.getMinutes());
+        return (`${year}-${month}-${day}` + (type === 'datetime-local' ? `T${hour}:${minute}` : ''));
+    }}
+          id=${(x) => x.control.path}
+          type="${(x) => typeSwitch(x.control)}"
+          data-test-id=${(x) => x.control.path}
+          ?required=${(x) => x.control.required}
+          ?disabled=${(x) => !x.control.enabled}
+          tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
+          @blur=${(x, c) => {
+        const target = c.event.target;
+        const inputValue = target.value;
+        x.onBlur();
+        if (inputValue) {
+            const timestamp = new Date(inputValue).getTime();
+            x.control.handleChange(x.control.path, timestamp);
+        }
+        else {
+            x.control.handleChange(x.control.path, undefined);
+        }
+    }}"
+          style="width: 100%"
+        ></${prefix}-text-field>
+      `,
+})}
   </template>
 `;
 export const DateControlRendererEntry = {
@@ -67,5 +65,5 @@ export const DateControlRendererEntry = {
     ${(x) => DateControlRendererTemplate(x.prefix)}
   `,
     tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),
-    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
+    mapper: mapStateToControlProps,
 };

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

@@ -3,6 +3,7 @@ import { html, repeat } from '@microsoft/fast-element';
 import { capitalCase } from 'change-case';
 import { comboboxRendererStyles } from '../../form.styles';
 import { isOneOfEnum } from '../testers/isOneOfEnum';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { ENUM_CONTROL_RANK } from './RenderersRanks';
 const getOptionLabel = (option, labelRowFormatter) => labelRowFormatter ? labelRowFormatter(option.label) : capitalCase(option.label);
 // overrides https://github.com/eclipsesource/jsonforms/blob/69441cdfc48f359850d87fa4b842856f1f139eb2/packages/core/src/util/renderer.ts#L515
@@ -40,33 +41,32 @@ const displaySetOrDefaultData = (dispatchRenderer) => {
 };
 export const EnumControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <style>${comboboxRendererStyles(prefix)}</style>
-    <control-wrapper
-      :control=${(x) => x.control}
-      :jsonForms=${(x) => x.jsonforms}
-      :touched=${(x) => x.touched}
-      ?submitted=${(x) => x.submitted}
-      prefix="${prefix}"
-    >
-      <${prefix}-combobox
-        style="width: 100%; min-width: 200px;"
-        autocomplete=${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) === 'startsWith' ? 'both' : 'list'); }}
-        filter-mode=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) || 'contains'; }}
-        ?disabled=${(x) => !x.control.enabled}
-        :value=${(x) => displaySetOrDefaultData(x)}
-        tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
-        @change=${(x, c) => updateEnumData(x, c.event.target.value)}
-        id=${(x) => x.control.path}
-        data-test-id=${(x) => x.control.path}
-      >
-        ${repeat((x) => x.control.options, html `
-            <${prefix}-option>${(x, ctx) => {
-    var _a, _b, _c, _d;
-    return getOptionLabel(x, (_d = (_c = (_b = (_a = ctx.parent) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.labelRowFormatter);
-}}</${prefix}-option>
-          `)}
-      </${prefix}-combobox>
-    </control-wrapper>
+    <style>
+      ${comboboxRendererStyles(prefix)}
+    </style>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-combobox
+          style="width: 100%; min-width: 200px;"
+          autocomplete=${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) === 'startsWith' ? 'both' : 'list'); }}
+          filter-mode=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) || 'contains'; }}
+          ?disabled=${(x) => !x.control.enabled}
+          :value=${(x) => displaySetOrDefaultData(x)}
+          tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
+          @change=${(x, c) => updateEnumData(x, c.event.target.value)}
+          id=${(x) => x.control.path}
+          data-test-id=${(x) => x.control.path}
+        >
+          ${repeat((x) => x.control.options, html `
+              <${prefix}-option>${(x, ctx) => {
+        var _a, _b, _c, _d;
+        return getOptionLabel(x, (_d = (_c = (_b = (_a = ctx.parent) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.labelRowFormatter);
+    }}</${prefix}-option>
+            `)}
+        </${prefix}-combobox>
+      `,
+})}
   </template>
 `;
 export const EnumControlRendererEntry = {

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

@@ -1,6 +1,7 @@
 import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html, repeat } from '@microsoft/fast-element';
 import { optionIs } from '../testers/optionIs';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { ENUM_RADIO_GROUP_CONTROL_RANK } from './RenderersRanks';
 const radioGroupStyles = (prefix) => `
   ${prefix}-radio-group {
@@ -19,38 +20,35 @@ const radioGroupStyles = (prefix) => `
   }
 `;
 export const EnumRadioGroupControlRendererTemplate = (prefix = 'zero') => html `
-    <template>
-      <style>
-        ${radioGroupStyles(prefix)}
-      </style>
-      <control-wrapper
-        :control=${(x) => x.control}
-        :jsonForms=${(x) => x.jsonforms}
-        :touched=${(x) => x.touched}
-        ?submitted=${(x) => x.submitted}
-        prefix="${prefix}"
-      >
-        <${prefix}-radio-group
-          orientation="${(x) => { var _a, _b, _c; return (_c = (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.orientation) !== null && _c !== void 0 ? _c : 'horizontal'; }}"
-          value=${(x) => { var _a; return (_a = x.control.data) !== null && _a !== void 0 ? _a : ''; }}
-          ?disabled=${(x) => !x.control.enabled}
-          id=${(x) => x.control.path}
-          data-test-id=${(x) => x.control.path}
-          @change=${(x, c) => {
-    var _a;
-    const target = c.event.currentTarget;
-    const value = (_a = target.value) !== null && _a !== void 0 ? _a : '';
-    x.control.handleChange(x.control.path, value === '' ? null : value);
-    x.onBlur();
-}}
-        >
-          ${repeat((x) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = x.control) === null || _a === void 0 ? void 0 : _a.uischema) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : []; }, html `
-              <${prefix}-radio value=${(opt) => opt.value}>${(opt) => opt.label}</${prefix}-radio>
-            `)}
-        </${prefix}-radio-group>
-      </control-wrapper>
-    </template>
-  `;
+  <template>
+    <style>
+      ${radioGroupStyles(prefix)}
+    </style>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+          <${prefix}-radio-group
+            orientation="${(x) => { var _a, _b, _c; return (_c = (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.orientation) !== null && _c !== void 0 ? _c : 'horizontal'; }}"
+            value=${(x) => { var _a; return (_a = x.control.data) !== null && _a !== void 0 ? _a : ''; }}
+            ?disabled=${(x) => !x.control.enabled}
+            id=${(x) => x.control.path}
+            data-test-id=${(x) => x.control.path}
+            @change=${(x, c) => {
+        var _a;
+        const target = c.event.currentTarget;
+        const value = (_a = target.value) !== null && _a !== void 0 ? _a : '';
+        x.control.handleChange(x.control.path, value === '' ? null : value);
+        x.onBlur();
+    }}
+          >
+            ${repeat((x) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = x.control) === null || _a === void 0 ? void 0 : _a.uischema) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : []; }, html `
+                <${prefix}-radio value=${(opt) => opt.value}>${(opt) => opt.label}</${prefix}-radio>
+              `)}
+          </${prefix}-radio-group>
+        `,
+})}
+  </template>
+`;
 /**
  * A JSON Forms renderer that renders enum options as a radio-group.
  *

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

@@ -2,6 +2,7 @@ import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { GenesisType } from '../../utils';
 import { isOneOfDate } from '../testers/isDate';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { DATE_CONTROL_RANK } from './RenderersRanks';
 /**
  * @internal
@@ -25,82 +26,85 @@ const formatDateValue = (timestamp, inputType) => {
 };
 export const DateControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <control-wrapper :control=${(x) => x.control} ?submitted=${(x) => x.submitted} prefix="${prefix}">
-      <${prefix}-text-field
-        :value=${(x) => {
-    var _a;
-    const inputType = typeSwitch(x.control);
-    return formatDateValue((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min, inputType);
-}}
-        id=${(x) => `min-${x.control.path}`}
-        type="${(x) => typeSwitch(x.control)}"
-        data-test-id=${(x) => `min-${x.control.path}`}
-        tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
-        @blur=${(x, c) => {
-    var _a, _b, _c;
-    const target = c.event.target;
-    const inputValue = target.value;
-    const inputType = typeSwitch(x.control);
-    let minValue;
-    if (inputValue) {
-        minValue = new Date(inputValue).getTime();
-    }
-    const maxValue = ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max) !== undefined &&
-        minValue !== undefined &&
-        ((_b = x.control.data) === null || _b === void 0 ? void 0 : _b.max) < minValue
-        ? undefined
-        : (_c = x.control.data) === null || _c === void 0 ? void 0 : _c.max;
-    x.control.handleChange(x.control.path, {
-        min: minValue,
-        max: maxValue,
-        type: inputType === 'datetime-local' ? 'datetime' : 'date',
-    });
-    x.onBlur();
-}}
-        style="width: 100%"
-      ></${prefix}-text-field>
-      <span
-        style="
-        font-size: xx-large; 
-        color: var(--neutral-stroke-divider-rest);
-        padding: calc(var(--design-unit) * 1px);"
-      >
-        -
-      </span>
-      <${prefix}-text-field
-        :value=${(x) => {
-    var _a;
-    const inputType = typeSwitch(x.control);
-    return formatDateValue((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max, inputType);
-}}
-        id=${(x) => `max-${x.control.path}`}
-        type="${(x) => typeSwitch(x.control)}"
-        data-test-id=${(x) => `max-${x.control.path}`}
-        tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
-        @blur=${(x, c) => {
-    var _a, _b, _c;
-    const target = c.event.target;
-    const inputValue = target.value;
-    const inputType = typeSwitch(x.control);
-    let maxValue;
-    if (inputValue) {
-        maxValue = new Date(inputValue).getTime();
-    }
-    const minValue = ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min) !== undefined &&
-        maxValue !== undefined &&
-        ((_b = x.control.data) === null || _b === void 0 ? void 0 : _b.min) > maxValue
-        ? undefined
-        : (_c = x.control.data) === null || _c === void 0 ? void 0 : _c.min;
-    x.control.handleChange(x.control.path, {
-        min: minValue,
-        max: maxValue,
-        type: inputType === 'datetime-local' ? 'datetime' : 'date',
-    });
-    x.onBlur();
-}}
-        style="width: 100%"
-      ></${prefix}-text-field>
-    </control-wrapper>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-text-field
+          :value=${(x) => {
+        var _a;
+        const inputType = typeSwitch(x.control);
+        return formatDateValue((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min, inputType);
+    }}
+          id=${(x) => `min-${x.control.path}`}
+          type="${(x) => typeSwitch(x.control)}"
+          data-test-id=${(x) => `min-${x.control.path}`}
+          tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
+          @blur=${(x, c) => {
+        var _a, _b, _c;
+        const target = c.event.target;
+        const inputValue = target.value;
+        const inputType = typeSwitch(x.control);
+        let minValue;
+        if (inputValue) {
+            minValue = new Date(inputValue).getTime();
+        }
+        const maxValue = ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max) !== undefined &&
+            minValue !== undefined &&
+            ((_b = x.control.data) === null || _b === void 0 ? void 0 : _b.max) < minValue
+            ? undefined
+            : (_c = x.control.data) === null || _c === void 0 ? void 0 : _c.max;
+        x.control.handleChange(x.control.path, {
+            min: minValue,
+            max: maxValue,
+            type: inputType === 'datetime-local' ? 'datetime' : 'date',
+        });
+        x.onBlur();
+    }}
+          style="width: 100%"
+        ></${prefix}-text-field>
+        <span
+          style="
+          font-size: xx-large; 
+          color: var(--neutral-stroke-divider-rest);
+          padding: calc(var(--design-unit) * 1px);"
+        >
+          -
+        </span>
+        <${prefix}-text-field
+          :value=${(x) => {
+        var _a;
+        const inputType = typeSwitch(x.control);
+        return formatDateValue((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max, inputType);
+    }}
+          id=${(x) => `max-${x.control.path}`}
+          type="${(x) => typeSwitch(x.control)}"
+          data-test-id=${(x) => `max-${x.control.path}`}
+          tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
+          @blur=${(x, c) => {
+        var _a, _b, _c;
+        const target = c.event.target;
+        const inputValue = target.value;
+        const inputType = typeSwitch(x.control);
+        let maxValue;
+        if (inputValue) {
+            maxValue = new Date(inputValue).getTime();
+        }
+        const minValue = ((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min) !== undefined &&
+            maxValue !== undefined &&
+            ((_b = x.control.data) === null || _b === void 0 ? void 0 : _b.min) > maxValue
+            ? undefined
+            : (_c = x.control.data) === null || _c === void 0 ? void 0 : _c.min;
+        x.control.handleChange(x.control.path, {
+            min: minValue,
+            max: maxValue,
+            type: inputType === 'datetime-local' ? 'datetime' : 'date',
+        });
+        x.onBlur();
+    }}
+          style="width: 100%"
+        ></${prefix}-text-field>
+      `,
+})}
   </template>
 `;
 export const FilterDateControlRendererEntry = {
@@ -108,5 +112,5 @@ export const FilterDateControlRendererEntry = {
     ${(x) => DateControlRendererTemplate(x.prefix)}
   `,
     tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),
-    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
+    mapper: mapStateToControlProps,
 };