import { html } from 'lit-html';
import { ifDefined } from 'lit-html/directives/if-defined';
const meta = {
  args: {
    disabled: false,
    error: false,
    errorMessage: '',
    helperText: '',
    iconEnd: '',
    iconStart: '',
    label: 'Input label',
    max: '',
    maxlength: '',
    min: '',
    minlengthMessage: '',
    minlength: '',
    name: 'input-name',
    pattern: '',
    patternMessage: '',
    placeholder: '',
    readonly: false,
    required: false,
    requiredMessage: '',
    tooltip: '',
    type: '',
    value: '',
    width: '',
  },
  argTypes: {
    disabled: { table: { disable: true } },
    error: { table: { disable: true } },
    errorMessage: { table: { disable: true } },
    helperText: { table: { disable: true } },
    iconEnd: { table: { disable: true } },
    iconStart: { table: { disable: true } },
    max: { table: { disable: true } },
    maxlength: { table: { disable: true } },
    min: { table: { disable: true } },
    minlengthMessage: { table: { disable: true } },
    minlength: { table: { disable: true } },
    name: { table: { disable: true } },
    pattern: { table: { disable: true } },
    patternMessage: { table: { disable: true } },
    placeholder: { table: { disable: true } },
    readonly: { table: { disable: true } },
    required: { table: { disable: true } },
    requiredMessage: { table: { disable: true } },
    tooltip: { table: { disable: true } },
    type: { table: { disable: true } },
    value: { table: { disable: true } },
    width: { table: { disable: true } },
  },
  decorators: [
    (story, { args: { tooltip } }) => html `
        <style type="text/css">
          abds-input {
            padding-top: ${tooltip ? '2rem' : ''};
          }
        </style>
        ${story()}
      `,
  ],
  parameters: {
    controls: {
      hideNoControlsWarning: true,
      sort: 'requiredFirst',
    },
  },
  title: 'Components/Input/',
};
const story = ({ disabled, error, errorMessage, helperText, iconEnd, iconStart, id, label, max, maxlength, min, minlengthMessage, minlength, name, pattern, patternMessage, placeholder, readonly, required, requiredMessage, tooltip, type, value, width, }) => html `
  <abds-input
    disabled="${ifDefined(disabled || undefined)}"
    error="${ifDefined(error || undefined)}"
    error-message="${ifDefined(errorMessage || undefined)}"
    helper-text="${ifDefined(helperText || undefined)}"
    icon-end="${ifDefined(iconEnd || undefined)}"
    icon-start="${ifDefined(iconStart || undefined)}"
    id="${ifDefined(id || undefined)}"
    max="${ifDefined(max || undefined)}"
    maxlength="${ifDefined(maxlength || undefined)}"
    min="${ifDefined(min || undefined)}"
    minlength-message="${ifDefined(minlengthMessage || undefined)}"
    minlength="${ifDefined(minlength || undefined)}"
    name="${ifDefined(name || undefined)}"
    pattern-message="${ifDefined(patternMessage || undefined)}"
    pattern="${ifDefined(pattern || undefined)}"
    placeholder="${ifDefined(placeholder || undefined)}"
    readonly="${ifDefined(readonly || undefined)}"
    required-message="${ifDefined(requiredMessage || undefined)}"
    required="${ifDefined(required || undefined)}"
    tooltip="${ifDefined(tooltip || undefined)}"
    type="${ifDefined(type || undefined)}"
    value="${ifDefined(value || undefined)}"
    width="${ifDefined(width || undefined)}"
  >
    ${ifDefined(label || undefined)}
  </abds-input>
`;
export { meta, story };
//# sourceMappingURL=template.js.map