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

package/dist/esm/form.styles.js

@@ -2,7 +2,6 @@ import { controlCornerRadius, designUnit, strokeWidth } from '@microsoft/fast-co
 import { css } from '@microsoft/fast-element';
 import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { controlWrapperStyles } from './jsonforms/renderers/ControlWrapperRenderer';
 /** @internal */
 export const comboboxRendererStyles = (prefix = 'zero') => `
   ${prefix}-combobox::part(listbox) {
@@ -12,9 +11,7 @@ export const comboboxRendererStyles = (prefix = 'zero') => `
 `;
 /** @internal */
 export const foundationFormStyles = css `
-  ${controlWrapperStyles}
-
-  foundation-form {
+  :host {
     border: calc(${strokeWidth} * 1px) solid transparent;
     margin: 0;
     border-radius: calc(${controlCornerRadius} * 1px);
@@ -28,7 +25,32 @@ export const foundationFormStyles = css `
     box-sizing: border-box;
   }
 
-  foundation-form .actions {
+  .form-grid-compact {
+    font-size: 0.9em;
+  }
+
+  .form-controls {
+    display: grid;
+    grid-gap: calc(${designUnit} * 1px);
+    grid-column-gap: calc(${designUnit} * 7px);
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .required::after {
+    content: ' *';
+    color: #f00;
+  }
+
+  .label {
+    font-size: calc(${designUnit} * 1px + 0.7vmin);
+  }
+
+  .actions {
     display: flex;
     flex-direction: row;
     align-items: flex-end;
@@ -37,18 +59,22 @@ export const foundationFormStyles = css `
     gap: 10px;
   }
 
-  foundation-form .approval-message-actions {
+  .error {
+    border-bottom: 2px solid red;
+  }
+
+  .approval-message-actions {
     display: flex;
     justify-content: flex-end;
     gap: calc(${designUnit} * 2px);
     margin-top: calc(${designUnit} * 2px);
   }
 
-  foundation-form .submit-button {
+  .submit-button {
     margin: 0;
   }
 
-  foundation-form .csv-upload-section {
+  .csv-upload-section {
     display: flex;
     align-items: center;
     gap: calc(${designUnit} * 3px);
@@ -56,13 +82,13 @@ export const foundationFormStyles = css `
     margin-bottom: calc(${designUnit} * 2px);
   }
 
-  foundation-form .csv-file-input {
+  .csv-file-input {
     display: none;
   }
 
   /* Card-like styling for CSV buttons - matches array item aesthetic */
-  foundation-form .csv-template-button,
-  foundation-form .csv-import-button {
+  .csv-template-button,
+  .csv-import-button {
     display: flex;
     align-items: center;
     gap: calc(${designUnit} * 1px);
@@ -78,14 +104,14 @@ export const foundationFormStyles = css `
       border-color 0.15s ease;
   }
 
-  foundation-form .csv-template-button:hover,
-  foundation-form .csv-import-button:hover {
+  .csv-template-button:hover,
+  .csv-import-button:hover {
     box-shadow:
       0 2px 4px rgb(0 0 0 / 6%),
       0 6px 12px rgb(0 0 0 / 8%);
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    foundation-form {
+    :host {
       background: ${SystemColors.Canvas};
       border-color: ${SystemColors.CanvasText};
     }

package/dist/esm/form.template.js

@@ -3,10 +3,11 @@ import { html, ref, when } from '@microsoft/fast-element';
 import { JSONForms } from './jsonforms/json-forms';
 import { ArrayListWrapper } from './jsonforms/renderers/ArrayListWrapperRenderer';
 import { CategorizationWrapper } from './jsonforms/renderers/CategorizationWrapperRenderer';
+import { ControlWrapper } from './jsonforms/renderers/ControlWrapperRenderer';
 import { DispatchRenderer } from './jsonforms/renderers/dispatch-renderer';
 import { StepperWrapper } from './jsonforms/renderers/StepperWrapperRenderer';
 import { VerticalCategorizationWrapper } from './jsonforms/renderers/VerticalCategorizationWrapperRenderer';
-avoidTreeShaking(JSONForms, ArrayListWrapper, CategorizationWrapper, VerticalCategorizationWrapper, DispatchRenderer, StepperWrapper);
+avoidTreeShaking(JSONForms, ArrayListWrapper, CategorizationWrapper, VerticalCategorizationWrapper, ControlWrapper, DispatchRenderer, StepperWrapper);
 /** @internal */
 export const getPrefixedForm = (prefix) => html `
   <template>

package/dist/esm/index.js

@@ -4,7 +4,5 @@ export * from './form.styles';
 export * from './form.template';
 export { MulticolumnDropdownControlRendererEntry, MulticolumnDropdownControlRendererTemplate, } from './jsonforms/renderers/MulticolumnDropdownControlRenderer';
 export { LayoutVerticalCategorizationRendererEntry } from './jsonforms/renderers/LayoutVerticalCategorizationRenderer';
-export { controlWrapperTemplate, controlWrapperStyles, } from './jsonforms/renderers/ControlWrapperRenderer';
-export { layoutWrapperTemplate } from './jsonforms/renderers/LayoutRenderer';
 export * from './types';
 export * from './utils';

package/dist/esm/jsonforms/json-forms.js

@@ -49,10 +49,6 @@ let JSONForms = class JSONForms extends FASTElement {
         this.bulkInsert = false;
         this.dispatch = (action) => {
             this.jsonforms = Object.assign(Object.assign({}, this.jsonforms), { core: coreReducer(this.jsonforms.core, action) });
-            // Re-run custom validators against the updated data so consumers receive
-            // fresh `additionalErrors` from this single emit (previously the follow-up
-            // schemaChanged() emit supplied these).
-            const additionalErrors = this.validate(this.uichemaToUse);
             this.$emit('data-change', {
                 data: this.jsonforms.core.data,
                 errors: this.jsonforms.core.errors,
@@ -149,28 +145,7 @@ let JSONForms = class JSONForms extends FASTElement {
         this.schemaChanged();
     }
     dataChanged() {
-        var _a;
-        // If core isn't initialized yet, fall back to full init via schemaChanged
-        // (which no-ops until a schema is present).
-        if (!((_a = this.jsonforms) === null || _a === void 0 ? void 0 : _a.core)) {
-            this.schemaChanged();
-            return;
-        }
-        // Skip echoes: after dispatch emits `data-change`, the parent form mirrors
-        // the same `data` reference back into this property. Re-initializing here
-        // would cause `data-change` to fire twice for every user edit.
-        if (this.jsonforms.core.data === this.data) {
-            return;
-        }
-        // External data update (e.g. reset, CSV import) — fold into core state
-        // without re-running Actions.init, then emit a single data-change.
-        this.jsonforms = Object.assign(Object.assign({}, this.jsonforms), { core: coreReducer(this.jsonforms.core, Actions.updateCore(this.data, this.schema, this.uichemaToUse)) });
-        const additionalErrors = this.validate(this.uichemaToUse);
-        this.$emit('data-change', {
-            data: this.jsonforms.core.data,
-            errors: this.jsonforms.core.errors,
-            additionalErrors,
-        });
+        this.schemaChanged();
     }
     renderersChanged() {
         this.schemaChanged();
@@ -285,7 +260,6 @@ JSONForms = __decorate([
       display: flex;
     }
   `,
-        shadowOptions: null,
     })
 ], JSONForms);
 export { JSONForms };

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

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

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

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

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

@@ -2,48 +2,50 @@ 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>
-    ${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>
-      `,
-})}
+    <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>
   </template>
 `;
 export const ConnectedMultiselectControlRendererEntry = {