@genesislcap/foundation-forms 14.429.1 → 14.429.2

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

@@ -185,7 +185,7 @@ export const ArrayListWrapperRendererTemplate = (prefix = 'zero') => html `
   </template>
 `;
 const styles = css `
-  :host {
+  array-list-wrapper {
     padding-left: calc(${designUnit} * 1px);
     display: flex;
     flex-direction: column;
@@ -205,7 +205,7 @@ const styles = css `
     --array-item-radius: calc(${designUnit} * 2px);
   }
 
-  .array-list {
+  array-list-wrapper .array-list {
     display: flex;
     align-items: flex-start;
     position: relative;
@@ -222,18 +222,18 @@ const styles = css `
       border-color 0.15s ease;
   }
 
-  .array-list:hover {
+  array-list-wrapper .array-list:hover {
     box-shadow: var(--array-item-shadow-hover);
   }
 
   /* Content area grows to fill space; min-width prevents flex overflow */
-  .array-list > dispatch-renderer {
+  array-list-wrapper .array-list > dispatch-renderer {
     flex: 1;
     min-width: 0;
   }
 
   /* Left accent bar for visual hierarchy - industrial form-slot feel */
-  .array-list::before {
+  array-list-wrapper .array-list::before {
     content: '';
     position: absolute;
     left: 0;
@@ -245,31 +245,31 @@ const styles = css `
     pointer-events: none;
   }
 
-  .array-list.row-status-success::before {
+  array-list-wrapper .array-list.row-status-success::before {
     background: var(--row-status-success-color);
   }
 
-  .array-list.row-status-failed::before {
+  array-list-wrapper .array-list.row-status-failed::before {
     background: var(--row-status-failed-color);
   }
 
-  .array-list.row-status-submitting::before {
+  array-list-wrapper .array-list.row-status-submitting::before {
     background: var(--row-status-submitting-color);
   }
 
-  .array-list.row-status-success {
+  array-list-wrapper .array-list.row-status-success {
     background-color: color-mix(in srgb, var(--row-status-success-color), transparent 90%);
   }
 
-  .array-list.row-status-failed {
+  array-list-wrapper .array-list.row-status-failed {
     background-color: color-mix(in srgb, var(--row-status-failed-color), transparent 90%);
   }
 
-  .array-list.row-status-submitting {
+  array-list-wrapper .array-list.row-status-submitting {
     background-color: color-mix(in srgb, var(--row-status-submitting-color), transparent 95%);
   }
 
-  .row-status-indicator {
+  array-list-wrapper .row-status-indicator {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -278,64 +278,65 @@ const styles = css `
   }
 
   /* Hide all status indicators by default */
-  .row-status-indicator .status-spinner,
-  .row-status-indicator .status-success,
-  .row-status-indicator .status-failed {
+  array-list-wrapper .row-status-indicator .status-spinner,
+  array-list-wrapper .row-status-indicator .status-success,
+  array-list-wrapper .row-status-indicator .status-failed {
     display: none;
   }
 
   /* Show spinner when submitting */
-  .array-list.row-status-submitting .row-status-indicator .status-spinner {
+  array-list-wrapper .array-list.row-status-submitting .row-status-indicator .status-spinner {
     display: flex;
   }
 
   /* Show success icon when successful */
-  .array-list.row-status-success .row-status-indicator .status-success {
+  array-list-wrapper .array-list.row-status-success .row-status-indicator .status-success {
     display: flex;
   }
 
   /* Show failed icon when failed */
-  .array-list.row-status-failed .row-status-indicator .status-failed {
+  array-list-wrapper .array-list.row-status-failed .row-status-indicator .status-failed {
     display: flex;
   }
 
-  .status-icon {
+  array-list-wrapper .status-icon {
     width: calc(${designUnit} * 4px);
     height: calc(${designUnit} * 4px);
   }
 
-  .status-success {
+  array-list-wrapper .status-success {
     color: var(--row-status-success-color);
   }
 
-  .status-failed {
+  array-list-wrapper .status-failed {
     color: var(--row-status-failed-color);
     cursor: help;
   }
 
-  .status-spinner {
+  array-list-wrapper .status-spinner {
     width: calc(${designUnit} * 4px);
     height: calc(${designUnit} * 4px);
   }
 
-  .item-control-btn {
+  array-list-wrapper .item-control-btn {
     color: var(--neutral-foreground-hint, rgb(135, 155, 166));
     margin-left: calc(${designUnit} * 3px);
   }
 
-  .item-control-btn:hover {
+  array-list-wrapper .item-control-btn:hover {
     color: var(--accent-foreground-hover);
   }
 
-  .row-submit-btn {
+  array-list-wrapper .row-submit-btn {
     min-width: calc(${designUnit} * 8px);
   }
 
-  .row-submit-btn[disabled] {
+  array-list-wrapper .row-submit-btn[disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .button-group {
+
+  array-list-wrapper .button-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -343,7 +344,7 @@ const styles = css `
 
   /* ── Grid view ────────────────────────────────────────────── */
 
-  .grid-header {
+  array-list-wrapper .grid-header {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -357,14 +358,14 @@ const styles = css `
     letter-spacing: 0.04em;
   }
 
-  .grid-header-status-spacer {
+  array-list-wrapper .grid-header-status-spacer {
     width: var(--grid-status-track-width);
     min-width: var(--grid-status-track-width);
     flex: 0 0 var(--grid-status-track-width);
     flex-shrink: 0;
   }
 
-  .grid-header-cell {
+  array-list-wrapper .grid-header-cell {
     flex: 1;
     min-width: 0;
     overflow: hidden;
@@ -375,28 +376,28 @@ const styles = css `
     gap: 4px;
   }
 
-  .grid-header-actions {
+  array-list-wrapper .grid-header-actions {
     width: var(--grid-actions-track-width);
     min-width: var(--grid-actions-track-width);
     flex: 0 0 var(--grid-actions-track-width);
     text-align: center;
   }
 
-  .grid-header-label-text {
+  array-list-wrapper .grid-header-label-text {
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .grid-header-required-indicator {
+  array-list-wrapper .grid-header-required-indicator {
     color: var(--accent-foreground-rest, #0078d4);
   }
 
-  .grid-header-tooltip {
+  array-list-wrapper .grid-header-tooltip {
     color: var(--neutral-foreground-rest, rgb(217, 223, 224));
     cursor: help;
   }
 
-  .array-list.grid-row {
+  array-list-wrapper .array-list.grid-row {
     border: none;
     border-radius: 0;
     box-shadow: none;
@@ -408,54 +409,54 @@ const styles = css `
     gap: 10px;
   }
 
-  .array-list.grid-row::before {
+  array-list-wrapper .array-list.grid-row::before {
     display: none;
   }
 
-  .array-list.grid-row:nth-child(odd) {
+  array-list-wrapper .array-list.grid-row:nth-child(odd) {
     background-color: var(--neutral-layer-2, rgba(0, 0, 0, 0.02));
   }
 
-  .array-list.grid-row:nth-child(even) {
+  array-list-wrapper .array-list.grid-row:nth-child(even) {
     background-color: var(--neutral-layer-1, #fff);
   }
 
-  .array-list.grid-row:hover {
+  array-list-wrapper .array-list.grid-row:hover {
     background-color: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.06));
     box-shadow: none;
   }
 
-  .array-list.grid-row > dispatch-renderer {
+  array-list-wrapper .array-list.grid-row > dispatch-renderer {
     --control-label-margin: 0;
   }
 
-  .array-list.grid-row .row-status-indicator {
+  array-list-wrapper .array-list.grid-row .row-status-indicator {
     width: var(--grid-status-track-width);
     min-width: var(--grid-status-track-width);
     margin-right: 0;
     flex: 0 0 var(--grid-status-track-width);
   }
 
-  .array-list.grid-row .button-group {
+  array-list-wrapper .array-list.grid-row .button-group {
     width: var(--grid-actions-track-width);
     min-width: var(--grid-actions-track-width);
     flex: 0 0 var(--grid-actions-track-width);
     align-items: center;
   }
 
-  .array-list.grid-row .item-control-btn {
+  array-list-wrapper .array-list.grid-row .item-control-btn {
     margin-left: 0;
   }
 
-  .array-list.grid-row.row-status-success {
+  array-list-wrapper .array-list.grid-row.row-status-success {
     background-color: color-mix(in srgb, var(--row-status-success-color), transparent 90%);
   }
 
-  .array-list.grid-row.row-status-failed {
+  array-list-wrapper .array-list.grid-row.row-status-failed {
     background-color: color-mix(in srgb, var(--row-status-failed-color), transparent 90%);
   }
 
-  .array-list.grid-row.row-status-submitting {
+  array-list-wrapper .array-list.grid-row.row-status-submitting {
     background-color: color-mix(in srgb, var(--row-status-submitting-color), transparent 95%);
   }
 `;
@@ -524,6 +525,7 @@ ArrayListWrapper = __decorate([
     customElement({
         name: 'array-list-wrapper',
         styles,
+        shadowOptions: null,
         template: html `
     ${(x) => ArrayListWrapperRendererTemplate(x.form.prefix)}
   `,

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

@@ -1,29 +1,28 @@
 import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { isOneOfBoolean } from '../testers/isOneOfBoolean';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { BOOLEAN_CONTROL_RANK } from './RenderersRanks';
 export const BooleanControlRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <control-wrapper
-      :control=${(x) => x.control}
-      :jsonForms=${(x) => x.jsonforms}
-      :touched=${(x) => x.touched}
-      ?submitted=${(x) => x.submitted}
-    >
-      <${prefix}-checkbox
-        ?checked=${(x) => x.control.data}
-        ?disabled=${(x) => !x.control.enabled}
-        :autofocus=${(x) => x.control.config.focus}
-        :placeholder=${(x) => x.control.config.placeholder}
-        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) => {
-    x.control.handleChange(x.control.path, c.event.target.checked);
-    x.onBlur();
-}}
-        id=${(x) => x.control.path}
-        data-test-id=${(x) => x.control.path}
-      ></${prefix}-checkbox>
-    </control-wrapper>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-checkbox
+          ?checked=${(x) => x.control.data}
+          ?disabled=${(x) => !x.control.enabled}
+          :autofocus=${(x) => x.control.config.focus}
+          :placeholder=${(x) => x.control.config.placeholder}
+          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) => {
+        x.control.handleChange(x.control.path, c.event.target.checked);
+        x.onBlur();
+    }}
+          id=${(x) => x.control.path}
+          data-test-id=${(x) => x.control.path}
+        ></${prefix}-checkbox>
+      `,
+})}
   </template>
 `;
 export const BooleanControlEntry = {

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

@@ -40,17 +40,21 @@ export const CategorizationWrapperRendererTemplate = (prefix = 'zero') => html `
   </template>
 `;
 const styles = css `
-  .tabs-container::part(tablist) {
+  categorization-wrapper .tabs-container::part(tablist) {
     background-color: transparent;
     border-bottom: none;
   }
 
-  .tab-control {
+  categorization-wrapper .tab-control {
     box-shadow: none;
-    ${tabControlIconStyles}
   }
 
-  .tab-panel-control {
+  categorization-wrapper .tab-control .tab-control-icon {
+    margin-left: 3px;
+    color: #f9644d;
+  }
+
+  categorization-wrapper .tab-panel-control {
     margin-top: 10px;
   }
 `;
@@ -75,6 +79,7 @@ CategorizationWrapper = __decorate([
     customElement({
         name: 'categorization-wrapper',
         styles,
+        shadowOptions: null,
         template: html `
     ${(x) => CategorizationWrapperRendererTemplate(x.form.prefix)}
   `,

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

@@ -2,50 +2,48 @@ import { MultiselectDatasource } from '@genesislcap/foundation-ui';
 import { mapStateToControlProps, rankWith } from '@jsonforms/core';
 import { html } from '@microsoft/fast-element';
 import { isOneOfOptionMultiselect } from '../testers/isOneOfOptionMultiselect';
+import { controlWrapperTemplate } from './ControlWrapperRenderer';
 import { MULTISELECT_CONTROL_RANK } from './RenderersRanks';
 MultiselectDatasource;
 export const ConnectedMultiselectControlRendererTemplate = (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}-multiselect
-        style="width: 100%"
-        async=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.async; }}
-        ?disabled=${(x) => !x.control.enabled}
-        :selectedOptions=${(x) => {
-    var _a, _b, _c;
-    const selectedOptions = ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.delimiter)
-        ? (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.split((_c = x.control.uischema.options) === null || _c === void 0 ? void 0 : _c.delimiter)
-        : x.control.data;
-    return selectedOptions || [];
-}}
-        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; }}"
-        @selectionChange=${(x, c) => {
-    var _a, _b, _c;
-    const value = !((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.delimiter)
-        ? c.event.detail
-        : (_b = c.event.detail) === null || _b === void 0 ? void 0 : _b.join((_c = x.control.uischema.options) === null || _c === void 0 ? void 0 : _c.delimiter);
-    x.control.handleChange(x.control.path, value);
-    x.$emit('change');
-    x.onBlur();
-}}
-        id=${(x) => x.control.path}
-        data-test-id=${(x) => x.control.path}
-      >
-        <multiselect-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; }}
-          :data=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.data; }}
-          :datasourceConfig=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.datasourceConfig; }}
-        ></multiselect-datasource>
-      </${prefix}-multiselect>
-    </control-wrapper>
+    ${controlWrapperTemplate({
+    prefix,
+    innerTemplate: html `
+        <${prefix}-multiselect
+          style="width: 100%"
+          async=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.async; }}
+          ?disabled=${(x) => !x.control.enabled}
+          :selectedOptions=${(x) => {
+        var _a, _b, _c;
+        const selectedOptions = ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.delimiter)
+            ? (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.split((_c = x.control.uischema.options) === null || _c === void 0 ? void 0 : _c.delimiter)
+            : x.control.data;
+        return selectedOptions || [];
+    }}
+          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; }}"
+          @selectionChange=${(x, c) => {
+        var _a, _b, _c;
+        const value = !((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.delimiter)
+            ? c.event.detail
+            : (_b = c.event.detail) === null || _b === void 0 ? void 0 : _b.join((_c = x.control.uischema.options) === null || _c === void 0 ? void 0 : _c.delimiter);
+        x.control.handleChange(x.control.path, value);
+        x.$emit('change');
+        x.onBlur();
+    }}
+          id=${(x) => x.control.path}
+          data-test-id=${(x) => x.control.path}
+        >
+          <multiselect-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; }}
+            :data=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.data; }}
+            :datasourceConfig=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.datasourceConfig; }}
+          ></multiselect-datasource>
+        </${prefix}-multiselect>
+      `,
+})}
   </template>
 `;
 export const ConnectedMultiselectControlRendererEntry = {

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