@genesislcap/foundation-forms 14.429.1 → 14.429.2

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 = {

package/dist/esm/jsonforms/renderers/LayoutHorizontalRenderer.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_HORIZONTAL_RANK } from './RenderersRanks';
-LayoutWrapper;
 export const LayoutHorizontalRendererTemplate = html `
   <template>
-    <layout-wrapper :control=${(x) => x.control}>
-      <div
-        style="
-      display: flex;
-      flex-direction: row;
-      gap: 10px"
-      >
-        ${repeat((x) => x.control.uischema.elements, html `
-            <dispatch-renderer
-              style="flex: 1; min-width: 0"
-              ?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: flex;
+            flex-direction: row;
+            gap: 10px"
+        >
+          ${repeat((x) => x.control.uischema.elements, html `
+              <dispatch-renderer
+                style="flex: 1; min-width: 0"
+                ?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 LayoutHorizontalEntry = {

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

@@ -1,12 +1,73 @@
 import { __decorate } from "tslib";
 import { isLayout, mapStateToLayoutProps, rankWith } from '@jsonforms/core';
-import { attr, customElement, FASTElement, html, observable, repeat, when, } from '@microsoft/fast-element';
+import { FASTElement, attr, customElement, html, observable, repeat, when, } from '@microsoft/fast-element';
+import { logger } from '../../utils/logger';
 import { LAYOUT_RANK } from './RenderersRanks';
+/**
+ * Light-DOM-friendly layout wrapper that replaces the former `<layout-wrapper>`
+ * custom element. Renders the (optional) control label and, when the control is
+ * visible, composes the provided inner template inline so that bindings stay on
+ * the `DispatchRenderer` source.
+ *
+ * @public
+ */
+export const layoutWrapperTemplate = (options) => {
+    const { innerTemplate, hideLabel = false } = options;
+    return html `
+    ${when((x) => { var _a; return !!((_a = x.control) === null || _a === void 0 ? void 0 : _a.label) && !hideLabel; }, html `
+        <div style="color: var(--neutral-foreground-hint);">${(x) => x.control.label}</div>
+      `)}
+    ${when((x) => { var _a; return (_a = x.control) === null || _a === void 0 ? void 0 : _a.visible; }, innerTemplate)}
+  `;
+};
+export const LayoutRendererTemplate = html `
+  <template>
+    ${layoutWrapperTemplate({
+    innerTemplate: html `
+        <div>
+          ${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>
+      `,
+})}
+  </template>
+`;
+export const LayoutRendererEntry = {
+    renderer: LayoutRendererTemplate,
+    tester: rankWith(LAYOUT_RANK, isLayout),
+    mapper: mapStateToLayoutProps,
+};
+// ---------------------------------------------------------------------------
+// Deprecated: <layout-wrapper> custom element
+// ---------------------------------------------------------------------------
+/**
+ * @deprecated Use `layoutWrapperTemplate` instead. The `<layout-wrapper>` custom element
+ * will be removed in a future major version. Migrate to the light-DOM `layoutWrapperTemplate`
+ * function which renders inline within the parent renderer's template.
+ */
 let LayoutWrapper = class LayoutWrapper extends FASTElement {
     constructor() {
         super(...arguments);
         this.hideLabel = false;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        logger.warn('<layout-wrapper> is deprecated and will be removed in a future major version. ' +
+            'Migrate to the `layoutWrapperTemplate` function for light-DOM rendering.');
+    }
 };
 __decorate([
     observable
@@ -28,31 +89,3 @@ LayoutWrapper = __decorate([
     })
 ], LayoutWrapper);
 export { LayoutWrapper };
-export const LayoutRendererTemplate = html `
-  <template>
-    <layout-wrapper :control=${(x) => x.control}>
-      <div>
-        ${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 LayoutRendererEntry = {
-    renderer: LayoutRendererTemplate,
-    tester: rankWith(LAYOUT_RANK, isLayout),
-    mapper: mapStateToLayoutProps,
-};