You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
865 B
27 lines
865 B
5 months ago
|
<script lang="ts">
|
||
|
|
import { getActiveUix } from '$active-uix';
|
||
|
|
import * as PasswordField from '$soma/components/password-field';
|
||
|
|
import { PASSWORD_FIELD_LANGS } from '$soma/components/password-field/langs';
|
||
|
|
import type { PasswordFieldCapsLockIndicatorProps } from './types';
|
||
|
|
|
||
|
|
let {
|
||
|
|
ref = $bindable(null),
|
||
|
|
children,
|
||
|
|
...rest
|
||
|
|
}: PasswordFieldCapsLockIndicatorProps = $props();
|
||
|
|
|
||
|
|
const uix = getActiveUix();
|
||
|
|
const capsLabel = $derived(uix.langs.ts(PASSWORD_FIELD_LANGS.CAPS_WARNING));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<PasswordField.CapsLockIndicator {...rest} bind:ref>
|
||
|
|
{#snippet children({ isActive })}
|
||
|
|
{#if children}
|
||
|
|
{@render children({ isActive })}
|
||
|
|
{:else}
|
||
|
|
<span data-password-field-caps-lock-glyph aria-hidden="true">⇪</span>
|
||
|
|
<span data-password-field-caps-lock-text>{isActive ? capsLabel : ''}</span>
|
||
|
|
{/if}
|
||
|
|
{/snippet}
|
||
|
|
</PasswordField.CapsLockIndicator>
|