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

package/dist/esm/form.styles.js

@@ -2,6 +2,7 @@ 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) {
@@ -11,7 +12,9 @@ export const comboboxRendererStyles = (prefix = 'zero') => `
 `;
 /** @internal */
 export const foundationFormStyles = css `
-  :host {
+  ${controlWrapperStyles}
+
+  foundation-form {
     border: calc(${strokeWidth} * 1px) solid transparent;
     margin: 0;
     border-radius: calc(${controlCornerRadius} * 1px);
@@ -25,32 +28,7 @@ export const foundationFormStyles = css `
     box-sizing: border-box;
   }
 
-  .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 {
+  foundation-form .actions {
     display: flex;
     flex-direction: row;
     align-items: flex-end;
@@ -59,22 +37,18 @@ export const foundationFormStyles = css `
     gap: 10px;
   }
 
-  .error {
-    border-bottom: 2px solid red;
-  }
-
-  .approval-message-actions {
+  foundation-form .approval-message-actions {
     display: flex;
     justify-content: flex-end;
     gap: calc(${designUnit} * 2px);
     margin-top: calc(${designUnit} * 2px);
   }
 
-  .submit-button {
+  foundation-form .submit-button {
     margin: 0;
   }
 
-  .csv-upload-section {
+  foundation-form .csv-upload-section {
     display: flex;
     align-items: center;
     gap: calc(${designUnit} * 3px);
@@ -82,13 +56,13 @@ export const foundationFormStyles = css `
     margin-bottom: calc(${designUnit} * 2px);
   }
 
-  .csv-file-input {
+  foundation-form .csv-file-input {
     display: none;
   }
 
   /* Card-like styling for CSV buttons - matches array item aesthetic */
-  .csv-template-button,
-  .csv-import-button {
+  foundation-form .csv-template-button,
+  foundation-form .csv-import-button {
     display: flex;
     align-items: center;
     gap: calc(${designUnit} * 1px);
@@ -104,14 +78,14 @@ export const foundationFormStyles = css `
       border-color 0.15s ease;
   }
 
-  .csv-template-button:hover,
-  .csv-import-button:hover {
+  foundation-form .csv-template-button:hover,
+  foundation-form .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 `
-    :host {
+    foundation-form {
       background: ${SystemColors.Canvas};
       border-color: ${SystemColors.CanvasText};
     }

package/dist/esm/form.template.js

@@ -3,11 +3,10 @@ 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, ControlWrapper, DispatchRenderer, StepperWrapper);
+avoidTreeShaking(JSONForms, ArrayListWrapper, CategorizationWrapper, VerticalCategorizationWrapper, DispatchRenderer, StepperWrapper);
 /** @internal */
 export const getPrefixedForm = (prefix) => html `
   <template>

package/dist/esm/index.js

@@ -4,5 +4,7 @@ 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,15 @@ 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,
                 additionalErrors: this.jsonforms.core.additionalErrors,
+                path: action.path,
             });
         };
         /**
@@ -144,7 +149,28 @@ let JSONForms = class JSONForms extends FASTElement {
         this.schemaChanged();
     }
     dataChanged() {
-        this.schemaChanged();
+        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,
+        });
     }
     renderersChanged() {
         this.schemaChanged();
@@ -259,6 +285,7 @@ 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 `
-  :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 = {