import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { action } from 'storybook/actions';
import './RadioGroup.svelte';
const meta = {
    title: 'Form Elements/Radio Group',
    component: 'm-radio-group',
    args: {
        name: 'radioGroupName',
        value: 'radio2',
        options: [
            {
                id: 'radio-01',
                label: 'Radio button Label',
                value: 'radio1',
            },
            {
                id: 'radio-02',
                label: 'Radio button Label',
                value: 'radio2',
            },
            {
                id: 'radio-03',
                label: 'Radio button Label',
                value: 'radio3',
            },
            {
                id: 'radio-04',
                label: 'Radio button Label',
                value: 'radio4',
            },
        ],
    },
    render: (args) => {
        const onInput = action('input');
        const onChange = action('change');
        const onFocus = action('focus');
        const onBlur = action('blur');
        return html `
      <m-radio-group
        name=${ifDefined(args.name)}
        .options=${ifDefined(args.options)}
        value=${ifDefined(args.value)}
        ?isinvalid=${args.isinvalid}
        ?inline=${args.inline}
        @input=${(event) => {
            onInput(event);
        }}
        @change=${(event) => {
            onChange(event);
        }}
        @focus=${(event) => {
            onFocus(event);
        }}
        @blur=${(event) => {
            onBlur(event);
        }}
      ></m-radio-group>
    `;
    },
};
export default meta;
export const Default = {};
