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

package/dist/esm/jsonforms/renderers/LayoutHorizontalRenderer.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_HORIZONTAL_RANK } from './RenderersRanks';
+LayoutWrapper;
 export const LayoutHorizontalRendererTemplate = html `
   <template>
-    ${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>
-      `,
+    <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,
 })}
+            ></dispatch-renderer>
+          `)}
+      </div>
+    </layout-wrapper>
   </template>
 `;
 export const LayoutHorizontalEntry = {

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

@@ -1,46 +1,54 @@
+import { __decorate } from "tslib";
 import { isLayout, mapStateToLayoutProps, rankWith } from '@jsonforms/core';
-import { html, repeat, when } from '@microsoft/fast-element';
+import { attr, customElement, FASTElement, html, observable, repeat, when, } from '@microsoft/fast-element';
 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 `
+let LayoutWrapper = class LayoutWrapper extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.hideLabel = false;
+    }
+};
+__decorate([
+    observable
+], LayoutWrapper.prototype, "control", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'hide-label' })
+], LayoutWrapper.prototype, "hideLabel", void 0);
+LayoutWrapper = __decorate([
+    customElement({
+        name: 'layout-wrapper',
+        template: html `
+    ${when((x) => x.control.label && !x.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)}
-  `;
-};
+    ${when((x) => { var _a; return (_a = x.control) === null || _a === void 0 ? void 0 : _a.visible; }, html `
+        <slot></slot>
+      `)}
+  `,
+    })
+], LayoutWrapper);
+export { LayoutWrapper };
 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>
-      `,
+    <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 = {

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

@@ -1,17 +1,17 @@
 import { mapStateToLayoutProps, rankWith } from '@jsonforms/core';
 import { html, repeat } from '@microsoft/fast-element';
-import { layoutWrapperTemplate } from './LayoutRenderer';
+import { LayoutWrapper } from './LayoutRenderer';
 import { LAYOUT2COLUMNS_RANK } from './RenderersRanks';
+LayoutWrapper;
 export const LayoutVertical2ColumnsRendererTemplate = html `
   <template>
