import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import './StarRating.svelte';
const meta = {
    title: 'Indicators/Star Rating',
    component: 'm-star-rating',
    argTypes: {
        appearance: {
            control: 'inline-radio',
            options: ['standard', 'accent'],
        },
        size: {
            control: 'inline-radio',
            options: ['s', 'm', 'l'],
        },
        target: {
            control: 'radio',
            options: ['_self', '_blank', '_parent', '_top'],
        },
    },
    args: {
        rating: 3.5,
        appearance: 'accent',
        readonly: true,
    },
    render: (args) => {
        return html `
      <m-star-rating
        rating=${args.rating}
        ?readonly=${args.readonly}
        size=${ifDefined(args.size)}
        ?compact=${args.compact}
        appearance=${ifDefined(args.appearance)}
        text=${ifDefined(args.text)}
        href=${ifDefined(args.href)}
        target=${ifDefined(args.target)}
      ></m-star-rating>
    `;
    },
};
export default meta;
export const Default = {};
export const Input = {
    args: {
        readonly: false,
        rating: 0,
    },
};
export const SizeM = {
    args: {
        size: 'm',
    },
};
export const SizeL = {
    args: {
        size: 'l',
    },
};
export const Standard = {
    args: {
        appearance: 'standard',
    },
};
export const Text = {
    args: {
        appearance: 'accent',
        text: 'Additional text',
    },
};
export const Link = {
    args: {
        appearance: 'accent',
        text: 'Additional text',
        href: '#',
    },
};
export const Compact = {
    args: {
        compact: true,
        appearance: 'accent',
        text: '(35)',
    },
};
