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

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

@@ -3,7 +3,6 @@ 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;
 /**
@@ -22,44 +21,45 @@ const getConnectedSelectDisplayValue = (dispatchRenderer) => {
 };
 export const ConnectedSelectControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <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>
-      `,
-})}
+    <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>
   </template>
 `;
 export const ConnectedSelectControlRendererEntry = {

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

@@ -1,142 +1,171 @@
+import { __decorate } from "tslib";
 import { computeLabel, isDescriptionHidden } from '@jsonforms/core';
-import { css, html, when } from '@microsoft/fast-element';
+import { html, css, when, observable, customElement, FASTElement, volatile, attr, } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { getAnyOfErrorMessage } from '../../utils/validation';
-/**
- * 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 {
+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 {
     margin-bottom: var(--wrapper-root-margin-bottom, calc(var(--design-unit) * 4px));
   }
-  .foundation-control-wrapper-root.labelLeft {
+
+  .wrapperRoot.labelLeft {
     display: flex;
     flex-wrap: wrap;
   }
-  .foundation-control-wrapper-label {
+
+  .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;
   }
-  .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 {
+
+  .labelLeft .wrapper {
     flex: 1 1 auto;
     width: auto;
     align-items: flex-start;
     flex-wrap: wrap;
   }
-  .labelLeft .foundation-control-wrapper-label {
+
+  .labelLeft .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 .foundation-control-wrapper-error {
+
+  .labelLeft .error {
     margin-left: 0;
     flex: 1 1 100%;
     text-align: right;
   }
-  .foundation-control-wrapper-error {
+
+  .error {
     font-size: 12px;
     color: #f9644d;
     margin-left: 10px;
   }
-  .foundation-control-wrapper {
+
+  .wrapper {
     display: flex;
     width: 100%;
     align-items: center;
   }
 `;
-/**
- * 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>
-      `)}
-  `;
+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);
+    }
 };
-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);
-}
+__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 };

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

@@ -2,7 +2,6 @@ import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { GenesisType } from '../../utils';
 import { isOneOfDate } from '../testers/isDate';
-import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { DATE_CONTROL_RANK } from './RenderersRanks';
 /**
  * @internal
@@ -19,45 +18,48 @@ const typeSwitch = (control) => {
 };
 export const DateControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    ${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>
-      `,
-})}
+    <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>
   </template>
 `;
 export const DateControlRendererEntry = {
@@ -65,5 +67,5 @@ export const DateControlRendererEntry = {
     ${(x) => DateControlRendererTemplate(x.prefix)}
   `,
     tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),
-    mapper: mapStateToControlProps,
+    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
 };

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

@@ -3,7 +3,6 @@ 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
@@ -41,32 +40,33 @@ const displaySetOrDefaultData = (dispatchRenderer) => {
 };
 export const EnumControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <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>
-      `,
-})}
+    <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>
   </template>
 `;
 export const EnumControlRendererEntry = {

package/dist/esm/jsonforms/renderers/EnumRadioGroupControlRenderer.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 { ENUM_RADIO_GROUP_CONTROL_RANK } from './RenderersRanks';
 const radioGroupStyles = (prefix) => `
   ${prefix}-radio-group {
@@ -20,35 +19,38 @@ const radioGroupStyles = (prefix) => `
   }
 `;
 export const EnumRadioGroupControlRendererTemplate = (prefix = 'zero') => html `
-  <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>
-`;
+    <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>
+  `;
 /**
  * A JSON Forms renderer that renders enum options as a radio-group.
  *