import { mapStateToControlProps, rankWith } from '@jsonforms/core';
import { html } from '@microsoft/fast-element';
import { isOneOfOptionMultiselect } from '../testers/isOneOfOptionMultiselect';
import { MULTISELECT_CONTROL_RANK } from './RenderersRanks';
export const ConnectedMultiselectControlRendererTemplate = html `
  <template>
    <control-wrapper
      :control=${(x) => x.control}
      :touched=${(x) => x.touched}
      ?submitted=${(x) => x.submitted}
    >
      <zero-multiselect
        style="width: 100%"
        :selectedOptions=${(x) => x.control.data || []}
        @selectionChange=${(x, c) => {
    x.control.handleChange(x.control.path, c.event.detail);
    x.onBlur();
}}
      >
        <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; }}
        ></multiselect-datasource>
      </zero-multiselect>
    </control-wrapper>
  </template>
`;
export const ConnectedMultiselectControlRendererEntry = {
    renderer: ConnectedMultiselectControlRendererTemplate,
    tester: rankWith(MULTISELECT_CONTROL_RANK, isOneOfOptionMultiselect),
    mapper: mapStateToControlProps,
};
//# sourceMappingURL=ConnectedMultiselectControlRenderer.js.map