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

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

@@ -3,6 +3,7 @@ import { mapStateToControlProps, or, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { comboboxRendererStyles } from '../../form.styles';
 import { optionIs } from '../testers/optionIs';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { SELECT_CONTROL_RANK } from './RenderersRanks';
 OptionsDatasource;
 /**
@@ -21,45 +22,44 @@ const getConnectedSelectDisplayValue = (dispatchRenderer) => {
 };
 export const ConnectedSelectControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <style>${comboboxRendererStyles(prefix)}</style>
-    <control-wrapper
-      :control=${(x) => x.control}
-      :jsonForms=${(x) => x.jsonforms}
-      :touched=${(x) => x.touched}
-      ?submitted=${(x) => x.submitted}
-      prefix="${prefix}"
-    >
-      <${prefix}-combobox
-        style="width: 100%;"
-        async=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.async; }}
-        placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
-        autocomplete=${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) === 'startsWith' ? 'both' : 'list'); }}
-        filter-mode=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) || 'contains'; }}
-        ?disabled=${(x) => !x.control.enabled}
-        :value=${(x) => getConnectedSelectDisplayValue(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; }}"
-        @value-change=${(x, c) => {
-    var _a;
-    const value = (_a = c.event.detail) === null || _a === void 0 ? void 0 : _a.value;
-    x.control.handleChange(x.control.path, value);
-    x.onBlur();
-}}
-        id=${(x) => x.control.path}
-        data-test-id=${(x) => x.control.path}
-      >
-        <options-datasource
-          resourceName=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.allOptionsResourceName; }}
-          value-field=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.valueField; }}
-          label-field=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.labelField; }}
-          ?allow-custom-options=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.allowCustomOptions; }}
-          option-element="${prefix}-option"
-          :datasourceConfig=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.datasourceConfig; }}
-          :data=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.data; }}
-          :labelRowFormatter=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.labelRowFormatter; }}
-          :initialSelectedValue=${(x) => x.control.data}
-        ></options-datasource>
-      </${prefix}-combobox>
-    </control-wrapper>
+    <style>
+      ${comboboxRendererStyles(prefix)}
+    </style>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-combobox
+          style="width: 100%;"
+          async=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.async; }}
+          placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
+          autocomplete=${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) === 'startsWith' ? 'both' : 'list'); }}
+          filter-mode=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) || 'contains'; }}
+          ?disabled=${(x) => !x.control.enabled}
+          :value=${(x) => getConnectedSelectDisplayValue(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; }}"
+          @value-change=${(x, c) => {
+        var _a;
+        const value = (_a = c.event.detail) === null || _a === void 0 ? void 0 : _a.value;
+        x.control.handleChange(x.control.path, value);
+        x.onBlur();
+    }}
+          id=${(x) => x.control.path}
+          data-test-id=${(x) => x.control.path}
+        >
+          <options-datasource
+            resourceName=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.allOptionsResourceName; }}
+            value-field=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.valueField; }}
+            label-field=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.labelField; }}
+            ?allow-custom-options=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.allowCustomOptions; }}
+            option-element="${prefix}-option"
+            :datasourceConfig=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.datasourceConfig; }}
+            :data=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.data; }}
+            :labelRowFormatter=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.labelRowFormatter; }}
+            :initialSelectedValue=${(x) => x.control.data}
+          ></options-datasource>
+        </${prefix}-combobox>
+      `,
+})}
   </template>
 `;
 export const ConnectedSelectControlRendererEntry = {

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

@@ -1,171 +1,142 @@
-import { __decorate } from "tslib";
 import { computeLabel, isDescriptionHidden } from '@jsonforms/core';
-import { html, css, when, observable, customElement, FASTElement, volatile, attr, } from '@microsoft/fast-element';
+import { css, html, when } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { getAnyOfErrorMessage } from '../../utils/validation';
-export const ControlWrapperRendererTemplate = html `
-  <template>
-    ${when((x) => { var _a; return (_a = x.control) === null || _a === void 0 ? void 0 : _a.visible; }, html `
-        <div
-          class=${(x) => {
-    var _a, _b, _c, _d;
-    return classNames(['wrapperRoot', true], ['labelLeft', ((_d = (_c = (_b = (_a = x.jsonForms) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.labelPlacement) === 'left']);
-}}
-          id=${(x) => x.control.path + '-wrapper'}
-          data-test-id=${(x) => x.control.path + '-wrapper'}
-          role="group"
-          aria-labelledby=${(x) => (x.computedLabel ? x.control.path + '-label' : null)}
-        >
-          ${when((x) => x.computedLabel, html `
-              <label
-                id="${(x) => x.control.path + '-label'}"
-                for="${(x) => x.control.path}"
-                class="${(x) => classNames('label', ['visually-hidden', x.hideLabel])}"
-              >
-                <span>
-                  ${(x) => x.computedLabel}${when((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.tooltip; }, (x) => x.getPrefixedTooltip)}
-                </span>
-              </label>
-            `)}
-
-          <div class="wrapper" part="wrapper">
-            <slot></slot>
-          </div>
-          <div
-            class="${(x) => (x.control.errors || x.anyOfError) && x.touched ? 'error' : 'description'}"
-          >
-            ${(x) => x.touched && (x.control.errors || x.anyOfError)
-    ? [x.control.errors, x.anyOfError].filter(Boolean).join(' ')
-    : x.showDescription
-        ? x.control.description
-        : ''}
-          </div>
-        </div>
-      `)}
-  </template>
-`;
-const styles = css `
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .wrapperRoot {
+/**
+ * Styles formerly scoped to the <control-wrapper> element. After the light-DOM
+ * refactor these are composed into `foundationFormStyles` so they reach every
+ * rendered control. Exported for consumers that render controls outside of
+ * `foundation-form` and need the same wrapper styling.
+ *
+ * @internal
+ */
+export const controlWrapperStyles = css `
+  .foundation-control-wrapper-root {
     margin-bottom: var(--wrapper-root-margin-bottom, calc(var(--design-unit) * 4px));
   }
-
-  .wrapperRoot.labelLeft {
+  .foundation-control-wrapper-root.labelLeft {
     display: flex;
     flex-wrap: wrap;
   }
-
-  .label {
+  .foundation-control-wrapper-label {
     color: var(--neutral-foreground-hint);
     margin-bottom: var(--control-label-margin, calc(var(--design-unit) * 2px));
     display: flex;
     justify-content: space-between;
     font-weight: 700;
-    /* Reset label defaults to match former div appearance */
     cursor: default;
   }
-
-  .labelLeft .wrapper {
+  .foundation-control-wrapper-label.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .labelLeft .foundation-control-wrapper {
     flex: 1 1 auto;
     width: auto;
     align-items: flex-start;
     flex-wrap: wrap;
   }
-
-  .labelLeft .label {
+  .labelLeft .foundation-control-wrapper-label {
     flex: 0 1 auto;
     width: calc(var(--design-unit) * 30px);
     margin-right: calc(var(--design-unit) * 2px);
     align-items: center;
     margin-bottom: 0;
   }
-
-  .labelLeft .error {
+  .labelLeft .foundation-control-wrapper-error {
     margin-left: 0;
     flex: 1 1 100%;
     text-align: right;
   }
-
-  .error {
+  .foundation-control-wrapper-error {
     font-size: 12px;
     color: #f9644d;
     margin-left: 10px;
   }
-
-  .wrapper {
+  .foundation-control-wrapper {
     display: flex;
     width: 100%;
     align-items: center;
   }
 `;
-let ControlWrapper = class ControlWrapper extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.hideLabel = false;
-    }
-    get showDescription() {
-        return !isDescriptionHidden(this.control.visible, this.control.description, this.control.isFocused, !!this.control.config.showUnfocusedDescription);
-    }
-    get computedLabel() {
-        var _a, _b, _c;
-        if ((_c = (_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.uischema) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.hideLabel)
-            return '';
-        return computeLabel(this.control.label, this.control.required, !!this.control.config.hideRequiredAsterisk);
-    }
-    get getPrefixedTooltip() {
-        var _a, _b;
-        return html `
-    <${this.prefix}-icon tooltip="${(_b = (_a = this.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tooltip}" tooltip-id="${this.control.path + '-tooltip'}"></${this.prefix}-icon>`;
-    }
-    get anyOfError() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return getAnyOfErrorMessage((_b = (_a = this.jsonForms) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.errors, (_d = (_c = this.jsonForms) === null || _c === void 0 ? void 0 : _c.core) === null || _d === void 0 ? void 0 : _d.schema, (_e = this.control) === null || _e === void 0 ? void 0 : _e.path, (_h = (_g = (_f = this.control) === null || _f === void 0 ? void 0 : _f.uischema) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.anyOfErrorMessage);
-    }
+/**
+ * Light-DOM-friendly control wrapper that replaces the former `<control-wrapper>`
+ * custom element. Renders label, error/description slots, and composes a provided
+ * inner control template inline within the renderer's template so that bindings
+ * stay on the `DispatchRenderer` source.
+ *
+ * @public
+ */
+export const controlWrapperTemplate = (options) => {
+    const { innerTemplate, prefix, hideLabel = false } = options;
+    return html `
+    ${when((x) => { var _a; return (_a = x.control) === null || _a === void 0 ? void 0 : _a.visible; }, html `
+        <div
+          class=${(x) => {
+        var _a, _b, _c, _d;
+        return classNames(['foundation-control-wrapper-root', true], ['labelLeft', ((_d = (_c = (_b = (_a = x.jsonforms) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.labelPlacement) === 'left']);
+    }}
+          id=${(x) => x.control.path + '-wrapper'}
+          data-test-id=${(x) => x.control.path + '-wrapper'}
+          role="group"
+          aria-labelledby=${(x) => (computeControlLabel(x) ? x.control.path + '-label' : null)}
+        >
+          ${when((x) => computeControlLabel(x), html `
+              <label
+                id="${(x) => x.control.path + '-label'}"
+                for="${(x) => x.control.path}"
+                class="${() => classNames('foundation-control-wrapper-label', ['visually-hidden', hideLabel])}"
+              >
+                <span>
+                  ${(x) => computeControlLabel(x)}${when((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.tooltip; }, html `
+                      <${prefix}-icon
+                        tooltip="${(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.tooltip; }}"
+                        tooltip-id="${(x) => x.control.path + '-tooltip'}"
+                      ></${prefix}-icon>
+                    `)}
+                </span>
+              </label>
+            `)}
+
+          <div class="foundation-control-wrapper" part="wrapper">${innerTemplate}</div>
+          <div
+            class="${(x) => (x.control.errors || computeAnyOfError(x)) && x.touched
+        ? 'foundation-control-wrapper-error'
+        : 'foundation-control-wrapper-description'}"
+          >
+            ${(x) => x.touched && (x.control.errors || computeAnyOfError(x))
+        ? [x.control.errors, computeAnyOfError(x)].filter(Boolean).join(' ')
+        : computeShowDescription(x)
+            ? x.control.description
+            : ''}
+          </div>
+        </div>
+      `)}
+  `;
 };
-__decorate([
-    observable
-], ControlWrapper.prototype, "control", void 0);
-__decorate([
-    observable
-], ControlWrapper.prototype, "jsonForms", void 0);
-__decorate([
-    observable
-], ControlWrapper.prototype, "touched", void 0);
-__decorate([
-    attr({ mode: 'boolean', attribute: 'hide-label' })
-], ControlWrapper.prototype, "hideLabel", void 0);
-__decorate([
-    attr
-], ControlWrapper.prototype, "prefix", void 0);
-__decorate([
-    volatile
-], ControlWrapper.prototype, "showDescription", null);
-__decorate([
-    volatile
-], ControlWrapper.prototype, "computedLabel", null);
-__decorate([
-    volatile
-], ControlWrapper.prototype, "getPrefixedTooltip", null);
-__decorate([
-    volatile
-], ControlWrapper.prototype, "anyOfError", null);
-ControlWrapper = __decorate([
-    customElement({
-        name: 'control-wrapper',
-        styles,
-        template: ControlWrapperRendererTemplate,
-    })
-], ControlWrapper);
-export { ControlWrapper };
+function computeShowDescription(x) {
+    var _a;
+    if (!(x === null || x === void 0 ? void 0 : x.control))
+        return false;
+    return !isDescriptionHidden(x.control.visible, x.control.description, x.control.isFocused, !!((_a = x.control.config) === null || _a === void 0 ? void 0 : _a.showUnfocusedDescription));
+}
+function computeControlLabel(x) {
+    var _a, _b, _c;
+    if (!(x === null || x === void 0 ? void 0 : x.control))
+        return '';
+    if ((_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.hideLabel)
+        return '';
+    return computeLabel(x.control.label, x.control.required, !!((_c = x.control.config) === null || _c === void 0 ? void 0 : _c.hideRequiredAsterisk));
+}
+function computeAnyOfError(x) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return getAnyOfErrorMessage((_b = (_a = x.jsonforms) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.errors, (_d = (_c = x.jsonforms) === null || _c === void 0 ? void 0 : _c.core) === null || _d === void 0 ? void 0 : _d.schema, (_e = x.control) === null || _e === void 0 ? void 0 : _e.path, (_h = (_g = (_f = x.control) === null || _f === void 0 ? void 0 : _f.uischema) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.anyOfErrorMessage);
+}

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

@@ -2,6 +2,7 @@ import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { GenesisType } from '../../utils';
 import { isOneOfDate } from '../testers/isDate';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { DATE_CONTROL_RANK } from './RenderersRanks';
 /**
  * @internal
@@ -18,48 +19,45 @@ const typeSwitch = (control) => {
 };
 export const DateControlRendererTemplate = (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) => {
-    if (!x.control.data)
-        return '';
-    const type = typeSwitch(x.control);
-    const date = new Date(x.control.data);
-    const padded = (dateComponent) => dateComponent.toString().padStart(2, '0');
-    const year = date.getFullYear();
-    const month = padded(date.getMonth() + 1);
-    const day = padded(date.getDate());
-    const hour = padded(date.getHours());
-    const minute = padded(date.getMinutes());
-    return (`${year}-${month}-${day}` + (type === 'datetime-local' ? `T${hour}:${minute}` : ''));
-}}
-        id=${(x) => x.control.path}
-        type="${(x) => typeSwitch(x.control)}"
-        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; }}"
-        @blur=${(x, c) => {
-    const target = c.event.target;
-    const inputValue = target.value;
-    x.onBlur();
-    if (inputValue) {
-        const timestamp = new Date(inputValue).getTime();
-        x.control.handleChange(x.control.path, timestamp);
-    }
-    else {
-        x.control.handleChange(x.control.path, undefined);
-    }
-}}"
-        style="width: 100%"
-      ></${prefix}-text-field>
-    </control-wrapper>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-text-field
+          :value=${(x) => {
+        if (!x.control.data)
+            return '';
+        const type = typeSwitch(x.control);
+        const date = new Date(x.control.data);
+        const padded = (dateComponent) => dateComponent.toString().padStart(2, '0');
+        const year = date.getFullYear();
+        const month = padded(date.getMonth() + 1);
+        const day = padded(date.getDate());
+        const hour = padded(date.getHours());
+        const minute = padded(date.getMinutes());
+        return (`${year}-${month}-${day}` + (type === 'datetime-local' ? `T${hour}:${minute}` : ''));
+    }}
+          id=${(x) => x.control.path}
+          type="${(x) => typeSwitch(x.control)}"
+          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; }}"
+          @blur=${(x, c) => {
+        const target = c.event.target;
+        const inputValue = target.value;
+        x.onBlur();
+        if (inputValue) {
+            const timestamp = new Date(inputValue).getTime();
+            x.control.handleChange(x.control.path, timestamp);
+        }
+        else {
+            x.control.handleChange(x.control.path, undefined);
+        }
+    }}"
+          style="width: 100%"
+        ></${prefix}-text-field>
+      `,
+})}
   </template>
 `;
 export const DateControlRendererEntry = {
@@ -67,5 +65,5 @@ export const DateControlRendererEntry = {
     ${(x) => DateControlRendererTemplate(x.prefix)}
   `,
     tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),
-    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
+    mapper: mapStateToControlProps,
 };

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

@@ -3,6 +3,7 @@ import { html, repeat } from '@microsoft/fast-element';
 import { capitalCase } from 'change-case';
 import { comboboxRendererStyles } from '../../form.styles';
 import { isOneOfEnum } from '../testers/isOneOfEnum';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { ENUM_CONTROL_RANK } from './RenderersRanks';
 const getOptionLabel = (option, labelRowFormatter) => labelRowFormatter ? labelRowFormatter(option.label) : capitalCase(option.label);
 // overrides https://github.com/eclipsesource/jsonforms/blob/69441cdfc48f359850d87fa4b842856f1f139eb2/packages/core/src/util/renderer.ts#L515
@@ -40,33 +41,32 @@ const displaySetOrDefaultData = (dispatchRenderer) => {
 };
 export const EnumControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <style>${comboboxRendererStyles(prefix)}</style>
-    <control-wrapper
-      :control=${(x) => x.control}
-      :jsonForms=${(x) => x.jsonforms}
-      :touched=${(x) => x.touched}
-      ?submitted=${(x) => x.submitted}
-      prefix="${prefix}"
-    >
-      <${prefix}-combobox
-        style="width: 100%; min-width: 200px;"
-        autocomplete=${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) === 'startsWith' ? 'both' : 'list'); }}
-        filter-mode=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) || 'contains'; }}
-        ?disabled=${(x) => !x.control.enabled}
-        :value=${(x) => displaySetOrDefaultData(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=${(x, c) => updateEnumData(x, c.event.target.value)}
-        id=${(x) => x.control.path}
-        data-test-id=${(x) => x.control.path}
-      >
-        ${repeat((x) => x.control.options, html `
-            <${prefix}-option>${(x, ctx) => {
-    var _a, _b, _c, _d;
-    return getOptionLabel(x, (_d = (_c = (_b = (_a = ctx.parent) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.labelRowFormatter);
-}}</${prefix}-option>
-          `)}
-      </${prefix}-combobox>
-    </control-wrapper>
+    <style>
+      ${comboboxRendererStyles(prefix)}
+    </style>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-combobox
+          style="width: 100%; min-width: 200px;"
+          autocomplete=${(x) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) === 'startsWith' ? 'both' : 'list'); }}
+          filter-mode=${(x) => { var _a; return ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.filterMode) || 'contains'; }}
+          ?disabled=${(x) => !x.control.enabled}
+          :value=${(x) => displaySetOrDefaultData(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=${(x, c) => updateEnumData(x, c.event.target.value)}
+          id=${(x) => x.control.path}
+          data-test-id=${(x) => x.control.path}
+        >
+          ${repeat((x) => x.control.options, html `
+              <${prefix}-option>${(x, ctx) => {
+        var _a, _b, _c, _d;
+        return getOptionLabel(x, (_d = (_c = (_b = (_a = ctx.parent) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.labelRowFormatter);
+    }}</${prefix}-option>
+            `)}
+        </${prefix}-combobox>
+      `,
+})}
   </template>
 `;
 export const EnumControlRendererEntry = {

package/dist/esm/jsonforms/renderers/EnumRadioGroupControlRenderer.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 { ENUM_RADIO_GROUP_CONTROL_RANK } from './RenderersRanks';
 const radioGroupStyles = (prefix) => `
   ${prefix}-radio-group {
@@ -19,38 +20,35 @@ const radioGroupStyles = (prefix) => `
   }
 `;
 export const EnumRadioGroupControlRendererTemplate = (prefix = 'zero') => html `
-    <template>
-      <style>
-        ${radioGroupStyles(prefix)}
-      </style>
-      <control-wrapper
-        :control=${(x) => x.control}
-        :jsonForms=${(x) => x.jsonforms}
-        :touched=${(x) => x.touched}
-        ?submitted=${(x) => x.submitted}
-        prefix="${prefix}"
-      >
-        <${prefix}-radio-group
-          orientation="${(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.orientation) !== null && _c !== void 0 ? _c : 'horizontal'; }}"
-          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) => {
-    var _a;
-    const target = c.event.currentTarget;
-    const value = (_a = target.value) !== null && _a !== void 0 ? _a : '';
-    x.control.handleChange(x.control.path, value === '' ? null : value);
-    x.onBlur();
-}}
-        >
-          ${repeat((x) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = x.control) === null || _a === void 0 ? void 0 : _a.uischema) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : []; }, html `
-              <${prefix}-radio value=${(opt) => opt.value}>${(opt) => opt.label}</${prefix}-radio>
-            `)}
-        </${prefix}-radio-group>
-      </control-wrapper>
-    </template>
-  `;
+  <template>
+    <style>
+      ${radioGroupStyles(prefix)}
+    </style>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+          <${prefix}-radio-group
+            orientation="${(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.orientation) !== null && _c !== void 0 ? _c : 'horizontal'; }}"
+            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) => {
+        var _a;
+        const target = c.event.currentTarget;
+        const value = (_a = target.value) !== null && _a !== void 0 ? _a : '';
+        x.control.handleChange(x.control.path, value === '' ? null : value);
+        x.onBlur();
+    }}
+          >
+            ${repeat((x) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = x.control) === null || _a === void 0 ? void 0 : _a.uischema) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : []; }, html `
+                <${prefix}-radio value=${(opt) => opt.value}>${(opt) => opt.label}</${prefix}-radio>
+              `)}
+          </${prefix}-radio-group>
+        `,
+})}
+  </template>
+`;
 /**
  * A JSON Forms renderer that renders enum options as a radio-group.
  *