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.
30 lines
968 B
30 lines
968 B
<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 { ArrowBigUp } from '$uix/eidos/components/icon';
|
|
import type { PasswordFieldCapsLockIndicatorProps } from './types';
|
|
|
|
let {
|
|
ref = $bindable(null),
|
|
children: outerChildren,
|
|
...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 outerChildren}
|
|
{@render outerChildren({ isActive })}
|
|
{:else}
|
|
<span data-password-field-caps-lock-glyph aria-hidden="true">
|
|
<ArrowBigUp />
|
|
</span>
|
|
<span data-password-field-caps-lock-text>{isActive ? capsLabel : ''}</span>
|
|
{/if}
|
|
{/snippet}
|
|
</PasswordField.CapsLockIndicator>
|