import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { action } from 'storybook/actions';
import './NavigationIndicator.svelte';
const meta = {
    title: 'Indicators/Navigation indicator',
    component: 'm-navigation-indicator',
    argTypes: {
        action: {
            control: 'radio',
            options: ['pause', 'resume'],
            table: {
                defaultValue: {
                    summary: 'resume',
                },
            },
        },
    },
    args: {
        steps: 6,
        selected: 1,
    },
    render: (args) => html `
    <m-navigation-indicator
      steps="${args.steps}"
      selected="${args.selected}"
      action="${ifDefined(args.action)}"
      label="${ifDefined(args.label)}"
      ?player="${args.player}"
      @action="${action('action')}"
    ></m-navigation-indicator>
  `,
};
export default meta;
export const Default = {};
export const Standalone = {
    args: {
        player: false,
    },
};
