<style type="text/css">
    .eicui-components > header {
      background: url('/app/assets/images/cards/eicui-banner.jpg');
    }
    .eicui-components button.show-code{
        width: min-content;
        float: right;
    }
    [eicdialog]>article { margin: auto; }

    .eicui-components code {
      white-space: pre-wrap  
    }
</style>
<article eiccard media class="eicui-components">
  <header>
    <h1>EICUI Components</h1>
    <h2></h2>
  </header>
  <section>
    <p>
      The EICUI component library is a complete portage of the EUI component library. 
      Despite the fact that it sticks to the design and behaviour of the original components, there are some major technical differences:
    </p>
    <ul bulleted>
      <li>The library is written in vanilla JS. So, it can virtually be embedded in any environment or framework, not limited only to AngularJS</li>
      <li>The library code is much lighter than the original EUI (about 15 times lighter)</li>
      <li>Components can be declared either through tags (for basic components) or by code (class instanciation)</li>
      <li>Some misleading or useless components options have been discarded.</li>
      <li>The icon library has been reduced and aligned to the EIC interface needs.</li>
    </ul>
    <h4>Main principles</h4>
  </section>
  <section>
    <h3>Basic components</h3>
    <article eiccard collapsable collapsed>
      <header>
        <h1>Alert messages</h1>
        <h2></h2>
      </header>
      <section>
          <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="alertsexample"></button>
          <br>
          <h6>Default</h6>
          <div class="alertsexample" data-codetitle="Alert messages" eicalert>Sample text</div>
          <h6>Closable</h6>
          <div class="alertsexample" data-codetitle="Alert messages (closable)" eicalert closable>Sample text</div>
          <h6>Severities</h6>
          <div class="alertsexample" data-codetitle="Alert messages (info)" eicalert info>"info" message (default)</div>
          <div class="alertsexample" data-codetitle="Alert messages (success)" eicalert success>"success" message</div>
          <div class="alertsexample" data-codetitle="Alert messages (secondary)" eicalert secondary>"secondary" message</div>
          <div class="alertsexample" data-codetitle="Alert messages (warning)" eicalert warning>"warning" message</div>
          <div class="alertsexample" data-codetitle="Alert messages (danger)" eicalert danger>"danger" message</div>
          <h6>Muted</h6>
          <div class="alertsexample" data-codetitle="Alert messages (info - muted)" eicalert info muted>"info" message (default)</div>
          <div class="alertsexample" data-codetitle="Alert messages (success - muted)" eicalert success muted>"success" message</div>
          <div class="alertsexample" data-codetitle="Alert messages (secondary - muted)" eicalert secondary muted>"secondary" message</div>
          <div class="alertsexample" data-codetitle="Alert messages (warning - muted)" eicalert warning muted>"warning" message</div>
          <div class="alertsexample" data-codetitle="Alert messages (danger - muted)" eicalert danger muted>"danger" message</div>
      </section>
    </article>
    <article eiccard collapsable collapsed>
        <header>
          <h1>Badges</h1>
          <h2>
            <span eicchip xsmall info><label>severity</label></span>
            <span eicchip xsmall info><label>size</label></span>
          </h2>
        </header>
        <section>
          <h6>Default usage</h6>
          <p>Use one of the available icon-* class to display the desired icon :</p>
          <span eicbadge>9</span>
          <span eicbadge>hello</span>
          <h6>Color variants</h6>
          <p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
          <pre>    &lt;span <strong>eicbadge</strong>&gt;value&lt;/span&gt;  </pre>
          <span eicbadge primary>9</span>
          <span eicbadge secondary>9</span>
          <span eicbadge info>9</span>
          <span eicbadge success>9</span>
          <span eicbadge warning>9</span>
          <span eicbadge danger>9</span>
          <span eicbadge accent>9</span>
          <h6>Sizing</h6>
          <span eicbadge xxsmall>9</span>
          <span eicbadge xsmall>9</span>
          <span eicbadge small>9</span>
          <span eicbadge medium>9</span>
          <span eicbadge large>9</span>
          <span eicbadge xlarge>9</span>
          <span eicbadge xxlarge>9</span>
          <span eicbadge xxxlarge>9</span>
          <span eicbadge xxxxlarge>9</span>
        </section>
      </article>
      <article eiccard collapsable collapsed>
        <header>
          <h1>Buttons</h1>
          <h2>
            <span eicchip xsmall info><label>severity</label></span>
            <span eicchip xsmall info><label>size</label></span>
            <span eicchip xsmall info><label>badge</label></span>
          </h2>
        </header>
        <section>
          <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="buttons"></button>

          <h6>Default button</h6>
          <button eicbutton class="buttons" data-codetitle="button">Base button</button>
          <h6>Color semantics</h6>
          <p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
          <button eicbutton class="buttons" data-codetitle="button">Base button</button>
          <button eicbutton primary class="buttons" data-codetitle="button">Primary button</button>
          <button eicbutton secondary class="buttons" data-codetitle="button">Secondary button</button>
          <button eicbutton info class="buttons" data-codetitle="button">Info button</button>
          <button eicbutton success class="buttons" data-codetitle="button">Success button</button>
          <button eicbutton warning class="buttons" data-codetitle="button">Warning button</button>
          <button eicbutton danger class="buttons" data-codetitle="button">Dangerous button</button>
          <button eicbutton accent class="buttons" data-codetitle="button">Accent button</button>
          <h6>Rounded buttons</h6>
          <p>Using the attribute option : <code>rounded</code></p>
          <button eicbutton rounded class="buttons" data-codetitle="button">Base button</button>
          <button eicbutton rounded primary class="buttons" data-codetitle="button">Primary button</button>
          <button eicbutton rounded secondary class="buttons" data-codetitle="button">Secondary button</button>
          <button eicbutton rounded danger class="buttons" data-codetitle="button">Dangerous button</button>
          <button eicbutton rounded warning class="buttons" data-codetitle="button">Dangerous button</button>
          <button eicbutton rounded info class="buttons" data-codetitle="button">Dangerous button</button>
          <h6>Disabled buttons</h6>
          <p>Disable a button by adding a <code>disabled</code> attribute </p>
          <button eicbutton disabled class="buttons" data-codetitle="button">Base button</button>
          <button eicbutton disabled small danger rounded class="buttons" data-codetitle="button">Base button</button>
          <button eicbutton disabled rounded large class="buttons" data-codetitle="button">Base button</button>
          <h6>Sizes</h6>
          <p>Adapt specific sizes by using the attribute option : <code>small</code> | <code>large</code></p>
          <button eicbutton xsmall class="buttons" data-codetitle="button">XSmall button</button>
          <button eicbutton small class="buttons" data-codetitle="button">Small button</button>
          <button eicbutton class="buttons" data-codetitle="button">Medium (default) button</button>
          <button eicbutton large class="buttons" data-codetitle="button">Large button</button>
          <h6>With badge</h6>
          <p>Add abadge using attribute : <code>badge="value"</code></p>
          <button eicbutton badge="99" class="buttons" data-codetitle="button">Badged button</button>
          <button eicbutton badge="!" class="buttons" data-codetitle="button">Badged button</button>
          <h6>Loader state</h6>
          <p>Set button under a loading state using attribute : <code>loading="true"</code></p>
          <p>Please note that buttons under loading state are also automaticaly disabled</p>
          <button eicbutton loading="true" primary class="buttons" data-codetitle="button">I'm waiting for something</button>
          <button eicbutton loading="true" primary icon="icon-search" class="buttons" data-codetitle="button"></button>
        </section>
      </article>
      <article eiccard collapsable collapsed>
        <header>
          <h1>CHiPs (tadataladaaaa)</h1>
          <h2>
            <span eicchip xsmall info><label>severity</label></span>
            <span eicchip xsmall info><label>size</label></span>
          </h2>
        </header>
        <section>
          <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="chips"></button>
          <h6>Default</h6>
          <div class="chips" data-codetitle="CHiPs basic patrol">
            <span eicchip><label>I'm Poncherello</label></span>
            <span eicchip><label>I'm Baker (the other guy)</label></span>
          </div>
          <h6>Color semantics</h6>
          <p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
          <div class="chips" data-codetitle="CHiPs patrol with colors">
            <span eicchip primary><label>Primary</label></span>
            <span eicchip secondary><label>Secondary</label></span>
            <span eicchip info><label>Info</label></span>
            <span eicchip warning><label>Warning</label></span>
            <span eicchip danger><label>Danger</label></span>
            <span eicchip success><label>Success</label></span>
            <span eicchip accent><label>Accent</label></span>
          </div>
          <h6>Destroyable</h6>
          <p>Using the attribute option : <code>destroyable</code></p>
          <div class="chips" data-codetitle="CHiPs destroy patrol (only for bad guys of course)">
            <span eicchip destroyable><label>Zombie</label></span>
            <span eicchip destroyable><label>Mosquito</label></span>
          </div>
          <h6>With icon</h6>
          <p>Using the attribute option : <code>icon="..."</code>. See available icons in the styleguide</p>
          <div class="chips" data-codetitle="CHiPs patrol with icon">
            <span eicchip danger icon="icon-user"><label>Zombie</label></span>
            <span eicchip warning destroyable icon="icon-warning"><label>Mosquito</label></span>          
          </div>
          <h6>Sizes</h6>
          <div class="chips" data-codetitle="CHiPs patrol where size matters">
            <span eicchip xxsmall><label>xxsmall</label></span>
            <span eicchip xsmall><label>xsmall</label></span>
            <span eicchip small><label>small</label></span>
            <span eicchip><label>medium (default)</label></span>
            <span eicchip large><label>large</label></span>
                          <span eicchip xlarge><label>xlarge</label></span>
                          <span eicchip xxlarge><label>xxlarge</label></span>
          </div>
          <h6>Sizes with icons</h6>
          <div class="chips" data-codetitle="CHiPs patrol with sizes and icons">
            <span eicchip xxsmall icon="icon-user" destroyable><label>xxsmall</label></span>
            <span eicchip xsmall icon="icon-user" destroyable><label>xsmall</label></span>
            <span eicchip small icon="icon-user" destroyable><label>small</label></span>
            <span eicchip icon="icon-user" destroyable><label>medium (default)</label></span>
            <span eicchip large icon="icon-user" destroyable><label>large chip</label></span>
            <span eicchip xlarge icon="icon-user" destroyable><label>xlarge chip</label></span>
            <span eicchip xxlarge icon="icon-user" destroyable><label>xxlarge chip</label></span>
          </div>
          <h6>Outline variant</h6>
          <p>Using the attribute option : <code>outline</code></p>
          <div class="chips" data-codetitle="CHiPs patrol with attribute options">
            <span eicchip outline primary><label>Primary</label></span>
            <span eicchip outline secondary><label>Secondary</label></span>
            <span eicchip outline info><label>Info</label></span>
            <span eicchip outline warning><label>Warning</label></span>
            <span eicchip outline danger><label>Danger</label></span>
            <span eicchip outline success><label>Success</label></span>
            <span eicchip outline accent><label>Accent</label></span>
          </div>
        </section>
      </article>
      <article eiccard collapsable collapsed>
        <header>
          <h1>Drop-down Menus</h1>
          <h2></h2>
        </header>
        <section>
          <p>to be described</p>
        </section>
      </article>
      <article eiccard collapsable collapsed>
        <header>
          <h1>Growler</h1>
          <h2></h2>
        </header>
        <section>
            <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="growlerexample"></button>
            <br>
            <button eicbutton info class="growl-test growlerexample" data-codetitle="info growler" data-message="Roarr!" data-severity="info">Click me</button>
            <button eicbutton warning class="growl-test growlerexample" data-codetitle="warning growler" data-message="You've been warned" data-severity="warning">Click me for a warning</button>
            <button eicbutton danger class="growl-test growlerexample" data-codetitle="danger growler" data-message="Something went wrong" data-severity="danger">Click me for something bad</button>
        </section>
      </article>
      <article eiccard collapsable collapsed>
          <header>
            <h1>Icons</h1>
            <h2>
              <span eicchip xsmall info><label>severity</label></span>
              <span eicchip xsmall outline><label>size</label></span>
            </h2>
          </header>
          <section>
            <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="icons"></button>
            <h6>Default usage</h6>
            <p>Use one of the available icon-* class to display the desired icon :</p>
            <h6>Color variants</h6>
            <p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
            <pre>    &lt;span class="<strong>icon-coaching</strong>"&gt;&lt;/span&gt;  </pre>
            <span class="icon-coaching icons" primary></span>
            <span class="icon-coaching icons" secondary></span>
            <span class="icon-coaching icons" success></span>
            <span class="icon-coaching icons" warning></span>
            <span class="icon-coaching icons"danger></span>
            <span class="icon-coaching icons" accent></span>
            <span class="icon-coaching icons" info></span>
            <h6>Sizing</h6>
            <span class="icon-coaching icons" xxsmall></span>
            <span class="icon-coaching icons" xsmall></span>
            <span class="icon-coaching icons" small></span>
            <span class="icon-coaching icons" medium></span>
            <span class="icon-coaching icons" large></span>
            <span class="icon-coaching icons" xlarge></span>
            <span class="icon-coaching icons" xxlarge></span>
            <span class="icon-coaching icons" xxxlarge></span>
            <span class="icon-coaching icons" xxxxlarge></span>
            
          </section>
        </article>
        <article eiccard collapsable collapsed>
          <header>
            <h1>Menus</h1>
            <h2></h2>
          </header>
          <section>
            <p>to be described</p>
          </section>
        </article>
  </section>
  <section>
    <h3>Container components</h3>
    <article eiccard collapsable collapsed>
      <header>
        <h1>Cards</h1>
        <h2>
          <span eicchip xsmall info><label>severity</label></span>
          <span eicchip xsmall info><label>badge</label></span>
        </h2>
      </header>
      <section>
        <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="cards"></button>
        <p>The card component is used to group various pieces of content into a container which can be used throughout your website.</p>
        <h6>Default</h6>
        <p>Basically a card component is a DOM structure using this blueprint:</p>
        <article eiccard class="cards" data-codetitle="Default card"><section>Some content</section></article>
        <h6>Severities</h6>
        <p>cards support standard severity attributes : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
        <article eiccard primary class="cards" data-codetitle="Primary card"><section>Some primary content</section></article>
        <article eiccard secondary class="cards" data-codetitle="Secondary card"><section>Some secondary content</section></article>
        <article eiccard danger class="cards" data-codetitle="Danger card"><section>Some dangerous content</section></article>
        <article eiccard warning class="cards" data-codetitle="Warning card"><section>Some warning content</section></article>
        <article eiccard info class="cards" data-codetitle="Info card"><section>Some info content</section></article>
        <article eiccard success class="cards" data-codetitle="Success card"><section>Some success content</section></article>
        <article eiccard accent class="cards" data-codetitle="Accent card"><section>Some accent content</section></article>
        <h6>Header and footer</h6>
        <article eiccard primary class="cards" data-codetitle="Header and footer card">
          <header>
            <h1>This is title</h1>
            <h2>This is subtitle</h2>
          </header>
          <section>Some primary content</section>
          <footer>this is footer</footer>
        </article>
        <p>Each part of this structure is optional, meaning you only keep from the strucure what is actually use. Just remove the unnecessary parts.</p>
        <h6>Collapsable content</h6>
        <p>You may choose to allow your card content to be collapsed (hidden) at user will. Simply add a <code>collapsable</code> attribute to your card (the main article tag).</p>
        <article eiccard danger collapsable class="cards" data-codetitle="Collapsable card">
          <header>
            <h1>I'm expanded</h1>
            <h2>...but not for long</h2>
          </header>
          <section>Some dangerous content</section>
        </article>
        <p>To control the initial state of the card, by deault the card will appear expand. If you want it to appear collapsed, add a <code>collapsed</code> attribute to the card too.</p>
        <article eiccard success collapsable collapsed class="cards" data-codetitle="Collapsed card">
          <header>
            <h1>Uncollapse me</h1>
          </header>
          <section>Some dangerous content withoutt subtitle</section>
        </article>
      </section>
    </article>
    <article eiccard collapsable collapsed>
      <header>
        <h1>Dialogs</h1>
        <h2></h2>
      </header>
      <section>         
        <p>to be described</p>
        <h6>Basic usage</h6>
        <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="dialogexample"></button>
        <button eicbutton info small class="dialog-test dialogexample" data-codetitle="Opening a dialog">open a dialog</button>
        <h6>Using view content</h6>
        <p>to be described</p>
        <h6>Custom actions</h6>
        <p>to be described</p>
      </section>
    </article>
    <article eiccard collapsable collapsed>
      <header>
        <h1>Tabs</h1>
        <h2></h2>
      </header>
      <section>
        <p>to be described</p>
        <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="tabdefault"></button>
        <h6>Default</h6>
        <div class="tabdefault" data-codetitle="Tabs default">
          <menu eictab class="sample1" xxlarge>
              <li>Tab 1</li>
              <li>Tab 2</li>
              <li>Tab 3</li>
          </menu>
          <article eiccard class="tab-content sample1" xxlarge danger>
              <header>
              <h1>Tab 1 insight</h1>
              <h2>This is the 1st tab</h2>
              </header>
              <section>Tab 1 content</section>
          </article>
          <article eiccard class="tab-content sample1" xxlarge warning>
              <section>Tab 2 content</section>
          </article>
          <article eiccard class="tab-content sample1" xxlarge success>
              <section>Tab 3 content</section>
          </article>
        </div>
        <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="tabvertical"></button>
        <h6>Vertical</h6>
        <div class="tabvertical" data-codetitle="Tabs vertical">          
          <div class="cols-2 left">
              <menu eictab vertical class="sample2" xsmall>
              <li>Tab 1</li>
              <li>Tab 2</li>
              <li>Tab 3</li>
              </menu>
              <article eiccard class="tab-content sample2">
              <header>
                  <h1>Tab 1 insight</h1>
                  <h2>This is the 1st tab</h2>
              </header>
              <section>Tab 1 content</section>
              </article>
              <article eiccard class="tab-content sample2">
              <section>Tab 2 content</section>
              </article>
              <article eiccard class="tab-content sample2">
              <section>Tab 3 content</section>
              </article>
          </div>
        </div>
      </section>
    </article>
  </section>
  <section>
    <h3>Form components</h3>
    <article eiccard collapsable collapsed>
      <header>
        <h1>Inputs</h1>
        <h2>
          <span eicchip xsmall info><label>severity</label></span>
          <span eicchip xsmall danger><label>badge</label></span>
          <span eicchip xsmall info><label>form</label></span>
        </h2>
      </header>
      <section>
        <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="inputs"></button>
        <h6>Default</h6>
        <input eicinput value="This is some text..." class="inputs" data-codetitle="Input default"/>
        <label>Secondary (default)</label>
        <input eicinput secondary value="This is some text..." class="inputs" data-codetitle="Input secondary (default)"/>
        <label>Primary</label>
        <input eicinput primary value="This is some text..." class="inputs" data-codetitle="Input primary"/>
        <label>Danger / invalid</label>
        <input eicinput danger value="This is some text..." class="inputs" data-codetitle="Input danger/invalid"/>
        <label>Success</label>
        <input eicinput success value="This is some text..." class="inputs" data-codetitle="Input success"/>
        <label>Warning</label>
        <input eicinput warning value="This is some text..." class="inputs" data-codetitle="Input warning"/>
        <label>Info</label>
        <input eicinput info value="This is some text..." class="inputs" data-codetitle="Input info"/>
        <label>Accent</label>
        <input eicinput accent value="This is some non editable text..." class="inputs" data-codetitle="Input accent"/>
        <h6>Search input</h6>
        <input eicinput type="search" value="" class="inputs" data-codetitle="Query string Input"/>
        <h6>Number input</h6>
        <input eicinput type="number" value="" class="inputs" data-codetitle="Input for number"/>
        <h6>Date input</h6>
        <input eicinput type="date" value="" class="inputs" data-codetitle="Input for date"/>
        <h6>Date and time input</h6>
        <input eicinput type="datetime" value="" class="inputs" data-codetitle="Input for date & time"/>
        <h6>Accent</h6>
        <input eicinput accent value="This is some non editable text..." class="inputs" data-codetitle="Input accent"/>
        <h6>Multiple</h6>
        <p>(DEPRECATED)</p>
        <p>see Select[editable] for a replacer</p>
        <h6>Toggler</h6>
        <div class="cols-4">
          <input eicinput type="toggler" small data-path="toggy1" trueValue="wai" falseValue="queneni" labelright="Light" class="inputs" data-codetitle="Input toggler"/>
          <input eicinput type="toggler" medium warning data-path="toggy2" trueValue="wai" falseValue="queneni" labelleft="Dishwasher" class="inputs" data-codetitle="Input toggler"/>
          <input eicinput type="toggler" large danger data-path="toggy3" trueValue="wai" falseValue="queneni" labelright="Toaster" value="wai" class="inputs" data-codetitle="Input toggler"/>
          <input eicinput type="toggler" xlarge primary size="large" data-path="toggy4" trueValue="hifi" falseValue="tv" labelleft="TV" labelright="Hifi" class="inputs" data-codetitle="Input toggler"/>
      </div>
      </section>
    </article>
    <article eiccard collapsable collapsed>
      <header>
        <h1>Textareas</h1>
        <h2>
          <span eicchip xsmall info><label>severity</label></span>
          <span eicchip xsmall info><label>badge</label></span>
          <span eicchip xsmall info><label>form</label></span>
        </h2>
      </header>
      <section>
        <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="textareas"></button>
        <h6>Default</h6>
        <textarea eictextarea class="textareas" data-codetitle="Textarea default">This is some text...</textarea>
        <h6>Hint</h6>
        <p>Using the attribute option : <code>hint="..."</code></p>
        <textarea eictextarea hint="Please don't be gross." class="textareas" data-codetitle="Textarea with hint">This is some text...</textarea>
        <h6>With badge</h6>
        <p>You may check for size limitation, either by character length, word amount or byte length (according to the current text encoding)</p>
        <p>Characters limit: add attribute <code>maxlen="..."</code></p>
        <textarea eictextarea maxlen="200" hint="No more than 200 chars" placeholder="What's on your mind..." class="textareas" data-codetitle="Textarea with maxlen"></textarea>
        <p>Words limit: add attribute <code>maxwords="..."</code></p>
        <textarea eictextarea maxwords="20" hint="No more than 20 words" placeholder="What's on your mind..."class="textareas" data-codetitle="Textarea with maxwords"></textarea>
        <p>Bytes limit: add attribute <code>maxbytes="..."</code></p>
        <textarea eictextarea maxbytes="2048" hint="No more than 2048 bytes" placeholder="What's on your mind..." class="textareas" data-codetitle="Textarea with maxbytes"></textarea>
      </section>
    </article>
    
    <article eiccard collapsable collapsed>
      <header>
        <h1>Selects</h1>
        <h2></h2>
      </header>
      <section>
        <p>to be described</p>
        <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="selects"></button>
        <h6>Default</h6>
        <select eicselect class="selects" data-codetitle="Select default">
          <option></option>
          <option value="Pizza">Pizza</option>
          <option value="Burger">Burger</option>
          <option value="Kebab">Kebab</option>
        </select>
        <h6>Multi-selection</h6>
        <select eicselect multi class="selects" data-codetitle="Select with multi-selection">
          <option></option>
          <option value="Pizza">Pizza</option>
          <option value="Burger">Burger</option>
          <option value="Kebab">Kebab</option>
        </select>
        <h6>With lookup</h6>
        <select eicselect multi lookup class="selects" data-codetitle="Select with lookup">
          <option></option>
          <option value="Pizza">Pizza</option>
          <option value="Burger">Burger</option>
          <option value="Kebab">Kebab</option>
        </select>

        <h6>Multi-level selection</h6>
        <select eicselect multi lookup class="selects" data-codetitle="Select with multi-level selection">
          <option></option>
          <option value="Pizzas" data-ref="pizza">Pizza</option>
          <option value="Burger" data-ref="burger">Burger</option>
          <option value="Kebab" data-ref="Kebab">Kebab</option>
          <optgroup data-parent="burger" >
            <option value="simple">Simple</option>
            <option value="bacon">Bacon</option>
          </optgroup>
          <optgroup data-parent="pizza" >
            <option value="margarita">Margarita</option>
            <option value="4cheese">4 Cheese</option>
          </optgroup>
        </select>
        <div eicalert warning>
          KNOWN BUG: 
          When selection popup is opened and user interacts with anoter element of the page wich leads to the removal of the select component from the DOM (i.e. closing a dialog containing the Select component), 
          the selection popup will stay opened. any interaction (click) outside the selection popup will hide it.</div>
      </section>
    </article>
    <article eiccard collapsable collapsed>
      <header>
        <h1>Checkboxes</h1>
        <h2></h2>
      </header>
      <section>
        <p>to be described</p>
      </section>
    </article>
    <article eiccard collapsable collapsed>
      <header>
        <h1>Forms</h1>
        <h2>
          <span eicchip xsmall info><label>form</label></span>
        </h2>
      </header>
      <section>
        <p>
          The Form component, only availbale as an instanciable class is not a visual component. Associated with a DOM element, the Form will identify all inputs, textareas and selects defined in this DOM element and provide helper methods to manage this set of fields. 
          Each field detected will be analyzed to identify:
        </p>
        <ul bulleted>
          <li>validation rules</li>
          <li>name and path described in the field. allowing exports to JSON format</li>
        </ul>
        <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="forms"></button>
        <h6>Simple form</h6>
        <form class="forms" data-codetitle="Simple form">
          <textarea eictextarea>This is some text...</textarea>
        </form>
        <h6>Form validation</h6>
        <p>to be descibed</p>
        <h6>JSON export</h6>
        <p>to be descibed</p>
      </section>
    </article>

  </section>
  <section>
    <h2>Advanced components</h2>
    <article eiccard collapsable collapsed>
      <header>     
          <h1>DataGrid</h1>
          <h2></h2>
      </header>
      <section>
          <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="gridexample"></button>
          <div eicdatagrid class="gridexample" data-codetitle="DataGrid"></div>
      </section>
    </article>
    <article eiccard collapsable collapsed>
      <header>
        <h1>WorkflowMap</h1>
        <h2></h2>
      </header>
      <section>
        <div eicflowmap></div>
      </section>
    </article>
    <article eiccard collapsable collapsed>
      <header>
        <h1>BarChart</h1>
        <h2></h2>
      </header>
      <section>
          <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="barchart"></button>
          <div eicbarchart></div>
      </section>
    </article>
    <article eiccard collapsable >
      <header>
        <h1>LineChart</h1>
        <h2></h2>
      </header>
      <section>
        <div class="">
          <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="linechart"></button>
          <div eiclinechart></div>
          <div>
            <span eicchip success small>Sidney</span>
            <span eicchip primary small>New York</span>
            <span eicchip danger small>Notre-Dame-de-Livoye</span>
          </div>
          <div eicalert info>
            <p>Note: Due to the fact that this component uses paths and path coordinates cannot be declared as relative (using percentage for instance), if you need a fluid resizing of the component, you need to call the redraw() method when resizing your container (typically using the DOMContentResized() method of your view).<br/>
               example:</p>
            <code>
class myview extends DOMContent {

...

DOMContentResized() {
    super.DOMContentResized();
    this.mylinechart.redraw();
}
}
            </code>
          </div>
        </div>
      </section>
    </article>
    <article eiccard collapsable collapsed>
      <header>
        <h1>FileUpload</h1>
        <h2></h2>
      </header>
      <section>
          <button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="fileuploadexample"></button>
          <h4>Normal server:</h4>
          <div eicfileupload class="filupld fileuploadexample" data-codetitle="Upload to normal server"></div> 
          <h4>AWS infra (getting signed URL):</h4>
          <div eicfileupload class="filupld2 fileuploadexample" data-codetitle="Upload to AWS S3 bucket"></div> 
      </section>
    </article>
  </section>
</article>