import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './BuiltInMenu.svelte';
import '../builtinmenuitem/BuiltInMenuItem.svelte';
import '@mozaic-ds/icons-svelte/components/Less24/Less24.svelte';
const meta = {
    title: 'Navigation/Built-in Menu',
    component: 'm-built-in-menu',
    subcomponents: { BuiltInMenuItem: 'm-built-in-menu-item' },
    tags: ['v2'],
    args: {
        selected: 1,
        item: `
      <m-built-in-menu-item slot="item" label="Label">
      </m-built-in-menu-item>

      <m-built-in-menu-item slot="item" label="Label" selected="true">
      </m-built-in-menu-item>

      <m-built-in-menu-item slot="item" label="Label">
      </m-built-in-menu-item>

      <m-built-in-menu-item slot="item" label="Label">
      </m-built-in-menu-item>
    `,
    },
    render: (args) => html `
    <m-built-in-menu .selected=${ifDefined(args.selected)} ?outlined=${args.outlined}>
      ${unsafeHTML(ifDefined(args.item))}
    </m-built-in-menu>
  `,
};
export default meta;
export const Default = {};
export const Icons = {
    args: {
        item: `
      <m-built-in-menu-item slot="item" label="Label" selected="true">
        <less-24 slot="icon"></less-24>
      </m-built-in-menu-item>

      <m-built-in-menu-item slot="item" label="Label">
        <less-24 slot="icon"></less-24>
      </m-built-in-menu-item>

      <m-built-in-menu-item slot="item" label="Label">
        <less-24 slot="icon"></less-24>
      </m-built-in-menu-item>

      <m-built-in-menu-item slot="item" label="Label">
        <less-24 slot="icon"></less-24>
      </m-built-in-menu-item>
    `,
    },
};
export const Outlined = {
    args: {
        outlined: true,
    },
};
