import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { action } from 'storybook/actions';
import './Tag.svelte';
const meta = {
    title: 'Indicators/Tag',
    component: 'm-tag',
    args: {
        label: 'Tag label',
    },
    argTypes: {
        size: {
            control: 'inline-radio',
            options: ['s', 'm', 'l'],
        },
        type: {
            control: 'radio',
            options: ['informative', 'interactive', 'contextualised', 'removable', 'selectable'],
        },
        'remove-tag': {
            control: false,
        },
    },
    render: (args) => html ` <m-tag
      type=${ifDefined(args.type)}
      size=${ifDefined(args.size)}
      id=${ifDefined(args.id)}
      name=${ifDefined(args.name)}
      label=${ifDefined(args.label)}
      ?checked=${args.checked}
      ?disabled=${args.disabled}
      contextualisednumber=${ifDefined(args.contextualisednumber)}
      removablelabel=${ifDefined(args.removablelabel)}
      @remove-tag=${action('remove-tag')}
    >
      ${unsafeHTML(ifDefined(args.icon))}
    </m-tag>`,
};
export default meta;
export const Default = {};
export const Size = {
    args: { size: 's' },
};
export const Interactive = {
    args: { type: 'interactive' },
};
export const Disabled = {
    args: {
        type: 'interactive',
        disabled: true,
    },
};
export const Contextualised = {
    args: {
        type: 'contextualised',
        contextualisednumber: 99,
    },
};
export const Removable = {
    args: {
        type: 'removable',
        id: 'tagId',
    },
};
export const Selectable = {
    args: {
        type: 'selectable',
        checked: true,
    },
};