-    ${layoutWrapperTemplate({
-    innerTemplate: html `
-        <div
-          style="
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: space-between;"
+    <layout-wrapper :control=${(x) => x.control}>
+      <div
+        style="
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          justify-content: space-between;"
         >
           ${repeat((x) => x.control.uischema.elements, html `
               <div style="width: 49%">
@@ -21,18 +21,17 @@ export const LayoutVertical2ColumnsRendererTemplate = html `
                   :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,
-    })}
+    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>
-            `)}
         </div>
-      `,
-})}
+      `)}
+    </layout-wrapper>
   </template>
 `;
 export const LayoutVertical2ColumnsEntry = {

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

@@ -1,7 +1,6 @@
 import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { optionIs } from '../testers/optionIs';
-import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { MULTICOLUMN_DROPDOWN_CONTROL_RANK } from './RenderersRanks';
 const getOptions = (x) => x.control.uischema.options;
 /**
@@ -33,44 +32,47 @@ const getOptions = (x) => x.control.uischema.options;
  * ```
  */
 export const MulticolumnDropdownControlRendererTemplate = (prefix = 'zero') => html `
-  <template>
-    ${controlWrapperTemplate({
-    prefix,
-    innerTemplate: html `
-          <${prefix}-multicolumn-dropdown
-            style="width: 100%;"
-            resource-name=${(x) => getOptions(x).allOptionsResourceName}
-            value-key=${(x) => getOptions(x).valueField}
-            label-key=${(x) => getOptions(x).labelField}
-            ?disabled=${(x) => !x.control.enabled}
-            ?dropdown-above=${(x) => { var _a, _b; return (_b = (_a = getOptions(x).dropdownPlacement) === null || _a === void 0 ? void 0 : _a.startsWith('top')) !== null && _b !== void 0 ? _b : false; }}
-            ?dropdown-left=${(x) => { var _a, _b; return (_b = (_a = getOptions(x).dropdownPlacement) === null || _a === void 0 ? void 0 : _a.endsWith('left')) !== null && _b !== void 0 ? _b : false; }}
-            ?advanced-search-req=${(x) => !!getOptions(x).advancedSearchReq}
-            :searchKey=${(x) => getOptions(x).searchKey}
-            :request=${(x) => getOptions(x).request}
-            :columnDefinitions=${(x) => getOptions(x).columnDefinitions}
-            :baseCriteria=${(x) => getOptions(x).baseCriteria}
-            :dropdownWidth=${(x) => getOptions(x).dropdownWidth}
-            :value=${(x) => x.control.data}
-            id=${(x) => x.control.path}
-            data-test-id=${(x) => x.control.path}
-            @change=${(x, c) => {
-        var _a, _b;
-        const value = (_a = c.event.detail) !== null && _a !== void 0 ? _a : null;
-        // Guard against the feedback loop caused by the :value binding.
-        // MulticolumnDropdown's set value() always calls emitValue() (even when set
-        // programmatically), which fires a 'change' event that would otherwise trigger
-        // handleChange → form re-render → :value re-bind → set value() → loop.
-        if (value !== ((_b = x.control.data) !== null && _b !== void 0 ? _b : null)) {
-            x.control.handleChange(x.control.path, value);
-            x.onBlur();
-        }
-    }}
-          ></${prefix}-multicolumn-dropdown>
-        `,
-})}
-  </template>
-`;
+    <template>
+      <control-wrapper
+        :control=${(x) => x.control}
+        :jsonForms=${(x) => x.jsonforms}
+        :touched=${(x) => x.touched}
+        ?submitted=${(x) => x.submitted}
+        prefix="${prefix}"
+      >
+        <${prefix}-multicolumn-dropdown
+          style="width: 100%;"
+          resource-name=${(x) => getOptions(x).allOptionsResourceName}
+          value-key=${(x) => getOptions(x).valueField}
+          label-key=${(x) => getOptions(x).labelField}
+          ?disabled=${(x) => !x.control.enabled}
+          ?dropdown-above=${(x) => { var _a, _b; return (_b = (_a = getOptions(x).dropdownPlacement) === null || _a === void 0 ? void 0 : _a.startsWith('top')) !== null && _b !== void 0 ? _b : false; }}
+          ?dropdown-left=${(x) => { var _a, _b; return (_b = (_a = getOptions(x).dropdownPlacement) === null || _a === void 0 ? void 0 : _a.endsWith('left')) !== null && _b !== void 0 ? _b : false; }}
+          ?advanced-search-req=${(x) => !!getOptions(x).advancedSearchReq}
+          :searchKey=${(x) => getOptions(x).searchKey}
+          :request=${(x) => getOptions(x).request}
+          :columnDefinitions=${(x) => getOptions(x).columnDefinitions}
+          :baseCriteria=${(x) => getOptions(x).baseCriteria}
+          :dropdownWidth=${(x) => getOptions(x).dropdownWidth}
+          :value=${(x) => x.control.data}
+          id=${(x) => x.control.path}
+          data-test-id=${(x) => x.control.path}
+          @change=${(x, c) => {
+    var _a, _b;
+    const value = (_a = c.event.detail) !== null && _a !== void 0 ? _a : null;
+    // Guard against the feedback loop caused by the :value binding.
+    // MulticolumnDropdown's set value() always calls emitValue() (even when set
+    // programmatically), which fires a 'change' event that would otherwise trigger
+    // handleChange → form re-render → :value re-bind → set value() → loop.
+    if (value !== ((_b = x.control.data) !== null && _b !== void 0 ? _b : null)) {
+        x.control.handleChange(x.control.path, value);
+        x.onBlur();
+    }
+}}
+        ></${prefix}-multicolumn-dropdown>
+      </control-wrapper>
+    </template>
+  `;
 /** @beta */
 export const MulticolumnDropdownControlRendererEntry = {
     renderer: html `

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

@@ -1,44 +1,44 @@
 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';
 const DEFAULT_MAXIMUM_FRACTION_DIGITS = 3;
 const defaultOptions = {
     maximumFractionDigits: DEFAULT_MAXIMUM_FRACTION_DIGITS,
     minimumFractionDigits: 0,
 };
