{"size": 1470, "ext": "js", "max_stars_repo_path": "storybook/src/elements/nuxeo-select/nuxeo-select.stories.js", "max_stars_repo_name": "nuxeo/nuxeo-elements", "max_stars_repo_stars_event_min_datetime": "2016-02-24T23:48:02.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-15T09:15:24.000Z", "max_issues_repo_path": "storybook/src/elements/nuxeo-select/nuxeo-select.stories.js", "max_issues_repo_name": "nuxeo/nuxeo-elements", "max_issues_repo_issues_event_min_datetime": "2015-11-03T19:42:22.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-07T09:36:12.000Z", "max_forks_repo_path": "storybook/src/elements/nuxeo-select/nuxeo-select.stories.js", "max_forks_repo_name": "nuxeo/nuxeo-elements", "max_forks_repo_forks_event_min_datetime": "2015-10-09T07:29:12.000Z", "max_forks_repo_forks_event_max_datetime": "2021-10-04T21:06:53.000Z"}
{"max_stars_count": 22, "max_issues_count": 483, "max_forks_count": 17, "avg_line_length": 35.0, "max_line_length": 94, "alphanum_fraction": 0.6129251701}
import { html } from 'lit-html';
import { storiesOf } from '@storybook/polymer';
import { boolean, select, text } from '@storybook/addon-knobs';
import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-select.js';
import { cities as CITIES } from '../../data/lists.data';

storiesOf('UI/nuxeo-select', module).add('Default', () => {
  const label = text('Label', 'Label');
  const placeholder = text('Placeholder', 'Placeholder');
  const errorMessage = text('Error message', 'Error message');
  const horizontalAlign = select('horizontalAlign', { left: 'left', right: 'right' }, 'left');
  const verticalAlign = select('verticalAlign', { top: 'top', bottom: 'bottom' }, 'top');
  const dynamicAlign = boolean('dynamicAlign', false);
  const readonly = boolean('Read only', false);
  const disabled = boolean('Disabled', false);
  const required = boolean('Required', false);
  return html`
    <style>
      .container {
        margin: 2rem;
        max-width: 300px;
      }
    </style>
    <div class="container">
      <nuxeo-select
        label="${label}"
        placeholder="${placeholder}"
        error-message="${errorMessage}"
        .options="${CITIES}"
        .selected="${CITIES[0]}"
        .horizontal-align="${horizontalAlign}"
        .vertical-align="${verticalAlign}"
        ?dynamic-align="${dynamicAlign}"
        ?readonly="${readonly}"
        ?disabled="${disabled}"
        ?required="${required}"
      >
      </nuxeo-select>
    </div>
  `;
});
