Hai Form

<input id='test1' name='test1' value='' type='text'>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test1 = document.getElementById('test1');
    let parameters = {mask: '000 - AAA', label: 'Test 1', placeholder: '000 - AAA'}
    let haiInput =
        await HaiInput.create('text', test1, parameters);
</script>
                            

<input id='test2' name='test2' value='200' type='number'>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test2 = document.getElementById('test2');
    let parameters = {max: 250_000, label: 'Test 2'}
    let haiInput =
        await HaiInput.create('number', test2, parameters);
</script>
                            

<input id='test4' name='test4' type='text' value='on'>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test4 = document.getElementById('test4');
    let parameters = {label: 'Test 4'}
    let haiInput =
        await HaiInput.create('switch', test4, parameters);
</script>
                            

<input id='test4' name='test4' type='text' value='on'>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test4 = document.getElementById('test4');
    let parameters = {label: 'Test 4'}
    let haiInput =
        await HaiInput.create('switch', test4, parameters);
</script>
                            

<input id='test5' name='test5' type='text' value='py'>
<datalist id='test5-datalist'>
    <option value='php'>PHP</option>
    <option value='js'>Javascript</option>
    <option value='py'>Python</option>
</datalist>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test5 = document.getElementById('test5');
    let parameters = {list: 'test5-datalist', label: 'Test 5'};
    let haiInput =
        await HaiInput.create('switch', test5, parameters);
</script>
                            

<select id='test6' name='test6[]' multiple>
    <option value='js' selected>Javascript</option>
    <option value='py'>Python</option>
    <option value='php' selected>PHP</option>
    <option value='c#'>C#</option>
    <option value='c++'>C++</option>
    <option value='f'>F</option>
    <option value='ts'>Typescript</option>
    <option value='xml'>XML</option>
    <option value='json'>JSON</option>
    <option value='html'>HTML</option>
    <option value='shell'>Shell</option>
    <option value='markdown'>Markdown</option>
    <option value='css'>CSS</option>
</select>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test6 = document.getElementById('test6');
    let parameters = {label: 'Test 6', multiple: true};
    let haiInput =
        await HaiInput.create('select', test6, parameters);
</script>
                            

<select id='test7' name='test7[]' multiple>
    <optgroup label='First group'>
        <option value='py'>Python</option>
        <option value='php' selected>PHP</option>
    </optgroup>
    <optgroup label='Second group'>
        <option value='css'>CSS</option>
        <option value='xml'>XML</option>
        <option value='html'>HTML</option>
    </optgroup>
    <optgroup label='Third group'>
        <option value='js' selected>Javascript</option>
        <option value='c#'>C#</option>
        <option value='c++'>C++</option>
        <option value='shell'>Shell</option>
        <option value='markdown'>Markdown</option>
    </optgroup>
</select>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test7 = document.getElementById('test7');
    let parameters = {label: 'Test 7', multiple: true};
    let haiInput =
        await HaiInput.create('select', test7, parameters);
</script>
                            

<select id='test8' name='test8'>
    <option value='js' selected>Javascript</option>
    <option value='py'>Python</option>
    <option value='php' selected>PHP</option>
    <option value='c#'>C#</option>
    <option value='c++'>C++</option>
    <option value='f'>F</option>
    <option value='ts'>Typescript</option>
    <option value='xml'>XML</option>
    <option value='json'>JSON</option>
    <option value='html'>HTML</option>
    <option value='shell'>Shell</option>
    <option value='markdown'>Markdown</option>
    <option value='css'>CSS</option>
</select>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test8 = document.getElementById('test8');
    let parameters = {label: 'Test 8'};
    let haiInput =
        await HaiInput.create('select', test8, parameters);
</script>
                            

<input id='test9' name='test9'>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test9 = document.getElementById('test9');
    let parameters = {
        label: 'Test 9',
        enableSearch: false,
        options:
        [
            {
                value: 'php',
                label: 'PHP',
                group: 'First Group'
            },
            {
                value: 'javascript',
                label: 'JS',
                group: 'First Group'
            },
            {
                value: 'xml',
                label: 'XML',
                group: 'Second Group',
                selected: true
            },
            {
                value: 'json',
                label: 'JSON',
                group: 'Second Group'
            }
        ]};
    let haiInput =
        await HaiInput.create('select', test9, parameters);
</script>
                            

<input id='test10' name='test10[]'>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test10 = document.getElementById('test10');
    let parameters = {
        label: 'Test 10',
        placeholder: 'Click to select',
        optionsSource: 'employee-data.json',
        multiple: true
    };
    let haiInput =
        await HaiInput.create('select', test10, parameters);
</script>
                            

<input id='test11' name='test11[]' type='file'>

<script type='module' async>
    import {HaiInput} from './classes/hai-input-class.js';

    let test11 = document.getElementById('test11');
    let parameters = {
        label: 'Test 11',
        multiple: true,
        maxFilesCount: 5,
        allowedFileTypes: ['.pdf', 'image/*', 'text/css'],
        maxFileSize: 15_000_000
    };
    let haiInput =
        await HaiInput.create('file', test11, parameters);
</script>
                            

<input id='test-wysiwyg-1' name='test-wysiwyg-1' type='text'>

<script type='module' async>
    import {HaiInput} from './hai-form/hai-input-class.esm.min.js';

    let test_wysiwyg_1 = document.getElementById('test-wysiwyg-1');
    let parameters = {
        label: 'Test WYSIWYG 1',
        placeholder: 'Napiště komentář...'
    };
    let haiInput = await HaiInput.create('textarea', test_wysiwyg_1, parameters);
</script>
                            

<input id='test-password-1' name='test-password-1' type='password' autoComplete='new-password' value=''>

<script type='module' async>
    import {HaiInput} from './hai-form/hai-input-class.esm.min.js';

    let test_password_1 = document.getElementById('test-password-1');
    let parameters = {
        label: 'Test password 1',
        placeholder: 'Napiště heslo...',
        newPassword: true,
        minEntropy: 60,
        requiredCharacters: {
            lowercaseLetter: 2,
            uppercaseLetter: 3,
            number: 1,
            special: 1,
        }
    };
    let haiInput = await HaiInput.create('password', test_password_1, parameters);
</script>
                            

<input id='test-password-2' name='test-password-2' type='password' autocomplete='new-password' value=''>

<script type='module' async>
    import {HaiInput} from './hai-form/hai-input-class.esm.min.js';
    import {zxcvbn, zxcvbnOptions} from './ext-libraries/zxcvbn-ts/core.js';
    import zxcvbnCommonPackage from './ext-libraries/zxcvbn-ts/language-common.js';
    import zxcvbnEnPackage from './ext-libraries/zxcvbn-ts/language-en.js';

    let options =
        {
            translations: zxcvbnEnPackage.translations,
            graphs: zxcvbnCommonPackage.adjacencyGraphs,
            dictionary: {
                ...zxcvbnCommonPackage.dictionary,
                ...zxcvbnEnPackage.dictionary,
            },
            useLevenshteinDistance: true
        }

    zxcvbnOptions.setOptions(options);
    let customFunction = (password) => {
        return zxcvbn(password).score;
    };


    let test_password_2 = document.getElementById('test-password-2');
    let parameters = {
        label: 'Test password 2',
        placeholder: 'Napiště heslo...',
        newPassword: true,
        customPasswordCalcFun: customFunction,
        minPasswordStrength: 3
    };
    let haiInput = await HaiInput.create('password', test_password_2, parameters);
</script>