-function handleNumberChange(x, c) {
-    const value = parseFloat(c.event.target.value);
-    return x.control.handleChange(x.control.path, !isNaN(value) ? value : undefined);
-}
 export const NumberControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    ${controlWrapperTemplate({
-    prefix,
-    innerTemplate: html `
-        <${prefix}-number-field
-          withFormatting=${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.withoutFormatting) ? false : true); }}
-          :options=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.formatOptions) || defaultOptions; }}
-          autocomplete=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.autocomplete) || 'off'; }}
-          prefix=${(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.prefix; }}
-          suffix=${(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.suffix; }}
-          ?hide-affix-from-screen-reader=${(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.hideAffixFromScreenReader; }}
-          :value=${(x) => (x.control.data === undefined ? '' : String(x.control.data))}
-          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=${handleNumberChange}
-          @input=${(x, c) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.changeOnInput) ? handleNumberChange(x, c) : () => { }); }}
-          placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
-          id=${(x) => x.control.path}
-          data-test-id=${(x) => x.control.path}
-          ?required=${(x) => x.control.required}
-          ?disabled=${(x) => !x.control.enabled}
-          hideStep
-          @blur=${(x) => x.onBlur()}
-          style="width: 100%"
-        ></${prefix}-number-field>
-      `,
-})}
+    <control-wrapper
+      :control=${(x) => x.control}
+      :jsonForms=${(x) => x.jsonforms}
+      :touched=${(x) => x.touched}
+      ?submitted=${(x) => x.submitted}
+      prefix="${prefix}"
+    >
+      <${prefix}-number-field
+        withFormatting=${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.withoutFormatting) ? false : true); }}
+        :options=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.formatOptions) || defaultOptions; }}
+        autocomplete=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.autocomplete) || 'off'; }}
+        prefix=${(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.prefix; }}
+        suffix=${(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.suffix; }}
+        ?hide-affix-from-screen-reader=${(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.hideAffixFromScreenReader; }}
+        :value=${(x) => (x.control.data === undefined ? '' : String(x.control.data))}
+        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) => {
+    const value = parseFloat(c.event.target.value);
+    return x.control.handleChange(x.control.path, !isNaN(value) ? value : undefined);
+}}
+        placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
+        id=${(x) => x.control.path}
+        data-test-id=${(x) => x.control.path}
+        ?required=${(x) => x.control.required}
+        ?disabled=${(x) => !x.control.enabled}
+        hideStep
+        @blur=${(x) => x.onBlur()}
+        style="width: 100%"
+      ></${prefix}-number-field>
+    </control-wrapper>
   </template>
 `;
 export const NumberControlRendererEntry = {

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

@@ -1,7 +1,6 @@
 import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html, repeat } from '@microsoft/fast-element';
 import { optionIs } from '../testers/optionIs';
-import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { SEGMENTED_CONTROL_RANK } from './RenderersRanks';
 export const SegmentedControlRendererTemplate = (prefix = 'zero') => html `
   <template>
