import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Input',
};
const Template = new Builder(args => `<x-input ${toProps(args)}></x-input>`);
export const Simple = Template.args({
    placeholder: 'Enter a value'
}).build();
export const WithValidation = Template.args({
    label: 'Enter a email',
    type: 'email',
    validate: true,
    required: true,
}).build();
export const WithAutoHideLabel = Template.args({
    label: 'Description',
}).build();
export const WithLabel = Template.args({
    label: 'Description',
    placeholder: 'Enter a value'
}).build();
export const WithIndicator = Template.args({
    placeholder: '0.00',
}).build(args => `<x-input ${toProps(args)}><span slot="indicator">USD</span></x-input>`);
export const WithInformation = Template.args({
    placeholder: '0.00',
    info: 'This is a field with a description hover info icon'
}).build(args => `<x-input ${toProps(args)}><x-icon slot="indicator" name="credit-card"></x-icon></x-input>`);
export const WithMask = Template.args({
    label: 'Pattern Phone',
    mask: '+{7}(000)000-00-00',
    placeholder: 'Enter numbers'
}).build();
export const Loading = Template.args({
    loading: true,
    value: 'Example'
}).build();
export const Disabled = Template.args({
    value: 'Example',
    disabled: true,
}).build();
export const Cleanable = Template.args({
    label: 'Cleanable input',
    value: 'Example',
    cleanable: true,
}).build();
export const PasswordType = Template.args({
    value: 'Secret',
    type: 'password',
}).build();
export const NumericType = Template.args({
    type: 'numeric',
    value: 10,
    min: 1,
    max: 20
}).build();
export const AmountType = Template.args({
    type: 'amount',
    value: 10.99,
}).build(args => `<x-input ${toProps(args)}>
	<select slot="indicator">
		<option>USD</option>
		<option>HNL</option>
	</select>
</x-input>`);
export const ColorType = Template.args({
    color: 'default',
    label: 'Theme color',
    type: 'color',
}).build();
