@allakando/allakando-web-ui/dist/storybook/assets/forms.stories-8a2117e5.js

Allakando's web component library

import"./DialogManager-abca015e.js";import{i}from"./StyleInjection-7d750a8d.js";const a=`# Forms

Allakando's design system forms can be imported using forms.css.

This will automatically style your form components (\\<input>, \\<textarea>, \\<select>).

Apart from general styles all input fields with text input will display validation state using both icons and colors

There are additionally a few utility classes that you can use:

- .small-select and .micro-select can be applied to \\<select> elements to make them more compact. 
- role="switch" can be applied to \\<input type="checkbox"> elements to transform them into switches.
- .large-input on \\<input> fields will make them extra large.
- .left-icon-mail and .left-icon-password will add an icon to \\<input> fields on the left side. Note that this will overwrite any validation icons. `,d={title:"Style Injection/Forms",component:"Forms",tags:["autodocs"],parameters:{docs:{description:{component:a}}}},e=()=>(window.AllakandoWebUI={injectStyle:i},`
        <script>
            AllakandoWebUI.injectStyle({
                forms: true
            })
        <\/script>
        <style>
            div {
                margin-bottom: 1rem;
            }
            input,
            textarea {
                display: block;
            }
        </style>
        <div id="input-container">
            <div>
                <label>Text</label>
                <input type="text" placeholder="Type text here..." />
            </div>
            <div>
                <label>Email</label>
                <input type="email" placeholder="Email text here..." />
            </div>
            <div>
                <label>Password</label>
                <input type="password" placeholder="Secret text here..." />
            </div>
            <div>
                <label>Large field</label>
                <input class="large-input" type="password" placeholder="Secret text here..." />
            </div>
            <div>
                <label>Disabled</label>
                <input placeholder="Disabled..." disabled />
            </div>
            <div>
                <label>ABC Pattern</label>
                <input type="text" pattern="abc" placeholder="Type abc to test validation..." required />
            </div>
            <div>
                <label>Search</label>
                <input type="search" required />
            </div>
            <div>
                <label>Date</label>
                <input type="date" />
            </div>
            <div>
                <label>Time</label>
                <input type="time" />
            </div>
            <div>
                <label>Color</label>
                <input type="color" />
            </div>
            <div>
                <label>number</label>
                <input type="number" />
            </div>
            <div>
                <label>Dropdown</label>
                <select>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <div>
                <label>Dropdown small</label>
                <select class="small-select">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <div>
                <label>Dropdown micro</label>
                <select class="micro-select">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <div>
                <label>Long text</label>
                <textarea placeholder="Long text here..."></textarea>
            </div>
            <div>
                <label>Toggle</label>
                <input type="checkbox" role="switch" />
            </div>
            <div>
                <label>Checkbox</label>
                <input type="checkbox" />
            </div>
            <div>
                <label>Radio</label>
                <input type="radio" />
            </div>
            <div>
                <label>File</label>
                <input type="file" />
            </div>
            <div>
                <label>Range</label>
                <input type="range" />
            </div>
        </div>
    `);var t,l,n;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`() => {
  window.AllakandoWebUI = {
    injectStyle
  };
  return \`
        <script>
            AllakandoWebUI.injectStyle({
                forms: true
            })
        <\/script>
        <style>
            div {
                margin-bottom: 1rem;
            }
            input,
            textarea {
                display: block;
            }
        </style>
        <div id="input-container">
            <div>
                <label>Text</label>
                <input type="text" placeholder="Type text here..." />
            </div>
            <div>
                <label>Email</label>
                <input type="email" placeholder="Email text here..." />
            </div>
            <div>
                <label>Password</label>
                <input type="password" placeholder="Secret text here..." />
            </div>
            <div>
                <label>Large field</label>
                <input class="large-input" type="password" placeholder="Secret text here..." />
            </div>
            <div>
                <label>Disabled</label>
                <input placeholder="Disabled..." disabled />
            </div>
            <div>
                <label>ABC Pattern</label>
                <input type="text" pattern="abc" placeholder="Type abc to test validation..." required />
            </div>
            <div>
                <label>Search</label>
                <input type="search" required />
            </div>
            <div>
                <label>Date</label>
                <input type="date" />
            </div>
            <div>
                <label>Time</label>
                <input type="time" />
            </div>
            <div>
                <label>Color</label>
                <input type="color" />
            </div>
            <div>
                <label>number</label>
                <input type="number" />
            </div>
            <div>
                <label>Dropdown</label>
                <select>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <div>
                <label>Dropdown small</label>
                <select class="small-select">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <div>
                <label>Dropdown micro</label>
                <select class="micro-select">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <div>
                <label>Long text</label>
                <textarea placeholder="Long text here..."></textarea>
            </div>
            <div>
                <label>Toggle</label>
                <input type="checkbox" role="switch" />
            </div>
            <div>
                <label>Checkbox</label>
                <input type="checkbox" />
            </div>
            <div>
                <label>Radio</label>
                <input type="radio" />
            </div>
            <div>
                <label>File</label>
                <input type="file" />
            </div>
            <div>
                <label>Range</label>
                <input type="range" />
            </div>
        </div>
    \`;
}`,...(n=(l=e.parameters)==null?void 0:l.docs)==null?void 0:n.source}}};const r=["Template"];export{e as Template,r as __namedExportsOrder,d as default};