import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Fields/Timepicker',
    component: 'x-timepicker',
};
const Template = new Builder(args => `<x-timepicker ${toProps(args)}></x-timepicker>`);
export const Simple = Template.args({
    value: '08:32:45',
}).build();
export const WithLabel = Template.args({
    now: true,
    label: 'Time',
}).build();
export const WithIndicator = Template.args({
    placeholder: '0.00',
}).build(args => `<x-timepicker ${toProps(args)}><x-icon slot="indicator" name="clock"></x-icon></x-timepicker>`);
export const WithInformation = Template.args({
    placeholder: '0.00',
    info: 'This is a field with a description hover info icon'
}).build(args => `<x-timepicker ${toProps(args)}><x-icon slot="indicator" name="clock"></x-icon></x-timepicker>`);
export const Loading = Template.args({
    label: 'Time',
    loading: true,
    value: '08:32:45',
}).build();
export const Disabled = Template.args({
    label: 'Time',
    value: '08:32:45',
    disabled: true,
}).build();
export const Cleanable = Template.args({
    label: 'Cleanable input',
    value: '08:32:45',
    cleanable: true,
}).build();
