import { moduleMetadata } from '@storybook/angular';
import { Canvas, Meta, Story, Props } from '@storybook/addon-docs';

import { TwigContainerComponent }   from '../../../../utils/twig-container/twig-container.component';
import { InputSearchComponent }     from '../angular/input-search.component';


<Meta
    title='Components/Input Search'
    component={InputSearchComponent}
    decorators={[
        moduleMetadata({ declarations: [InputSearchComponent, TwigContainerComponent]})
    ]}
/>


# Input Search

<br/>



## Component API

<Props of={InputSearchComponent} />



## Drupal implementation example

```jsx
{% include '@bf-components/input-search/twig/index.twig' with {
    class                   : 'class',
    reversed                : true,
    buttonClass             : 'buttonClass',
    iconClass               : 'iconClass',
    invalidMsg              : 'invalidMsg',
    isDisabled              : false,
    input                   : {
        id                      : 'id',
        class                   : 'class',
        iconPosition            : 'right',
        type                    : 'text',
        placeholder             : 'Placeholder',
        name                    : 'Name',
        value                   : 'Value',
        extraAttribute          : 'extraAttribute',
    },
    inputSubmit             : {
        id                      : 'id',
        value                   : 'value',
        extraAttribute          : 'extraAttribute',
    },
    label                   : {
        value                   : 'value',
        class                   : 'class',
        extraAttribute          : 'extraAttribute',
    },
    mtValue                 : mtValue,
} only %}
```



## Drupal

export const Drupal = (args) => ({
    component: TwigContainerComponent,
    props: args,
});

<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='300px'
        args={{
            elementPath         : 'components/input-search/_doc/template.drupal',
            label_value         : 'Label',
            input_placeholder   : 'What are you looking for?',
            isInvalid           : false,
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>