@genesislcap/foundation-forms 14.429.1 → 14.429.2

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 { LayoutWrapper } from './LayoutRenderer';
+import { layoutWrapperTemplate } from './LayoutRenderer';
 import { LAYOUT2COLUMNS_RANK } from './RenderersRanks';
-LayoutWrapper;
 export const LayoutVertical2ColumnsRendererTemplate = html `
   <template>
-    <layout-wrapper :control=${(x) => x.control}>
-      <div
-        style="
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          justify-content: space-between;"
+    ${layoutWrapperTemplate({
+    innerTemplate: html `
+        <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,17 +21,18 @@ 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,6 +1,7 @@
 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;
 /**
@@ -32,47 +33,44 @@ const getOptions = (x) => x.control.uischema.options;
  * ```
  */
 export const MulticolumnDropdownControlRendererTemplate = (prefix = 'zero') => html `
-    <template>
-      <control-wrapper
-        :control=${(x) => x.control}
-        :jsonForms=${(x) => x.jsonforms}
-        :touched=${(x) => x.touched}
-        ?submitted=${(x) => x.submitted}
-        prefix="${prefix}"
-      >
-        <${prefix}-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>
-  `;
+  <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>
+`;
 /** @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,
 };
-export const NumberControlRendererTemplate = (prefix = 'zero') => html `
-  <template>
-    <control-wrapper
-      :control=${(x) => x.control}
-      :jsonForms=${(x) => x.jsonforms}
-      :touched=${(x) => x.touched}
-      ?submitted=${(x) => x.submitted}
-      prefix="${prefix}"
-    >
-      <${prefix}-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) => {
+function handleNumberChange(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>
+}
+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) : 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>
+      `,
+})}
   </template>
 `;
 export const NumberControlRendererEntry = {

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

@@ -1,6 +1,7 @@
 import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html, repeat } from '@microsoft/fast-element';
 import { optionIs } from '../testers/optionIs';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { SEGMENTED_CONTROL_RANK } from './RenderersRanks';
 export const SegmentedControlRendererTemplate = (prefix = 'zero') => html `
   <template>
@@ -19,33 +20,30 @@ export const SegmentedControlRendererTemplate = (prefix = 'zero') => html `
         background: var(--segmented-item-selected-bg);
       }
     </style>
-    <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>
+    ${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>
+      `,
+})}
   </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 `
-  .tabs-container::part(stepper-panel-container) {
+  stepper-wrapper .tabs-container::part(stepper-panel-container) {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
@@ -95,6 +95,7 @@ StepperWrapper = __decorate([
     customElement({
         name: 'stepper-wrapper',
         styles,
+        shadowOptions: null,
         template: html `
     ${(x) => StepperWrapperRendererTemplate(x.form.prefix)}
   `,

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

@@ -2,6 +2,7 @@ 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;
@@ -19,26 +20,23 @@ const setValue = (dispatchRenderer) => {
 };
 export const getStringArrayControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <control-wrapper
-      :control=${(x) => x.control}
-      :jsonForms=${(x) => x.jsonforms}
-      :touched=${(x) => x.touched}
-      ?submitted=${(x) => x.submitted}
-      prefix="${prefix}"
-    >
-      <${prefix}-text-field
-        :value=${(x) => 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>
+    ${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>
+      `,
+})}
   </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';
-//   <pre>${(x) => JSON.stringify(x.control, null, 2)}</pre>
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 function changeHandler(x, c) {
     var _a, _b, _c;
     const inputValue = c.event.target.value;
@@ -22,47 +22,46 @@ function changeHandler(x, c) {
 }
 export const getStringControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <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>
+    ${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) : undefined); }}
+              @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) : undefined); }}
+              @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>
+          `)}
+      `,
+})}
   </template>
 `;
 export const StringControlRendererTemplate = html `

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { attr, css, customElement, html, repeat, when, } from '@microsoft/fast-element';
-import { CategorizationWrapper, tabControlIconStyles } from './CategorizationWrapperRenderer';
+import { CategorizationWrapper } from './CategorizationWrapperRenderer';
 export const VerticalCategorizationWrapperRendererTemplate = (prefix = 'zero') => html `
   <template>
     <${prefix}-tabs class="tabs-container" orientation="vertical">
@@ -37,12 +37,12 @@ export const VerticalCategorizationWrapperRendererTemplate = (prefix = 'zero') =
   </template>
 `;
 const styles = css `
-  :host {
+  vertical-categorization-wrapper {
     display: block;
     height: var(--vertical-categorization-height, auto);
     overflow: hidden;
   }
-  .tabs-container::part(tablist) {
+  vertical-categorization-wrapper .tabs-container::part(tablist) {
     display: flex;
     flex-direction: column;
     height: auto;
@@ -55,11 +55,11 @@ const styles = css `
     padding: 0;
   }
 
-  .tabs-container .tab-control {
+  vertical-categorization-wrapper .tabs-container .tab-control {
     padding: 0 calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);
   }
 
-  .tab-label {
+  vertical-categorization-wrapper .tab-label {
     display: flex;
     align-items: center;
     width: 100%;
@@ -68,20 +68,23 @@ const styles = css `
     border-radius: 0 3px 3px 0;
   }
 
-  .tab-control[aria-selected='true'] .tab-label {
+  vertical-categorization-wrapper .tab-control[aria-selected='true'] .tab-label {
     border-left-color: var(--accent-fill-rest);
     background: var(--neutral-fill-active);
   }
 
-  ${tabControlIconStyles}
+  vertical-categorization-wrapper .tab-control-icon {
+    margin-left: 3px;
+    color: #f9644d;
+  }
 
-  .tabs-container::part(tabpanel) {
+  vertical-categorization-wrapper .tabs-container::part(tabpanel) {
     border: none;
     overflow-y: auto;
     height: 100%;
   }
 
-  .tab-panel-control {
+  vertical-categorization-wrapper .tab-panel-control {
     border: none;
     padding-left: 16px;
   }
@@ -108,6 +111,7 @@ VerticalCategorizationWrapper = __decorate([
     customElement({
         name: 'vertical-categorization-wrapper',
         styles,
+        shadowOptions: null,
         template: html `
     ${(x) => VerticalCategorizationWrapperRendererTemplate(x.form.prefix)}
   `,

package/dist/esm/jsonforms/renderers/dispatch-renderer.js

@@ -94,6 +94,7 @@ DispatchRenderer = __decorate([
         name: 'dispatch-renderer',
         template: template,
         styles: styles,
+        shadowOptions: null,
     })
 ], DispatchRenderer);
 export { DispatchRenderer };