import { html } from 'lit-html';
import { ifDefined } from 'lit-html/directives/if-defined';
export const meta = {
  argTypes: {
    for: { table: { disable: true } },
    label: { table: { disable: true } },
    open: { table: { disable: true } },
    placement: { table: { disable: true } },
  },
  args: {
    for: 'tooltip-1',
    label: 'Tooltip information',
    open: false,
    placement: '',
  },
  decorators: [
    (story, { args: { placement } }) => html `
      <style type="text/css">
        #root,
        .docs-story,
        .docs-story .innerZoomElementWrapper {
          margin: 0 1rem;
          min-height: 4rem;
          position: relative;
        }
        abds-button {
          left: ${placement === 'left' ? '8rem' : '0'};
          position: absolute;
          top: ${!placement || placement === 'top' ? '2.5rem' : placement === 'bottom' ? '0' : '1rem'};
        }
      </style>
      ${story()}
    `,
  ],
  parameters: {
    controls: {
      hideNoControlsWarning: true,
      sort: 'requiredFirst',
    },
  },
  title: 'Components/Tooltip/',
};
export const story = ({ for: htmlFor, label, open, placement }) => html `
  <abds-button appearance="outline" id="${htmlFor}" palette="neutral">
    Tooltip ${placement ? placement : 'top'}
  </abds-button>
  <abds-tooltip
    for="${ifDefined(htmlFor || undefined)}"
    open="${ifDefined(open || undefined)}"
    placement="${ifDefined(placement || undefined)}"
  >
    ${label}
  </abds-tooltip>
`;
export default { meta, story };
//# sourceMappingURL=template.js.map