vicowa-web-components
Version:
64 lines (56 loc) • 3.13 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ViCoWa Web Components - vicowa-input</title>
<script type="module" src="../../src/vicowa-input/vicowa-input.js"></script>
<style>
body[lang="en_US"] #english,
body[lang="nl_NL"] #dutch {
background-color: blue;
color: white;
}
vicowa-input {
width: 100%;
margin-bottom: 1em;
}
</style>
</head>
<body lang="en_US">
<div id="translations">
<button id="english">English</button>
<button id="dutch">Nederlands</button>
</div>
<p>
<vicowa-input label="input 1"></vicowa-input>
<vicowa-input label="not empty" validator-name="notEmpty"></vicowa-input>
<vicowa-input label="email" validator-name="email" placeholder="email" tooltip="email" type="email" autocomplete="email"></vicowa-input>
<vicowa-input label="Canadian Postal Code" validator-name="postalCodeCA" placeholder="postal code" tooltip="postal code" autocomplete="postal-code"></vicowa-input>
<vicowa-input label="Canadian Postal Code" validator-name="postalCodeCA" placeholder="postal code" tooltip="postal code" prevent-invalid-input value="H0H0H0"></vicowa-input>
<vicowa-input label="Dutch Postal Code" validator-name="postalCodeNL" placeholder="postal code" tooltip="postal code"></vicowa-input>
<vicowa-input label="US Zip Code" validator-name="postalCodeUS" top-label placeholder="zip code" tooltip="zip code"></vicowa-input>
<vicowa-input label="Password" validator-name="notEmpty" top-label placeholder="Password" tooltip="password" type="password"></vicowa-input>
<vicowa-input label="Number" validator-name="notEmpty" top-label placeholder="Number" tooltip="Number" type="number"></vicowa-input>
<vicowa-input label="Search" validator-name="notEmpty" top-label placeholder="Search" tooltip="Search" type="search"></vicowa-input>
<vicowa-input label="url" validator-name="notEmpty" top-label placeholder="url" tooltip="url" type="url"></vicowa-input>
</p>
<div><button id="checkvalid">Check valid</button></div>
<div>
<input type="checkbox" id="static">
<label for="static">Toggle static</label>
</div>
<script type="module">
import translator from '../../src/utilities/translate.js';
// setup the translator
translator.addTranslationLocation('../resources/translations');
translator.addTranslationUpdatedObserver((p_Translator) => {
document.body.setAttribute('lang', p_Translator.language);
}, null);
translator.language = document.body.getAttribute('lang');
document.querySelector('#english').addEventListener('click', () => { translator.language = 'en_US'; });
document.querySelector('#dutch').addEventListener('click', () => { translator.language = 'nl_NL'; });
document.querySelector('#checkvalid').addEventListener('click', () => { Array.from(document.querySelectorAll('vicowa-input')).forEach((p_Element) => p_Element.updateValidFeedback()) });
document.querySelector('#static').addEventListener('click', () => { Array.from(document.querySelectorAll('vicowa-input')).forEach((p_Element) => p_Element.static = document.querySelector('#static').checked) });
</script>
</body>
</html>