import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Field.svelte';
import '../textinput/Textinput.svelte';
const meta = {
    title: 'Form Elements/Field',
    component: 'm-field',
    args: {
        label: 'Label',
        id: 'ReplaceByInputId',
        default: `
      <!-- All the code below must be replaced by a form element. -->
      <div class="content-slot">
        Insert a form element here to replace this slot.
      </div>
    `,
    },
    render: (args) => html `
    <m-field
      id=${ifDefined(args.id)}
      label=${ifDefined(args.label)}
      requirementtext=${ifDefined(args.requirementtext)}
      helptext=${ifDefined(args.helptext)}
      helpid=${ifDefined(args.helpid)}
      ?isvalid=${args.isvalid}
      ?isinvalid=${args.isinvalid}
      ?isloading=${args.isloading}
      messageid=${ifDefined(args.messageid)}
      message=${ifDefined(args.message)}
    >
      ${unsafeHTML(ifDefined(args.default))}
    </m-field>
  `,
};
export default meta;
export const Default = {};
export const Input = {
    args: {
        label: 'Label',
        id: 'inputId',
        default: `
      <m-textinput
        id="inputId"
        placeholder="Placeholder"
      ></m-textinput>
    `,
    },
};
export const InputFull = {
    args: {
        label: 'Label',
        requirementtext: 'optional',
        helptext: 'Help text',
        helpid: 'inputFullId',
        id: 'inputFullId',
        default: `
      <m-textinput
        id="inputFullId"
        placeholder="Placeholder"
      ></m-textinput>
    `,
    },
};
export const InputValid = {
    args: {
        label: 'Label',
        requirementtext: 'required',
        helptext: 'Help text',
        helpid: 'inputvalidId',
        id: 'inputvalidId',
        isvalid: true,
        message: 'Validation message (Be concise and use comprehensive words).',
        default: `
      <m-textinput
        id="inputvalidId"
        placeholder="Placeholder"
      ></m-textinput>
    `,
    },
};
export const InputInvalid = {
    args: {
        label: 'Label',
        requirementtext: 'required',
        helptext: 'Help text',
        helpid: 'inputInvalidId',
        id: 'inputInvalidId',
        isinvalid: true,
        message: 'Error message (Be concise and use comprehensive words)',
        default: `
      <m-textinput
        id="inputInvalidId"
        placeholder="Placeholder"
        isInvalid
      ></m-textinput>
    `,
    },
};
export const InputLoading = {
    args: {
        label: 'Label',
        id: 'inputLoadingId',
        isloading: true,
        message: 'Loading message (Be concise and use comprehensive words).',
        default: `
      <m-textinput
        id="inputInvalidId"
        placeholder="Placeholder"
      ></m-textinput>
    `,
    },
};
