Criteria

<e-criteria id="testcriteria" label="A">
  <e-criteria-template key="condition_template">
    <label class="e-field__label">
      Input label
    </label>
    <input class="e-input" type="text" name="testname" e-criteria-input>
  </e-criteria-template>
  <e-criteria-template key="checkbox_template">
    <input class="e-checkbox" id="criteriacheckbox" type="checkbox" name="checkboxtest" e-criteria-input>
    <label for="criteriacheckbox">
      checkbox label
    </label>
  </e-criteria-template>
  <e-criteria-template key="condition_template2">
    <label class="e-field__label" for="selectvar">
      Select label
    </label>
    <e-select>
      <select class="e-select" id="selectvar" name="testgender" e-criteria-input>
        <option value="Female">
          Female
        </option>
        <option value="Male">
          Male
        </option>
        <option value="Other">
          Other
        </option>
      </select>
    </e-select>
  </e-criteria-template>
  <e-criteria-template key="condition_template3">
    <input class="e-input" type="text" name="testname2" e-criteria-input>
    <label class="e-field__label" for="selectvar">
      Daterange label
    </label>
    <e-datetime name="testdaterange" type="daterange"></e-datetime>
  </e-criteria-template>
</e-criteria>

<e-criteria id="testcriteria" label="A">
  <e-criteria-template key="condition_template">
    <label class="e-field__label">
      Input label
    </label>
    <input class="e-input" type="text" name="testname" e-criteria-input>
  </e-criteria-template>
  <e-criteria-template key="checkbox_template">
    <input class="e-checkbox" id="criteriacheckbox" type="checkbox" name="checkboxtest" e-criteria-input>
    <label for="criteriacheckbox">
      checkbox label
    </label>
  </e-criteria-template>
  <e-criteria-template key="condition_template2">
    <label class="e-field__label" for="selectvar">
      Select label
    </label>
    <e-select>
      <select class="e-select" id="selectvar" name="testgender" e-criteria-input>
        <option value="Female">
          Female
        </option>
        <option value="Male">
          Male
        </option>
        <option value="Other">
          Other
        </option>
      </select>
    </e-select>
  </e-criteria-template>
  <e-criteria-template key="condition_template3">
    <input class="e-input" type="text" name="testname2" e-criteria-input>
    <label class="e-field__label" for="selectvar">
      Daterange label
    </label>
    <e-datetime name="testdaterange" type="daterange"></e-datetime>
  </e-criteria-template>
</e-criteria>

const criteriaElement = document.querySelector('#testcriteria');
criteriaElement.conditionTypes = [{ "key": "first_name", "label": "First Name", "templateKey": "condition_template" }, { "key": "checkbox_condition", "label": "Checkbox condition", "templateKey": "checkbox_template" }, { "key": "gender", "label": "Gender", "templateKey": "condition_template2" }, { "key": "daterange", "label": "Daterange", "templateKey": "condition_template3" }];

criteriaElement.value = {
  relation: 'and',
  conditions: [
    { conditionTypeKey: 'first_name', values: [{ name: 'testname', value: 'John'}] },
  ]
};

criteriaElement.addEventListener('change', event => {
  if (event.detail.type === 'relation') {
    return;
  }

  const template = event.detail.template;

  if (template.key !== 'condition_template3') { return; }

  const daterange = template.element.querySelector('e-datetime[name="testdaterange"]');

  criteriaElement.updateConditionValues(event.detail.id, [{ name: 'start', value: daterange.value.start }, { name: 'end', value: daterange.value.end }]);
});

criteriaElement.addEventListener('edit', event => {
  const template = event.detail.template;

  if (template.key !== 'condition_template3') { return; }

  const daterange = template.element.querySelector('e-datetime[name="testdaterange"]');

  const values = event.detail.values.reduce((previous, current) => {
    previous[current.name] = current.value;
    return previous;
  }, {});

  if (!values) { return; }

  daterange.start = values.start;
  daterange.end = values.end;
});