fix: floatinginput type changes

[jjagielka]

Closes #435

📑 Description

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• I have checked the page with https://validator.unl.edu/
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

ℹ Additional Information

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	Nov 19, 2022 at 1:38PM (UTC)
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	Nov 19, 2022 at 1:38PM (UTC)

[Rar9]

I updated to 0.28, but issue remains

[jjagielka]

Just tested with 0.28

<script>
  import { FloatingLabelInput, Toggle } from 'flowbite-svelte'
  let checked = false;
</script>

<Toggle class="mb-4" bind:checked>Show password</Toggle>
<FloatingLabelInput style="filled" name="floating_helper" type={checked?"text":"password"} label="Password"/>

Works as a charm. Are doing something else?

[Rar9]

<script> import { FloatingLabelInput, Helper, Button } from "flowbite-svelte"; import Icon from "@iconify/svelte"; let show_password = false; $: inputColor = show_password ? "red" : "base"; $: inputShow = show_password ? "text" : "password"; </script>

	<div class="w-full relative">
		<FloatingLabelInput
			id="floating_password"
			label="Password"
			color={inputColor}
			type={inputShow}
			autocomplete="current-password"
			class="mb-4"
		/>

		<!-- svelte-ignore a11y-click-events-have-key-events -->
		<div
			on:click={() => (show_password = !show_password)}
			class="absolute top-1/2 transform -translate-y-1/2 right-2 z-10"
		>
			<Icon
				icon="bi:eye-slash-fill"
				color="base"
				width="32"
				height="32"
				class={!show_password ? "hidden" : "h-5 w-5"}
			/>

			<Icon
				icon="bi:eye-fill"
				color="gray"
				width="32"
				height="32"
				class={show_password ? "hidden" : "h-5 w-5"}
			/>
		</div>
	</div>

[jjagielka]

Your example works for me perfectly.

[Rar9]

OK i found the issue Thnaks

[jjagielka]

What was the issue? For the records only.

[Rar9]

a stupid Input vs input

[Rar9]

I its possible to add InputAddon to FloatingLables??

So i can add easily a pre/suffix or icons before /after to the input field?