@genesislcap/foundation-forms 14.427.2-alpha-e0ffaad.0 → 14.428.1-alpha-035cbdd.0

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

@@ -2,7 +2,6 @@ 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
@@ -26,85 +25,82 @@ const formatDateValue = (timestamp, inputType) => {
 };
 export const DateControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    ${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>
-      `,
-})}
+    <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>
   </template>
 `;
 export const FilterDateControlRendererEntry = {
@@ -112,5 +108,5 @@ export const FilterDateControlRendererEntry = {
     ${(x) => DateControlRendererTemplate(x.prefix)}
   `,
     tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),
-    mapper: mapStateToControlProps,
+    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
 };

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

@@ -1,63 +1,60 @@
 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>
-    ${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>
-      `,
-})}
+    <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>
   </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>
-    ${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>
-      `,
-})}
+    <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>
   </template>
 `;
 export const FilterTimeControlRendererEntry = {
@@ -79,5 +79,5 @@ export const FilterTimeControlRendererEntry = {
     ${(x) => TimeControlRendererTemplate(x.prefix)}
   `,
     tester: rankWith(TIME_CONTROL_RANK, isOneOfTime),
-    mapper: mapStateToControlProps,
+    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
 };

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

@@ -1,18 +1,19 @@
 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 : ''); }}">
-      ${controlWrapperTemplate({
-    prefix: 'zero',
-    innerTemplate: html `
-          <array-list-wrapper :form=${(x) => x} :control=${(x) => x.control}></array-list-wrapper>
-        `,
-})}
+      <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>
     </div>
   </template>
 `;

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

@@ -1,36 +1,35 @@
 import { mapStateToLayoutProps, rankWith } from '@jsonforms/core';
 import { html, repeat } from '@microsoft/fast-element';
-import { layoutWrapperTemplate } from './LayoutRenderer';
+import { LayoutWrapper } from './LayoutRenderer';
 import { LAYOUT_FORM_GRID_RANK } from './RenderersRanks';
+LayoutWrapper;
 export const LayoutFormGridRendererTemplate = html `
   <template>
-    ${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>
-      `,
+    <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,
 })}
+            ></dispatch-renderer>
+          `)}
+      </div>
+    </layout-wrapper>
   </template>
 `;
 export const LayoutFormGridEntry = {

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

@@ -1,45 +1,41 @@
 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>
-    ${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>
-      `,
+    <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,
 })}
+            ></dispatch-renderer>
+          `)}
+      </div>
+    </layout-wrapper>
   </template>
 `;
 export const LayoutGroupRendererEntry = {