@@ -20,30 +19,33 @@ export const SegmentedControlRendererTemplate = (prefix = 'zero') => html `
         background: var(--segmented-item-selected-bg);
       }
     </style>
-    ${controlWrapperTemplate({
-    prefix,
-    innerTemplate: html `
-        <${prefix}-segmented-control
-          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) => {
-        x.control.handleChange(x.control.path, c.event.target.value);
-        x.onBlur();
-    }}
-        >
-          ${repeat((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.data) !== null && _c !== void 0 ? _c : []; }, html `
-              <${prefix}-segmented-item
-                value=${(x) => x.value}
-                style=${(x) => { var _a; return `--segmented-item-selected-bg: ${(_a = x.color) !== null && _a !== void 0 ? _a : 'var(--neutral-fill-rest)'}`; }}
-              >
-                ${(x) => x.label}
-              </${prefix}-segmented-item>
-            `)}
-        </${prefix}-segmented-control>
-      `,
-})}
+    <control-wrapper
+      :control=${(x) => x.control}
+      :jsonForms=${(x) => x.jsonforms}
+      :touched=${(x) => x.touched}
+      ?submitted=${(x) => x.submitted}
+      prefix="${prefix}"
+    >
+      <${prefix}-segmented-control
+        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) => {
+    x.control.handleChange(x.control.path, c.event.target.value);
+    x.onBlur();
+}}
+      >
+        ${repeat((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.data) !== null && _c !== void 0 ? _c : []; }, html `
+            <${prefix}-segmented-item
+              value=${(x) => x.value}
+              style=${(x) => { var _a; return `--segmented-item-selected-bg: ${(_a = x.color) !== null && _a !== void 0 ? _a : 'var(--neutral-fill-rest)'}`; }}
+            >
+              ${(x) => x.label}
+            </${prefix}-segmented-item>
+          `)}
+      </${prefix}-segmented-control>
+    </control-wrapper>
   </template>
 `;
 export const SegmentedControlRendererEntry = {

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

@@ -42,7 +42,7 @@ export const StepperWrapperRendererTemplate = (prefix = 'zero') => html `
   </template>
 `;
 const styles = css `
-  stepper-wrapper .tabs-container::part(stepper-panel-container) {
+  .tabs-container::part(stepper-panel-container) {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
@@ -95,7 +95,6 @@ StepperWrapper = __decorate([
     customElement({
         name: 'stepper-wrapper',
         styles,
-        shadowOptions: null,
         template: html `
     ${(x) => StepperWrapperRendererTemplate(x.form.prefix)}
   `,

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

@@ -2,7 +2,6 @@ import { mapStateToControlProps } from '@jsonforms/core';
 import { rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { isArray } from '../testers/isArray';
-import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { ARRAY_CONTROL_RANK } from './RenderersRanks';
 function changeHandler(x, c) {
     const inputValue = c.event.target.value;
@@ -20,23 +19,26 @@ const setValue = (dispatchRenderer) => {
 };
 export const getStringArrayControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    ${controlWrapperTemplate({
-    prefix,
-    innerTemplate: html `
-        <${prefix}-text-field
-          :value=${(x) => setValue(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=${changeHandler}
-          placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
-          id=${(x) => x.control.path}
-          data-test-id=${(x) => x.control.path}
-          ?required=${(x) => x.control.required}
-          ?disabled=${(x) => !x.control.enabled}
-          style="width: 100%"
-          @blur=${(x) => x.onBlur()}
-        ></${prefix}-text-area>
-      `,
-})}
+    <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) => setValue(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=${changeHandler}
+        placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
+        id=${(x) => x.control.path}
+        data-test-id=${(x) => x.control.path}
+        ?required=${(x) => x.control.required}
+        ?disabled=${(x) => !x.control.enabled}
+        style="width: 100%"
+        @blur=${(x) => x.onBlur()}
+      ></${prefix}-text-area>
+    </control-wrapper>
   </template>
 `;
 export const StringArrayEntry = {

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

@@ -1,6 +1,6 @@
 import { whenElse } from '@genesislcap/foundation-utils';
 import { html } from '@microsoft/fast-element';
-import { controlWrapperTemplate } from './ControlWrapperRenderer';
+//   <pre>${(x) => JSON.stringify(x.control, null, 2)}</pre>
 function changeHandler(x, c) {
     var _a, _b, _c;
     const inputValue = c.event.target.value;
@@ -22,46 +22,47 @@ function changeHandler(x, c) {
 }
 export const getStringControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    ${controlWrapperTemplate({
-    prefix,
-    innerTemplate: html `
-        ${whenElse((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.textarea); }, html `
-            <${prefix}-text-field
-              part="text-field"
-              autocomplete=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.autocomplete) || 'off'; }}
-              prefix=${(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.prefix; }}
-              suffix=${(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.suffix; }}
-              ?hide-affix-from-screen-reader=${(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.hideAffixFromScreenReader; }}
-              type=${(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.isPassword) ? 'password' : 'text'); }}
-              :value=${(x) => x.control.data || ''}
-              @input=${(x, c) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.changeOnInput) ? changeHandler(x, c) : () => { }); }}
-              @change=${changeHandler}
-              placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
-              id=${(x) => x.control.path}
-              data-test-id=${(x) => 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; }}"
-              ?required=${(x) => x.control.required}
-              ?disabled=${(x) => !x.control.enabled}
-              style="width: 100%"
-              @blur=${(x) => x.onBlur()}
-            ></${prefix}-text-field>`, html `
-            <${prefix}-text-area
-              part="text-area"
-              :value=${(x) => x.control.data || ''}
-              @input=${(x, c) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.changeOnInput) ? changeHandler(x, c) : () => { }); }}
-              @change=${changeHandler}
-              placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
-              id=${(x) => x.control.path}
-              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; }}"
-              style="width: 100%"
-              @blur=${(x) => x.onBlur()}
-            ></${prefix}-text-area>
-          `)}
-      `,
-})}
+    <control-wrapper
+      :control=${(x) => x.control}
+      :jsonForms=${(x) => x.jsonforms}
+      :touched=${(x) => x.touched}
+      ?submitted=${(x) => x.submitted}
+      prefix="${prefix}"
+    >
+      ${whenElse((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.textarea); }, html `
+          <${prefix}-text-field
+            autocomplete=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.autocomplete) || 'off'; }}
+            prefix=${(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.prefix; }}
+            suffix=${(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.suffix; }}
+            ?hide-affix-from-screen-reader=${(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.hideAffixFromScreenReader; }}
+            type=${(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.isPassword) ? 'password' : 'text'); }}
+            :value=${(x) => x.control.data || ''}
+            @input=${changeHandler}
+            @change=${changeHandler}
+            placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
+            id=${(x) => x.control.path}
+            data-test-id=${(x) => 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; }}"
+            ?required=${(x) => x.control.required}
+            ?disabled=${(x) => !x.control.enabled}
+            style="width: 100%"
+            @blur=${(x) => x.onBlur()}
+          ></${prefix}-text-field>`, html `
+          <${prefix}-text-area
+            :value=${(x) => x.control.data || ''}
+            @input=${changeHandler}
+            @change=${changeHandler}
+            placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
+            id=${(x) => x.control.path}
+            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; }}"
+            style="width: 100%"
+            @blur=${(x) => x.onBlur()}
+          ></${prefix}-text-area>
+        `)}
+    </control-wrapper>
   </template>
 `;
 export const StringControlRendererTemplate = html `