@africanies/angular-web-sdk 0.1.10 → 0.1.12

package/dist/libs/africanies-ui/fesm2022/africanies-africanies-ui.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, output, signal, Injector, DestroyRef, Injectable, numberAttribute, Directive, viewChild, contentChild, model, makeEnvironmentProviders, provideAppInitializer, forwardRef, InjectionToken, effect, afterNextRender, viewChildren, TemplateRef, contentChildren, untracked, runInInjectionContext, afterRenderEffect, NgModule } from '@angular/core';
+import { inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, output, signal, Injector, DestroyRef, Injectable, numberAttribute, Directive, viewChild, contentChild, model, makeEnvironmentProviders, provideAppInitializer, forwardRef, InjectionToken, effect, afterNextRender, viewChildren, untracked, TemplateRef, contentChildren, runInInjectionContext, afterRenderEffect, NgModule } from '@angular/core';
 import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 import { ModeColorService, ThemeService } from '@africanies/africanies-theme';
-import { copyToClipboard, AFRICANIES_HTTP_TOAST, FilterOptionsResolver, MODAL_SERVICE, DRAWER_SERVICE, ShippingModeService, resolveNotificationLinkForMode } from '@africanies/africanies-core';
+import { copyToClipboard, AFRICANIES_HTTP_TOAST, FilterOptionsResolver, MODAL_SERVICE, DRAWER_SERVICE, countryFlagUrl, ShippingModeService, resolveNotificationLinkForMode } from '@africanies/africanies-core';
 import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Router, ActivatedRoute, RouterLink, NavigationEnd } from '@angular/router';
