Portfolio/frontend/src/lib/components/textfield/TelephoneField.svelte
2022-12-21 17:01:32 +01:00

39 lines
810 B
Svelte

<script lang="ts">
import Telephone from '../icons/Telephone.svelte';
import TextField from './TextField.svelte';
let helperText: string = 'Zadejte platný telefon s předvolbou. Například +420 123 456 789';
export let placeholder: string = '';
export let value: string = '';
export let error: string = '';
// Phone Number formatting
$: {
let x = value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,3})(\d{0,3})/)!;
value =
(x[1] ? '+' + x[1] : '') +
(x[2] ? ' ' + x[2] : '') +
(x[3] ? ' ' + x[3] : '') +
(x[4] ? ' ' + x[4] : '');
}
</script>
<TextField
bind:error
bind:value
on:keydown
on:keyup
on:change
type="tel"
{placeholder}
{helperText}
icon
>
<div slot="icon" class="flex items-center justify-center">
<Telephone />
</div>
</TextField>
<style>
</style>