@genesislcap/foundation-forms 14.427.0 → 14.427.2-alpha-e0ffaad.0

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,
 };

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

@@ -1,60 +1,63 @@
 import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { isOneOfNumber } from '../testers/isOneOfNumber';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { NUMBER_CONTROL_RANK } from './RenderersRanks';
 export const FilterNumberControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <control-wrapper :control=${(x) => x.control} ?submitted=${(x) => x.submitted} prefix="${prefix}"
-    >
-      <${prefix}-text-field
-        :value=${(x) => { var _a; return (((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min) === undefined ? '' : x.control.data.min); }}
-        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) => {
-    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%"
-      ></${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; return (((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max) === undefined ? '' : x.control.data.max); }}
-        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) => {
-    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%"
-      ></${prefix}-text-field>
-    </control-wrapper>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-text-field
+          :value=${(x) => { var _a; return (((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min) === undefined ? '' : x.control.data.min); }}
+          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) => {
+        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%"
+        ></${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; return (((_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max) === undefined ? '' : x.control.data.max); }}
+          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) => {
+        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%"
+        ></${prefix}-text-field>
+      `,
+})}
   </template>
 `;
 export const FilterNumberControlRendererEntry = {

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

@@ -1,77 +1,77 @@
 import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { isOneOfTime } from '../testers/isTime';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { TIME_CONTROL_RANK } from './RenderersRanks';
 export const TimeControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <control-wrapper :control=${(x) => x.control} ?submitted=${(x) => x.submitted} prefix="${prefix}">
-      
-    
-    <${prefix}-text-field
-        :value=${(x) => {
-    var _a;
-    const time = (_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min;
-    if (!time)
-        return '';
-    return `${time}`;
-}}
-
-        id=${(x) => `min-${x.control.path}`}
-        type="time"
-        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;
-    const minValue = c.event.target.control.value;
-    const maxValue = (_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max;
-    const setMin = minValue ? minValue : undefined;
-    const setMax = maxValue < minValue ? undefined : (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.max;
-    x.control.handleChange(x.control.path, {
-        min: setMin,
-        max: setMax,
-        type: 'time',
-    });
-    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 time = (_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max;
-    if (!time)
-        return '';
-    return `${time}`;
-}}
-        id=${(x) => `max-${x.control.path}`}
-        type="time"
-        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;
-    const maxValue = c.event.target.control.value;
-    const minValue = (_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min;
-    const setMin = minValue > maxValue ? undefined : (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.min;
-    const setMax = maxValue ? maxValue : undefined;
-    x.control.handleChange(x.control.path, {
-        min: setMin,
-        max: setMax,
-        type: 'time',
-    });
-    x.onBlur();
-}}
-        style="width: 100%"
-      ></${prefix}-text-field>
-    </control-wrapper>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-text-field
+          :value=${(x) => {
+        var _a;
+        const time = (_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min;
+        if (!time)
+            return '';
+        return `${time}`;
+    }}
+          id=${(x) => `min-${x.control.path}`}
+          type="time"
+          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;
+        const minValue = c.event.target.control.value;
+        const maxValue = (_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max;
+        const setMin = minValue ? minValue : undefined;
+        const setMax = maxValue < minValue ? undefined : (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.max;
+        x.control.handleChange(x.control.path, {
+            min: setMin,
+            max: setMax,
+            type: 'time',
+        });
+        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 time = (_a = x.control.data) === null || _a === void 0 ? void 0 : _a.max;
+        if (!time)
+            return '';
+        return `${time}`;
+    }}
+          id=${(x) => `max-${x.control.path}`}
+          type="time"
+          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;
+        const maxValue = c.event.target.control.value;
+        const minValue = (_a = x.control.data) === null || _a === void 0 ? void 0 : _a.min;
+        const setMin = minValue > maxValue ? undefined : (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.min;
+        const setMax = maxValue ? maxValue : undefined;
+        x.control.handleChange(x.control.path, {
+            min: setMin,
+            max: setMax,
+            type: 'time',
+        });
+        x.onBlur();
+    }}
+          style="width: 100%"
+        ></${prefix}-text-field>
+      `,
+})}
   </template>
 `;
 export const FilterTimeControlRendererEntry = {
@@ -79,5 +79,5 @@ export const FilterTimeControlRendererEntry = {
     ${(x) => TimeControlRendererTemplate(x.prefix)}
   `,
     tester: rankWith(TIME_CONTROL_RANK, isOneOfTime),
-    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
+    mapper: mapStateToControlProps,
 };

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

@@ -1,19 +1,18 @@
 import { mapDispatchToArrayControlProps, mapStateToArrayLayoutProps, rankWith, } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { isArray } from '../testers/isArray';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { LAYOUT_ARRAY_RANK } from './RenderersRanks';
 const borderStyle = 'padding: 5px; border-radius: 3px; border: 1px solid var(--neutral-stroke-rest);';
 export const LayoutArrayRendererTemplate = html `
   <template>
     <div style="${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.border) ? borderStyle : ''); }}">
-      <control-wrapper
-        :control=${(x) => x.control}
-        :jsonForms=${(x) => x.jsonforms}
-        :touched=${(x) => x.touched}
-        ?submitted=${(x) => x.submitted}
-      >
-        <array-list-wrapper :form=${(x) => x} :control=${(x) => x.control}></array-list-wrapper>
-      </control-wrapper>
+      ${controlWrapperTemplate({
+    prefix: 'zero',
+    innerTemplate: html `
+          <array-list-wrapper :form=${(x) => x} :control=${(x) => x.control}></array-list-wrapper>
+        `,
+})}
     </div>
   </template>
 `;

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

@@ -1,35 +1,36 @@
 import { mapStateToLayoutProps, rankWith } from '@jsonforms/core';
 import { html, repeat } from '@microsoft/fast-element';
-import { LayoutWrapper } from './LayoutRenderer';
+import { layoutWrapperTemplate } from './LayoutRenderer';
 import { LAYOUT_FORM_GRID_RANK } from './RenderersRanks';
-LayoutWrapper;
 export const LayoutFormGridRendererTemplate = html `
   <template>
-    <layout-wrapper :control=${(x) => x.control}>
-      <div
-        style="
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          gap: 8px;
-        "
-      >
-        ${repeat((x) => x.control.uischema.elements, html `
-            <dispatch-renderer
-              ?submitted=${(x, ctx) => ctx.parent.submitted}
-              :dispatch=${(x, ctx) => ctx.parent.dispatch}
-              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}
-              :prefix=${(x, ctx) => ctx.parent.prefix}
-              :props=${(x, ctx) => ({
-    uischema: x,
-    schema: ctx.parent.control.schema,
-    renderers: ctx.parent.control.renderers,
-    path: ctx.parent.control.path,
-    enabled: ctx.parent.control.enabled,
+    ${layoutWrapperTemplate({
+    innerTemplate: html `
+        <div
+          style="
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 8px;
+          "
+        >
+          ${repeat((x) => x.control.uischema.elements, html `
+              <dispatch-renderer
+                ?submitted=${(x, ctx) => ctx.parent.submitted}
+                :dispatch=${(x, ctx) => ctx.parent.dispatch}
+                :jsonforms=${(x, ctx) => ctx.parent.jsonforms}
+                :prefix=${(x, ctx) => ctx.parent.prefix}
+                :props=${(x, ctx) => ({
+        uischema: x,
+        schema: ctx.parent.control.schema,
+        renderers: ctx.parent.control.renderers,
+        path: ctx.parent.control.path,
+        enabled: ctx.parent.control.enabled,
+    })}
+              ></dispatch-renderer>
+            `)}
+        </div>
+      `,
 })}
-            ></dispatch-renderer>
-          `)}
-      </div>
-    </layout-wrapper>
   </template>
 `;
 export const LayoutFormGridEntry = {

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

@@ -1,41 +1,45 @@
 import { isGroup, mapStateToLayoutProps, rankWith } from '@jsonforms/core';
 import { html, repeat, when } from '@microsoft/fast-element';
+import { layoutWrapperTemplate } from './LayoutRenderer';
 import { LAYOUT_GROUP_RANK } from './RenderersRanks';
 export const LayoutGroupRendererTemplate = html `
   <template>
-    <layout-wrapper :control=${(x) => x.control} hide-label>
-      <div>
-        ${when((x) => x.control.label, html `
-            <div
-              for="${(x) => x.control.path + '-wrapper'}"
-              style="color: var(--neutral-foreground-rest);
-                   padding-bottom: calc(var(--design-unit) * 1px);
-                   margin-bottom: calc(var(--design-unit) * 4px);
-                   font-weight: 600;
-                   font-size: var(--type-ramp-base-font-size);
-                   display: flex;
-                   justify-content: space-between;"
-            >
-              ${(x) => x.control.label}
-            </div>
-          `)}
-        ${repeat((x) => x.control.uischema.options.childElements, html `
-            <dispatch-renderer
-              ?submitted=${(x, ctx) => ctx.parent.submitted}
-              :dispatch=${(x, ctx) => ctx.parent.dispatch}
-              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}
-              :prefix=${(x, ctx) => ctx.parent.prefix}
-              :props=${(x, ctx) => ({
-    uischema: x,
-    schema: ctx.parent.control.schema,
-    renderers: ctx.parent.control.renderers,
-    path: ctx.parent.control.path,
-    enabled: ctx.parent.control.enabled,
+    ${layoutWrapperTemplate({
+    hideLabel: true,
+    innerTemplate: html `
+        <div>
+          ${when((x) => x.control.label, html `
+              <div
+                for="${(x) => x.control.path + '-wrapper'}"
+                style="color: var(--neutral-foreground-rest);
+                     padding-bottom: calc(var(--design-unit) * 1px);
+                     margin-bottom: calc(var(--design-unit) * 4px);
+                     font-weight: 600;
+                     font-size: var(--type-ramp-base-font-size);
+                     display: flex;
+                     justify-content: space-between;"
+              >
+                ${(x) => x.control.label}
+              </div>
+            `)}
+          ${repeat((x) => x.control.uischema.options.childElements, html `
+              <dispatch-renderer
+                ?submitted=${(x, ctx) => ctx.parent.submitted}
+                :dispatch=${(x, ctx) => ctx.parent.dispatch}
+                :jsonforms=${(x, ctx) => ctx.parent.jsonforms}
+                :prefix=${(x, ctx) => ctx.parent.prefix}
+                :props=${(x, ctx) => ({
+        uischema: x,
+        schema: ctx.parent.control.schema,
+        renderers: ctx.parent.control.renderers,
+        path: ctx.parent.control.path,
+        enabled: ctx.parent.control.enabled,
+    })}
+              ></dispatch-renderer>
+            `)}
+        </div>
+      `,
 })}
-            ></dispatch-renderer>
-          `)}
-      </div>
-    </layout-wrapper>
   </template>
 `;
 export const LayoutGroupRendererEntry = {