import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './TileSelectable.svelte';
const meta = {
    title: 'Content/Tile/Selectable',
    component: 'm-tile-selectable',
    argTypes: {
        inputtype: {
            control: { type: 'radio' },
            options: ['checkbox', 'radio'],
        },
        inputposition: {
            control: { type: 'radio' },
            options: ['right', 'left'],
        },
    },
    args: {
        default: `<div class="placeholder-slot">Insert a form element here to replace this slot.</div>`,
    },
    render: (args) => html `
    <m-tile-selectable
      ?checked="${args.checked}"
      ?bordered="${args.bordered}"
      inputtype="${ifDefined(args.inputtype)}"
      inputposition="${ifDefined(args.inputposition)}"
      ?centered="${ifDefined(args.centered)}"
    >
      ${unsafeHTML(ifDefined(args.default))}
    </m-tile-selectable>
  `,
};
export default meta;
export const Default = {};
export const RadioButton = {
    args: {
        inputtype: 'radio',
    },
};
export const LeftPositionInput = {
    args: {
        inputposition: 'left',
    },
};
