Ability to bind to complex control values

[colinscotttrapeze]

Given data:

{
  from: '2023-04-01',
  to: '2023-05-01',
}

It should be possible to map a value to a control that takes a value in the format of:

{
  startDate: '2023-04-01',
  endDate: '2023-05-01',
}

Given HTML markup:

  <!-- prefer this but not sure it will work due to case insensitive attribute names -->
  <my-date-range bind-startdate="/from" bind-enddate="/to"></my-date-range>
  <!-- otherwise this might work -->
  <my-date-range bind="{ startDate: '/from', endDate: '/to' }"></my-date-range>

And given a control binder of:

const dateRangeBinder = {
    controlSelector: 'my-date-range',
    initializeEvents: (element, onChange) => {
        element.addEventListener('change', async (event, ctx) => {
            const dateRange = {
               [ctx.bind.startDate]: event.detail.value.startDate,
               [ctx.bind.endDate]: event.detail.value.endDate,
            }
            onChange(value);
        });
    },
    writeValue: (control, value) => {
        control.value = {
            startDate: value.startDate,
            endDate: value.endDate,
        }
    },
};