import { html } from '@microsoft/fast-element';
import { mapStateToControlProps, rankWith } from '@jsonforms/core';
import { isDate } from '../testers/isDate';
import { DATE_CONTROL_RANK } from './RenderersRanks';
export const DateControlRendererTemplate = html `
  <template>
    <control-wrapper
      :control=${(x) => x.control}
      :touched=${(x) => x.touched}
      ?submitted=${(x) => x.submitted}
    >
      <zero-text-field
        :value=${(x) => x.control.data === undefined || x.control.data === null
    ? ''
    : new Intl.DateTimeFormat('fr-CA', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
    }).format(x.control.data)}
        @change="${(x, c) => x.control.handleChange(x.control.path, c.event.target.control.valueAsNumber)}}"
        id=${(x) => x.control.path}
        type="date"
        data-test-id=${(x) => x.control.path}
        ?required=${(x) => x.control.required}
        ?disabled=${(x) => !x.control.enabled}
        @blur=${(x) => x.onBlur()}
        style="width: 100%"
      ></zero-text-field>
    </control-wrapper>
  </template>
`;
export const DateControlRendererEntry = {
    renderer: DateControlRendererTemplate,
    tester: rankWith(DATE_CONTROL_RANK, isDate),
    mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template
};
//# sourceMappingURL=DateControlRenderer.js.map