import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './TileExpandable.svelte';
const meta = {
    title: 'Content/Tile/Expandable',
    component: 'm-tile-expandable',
    argTypes: {
        appearance: {
            control: { type: 'radio' },
            options: ['primary', 'secondary'],
        },
        trigger: {
            control: { type: 'radio' },
            options: ['icon', 'button', 'container'],
        },
    },
    args: {
        default: `<div class="placeholder-slot">Click on expand button to see details.</div>`,
        details: `
      <div slot="details" class="placeholder-slot">
        Insert a form element here to replace this slot.
      </div>
    `,
    },
    render: (args) => html `
    <m-tile-expandable
      appearance="${ifDefined(args.appearance)}"
      ?bordered="${args.bordered}"
      trigger="${ifDefined(args.trigger)}"
      label="${ifDefined(args.label)}"
    >
      ${unsafeHTML(ifDefined(args.default))} ${unsafeHTML(ifDefined(args.details))}
    </m-tile-expandable>
  `,
};
export default meta;
export const Default = {};
