@groundbrick/svelte-ui 0.1.1

package/dist/components/PhoneInput.svelte

@@ -0,0 +1,406 @@
+<script lang="ts">
+    import "../styles/forms.css";
+    import {
+        getCountryOptions,
+        getPhoneCountry,
+        getNationalNumber,
+        normalizePhone,
+        formatNationalAsYouType,
+        DEFAULT_COUNTRY,
+        type CountryOption,
+        type CountryCode,
+    } from "@200systems/shared";
+
+    interface Props {
+        /** ID único do campo */
+        id: string;
+        /** Label do campo */
+        label: string;
+        /** Valor em E.164 (bindable), ex.: "+351912345678" */
+        value?: string;
+        /** Placeholder do número nacional */
+        placeholder?: string;
+        /** Campo obrigatório */
+        required?: boolean;
+        /** Campo desabilitado */
+        disabled?: boolean;
+        /** Mensagem de erro */
+        error?: string;
+        /** Texto de ajuda */
+        helpText?: string;
+        /** País assumido por omissão */
+        defaultCountry?: CountryCode;
+        /** Callback de input (recebe o valor E.164) */
+        oninput?: (value: string) => void;
+        /** Callback de blur */
+        onblur?: () => void;
+        /** Classes CSS adicionais */
+        class?: string;
+    }
+
+    let {
+        id,
+        label,
+        value = $bindable(""),
+        placeholder = "912 345 678",
+        required = false,
+        disabled = false,
+        error,
+        helpText,
+        defaultCountry = DEFAULT_COUNTRY,
+        oninput,
+        onblur,
+        class: additionalClasses = "",
+    }: Props = $props();
+
+    const countries: CountryOption[] = getCountryOptions("pt");
+
+    // Estado interno: país selecionado + parte nacional digitada.
+    let selectedCountry = $state<CountryCode>(
+        getPhoneCountry(value, defaultCountry) ?? defaultCountry
+    );
+    let national = $state<string>(
+        formatNationalAsYouType(getNationalNumber(value, defaultCountry), selectedCountry)
+    );
+
+    let open = $state(false);
+    let search = $state("");
+    let inputEl = $state<HTMLInputElement | null>(null);
+
+    const current = $derived(
+        countries.find((c) => c.code === selectedCountry) ?? countries[0]
+    );
+
+    const filtered = $derived.by(() => {
+        const q = search.trim().toLowerCase();
+        if (!q) return countries;
+        const digitsQ = q.replace(/\D/g, "");
+        return countries.filter(
+            (c) =>
+                c.name.toLowerCase().includes(q) ||
+                c.code.toLowerCase().includes(q) ||
+                (digitsQ.length > 0 && c.callingCode.includes(digitsQ))
+        );
+    });
+
+    // Reconstrói o valor E.164 a partir do país + número nacional e propaga.
+    function emit() {
+        const digits = national.replace(/\D/g, "");
+        if (!digits) {
+            value = "";
+        } else {
+            const normalized = normalizePhone(`+${current.callingCode}${digits}`, selectedCountry);
+            // Enquanto o número está incompleto guarda-se o melhor esforço (a validação
+            // do formulário rejeita números inválidos na submissão).
+            value = normalized ?? `+${current.callingCode}${digits}`;
+        }
+        oninput?.(value);
+    }
+
+    function handleNationalInput(event: Event) {
+        const raw = (event.target as HTMLInputElement).value;
+
+        // Se colarem um número internacional completo, deteta o país e separa a parte nacional.
+        if (/^(\+|00)/.test(raw.trim())) {
+            const detected = getPhoneCountry(raw, defaultCountry);
+            if (detected) {
+                selectedCountry = detected;
+                national = formatNationalAsYouType(getNationalNumber(raw, defaultCountry), detected);
+                emit();
+                return;
+            }
+        }
+
+        // Aceita apenas dígitos e formata-os progressivamente (ex.: "912 345 678").
+        national = formatNationalAsYouType(raw, selectedCountry);
+        // Força a sincronização do DOM mesmo quando o valor formatado não muda
+        // (ex.: ao digitar uma letra que é removida), evitando caracteres inválidos presos.
+        if (inputEl && inputEl.value !== national) inputEl.value = national;
+        emit();
+    }
+
+    function selectCountry(code: CountryCode) {
+        selectedCountry = code;
+        open = false;
+        search = "";
+        // Reagrupa o número já digitado segundo o plano do novo país.
+        national = formatNationalAsYouType(national, code);
+        emit();
+    }
+
+    function toggle() {
+        if (disabled) return;
+        open = !open;
+        search = "";
+    }
+
+    // Fecha o dropdown ao clicar fora.
+    function handleWindowClick(event: MouseEvent) {
+        if (!open) return;
+        const target = event.target as HTMLElement;
+        if (!target.closest(`#${id}-phone-wrapper`)) {
+            open = false;
+        }
+    }
+</script>
+
+<svelte:window onclick={handleWindowClick} />
+
+<div class="ap-form-field {additionalClasses}">
+    <label for="{id}" class="ap-form-label">
+        <span class="ap-form-label-icon"><i class="bi bi-telephone"></i></span>
+        {label}
+        {#if required}
+            <span class="ap-form-required" aria-label="obrigatório">*</span>
+        {/if}
+    </label>
+
+    <div class="phone-input" id="{id}-phone-wrapper" class:is-invalid={!!error}>
+        <button
+            type="button"
+            class="phone-country"
+            onclick={toggle}
+            {disabled}
+            aria-haspopup="listbox"
+            aria-expanded={open}
+            aria-label="Selecionar país (indicativo {current.callingCode})"
+        >
+            <span class="phone-flag">{current.flag}</span>
+            <span class="phone-dial">+{current.callingCode}</span>
+            <i class="bi bi-chevron-down phone-caret"></i>
+        </button>
+
+        <input
+            {id}
+            bind:this={inputEl}
+            type="tel"
+            inputmode="tel"
+            class="ap-form-control phone-national"
+            {placeholder}
+            {required}
+            {disabled}
+            autocomplete="tel-national"
+            value={national}
+            oninput={handleNationalInput}
+            {onblur}
+            aria-invalid={error ? "true" : undefined}
+            aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+        />
+
+        {#if open}
+            <div class="phone-menu" role="listbox">
+                <div class="phone-search">
+                    <i class="bi bi-search"></i>
+                    <!-- svelte-ignore a11y_autofocus -->
+                    <input
+                        type="text"
+                        placeholder="Procurar país ou indicativo"
+                        bind:value={search}
+                        autofocus
+                        aria-label="Procurar país"
+                    />
+                </div>
+                <ul class="phone-options">
+                    {#each filtered as country (country.code)}
+                        <li>
+                            <button
+                                type="button"
+                                class="phone-option"
+                                class:selected={country.code === selectedCountry}
+                                role="option"
+                                aria-selected={country.code === selectedCountry}
+                                onclick={() => selectCountry(country.code)}
+                            >
+                                <span class="phone-flag">{country.flag}</span>
+                                <span class="phone-option-name">{country.name}</span>
+                                <span class="phone-option-dial">+{country.callingCode}</span>
+                            </button>
+                        </li>
+                    {:else}
+                        <li class="phone-empty">Sem resultados</li>
+                    {/each}
+                </ul>
+            </div>
+        {/if}
+    </div>
+
+    {#if error}
+        <div id="{id}-error" class="ap-form-error">
+            <i class="bi bi-exclamation-circle"></i>
+            {error}
+        </div>
+    {/if}
+
+    {#if helpText && !error}
+        <div id="{id}-help" class="ap-form-help">
+            <i class="bi bi-info-circle"></i>
+            {helpText}
+        </div>
+    {/if}
+</div>
+
+<style>
+    /* Contentor único com a borda/raio; botão e input ficam sem borda lá dentro. */
+    .phone-input {
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        border: 1px solid var(--color-border-strong);
+        border-radius: var(--radius-lg);
+        background: var(--color-bg-surface);
+        transition: all var(--transition-base);
+    }
+
+    .phone-input:focus-within {
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
+    }
+
+    .phone-input.is-invalid {
+        border-color: var(--color-danger, #d92d20);
+        border-width: 2px;
+    }
+
+    /* Neutraliza o ícone de erro global (.is-invalid::before), que entraria como item
+       flex à esquerda e desalinhava o campo. O erro é mostrado abaixo (.ap-form-error). */
+    .phone-input.is-invalid::before {
+        display: none;
+        content: none;
+    }
+
+    .phone-country {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-xs, 0.25rem);
+        padding: 0.72rem 0.85rem;
+        border: 0;
+        border-right: 1px solid var(--color-border);
+        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+        background: transparent;
+        color: var(--color-text, #1d2939);
+        font-size: var(--font-size-sm, 0.875rem);
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+    .phone-country:hover:not(:disabled) {
+        background: var(--color-gray-50);
+    }
+
+    .phone-country:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    .phone-flag {
+        font-size: 1.1rem;
+        line-height: 1;
+    }
+
+    .phone-dial {
+        font-weight: var(--font-weight-medium, 500);
+    }
+
+    .phone-caret {
+        font-size: 0.65rem;
+        opacity: 0.6;
+        margin-left: 0.125rem;
+        transition: transform 0.15s ease;
+    }
+
+    .phone-country[aria-expanded="true"] .phone-caret {
+        transform: rotate(180deg);
+    }
+
+    /* O input herda padding/tipografia de .ap-form-control mas sem borda/raio/fundo. */
+    .phone-national {
+        flex: 1 1 auto;
+        min-width: 0;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+    }
+
+    .phone-national:focus {
+        outline: none;
+        box-shadow: none;
+        border: 0;
+    }
+
+    .phone-national:disabled {
+        background: transparent;
+    }
+
+    .phone-menu {
+        position: absolute;
+        top: calc(100% + 4px);
+        left: 0;
+        z-index: 1050;
+        width: min(20rem, 90vw);
+        background: var(--color-surface, #fff);
+        border: 1px solid var(--color-border, #d0d5dd);
+        border-radius: var(--radius-md, 0.5rem);
+        box-shadow: var(--shadow-lg, 0 8px 24px rgba(16, 24, 40, 0.12));
+        overflow: hidden;
+    }
+
+    .phone-search {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid var(--color-border, #eaecf0);
+        color: var(--color-text-muted, #667085);
+    }
+
+    .phone-search input {
+        flex: 1 1 auto;
+        border: 0;
+        outline: none;
+        font-size: var(--font-size-sm, 0.875rem);
+        background: transparent;
+        color: var(--color-text, #1d2939);
+    }
+
+    .phone-options {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        max-height: 16rem;
+        overflow-y: auto;
+    }
+
+    .phone-option {
+        display: flex;
+        align-items: center;
+        gap: 0.625rem;
+        width: 100%;
+        padding: 0.5rem 0.75rem;
+        border: 0;
+        background: transparent;
+        text-align: left;
+        cursor: pointer;
+        font-size: var(--font-size-sm, 0.875rem);
+        color: var(--color-text, #1d2939);
+    }
+
+    .phone-option:hover,
+    .phone-option.selected {
+        background: var(--color-primary-soft, #f4eefe);
+    }
+
+    .phone-option-name {
+        flex: 1 1 auto;
+    }
+
+    .phone-option-dial {
+        color: var(--color-text-muted, #667085);
+    }
+
+    .phone-empty {
+        padding: 0.75rem;
+        text-align: center;
+        color: var(--color-text-muted, #667085);
+        font-size: var(--font-size-sm, 0.875rem);
+    }
+</style>

package/dist/components/PhoneInput.svelte.d.ts

@@ -0,0 +1,31 @@
+import "../styles/forms.css";
+import { type CountryCode } from "@200systems/shared";
+interface Props {
+    /** ID único do campo */
+    id: string;
+    /** Label do campo */
+    label: string;
+    /** Valor em E.164 (bindable), ex.: "+351912345678" */
+    value?: string;
+    /** Placeholder do número nacional */
+    placeholder?: string;
+    /** Campo obrigatório */
+    required?: boolean;
+    /** Campo desabilitado */
+    disabled?: boolean;
+    /** Mensagem de erro */
+    error?: string;
+    /** Texto de ajuda */
+    helpText?: string;
+    /** País assumido por omissão */
+    defaultCountry?: CountryCode;
+    /** Callback de input (recebe o valor E.164) */
+    oninput?: (value: string) => void;
+    /** Callback de blur */
+    onblur?: () => void;
+    /** Classes CSS adicionais */
+    class?: string;
+}
+declare const PhoneInput: import("svelte").Component<Props, {}, "value">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;