@@ -11487,6 +11487,994 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
   `, styles: [".africanies-otp-cell-masked{-webkit-text-security:disc;text-security:disc}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cellInputs: [{ type: i0.ViewChildren, args: ['cellInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showResend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResend", required: false }] }], resendPrompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "resendPrompt", required: false }] }], resendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resendLabel", required: false }] }], resendCooldown: [{ type: i0.Input, args: [{ isSignal: true, alias: "resendCooldown", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], resend: [{ type: i0.Output, args: ["resend"] }] } });
 
+/**
+ * ISO 3166-1 alpha-2 → dial code (with `+`).
+ *
+ * Shared with classic import-export phone fields; used when
+ * `libphonenumber-js` is not bundled as a peer.
+ */
+const PHONE_DIAL_CODES = {
+    AF: '+93',
+    AX: '+358',
+    AL: '+355',
+    DZ: '+213',
+    AS: '+1',
+    AD: '+376',
+    AO: '+244',
+    AI: '+1',
+    AQ: '+672',
+    AG: '+1',
+    AR: '+54',
+    AM: '+374',
+    AW: '+297',
+    AU: '+61',
+    AT: '+43',
+    AZ: '+994',
+    BS: '+1',
+    BH: '+973',
+    BD: '+880',
+    BB: '+1',
+    BY: '+375',
+    BE: '+32',
+    BZ: '+501',
+    BJ: '+229',
+    BM: '+1',
+    BT: '+975',
+    BO: '+591',
+    BQ: '+599',
+    BA: '+387',
+    BW: '+267',
+    BV: '+55',
+    BR: '+55',
+    IO: '+246',
+    BN: '+673',
+    BG: '+359',
+    BF: '+226',
+    BI: '+257',
+    KH: '+855',
+    CM: '+237',
+    CA: '+1',
+    CV: '+238',
+    KY: '+1',
+    CF: '+236',
+    TD: '+235',
+    CL: '+56',
+    CN: '+86',
+    CX: '+61',
+    CC: '+61',
+    CO: '+57',
+    KM: '+269',
+    CG: '+242',
+    CK: '+682',
+    CR: '+506',
+    HR: '+385',
+    CU: '+53',
+    CW: '+599',
+    CY: '+357',
+    CZ: '+420',
+    DK: '+45',
+    DJ: '+253',
+    DM: '+1',
+    DO: '+1',
+    CD: '+243',
+    EC: '+593',
+    EG: '+20',
+    SV: '+503',
+    GQ: '+240',
+    ER: '+291',
+    EE: '+370',
+    ET: '+251',
+    FK: '+500',
+    FO: '+298',
+    FJ: '+679',
+    FI: '+358',
+    FR: '+33',
+    GF: '+594',
+    PF: '+689',
+    TF: '+262',
+    GA: '+241',
+    GM: '+220',
+    GE: '+995',
+    DE: '+49',
+    GH: '+233',
+    GI: '+350',
+    GR: '+30',
+    GL: '+299',
+    GD: '+1',
+    GP: '+590',
+    GU: '+1',
+    GT: '+502',
+    GG: '+44',
+    GN: '+224',
+    GW: '+245',
+    GY: '+592',
+    HT: '+509',
+    HM: '+672',
+    HN: '+504',
+    HK: '+852',
+    HU: '+36',
+    IS: '+354',
+    IN: '+91',
+    ID: '+62',
+    IR: '+98',
+    IQ: '+964',
+    IE: '+353',
+    IM: '+44',
+    IL: '+972',
+    IT: '+39',
+    CI: '+225',
+    JM: '+1',
+    JP: '+81',
+    JE: '+44',
+    JO: '+962',
+    KZ: '+7',
+    KE: '+254',
+    KI: '+686',
+    XK: '+383',
+    KW: '+965',
+    KG: '+996',
+    LA: '+856',
+    LV: '+371',
+    LB: '+961',
+    LS: '+266',
+    LR: '+231',
+    LY: '+218',
+    LI: '+423',
+    LT: '+370',
+    LU: '+352',
+    MO: '+853',
+    MK: '+389',
+    MG: '+261',
+    MW: '+265',
+    MY: '+60',
+    MV: '+960',
+    ML: '+223',
+    MT: '+356',
+    MH: '+692',
+    MQ: '+596',
+    MR: '+222',
+    MU: '+230',
+    YT: '+262',
+    MX: '+52',
+    FM: '+691',
+    MD: '+373',
+    MC: '+377',
+    MN: '+976',
+    ME: '+382',
+    MS: '+1',
+    MA: '+212',
+    MZ: '+258',
+    MM: '+95',
+    NA: '+264',
+    NR: '+674',
+    NP: '+977',
+    NL: '+31',
+    AN: '+599',
+    NC: '+687',
+    NZ: '+64',
+    NI: '+505',
+    NE: '+227',
+    NG: '+234',
+    NU: '+683',
+    NF: '+672',
+    MP: '+1',
+    KP: '+850',
+    NO: '+47',
+    OM: '+968',
+    PK: '+92',
+    PW: '+680',
+    PS: '+970',
+    PA: '+507',
+    PG: '+675',
+    PY: '+595',
+    PE: '+51',
+    PH: '+63',
+    PN: '+64',
+    PL: '+48',
+    PT: '+351',
+    PR: '+1',
+    QA: '+974',
+    RO: '+40',
+    RU: '+7',
+    RW: '+250',
+    RE: '+262',
+    BL: '+590',
+    MF: '+590',
+    SH: '+290',
+    KN: '+1',
+    LC: '+1',
+    PM: '+508',
+    VC: '+1',
+    WS: '+685',
+    SM: '+378',
+    ST: '+239',
+    SA: '+966',
+    SN: '+221',
+    RS: '+381',
+    SC: '+248',
+    SL: '+232',
+    SG: '+65',
+    SX: '+1',
+    SK: '+421',
+    SI: '+386',
+    SB: '+677',
+    SO: '+252',
+    ZA: '+27',
+    GS: '+500',
+    KR: '+82',
+    SS: '+211',
+    ES: '+34',
+    LK: '+94',
+    SD: '+249',
+    SR: '+597',
+    SJ: '+47',
+    SZ: '+268',
+    SE: '+46',
+    CH: '+41',
+    SY: '+963',
+    TW: '+886',
+    TJ: '+992',
+    TZ: '+255',
+    TH: '+66',
+    TL: '+670',
+    TG: '+228',
+    TK: '+690',
+    TO: '+676',
+    TT: '+1',
+    TN: '+216',
+    TR: '+90',
+    TM: '+993',
+    TC: '+1',
+    TV: '+688',
+    UG: '+256',
+    UA: '+380',
+    AE: '+971',
+    GB: '+44',
+    US: '+1',
+    UY: '+598',
+    UZ: '+998',
+    VU: '+678',
+    VA: '+379',
+    VE: '+58',
+    VN: '+84',
+    VG: '+1',
+    VI: '+1',
+    WF: '+681',
+    EH: '+212',
+    YE: '+967',
+    ZM: '+260',
+    ZW: '+263',
+};
+/** Max national digit count (ITU E.164 national significant number). */
+const PHONE_MAX_NATIONAL_DIGITS = 15;
+/** Minimum national digits before we treat a draft as a complete number. */
+const PHONE_MIN_NATIONAL_DIGITS = 4;
+
+const regionNames = typeof Intl !== 'undefined' && 'DisplayNames' in Intl
+    ? new Intl.DisplayNames(['en'], { type: 'region' })
+    : null;
+/** Digits only from a phone draft. */
+function phoneDigitsOnly(value) {
+    return (value ?? '').replace(/\D/g, '');
+}
+/** Normalize ISO2 to uppercase two letters, or `''`. */
+function normalizePhoneIso2(iso2) {
+    const code = (iso2 ?? '').trim().toUpperCase();
+    return /^[A-Z]{2}$/.test(code) ? code : '';
+}
+/** Dial code for an ISO2 (with `+`), or `''` when unknown. */
+function dialCodeForIso2(iso2) {
+    const code = normalizePhoneIso2(iso2);
+    return code ? (PHONE_DIAL_CODES[code] ?? '') : '';
+}
+/** English country name from ISO2 (falls back to the code). */
+function phoneCountryName(iso2) {
+    const code = normalizePhoneIso2(iso2);
+    if (!code) {
+        return '';
+    }
+    try {
+        return regionNames?.of(code) ?? code;
+    }
+    catch {
+        return code;
+    }
+}
+/** All dial-code countries for the picker (sorted by name). */
+function phoneCountryOptions() {
+    return Object.keys(PHONE_DIAL_CODES)
+        .map((iso2) => {
+        const dialCode = PHONE_DIAL_CODES[iso2];
+        return {
+            iso2,
+            dialCode,
+            name: phoneCountryName(iso2),
+            flagUrl: countryFlagUrl(iso2, { width: 40 }),
+        };
+    })
+        .sort((a, b) => a.name.localeCompare(b.name));
+}
+/**
+ * Filter dial-code countries by name, ISO2, or dial digits.
+ * Digit matching is skipped when the query has no digits — otherwise
+ * `''.includes('')` would keep every country for letter-only searches.
+ */
+function filterPhoneCountries(countries, query) {
+    const q = query.trim().toLowerCase();
+    if (!q) {
+        return [...countries];
+    }
+    const qDigits = phoneDigitsOnly(q);
+    return countries.filter((row) => {
+        if (row.name.toLowerCase().includes(q) ||
+            row.iso2.toLowerCase().includes(q) ||
+            row.dialCode.toLowerCase().includes(q)) {
+            return true;
+        }
+        return qDigits.length > 0
+            ? phoneDigitsOnly(row.dialCode).includes(qDigits)
+            : false;
+    });
+}
+/**
+ * Match an E.164 / international string to the longest known dial code.
+ * Prefers `hintIso2` when several countries share the same dial code (e.g. `+1`).
+ */
+function matchDialCode(e164OrInternational, hintIso2) {
+    const digits = phoneDigitsOnly(e164OrInternational);
+    if (!digits) {
+        return null;
+    }
+    const hint = normalizePhoneIso2(hintIso2);
+    if (hint) {
+        const hintDial = PHONE_DIAL_CODES[hint];
+        if (hintDial) {
+            const hintDigits = phoneDigitsOnly(hintDial);
+            if (digits.startsWith(hintDigits)) {
+                return {
+                    iso2: hint,
+                    dialCode: hintDial,
+                    nationalDigits: digits.slice(hintDigits.length),
+                };
+            }
+        }
+    }
+    let best = null;
+    for (const [iso2, dialCode] of Object.entries(PHONE_DIAL_CODES)) {
+        const dialDigits = phoneDigitsOnly(dialCode);
+        if (!digits.startsWith(dialDigits)) {
+            continue;
+        }
+        const nationalDigits = digits.slice(dialDigits.length);
+        if (!best ||
+            dialDigits.length > phoneDigitsOnly(best.dialCode).length) {
+            best = { iso2, dialCode, nationalDigits };
+        }
+    }
+    return best;
+}
+/**
+ * Strip a leading dial code from a stored phone (classic `removeDialCode`).
+ * Returns national digits for prefilling the input.
+ */
+function removeDialCode(phone, hintIso2) {
+    const raw = (phone ?? '').trim();
+    if (!raw) {
+        return '';
+    }
+    const matched = matchDialCode(raw, hintIso2);
+    if (matched) {
+        return matched.nationalDigits;
+    }
+    return phoneDigitsOnly(raw);
+}
+/** Group national digits for readable display (… + last 4). */
+function formatNationalDigits(digits) {
+    const clean = phoneDigitsOnly(digits).slice(0, PHONE_MAX_NATIONAL_DIGITS);
+    if (!clean) {
+        return '';
+    }
+    if (clean.length <= 4) {
+        return clean;
+    }
+    const end = clean.slice(-4);
+    const head = clean.slice(0, -4).replace(/(\d{3})(?=\d)/g, '$1 ').trim();
+    return `${head} ${end}`.trim();
+}
+/**
+ * Build the structured value (or `null` when empty).
+ */
+function buildPhoneNumberValue(iso2, nationalDraft) {
+    const countryCode = normalizePhoneIso2(iso2);
+    const dialCode = dialCodeForIso2(countryCode);
+    if (!countryCode || !dialCode) {
+        return null;
+    }
+    const nationalDigits = phoneDigitsOnly(nationalDraft).slice(0, PHONE_MAX_NATIONAL_DIGITS);
+    if (!nationalDigits) {
+        return null;
+    }
+    const number = formatNationalDigits(nationalDigits);
+    const e164Number = `${dialCode}${nationalDigits}`;
+    const internationalNumber = `${dialCode} ${number}`.trim();
+    // Trunk-prefix `0` for national display when digits omit it (classic ngx shape).
+    const nationalNumber = nationalDigits.startsWith('0')
+        ? number
+        : `0${number}`;
+    return {
+        number,
+        internationalNumber,
+        nationalNumber,
+        e164Number,
+        countryCode,
+        dialCode,
+    };
+}
+/**
+ * Canonical outbound phone string — prefer E.164 from a structured value.
+ */
+function phoneToE164(phone) {
+    if (phone == null) {
+        return '';
+    }
+    if (typeof phone === 'string') {
+        const digits = phoneDigitsOnly(phone);
+        if (!digits) {
+            return '';
+        }
+        return phone.trim().startsWith('+') ? `+${digits}` : phone.trim();
+    }
+    return phone.e164Number?.trim() || '';
+}
+/**
+ * Soft validity: has dial code + enough national digits (not full libphonenumber).
+ */
+function isPhoneNumberComplete(phone) {
+    if (!phone?.e164Number) {
+        return false;
+    }
+    const national = phoneDigitsOnly(phone.number);
+    return (national.length >= PHONE_MIN_NATIONAL_DIGITS &&
+        national.length <= PHONE_MAX_NATIONAL_DIGITS);
+}
+/**
+ * Split an incoming control value (E.164 string or structured) into UI state.
+ */
+function parsePhoneControlValue(value, fallbackIso2) {
+    const fallback = normalizePhoneIso2(fallbackIso2) || 'US';
+    if (value == null || value === '') {
+        return { iso2: fallback, nationalDigits: '' };
+    }
+    if (typeof value === 'object') {
+        const iso2 = normalizePhoneIso2(value.countryCode) || fallback;
+        const national = phoneDigitsOnly(value.number) ||
+            phoneDigitsOnly(value.nationalNumber) ||
+            removeDialCode(value.e164Number, iso2);
+        return { iso2, nationalDigits: national };
+    }
+    const matched = matchDialCode(value, fallback);
+    if (matched) {
+        return {
+            iso2: matched.iso2,
+            nationalDigits: matched.nationalDigits,
+        };
+    }
+    return {
+        iso2: fallback,
+        nationalDigits: phoneDigitsOnly(value),
+    };
+}
+
+let nextPhoneInputId = 0;
+const PANEL_POSITIONS$1 = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 4,
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -4,
+    },
+];
+/**
+ * International phone field — flag + dial code + national number.
+ *
+ * Visual / behavioral cousin of classic `africanies-phone-field`
+ * (`ngx-intl-tel-input`), rebuilt for Angular 22 + AFRICANIES form chrome
+ * (no ngx peer-dep).
+ *
+ * **Value contract**
+ * - `[(value)]` / CVA → **E.164 string** (e.g. `+2348012345678`) so admin
+ *   mappers stay `phone: string`.
+ * - `phoneValue` model mirrors the structured classic object when you need
+ *   `countryCode` / `dialCode` in the parent.
+ *
+ * @example
+ * ```html
+ * <africanies-phone-input
+ *   label="Phone"
+ *   [countryIso2]="countryIso"
+ *   [lockCountry]="true"
+ *   [error]="phoneError()"
+ *   [(value)]="phone"
+ * />
+ * ```
+ */
+class PhoneInputComponent {
+    controlId = `africanies-phone-input-${++nextPhoneInputId}`;
+    hintId = `${this.controlId}-hint`;
+    errorId = `${this.controlId}-error`;
+    labelClass = FORM_LABEL_CLASS;
+    hintClass = FORM_HINT_CLASS;
+    errorClass = FORM_ERROR_CLASS;
+    panelPositions = PANEL_POSITIONS$1;
+    allCountries = phoneCountryOptions();
+    injector = inject(Injector);
+    countrySearch = viewChild('countrySearch', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countrySearch" }] : /* istanbul ignore next */ []));
+    /** Visible field label. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Helper under the field (hidden while {@link error} is set). */
+    hint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Field-level validation message. */
+    error = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** National-number placeholder. */
+    placeholder = input('Phone number', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Selected country ISO2. Parents set this from address/user country.
+     * Two-way so picking a country updates the parent.
+     */
+    countryIso2 = model('US', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countryIso2" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, the flag/dial segment is not clickable (classic `resetISO`).
+     * Use for locked sender-country phones; set `false` for free country pick.
+     */
+    lockCountry = input(false, { ...(ngDevMode ? { debugName: "lockCountry" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * E.164 string for `[(value)]` / reactive forms.
+     * Empty string when cleared.
+     */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Structured phone object (classic `PhoneNumberFormat` shape).
+     * `null` when the national field is empty.
+     */
+    phoneValue = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "phoneValue" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+        transform: booleanAttribute });
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    countryOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countryOpen" }] : /* istanbul ignore next */ []));
+    countryQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countryQuery" }] : /* istanbul ignore next */ []));
+    /** Digits currently typed in the national field. */
+    nationalDigits = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nationalDigits" }] : /* istanbul ignore next */ []));
+    dialCode = computed(() => dialCodeForIso2(this.countryIso2()) || '+1', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialCode" }] : /* istanbul ignore next */ []));
+    flagUrl = computed(() => {
+        const iso = normalizePhoneIso2(this.countryIso2());
+        return iso ? countryFlagUrl(iso, { width: 40 }) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flagUrl" }] : /* istanbul ignore next */ []));
+    nationalDisplay = computed(() => this.nationalDigits(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nationalDisplay" }] : /* istanbul ignore next */ []));
+    filteredCountries = computed(() => filterPhoneCountries(this.allCountries, this.countryQuery()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredCountries" }] : /* istanbul ignore next */ []));
+    shellClass = computed(() => {
+        let classes = FORM_FIELD_CLASS;
+        if (this.error()) {
+            classes += ` ${FORM_FIELD_ERROR_CLASS}`;
+        }
+        if (this.disabled()) {
+            classes += ` ${FORM_DISABLED_CLASS}`;
+        }
+        return classes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        if (this.error()) {
+            return this.errorId;
+        }
+        if (this.hint()) {
+            return this.hintId;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    /** True while applying an external `value` so emit does not loop. */
+    syncingFromExternal = false;
+    constructor() {
+        // Template `[(value)]` / `[value]` updates the model but does not call CVA
+        // `writeValue`. Sync national digits whenever the external value or the
+        // parent-bound country changes (edit prepopulate + locked country forms).
+        effect(() => {
+            const external = this.value();
+            const iso = this.countryIso2();
+            const locked = this.lockCountry();
+            untracked(() => this.applyExternalValue(external, iso, locked));
+        });
+    }
+    maxLengthAttr() {
+        return PHONE_MAX_NATIONAL_DIGITS;
+    }
+    writeValue(value) {
+        this.applyExternalValue(value, this.countryIso2(), this.lockCountry());
+        const e164 = this.phoneValue()?.e164Number ??
+            (typeof value === 'string' ? value.trim() : '');
+        this.syncingFromExternal = true;
+        this.value.set(e164);
+        this.syncingFromExternal = false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    toggleCountryPicker(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled() || this.lockCountry()) {
+            return;
+        }
+        this.countryOpen.update((open) => !open);
+        if (this.countryOpen()) {
+            this.countryQuery.set('');
+            // Overlay attaches on the next render; focus search so typing filters.
+            afterNextRender(() => this.countrySearch()?.nativeElement.focus(), { injector: this.injector });
+        }
+    }
+    closeCountryPicker() {
+        this.countryOpen.set(false);
+    }
+    onCountryQuery(event) {
+        this.countryQuery.set(event.target.value);
+    }
+    selectCountry(row) {
+        this.countryIso2.set(row.iso2);
+        this.closeCountryPicker();
+        this.emitFromState();
+    }
+    onNationalInput(event) {
+        const raw = event.target.value;
+        const digits = phoneDigitsOnly(raw).slice(0, PHONE_MAX_NATIONAL_DIGITS);
+        this.nationalDigits.set(digits);
+        this.emitFromState();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    applyExternalValue(value, preferredIso2, lockCountry) {
+        const preferred = normalizePhoneIso2(preferredIso2) || 'US';
+        const parsed = parsePhoneControlValue(value, preferred);
+        // Locked forms keep the parent country; still strip that dial code from
+        // stored E.164 / international strings so the national field prefills.
+        const iso2 = lockCountry ? preferred : parsed.iso2;
+        const nationalDigits = lockCountry
+            ? nationalDigitsForLockedCountry(value, preferred)
+            : parsed.nationalDigits;
+        if (iso2 === normalizePhoneIso2(this.countryIso2()) &&
+            nationalDigits === this.nationalDigits()) {
+            return;
+        }
+        this.syncingFromExternal = true;
+        if (!lockCountry) {
+            this.countryIso2.set(iso2);
+        }
+        this.nationalDigits.set(nationalDigits);
+        this.phoneValue.set(buildPhoneNumberValue(iso2, nationalDigits));
+        this.syncingFromExternal = false;
+    }
+    emitFromState() {
+        if (this.syncingFromExternal) {
+            return;
+        }
+        const structured = buildPhoneNumberValue(this.countryIso2(), this.nationalDigits());
+        const e164 = structured ? phoneToE164(structured) : '';
+        this.phoneValue.set(structured);
+        this.value.set(e164);
+        this.onChange(e164);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhoneInputComponent, isStandalone: true, selector: "africanies-phone-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, countryIso2: { classPropertyName: "countryIso2", publicName: "countryIso2", isSignal: true, isRequired: false, transformFunction: null }, lockCountry: { classPropertyName: "lockCountry", publicName: "lockCountry", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, phoneValue: { classPropertyName: "phoneValue", publicName: "phoneValue", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countryIso2: "countryIso2Change", value: "valueChange", phoneValue: "phoneValueChange" }, host: { classAttribute: "relative block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PhoneInputComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "countrySearch", first: true, predicate: ["countrySearch"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label [attr.for]="controlId" [class]="labelClass">{{ label() }}</label>
+
+    <div [class]="shellClass()">
+      <button
+        cdkOverlayOrigin
+        #dialOrigin="cdkOverlayOrigin"
+        type="button"
+        class="inline-flex h-full shrink-0 items-center gap-1.5 border-0 border-r border-control bg-transparent px-2.5 text-body-sm text-ink dark:border-white/25 dark:text-white disabled:cursor-not-allowed"
+        [class.pointer-events-none]="lockCountry()"
+        [attr.aria-expanded]="countryOpen()"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-label]="'Country dial code'"
+        [disabled]="disabled() || lockCountry()"
+        (click)="toggleCountryPicker($event)"
+      >
+        @if (flagUrl(); as src) {
+          <img
+            [src]="src"
+            alt=""
+            class="h-4 w-5 rounded-sm object-cover"
+            loading="lazy"
+            aria-hidden="true"
+          />
+        }
+        <span class="tabular-nums">{{ dialCode() }}</span>
+        @if (!lockCountry()) {
+          <africanies-icon name="chevron-down" [size]="14" class="shrink-0 opacity-70" />
+        }
+      </button>
+
+      <input
+        [id]="controlId"
+        type="tel"
+        inputmode="tel"
+        autocomplete="tel-national"
+        class="min-h-0 h-full min-w-0 flex-1 border-0 bg-transparent px-3 py-0 text-body text-ink outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed dark:text-white"
+        [value]="nationalDisplay()"
+        [disabled]="disabled()"
+        [attr.placeholder]="placeholder() || null"
+        [attr.maxlength]="maxLengthAttr()"
+        [attr.aria-invalid]="error() ? true : null"
+        [attr.aria-describedby]="describedBy()"
+        (input)="onNationalInput($event)"
+        (blur)="onBlur()"
+      />
+    </div>
+
+    @if (error(); as err) {
+      <p [id]="errorId" [class]="errorClass" role="alert">{{ err }}</p>
+    } @else if (hint(); as h) {
+      <p [id]="hintId" [class]="hintClass">{{ h }}</p>
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="dialOrigin"
+      [cdkConnectedOverlayOpen]="countryOpen()"
+      [cdkConnectedOverlayPositions]="panelPositions"
+      [cdkConnectedOverlayWidth]="320"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      (backdropClick)="closeCountryPicker()"
+      (overlayOutsideClick)="closeCountryPicker()"
+    >
+      <div
+        class="flex w-full flex-col overflow-hidden rounded-md border border-border bg-white shadow-lg dark:border-white/15 dark:bg-ink-950"
+        role="listbox"
+        [attr.aria-label]="'Select country'"
+      >
+        <div class="border-b border-border p-2 dark:border-white/15">
+          <input
+            #countrySearch
+            type="search"
+            class="h-9 w-full rounded-control border border-control bg-transparent px-3 text-body-sm text-ink outline-none placeholder:text-neutral-500 focus:ring-2 focus:ring-inset focus:ring-focus dark:border-white/25 dark:text-white"
+            placeholder="Search country or code"
+            [value]="countryQuery()"
+            (input)="onCountryQuery($event)"
+            (keydown)="$event.stopPropagation()"
+          />
+        </div>
+        <ul class="africanies-overlay-scroll m-0 max-h-56 list-none overflow-auto p-1">
+          @for (row of filteredCountries(); track row.iso2) {
+            <li>
+              <button
+                type="button"
+                class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-left text-body-sm text-ink hover:bg-neutral-100 dark:text-white dark:hover:bg-white/10"
+                [class.bg-neutral-100]="row.iso2 === countryIso2()"
+                [class.dark:bg-white/10]="row.iso2 === countryIso2()"
+                role="option"
+                [attr.aria-selected]="row.iso2 === countryIso2()"
+                (click)="selectCountry(row)"
+              >
+                <img
+                  [src]="row.flagUrl"
+                  alt=""
+                  class="h-4 w-5 shrink-0 rounded-sm object-cover"
+                  loading="lazy"
+                  aria-hidden="true"
+                />
+                <span class="min-w-0 flex-1 truncate">{{ row.name }}</span>
+                <span class="shrink-0 tabular-nums text-neutral-600 dark:text-neutral-400">
+                  {{ row.dialCode }}
+                </span>
+              </button>
+            </li>
+          } @empty {
+            <li class="px-3 py-4 text-center text-caption text-neutral-600 dark:text-neutral-400">
+              No countries match.
+            </li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhoneInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'africanies-phone-input',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AfricaniesIconComponent, CdkOverlayOrigin, CdkConnectedOverlay],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PhoneInputComponent),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        class: 'relative block',
+                    },
+                    template: `
+    <label [attr.for]="controlId" [class]="labelClass">{{ label() }}</label>
+
+    <div [class]="shellClass()">
+      <button
+        cdkOverlayOrigin
+        #dialOrigin="cdkOverlayOrigin"
+        type="button"
+        class="inline-flex h-full shrink-0 items-center gap-1.5 border-0 border-r border-control bg-transparent px-2.5 text-body-sm text-ink dark:border-white/25 dark:text-white disabled:cursor-not-allowed"
+        [class.pointer-events-none]="lockCountry()"
+        [attr.aria-expanded]="countryOpen()"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-label]="'Country dial code'"
+        [disabled]="disabled() || lockCountry()"
+        (click)="toggleCountryPicker($event)"
+      >
+        @if (flagUrl(); as src) {
+          <img
+            [src]="src"
+            alt=""
+            class="h-4 w-5 rounded-sm object-cover"
+            loading="lazy"
+            aria-hidden="true"
+          />
+        }
+        <span class="tabular-nums">{{ dialCode() }}</span>
+        @if (!lockCountry()) {
+          <africanies-icon name="chevron-down" [size]="14" class="shrink-0 opacity-70" />
+        }
+      </button>
+
+      <input
+        [id]="controlId"
+        type="tel"
+        inputmode="tel"
+        autocomplete="tel-national"
+        class="min-h-0 h-full min-w-0 flex-1 border-0 bg-transparent px-3 py-0 text-body text-ink outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed dark:text-white"
+        [value]="nationalDisplay()"
+        [disabled]="disabled()"
+        [attr.placeholder]="placeholder() || null"
+        [attr.maxlength]="maxLengthAttr()"
+        [attr.aria-invalid]="error() ? true : null"
+        [attr.aria-describedby]="describedBy()"
+        (input)="onNationalInput($event)"
+        (blur)="onBlur()"
+      />
+    </div>
+
+    @if (error(); as err) {
+      <p [id]="errorId" [class]="errorClass" role="alert">{{ err }}</p>
+    } @else if (hint(); as h) {
+      <p [id]="hintId" [class]="hintClass">{{ h }}</p>
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="dialOrigin"
+      [cdkConnectedOverlayOpen]="countryOpen()"
+      [cdkConnectedOverlayPositions]="panelPositions"
+      [cdkConnectedOverlayWidth]="320"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      (backdropClick)="closeCountryPicker()"
+      (overlayOutsideClick)="closeCountryPicker()"
+    >
+      <div
+        class="flex w-full flex-col overflow-hidden rounded-md border border-border bg-white shadow-lg dark:border-white/15 dark:bg-ink-950"
+        role="listbox"
+        [attr.aria-label]="'Select country'"
+      >
+        <div class="border-b border-border p-2 dark:border-white/15">
+          <input
+            #countrySearch
+            type="search"
+            class="h-9 w-full rounded-control border border-control bg-transparent px-3 text-body-sm text-ink outline-none placeholder:text-neutral-500 focus:ring-2 focus:ring-inset focus:ring-focus dark:border-white/25 dark:text-white"
+            placeholder="Search country or code"
+            [value]="countryQuery()"
+            (input)="onCountryQuery($event)"
+            (keydown)="$event.stopPropagation()"
+          />
+        </div>
+        <ul class="africanies-overlay-scroll m-0 max-h-56 list-none overflow-auto p-1">
+          @for (row of filteredCountries(); track row.iso2) {
+            <li>
+              <button
+                type="button"
+                class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-left text-body-sm text-ink hover:bg-neutral-100 dark:text-white dark:hover:bg-white/10"
+                [class.bg-neutral-100]="row.iso2 === countryIso2()"
+                [class.dark:bg-white/10]="row.iso2 === countryIso2()"
+                role="option"
+                [attr.aria-selected]="row.iso2 === countryIso2()"
+                (click)="selectCountry(row)"
+              >
+                <img
+                  [src]="row.flagUrl"
+                  alt=""
+                  class="h-4 w-5 shrink-0 rounded-sm object-cover"
+                  loading="lazy"
+                  aria-hidden="true"
+                />
+                <span class="min-w-0 flex-1 truncate">{{ row.name }}</span>
+                <span class="shrink-0 tabular-nums text-neutral-600 dark:text-neutral-400">
+                  {{ row.dialCode }}
+                </span>
+              </button>
+            </li>
+          } @empty {
+            <li class="px-3 py-4 text-center text-caption text-neutral-600 dark:text-neutral-400">
+              No countries match.
+            </li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { countrySearch: [{ type: i0.ViewChild, args: ['countrySearch', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], countryIso2: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryIso2", required: false }] }, { type: i0.Output, args: ["countryIso2Change"] }], lockCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockCountry", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], phoneValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneValue", required: false }] }, { type: i0.Output, args: ["phoneValueChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+/** National digits when the dial-code country is fixed by the parent. */
+function nationalDigitsForLockedCountry(value, iso2) {
+    if (value == null || value === '') {
+        return '';
+    }
+    if (typeof value === 'object') {
+        return (phoneDigitsOnly(value.number) ||
+            phoneDigitsOnly(value.nationalNumber) ||
+            removeDialCode(value.e164Number, iso2));
+    }
+    const stripped = removeDialCode(value, iso2);
+    // removeDialCode returns full digits when no dial matched — still fine as national.
+    return stripped;
+}
+
+/**
+ * Phone input form control exports.
+ */
+
 let nextRadioId = 0;
 /**
  * Radio group following the shared AFRICANIES form field pattern.
@@ -13527,7 +14515,7 @@ class SegmentComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host .africanies-segment-thumb{width:calc((100% - .5rem)/2)}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host .africanies-segment-thumb{width:calc((100% - .75rem)/2)}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SegmentComponent, decorators: [{
             type: Component,
@@ -13589,7 +14577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }
       }
     </div>
-  `, styles: [":host .africanies-segment-thumb{width:calc((100% - .5rem)/2)}\n"] }]
+  `, styles: [":host .africanies-segment-thumb{width:calc((100% - .75rem)/2)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], linkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkActiveOptions", required: false }] }], keepScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepScroll", required: false }] }] } });
 
 const PANEL_OPEN_STORAGE_KEY = 'africanies-shipping-mode-panel-open';
@@ -13773,9 +14761,12 @@ class ShippingModeSwitchComponent {
         >
           Shipping mode
         </p>
-        <africanies-chip [variant]="modeChipVariant()" size="sm">
-          {{ modeChipLabel() }}
-        </africanies-chip>
+        <!-- STN / SFN chip only when the tiles are collapsed — open panel already shows both modes. -->
+        @if (!panelOpen()) {
+          <africanies-chip [variant]="modeChipVariant()" size="sm">
+            {{ modeChipLabel() }}
+          </africanies-chip>
+        }
         <span class="min-w-0 flex-1" aria-hidden="true"></span>
         <button
           type="button"
@@ -13915,9 +14906,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         >
           Shipping mode
         </p>
-        <africanies-chip [variant]="modeChipVariant()" size="sm">
-          {{ modeChipLabel() }}
-        </africanies-chip>
+        <!-- STN / SFN chip only when the tiles are collapsed — open panel already shows both modes. -->
+        @if (!panelOpen()) {
+          <africanies-chip [variant]="modeChipVariant()" size="sm">
+            {{ modeChipLabel() }}
+          </africanies-chip>
+        }
         <span class="min-w-0 flex-1" aria-hidden="true"></span>
         <button
           type="button"
@@ -18014,8 +19008,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * `<ng-template africaniesCellDef="key">` templates. Columns without a matching
  * template fall back to rendering `row[key]` as plain text.
  *
- * Optional toolbar: top-left **shipping mode** segment (on by default;
- * `[showShippingMode]="false"` to hide) and **Refresh** (`showRefresh` →
+ * Optional toolbar: top-left **shipping mode** segment on its own row above
+ * Refresh / Filter / Export (on by default; `[showShippingMode]="false"` to
+ * hide) and **Refresh** (`showRefresh` →
  * {@link refreshClick}). Refresh is hidden while
  * the body shows empty or error — those states expose Retry instead.
  * While {@link refreshing} is true the rows stay on screen — the refresh icon
@@ -18635,71 +19630,75 @@ class TableComponent {
         showFilter() ||
         showExport()
       ) {
-        <div class="flex flex-wrap items-center justify-between gap-2">
-          <div class="flex min-w-0 flex-wrap items-center gap-2">
-            @if (showShippingMode()) {
-              <africanies-segment
-                class="min-w-0"
-                [items]="shippingModeItems"
-                [activeId]="shippingModeActiveId()"
-                ariaLabel="Shipping mode"
-                (activeIdChange)="onShippingModeChange($event)"
-              />
-            }
-            @if (showToolbarRefresh()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [disabled]="loading() || refreshing()"
-                [attr.aria-label]="refreshLabel()"
-                (click)="refreshClick.emit()"
-              >
-                <africanies-icon
-                  name="refresh"
-                  [size]="16"
-                  [class]="refreshing() ? 'animate-spin' : ''"
-                />
-                {{ refreshLabel() }}
-              </button>
-            }
-          </div>
-          <div class="flex items-center gap-2">
-            @if (showFilter()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="filterLabel()"
-                (click)="filterClick.emit()"
-              >
-                <africanies-icon name="filter" [size]="16" />
-                {{ filterLabel() }}
-                @if (filterCount() > 0) {
-                  <span
-                    class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+        <div class="flex w-full min-w-0 flex-col gap-3">
+          @if (showShippingMode()) {
+            <africanies-segment
+              class="min-w-0 self-start"
+              [items]="shippingModeItems"
+              [activeId]="shippingModeActiveId()"
+              ariaLabel="Shipping mode"
+              (activeIdChange)="onShippingModeChange($event)"
+            />
+          }
+          @if (showToolbarRefresh() || showFilter() || showExport()) {
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <div class="flex min-w-0 flex-wrap items-center gap-2">
+                @if (showToolbarRefresh()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [disabled]="loading() || refreshing()"
+                    [attr.aria-label]="refreshLabel()"
+                    (click)="refreshClick.emit()"
                   >
-                    {{ filterCount() }}
-                  </span>
+                    <africanies-icon
+                      name="refresh"
+                      [size]="16"
+                      [class]="refreshing() ? 'animate-spin' : ''"
+                    />
+                    {{ refreshLabel() }}
+                  </button>
                 }
-              </button>
-            }
-            @if (showExport()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="exportLabel()"
-                (click)="exportClick.emit()"
-              >
-                <africanies-icon name="download" [size]="16" />
-                {{ exportLabel() }}
-              </button>
-            }
-          </div>
+              </div>
+              <div class="flex items-center gap-2">
+                @if (showFilter()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="filterLabel()"
+                    (click)="filterClick.emit()"
+                  >
+                    <africanies-icon name="filter" [size]="16" />
+                    {{ filterLabel() }}
+                    @if (filterCount() > 0) {
+                      <span
+                        class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+                      >
+                        {{ filterCount() }}
+                      </span>
+                    }
+                  </button>
+                }
+                @if (showExport()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="exportLabel()"
+                    (click)="exportClick.emit()"
+                  >
+                    <africanies-icon name="download" [size]="16" />
+                    {{ exportLabel() }}
+                  </button>
+                }
+              </div>
+            </div>
+          }
         </div>
       }
 
@@ -18977,71 +19976,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         showFilter() ||
         showExport()
       ) {
-        <div class="flex flex-wrap items-center justify-between gap-2">
-          <div class="flex min-w-0 flex-wrap items-center gap-2">
-            @if (showShippingMode()) {
-              <africanies-segment
-                class="min-w-0"
-                [items]="shippingModeItems"
-                [activeId]="shippingModeActiveId()"
-                ariaLabel="Shipping mode"
-                (activeIdChange)="onShippingModeChange($event)"
-              />
-            }
-            @if (showToolbarRefresh()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [disabled]="loading() || refreshing()"
-                [attr.aria-label]="refreshLabel()"
-                (click)="refreshClick.emit()"
-              >
-                <africanies-icon
-                  name="refresh"
-                  [size]="16"
-                  [class]="refreshing() ? 'animate-spin' : ''"
-                />
-                {{ refreshLabel() }}
-              </button>
-            }
-          </div>
-          <div class="flex items-center gap-2">
-            @if (showFilter()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="filterLabel()"
-                (click)="filterClick.emit()"
-              >
-                <africanies-icon name="filter" [size]="16" />
-                {{ filterLabel() }}
-                @if (filterCount() > 0) {
-                  <span
-                    class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+        <div class="flex w-full min-w-0 flex-col gap-3">
+          @if (showShippingMode()) {
+            <africanies-segment
+              class="min-w-0 self-start"
+              [items]="shippingModeItems"
+              [activeId]="shippingModeActiveId()"
+              ariaLabel="Shipping mode"
+              (activeIdChange)="onShippingModeChange($event)"
+            />
+          }
+          @if (showToolbarRefresh() || showFilter() || showExport()) {
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <div class="flex min-w-0 flex-wrap items-center gap-2">
+                @if (showToolbarRefresh()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [disabled]="loading() || refreshing()"
+                    [attr.aria-label]="refreshLabel()"
+                    (click)="refreshClick.emit()"
                   >
-                    {{ filterCount() }}
-                  </span>
+                    <africanies-icon
+                      name="refresh"
+                      [size]="16"
+                      [class]="refreshing() ? 'animate-spin' : ''"
+                    />
+                    {{ refreshLabel() }}
+                  </button>
                 }
-              </button>
-            }
-            @if (showExport()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="exportLabel()"
-                (click)="exportClick.emit()"
-              >
-                <africanies-icon name="download" [size]="16" />
-                {{ exportLabel() }}
-              </button>
-            }
-          </div>
+              </div>
+              <div class="flex items-center gap-2">
+                @if (showFilter()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="filterLabel()"
+                    (click)="filterClick.emit()"
+                  >
+                    <africanies-icon name="filter" [size]="16" />
+                    {{ filterLabel() }}
+                    @if (filterCount() > 0) {
+                      <span
+                        class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+                      >
+                        {{ filterCount() }}
+                      </span>
+                    }
+                  </button>
+                }
+                @if (showExport()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="exportLabel()"
+                    (click)="exportClick.emit()"
+                  >
+                    <africanies-icon name="download" [size]="16" />
+                    {{ exportLabel() }}
+                  </button>
+                }
+              </div>
+            </div>
+          }
         </div>
       }
 
@@ -19730,6 +20733,7 @@ const FORM_CONTROLS = [
     DatePickerComponent,
     FileUploadComponent,
     OtpInputComponent,
+    PhoneInputComponent,
 ];
 /**
  * All form controls in one import for apps that prefer NgModules.
@@ -19756,7 +20760,8 @@ class AfricaniesFormsModule {
             ToggleComponent,
             DatePickerComponent,
             FileUploadComponent,
-            OtpInputComponent], exports: [TextInputComponent,
+            OtpInputComponent,
+            PhoneInputComponent], exports: [TextInputComponent,
             TextareaComponent,
             NumberInputComponent,
             SelectComponent,
@@ -19766,12 +20771,14 @@ class AfricaniesFormsModule {
             ToggleComponent,
             DatePickerComponent,
             FileUploadComponent,
-            OtpInputComponent] });
+            OtpInputComponent,
+            PhoneInputComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFormsModule, imports: [SelectComponent,
             CheckboxComponent,
             ToggleComponent,
             FileUploadComponent,
-            OtpInputComponent] });
+            OtpInputComponent,
+            PhoneInputComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFormsModule, decorators: [{
             type: NgModule,
@@ -19994,5 +21001,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AFRICANIES_BRAND_LOGO_MINI_URL, AFRICANIES_BRAND_LOGO_URL, AccordionComponent, ActionMenuComponent, ActionMenuTriggerDirective, AddressInputComponent, AfricaniesActionsModule, AfricaniesFeedbackModule, AfricaniesFormsModule, AfricaniesInfoPopoverModule, AfricaniesNavigationModule, AfricaniesOverlayRef, AfricaniesStepperModule, AfricaniesTableModule, AfricaniesTooltipModule, AlertComponent, AppShellComponent, AppShellContentHeaderComponent, AppShellHeaderComponent, AppShellHeaderEndDirective, AppShellHeaderSlotDirective, AppShellHeaderStartDirective, AsyncStateComponent, AvatarComponent, AvatarMenuComponent, BrandLogoComponent, BreadcrumbComponent, ButtonComponent, CarrierLogoComponent, CellDefDirective, CheckboxComponent, ChipComponent, ConfirmDialogComponent, ConfirmService, ContentStackComponent, CopyButtonComponent, DatePickerComponent, DrawerService, EmptyStateComponent, ErrorIndicatorComponent, ErrorStateComponent, FileUploadComponent, FilterDrawerPanel, FilterDrawerService, FilterQueryService, GOOGLE_PLACES_CONFIG, GooglePlacesService, HeaderCellDefDirective, ImageComponent, InfoPopoverComponent, InfoPopoverContentDirective, InfoPopoverTriggerDirective, LoadingStateComponent, MODAL_SIZE_PANEL_CLASS, ModalService, NotificationDrawerPanel, NotificationDrawerService, NumberInputComponent, OVERLAY_DATA, OtpInputComponent, OverlayFooterDirective, OverlayFrameComponent, OverlayHeaderDirective, PageHeaderComponent, PaginationComponent, RadioComponent, RowDetailDefDirective, SearchComboboxComponent, SegmentComponent, SelectComponent, ShippingModeSwitchComponent, SideNavComponent, StepDefDirective, StepperComponent, TOAST_DURATION_MS, TOAST_ICONS, TabDefDirective, TableComponent, TabsComponent, TextInputComponent, TextareaComponent, ToastService, ToggleComponent, TooltipComponent, TooltipTriggerDirective, acceptLabels, buildBreadcrumbsFromSideNav, deliveryVendorOptionsForStoredValue, deliveryVendorSelectOptions, deliveryVendorSelected, fileExtensionLabel, fileMatchesAccept, headerGreetingFirstName, headerGreetingPeriod, isCatalogRootRoute, isNavItemActive, isNestedChildRoute, navItemUrlTree, normalizeCarrierLogoSlug, normalizeNavPath, pickHeaderGreeting, provideAfricaniesToasts, provideAfricaniesUiOverlays, provideGooglePlaces, resolveCatalogRootLink, resolveContentBackTarget, resolveHeaderBackTarget, resolveParentPathFromRootSnapshot, toastFingerprint };
+export { AFRICANIES_BRAND_LOGO_MINI_URL, AFRICANIES_BRAND_LOGO_URL, AccordionComponent, ActionMenuComponent, ActionMenuTriggerDirective, AddressInputComponent, AfricaniesActionsModule, AfricaniesFeedbackModule, AfricaniesFormsModule, AfricaniesInfoPopoverModule, AfricaniesNavigationModule, AfricaniesOverlayRef, AfricaniesStepperModule, AfricaniesTableModule, AfricaniesTooltipModule, AlertComponent, AppShellComponent, AppShellContentHeaderComponent, AppShellHeaderComponent, AppShellHeaderEndDirective, AppShellHeaderSlotDirective, AppShellHeaderStartDirective, AsyncStateComponent, AvatarComponent, AvatarMenuComponent, BrandLogoComponent, BreadcrumbComponent, ButtonComponent, CarrierLogoComponent, CellDefDirective, CheckboxComponent, ChipComponent, ConfirmDialogComponent, ConfirmService, ContentStackComponent, CopyButtonComponent, DatePickerComponent, DrawerService, EmptyStateComponent, ErrorIndicatorComponent, ErrorStateComponent, FileUploadComponent, FilterDrawerPanel, FilterDrawerService, FilterQueryService, GOOGLE_PLACES_CONFIG, GooglePlacesService, HeaderCellDefDirective, ImageComponent, InfoPopoverComponent, InfoPopoverContentDirective, InfoPopoverTriggerDirective, LoadingStateComponent, MODAL_SIZE_PANEL_CLASS, ModalService, NotificationDrawerPanel, NotificationDrawerService, NumberInputComponent, OVERLAY_DATA, OtpInputComponent, OverlayFooterDirective, OverlayFrameComponent, OverlayHeaderDirective, PHONE_DIAL_CODES, PHONE_MAX_NATIONAL_DIGITS, PHONE_MIN_NATIONAL_DIGITS, PageHeaderComponent, PaginationComponent, PhoneInputComponent, RadioComponent, RowDetailDefDirective, SearchComboboxComponent, SegmentComponent, SelectComponent, ShippingModeSwitchComponent, SideNavComponent, StepDefDirective, StepperComponent, TOAST_DURATION_MS, TOAST_ICONS, TabDefDirective, TableComponent, TabsComponent, TextInputComponent, TextareaComponent, ToastService, ToggleComponent, TooltipComponent, TooltipTriggerDirective, acceptLabels, buildBreadcrumbsFromSideNav, buildPhoneNumberValue, deliveryVendorOptionsForStoredValue, deliveryVendorSelectOptions, deliveryVendorSelected, dialCodeForIso2, fileExtensionLabel, fileMatchesAccept, formatNationalDigits, headerGreetingFirstName, headerGreetingPeriod, isCatalogRootRoute, isNavItemActive, isNestedChildRoute, isPhoneNumberComplete, matchDialCode, navItemUrlTree, normalizeCarrierLogoSlug, normalizeNavPath, normalizePhoneIso2, parsePhoneControlValue, phoneCountryName, phoneCountryOptions, phoneDigitsOnly, phoneToE164, pickHeaderGreeting, provideAfricaniesToasts, provideAfricaniesUiOverlays, provideGooglePlaces, removeDialCode, resolveCatalogRootLink, resolveContentBackTarget, resolveHeaderBackTarget, resolveParentPathFromRootSnapshot, toastFingerprint };
 //# sourceMappingURL=africanies-africanies-ui.mjs.map