@africanies/angular-web-sdk 0.1.11 → 0.1.13

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';
@@ -46,6 +46,9 @@ import { NgTemplateOutlet, NgClass, DatePipe } from '@angular/common';
  * </button>
  * ```
  */
+/**
+ * Theme-token button used across AFRICANIES surfaces.
+ */
 class ButtonComponent {
     modeColor = inject(ModeColorService);
     /**
@@ -239,6 +242,9 @@ function toastFingerprint(variant, title, message) {
  * Single toast card — dense, token-based, with optional countdown rail.
  * Stacked identical toasts can expand; close peels the outermost copy.
  */
+/**
+ * Single toast card — dense, token-based, with optional countdown rail. Stacked identical toasts can expand; close peels the outermost copy.
+ */
 class ToastItemComponent {
     /** Stack entry to render. */
     item = input.required(/* @ts-ignore */
@@ -667,6 +673,9 @@ function railFill(variant) {
  * Caps to the viewport and scrolls when the stack (or an expanded group)
  * would otherwise run off-screen.
  */
+/**
+ * Fixed stack host attached once by {@link ToastService.ensureHost}. Caps to the viewport and scrolls when the stack (or an expanded group) would otherwise run off-screen.
+ */
 class ToastHostComponent {
     toastService = inject(ToastService);
     toasts = this.toastService.items;
@@ -684,7 +693,7 @@ class ToastHostComponent {
     <div class="flex w-full flex-col gap-2">
       @if (toastService.showHostActions()) {
         <div
-          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink-surface/80"
+          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-transparent pb-1 backdrop-blur-sm dark:bg-transparent"
         >
           @if (toastService.hasStacks()) {
             @if (toastService.allStacksExpanded()) {
@@ -753,7 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     <div class="flex w-full flex-col gap-2">
       @if (toastService.showHostActions()) {
         <div
-          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink-surface/80"
+          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-transparent pb-1 backdrop-blur-sm dark:bg-transparent"
         >
           @if (toastService.hasStacks()) {
             @if (toastService.allStacksExpanded()) {
@@ -827,6 +836,9 @@ const TOAST_OVERLAY_Z_INDEX = '1100';
  *
  * Prefer {@link provideAfricaniesToasts} at bootstrap so the host overlay mounts once.
  */
+/**
+ * Imperative toast stack for AFRICANIES apps.
+ */
 class ToastService {
     overlay = inject(Overlay);
     injector = inject(Injector);
@@ -1161,6 +1173,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * <africanies-copy [value]="ref" ariaLabel="Copy reference" [announce]="true" />
  * ```
  */
+/**
+ * Icon button that copies {@link value} to the clipboard.
+ */
 class CopyButtonComponent {
     toastService = inject(ToastService, { optional: true });
     /** Plain text written to the clipboard. */
@@ -1396,6 +1411,9 @@ function navigateNavItem(router, item, keepScroll = true) {
  * </africanies-action-menu>
  * ```
  */
+/**
+ * Marks projected content as the custom trigger for {@link ActionMenuComponent}.
+ */
 class ActionMenuTriggerDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActionMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ActionMenuTriggerDirective, isStandalone: true, selector: "[africaniesActionMenuTrigger]", ngImport: i0 });
@@ -1475,6 +1493,9 @@ const MENU_PANEL_POSITIONS = [
  * }
  * ```
  */
+/**
+ * Compact overflow menu for row and toolbar actions.
+ */
 class ActionMenuComponent {
     router = inject(Router);
     panelPositions = MENU_PANEL_POSITIONS;
@@ -1902,6 +1923,9 @@ let nextMenuId = 0;
  * />
  * ```
  */
+/**
+ * Blocking empty state when a fetch succeeded but produced no rows / value.
+ */
 class EmptyStateComponent {
     /**
      * Empty-copy. Defaults to a generic phrase; override for filter-specific help.
@@ -2001,6 +2025,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </div>
  * ```
  */
+/**
+ * Compact error pill for non-blocking failures while stale data stays visible — distinct from {@link ErrorStateComponent} (full-section blocking).
+ */
 class ErrorIndicatorComponent {
     /**
      * Error copy. When empty, the indicator is not shown.
@@ -2146,6 +2173,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * />
  * ```
  */
+/**
+ * Blocking error state for failed async fetches (not field validation).
+ */
 class ErrorStateComponent {
     /**
      * Human-readable failure reason. Required so the alert is never an empty
@@ -2233,6 +2263,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * <africanies-loading-state mode="inline" message="Refreshing…" />
  * ```
  */
+/**
+ * Blocking / inline loading indicator for async surfaces.
+ */
 class LoadingStateComponent {
     modeColor = inject(ModeColorService);
     /**
@@ -2344,6 +2377,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </africanies-async-state>
  * ```
  */
+/**
+ * Async query wrapper that maps {@link AsyncQueryStateModel} into loading / error / empty / success with non-blocking badges for background activity.
+ */
 class AsyncStateComponent {
     /**
      * Snapshot from the app's query layer (e.g. mapped `injectQuery()` signals).
@@ -2560,6 +2596,9 @@ function isEmptyData(data) {
  * </africanies-accordion>
  * ```
  */
+/**
+ * Bordered expandable panel with animated fold — the pattern used on Manifest detail and Make Payment review.
+ */
 class AccordionComponent {
     /** Plain-text header. Prefer projected `[africaniesAccordionTitle]` for rich titles. */
     title = input('', /* @ts-ignore */
@@ -2690,6 +2729,9 @@ const DEFAULT_ICONS = {
  * }
  * ```
  */
+/**
+ * Inline page/section banner — distinct from {@link ErrorStateComponent} (full-section async failure + Retry).
+ */
 class AlertComponent {
     /** Semantic tone. Defaults to `info`. */
     variant = input('info', /* @ts-ignore */
@@ -2871,6 +2913,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * <africanies-chip variant="warning" [removable]="true" (removed)="clear()">Pending</africanies-chip>
  * ```
  */
+/**
+ * Compact status / category label.
+ */
 class ChipComponent {
     /** Semantic tone. Defaults to `neutral`. Ignored when {@link color} is set. */
     variant = input('neutral', /* @ts-ignore */
@@ -3026,6 +3071,9 @@ function normalizeCarrierLogoSlug(value) {
  * <africanies-carrier-logo [carrier]="item.delivery_vendor" />
  * ```
  */
+/**
+ * Inline carrier marks for delivery vendor cells.
+ */
 class CarrierLogoComponent {
     /** Raw carrier slug or label from the API. */
     carrier = input('', /* @ts-ignore */
@@ -3178,6 +3226,9 @@ function deliveryVendorSelected(storedValue, baseOptions = deliveryVendorSelectO
  * />
  * ```
  */
+/**
+ * Compact stacked text for table cells and detail panels.
+ */
 class ContentStackComponent {
     /** Primary line — usually a person or entity name. */
     title = input('', /* @ts-ignore */
@@ -3290,6 +3341,9 @@ function provideAfricaniesToasts() {
  * </africanies-tooltip>
  * ```
  */
+/**
+ * Marks projected content as the custom trigger for {@link TooltipComponent}.
+ */
 class TooltipTriggerDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TooltipTriggerDirective, isStandalone: true, selector: "[africaniesTooltipTrigger]", ngImport: i0 });
@@ -3389,6 +3443,9 @@ const PLACEMENT_POSITIONS$1 = {
  * </africanies-tooltip>
  * ```
  */
+/**
+ * Contextual help tip — default info icon or a custom projected trigger.
+ */
 class TooltipComponent {
     tooltipId = `africanies-tooltip-${++nextTooltipId}`;
     customTrigger = contentChild(TooltipTriggerDirective, /* @ts-ignore */
@@ -3666,6 +3723,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </africanies-info-popover>
  * ```
  */
+/**
+ * Marks projected content as the custom trigger for {@link InfoPopoverComponent}.
+ */
 class InfoPopoverTriggerDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InfoPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: InfoPopoverTriggerDirective, isStandalone: true, selector: "[africaniesInfoPopoverTrigger]", ngImport: i0 });
@@ -3771,6 +3831,9 @@ const PLACEMENT_POSITIONS = {
  * </africanies-info-popover>
  * ```
  */
+/**
+ * Hover / focus / click info panel with a white card, optional title, and fully projected body content (any child component or markup).
+ */
 class InfoPopoverComponent {
     panelId = `africanies-info-popover-${++nextInfoPopoverId}`;
     customTrigger = contentChild(InfoPopoverTriggerDirective, /* @ts-ignore */
@@ -4086,6 +4149,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </africanies-info-popover>
  * ```
  */
+/**
+ * Marks projected content as the panel body for {@link InfoPopoverComponent}.
+ */
 class InfoPopoverContentDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InfoPopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: InfoPopoverContentDirective, isStandalone: true, selector: "[africaniesInfoPopoverContent]", ngImport: i0 });
@@ -4186,6 +4252,9 @@ let nextDatePickerId = 0;
  * </africanies-date-picker>
  * ```
  */
+/**
+ * Date field wrapping native `input[type=date]`, following shared AFRICANIES form field pattern.
+ */
 class DatePickerComponent {
     theme = inject(ThemeService, { optional: true });
     controlId = `africanies-date-picker-${++nextDatePickerId}`;
@@ -4632,6 +4701,9 @@ function attachOverlayContent(overlay, parentInjector, component, overlayConfig,
  * });
  * ```
  */
+/**
+ * Opens centered modal dialogs via Angular CDK Overlay.
+ */
 class ModalService {
     overlay = inject(Overlay);
     injector = inject(Injector);
@@ -4817,6 +4889,9 @@ const SELECT_PANEL_POSITIONS = [
  * ]);
  * ```
  */
+/**
+ * Option select following the shared AFRICANIES form field pattern.
+ */
 class SelectComponent {
     modal = inject(ModalService, { optional: true });
     modeColor = inject(ModeColorService);
@@ -6133,6 +6208,9 @@ let nextTextInputId = 0;
  * </africanies-text-input>
  * ```
  */
+/**
+ * Single-line text field — **reference** form control for `@africanies/africanies-ui`.
+ */
 class TextInputComponent {
     /** Stable ids so label / aria-describedby stay paired across re-renders. */
     controlId = `africanies-text-input-${++nextTextInputId}`;
@@ -6341,6 +6419,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * No-ops when Angular Router is not in the injector (unit tests without
  * `provideRouter`).
  */
+/**
+ * Bidirectional list-query sync with the browser URL.
+ */
 class FilterQueryService {
     route = inject(ActivatedRoute, { optional: true });
     router = inject(Router, { optional: true });
@@ -6475,6 +6556,9 @@ function paramMapToRecord(map) {
  * {@link FilterDrawerResult}. Successful Apply also writes the query bag to
  * the browser URL via {@link FilterQueryService} (page resets to 1).
  */
+/**
+ * Schema-driven filter drawer body.
+ */
 class FilterDrawerPanel {
     data = inject(OVERLAY_DATA);
     ref = inject((AfricaniesOverlayRef));
@@ -7455,6 +7539,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * drawer.open(FiltersPanel, { data: { facet: 'status' } });
  * ```
  */
+/**
+ * Opens edge-anchored drawer panels via Angular CDK Overlay.
+ */
 class DrawerService {
     overlay = inject(Overlay);
     injector = inject(Injector);
@@ -7554,6 +7641,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  *   });
  * ```
  */
+/**
+ * Opens the schema-driven {@link FilterDrawerPanel} via {@link DrawerService}.
+ */
 class FilterDrawerService {
     drawer = inject(DrawerService);
     filterQuery = inject(FilterQueryService);
@@ -7590,6 +7680,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * primary button shows {@link ButtonComponent} loading until the work
  * settles. Errors leave the dialog open.
  */
+/**
+ * Built-in confirm dialog hosted by {@link ConfirmService} / {@link ModalService}.
+ */
 class ConfirmDialogComponent {
     /** Stable ids so aria-labelledby / aria-describedby stay unique per instance. */
     titleId = `africanies-confirm-title-${cryptoRandom()}`;
@@ -7890,6 +7983,9 @@ function cryptoRandom() {
  *   });
  * ```
  */
+/**
+ * One-line confirm flow built on {@link ModalService}.
+ */
 class ConfirmService {
     modal = inject(ModalService);
     /**
@@ -7937,6 +8033,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </africanies-overlay-frame>
  * ```
  */
+/**
+ * Marks projected chrome as the non-scrolling overlay header (title + close).
+ */
 class OverlayHeaderDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OverlayHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: OverlayHeaderDirective, isStandalone: true, selector: "[africaniesOverlayHeader]", ngImport: i0 });
@@ -7962,6 +8061,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </africanies-overlay-frame>
  * ```
  */
+/**
+ * Marks projected chrome as the non-scrolling overlay footer (actions).
+ */
 class OverlayFooterDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OverlayFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: OverlayFooterDirective, isStandalone: true, selector: "[africaniesOverlayFooter]", ngImport: i0 });
@@ -8004,6 +8106,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * export class EditModal {}
  * ```
  */
+/**
+ * Header / scroll body / footer shell for {@link ModalService} and {@link DrawerService} panels.
+ */
 class OverlayFrameComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OverlayFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: OverlayFrameComponent, isStandalone: true, selector: "africanies-overlay-frame", host: { classAttribute: "flex min-h-0 w-full flex-1 flex-col overflow-hidden" }, ngImport: i0, template: `
@@ -8113,6 +8218,9 @@ const PLACE_DETAILS_FIELD_MASK = 'id,displayName,formattedAddress,addressCompone
  * No Maps JavaScript widget, AutocompleteService, or PlacesService.
  * Register {@link provideGooglePlaces} with a key that has Places API (New).
  */
+/**
+ * Places API (New) over REST — same contract as the working React autocomplete (`POST …/places:autocomplete`, `GET …/places/{id}`).
+ */
 class GooglePlacesService {
     config = inject(GOOGLE_PLACES_CONFIG, { optional: true });
     /**
@@ -8312,6 +8420,9 @@ const ADDRESS_PANEL_POSITIONS = [
  * </africanies-address-input>
  * ```
  */
+/**
+ * Google Places address field with suggestion dropdown.
+ */
 class AddressInputComponent {
     places = inject(GooglePlacesService);
     destroyRef = inject(DestroyRef);
@@ -8898,6 +9009,9 @@ let nextCheckboxId = 0;
  * />
  * ```
  */
+/**
+ * Boolean checkbox following the shared AFRICANIES form field pattern.
+ */
 class CheckboxComponent {
     modeColor = inject(ModeColorService);
     controlId = `africanies-checkbox-${++nextCheckboxId}`;
@@ -9208,6 +9322,9 @@ function fileExtensionLabel(fileName) {
  * Prefer opening via {@link ModalService} so the stream is owned by this
  * dialog and torn down on close / destroy.
  */
+/**
+ * Live webcam capture dialog for {@link FileUploadComponent}.
+ */
 class CameraCaptureDialogComponent {
     destroyRef = inject(DestroyRef);
     ref = inject((AfricaniesOverlayRef));
@@ -9514,6 +9631,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Object URLs created here are revoked on destroy; the list’s image
  * `previewUrl` is left alone.
  */
+/**
+ * Large-file preview modal for {@link FileUploadComponent}.
+ */
 class FilePreviewDialogComponent {
     data = inject(OVERLAY_DATA);
     ref = inject((AfricaniesOverlayRef));
@@ -9713,6 +9833,9 @@ let nextFileUploadId = 0;
  * />
  * ```
  */
+/**
+ * File / camera / drag-and-drop picker following the shared AFRICANIES form field pattern.
+ */
 class FileUploadComponent {
     destroyRef = inject(DestroyRef);
     /** Optional so the control still works when overlays are not registered. */
@@ -10781,6 +10904,9 @@ function formatWhileTyping(raw) {
  * amount = signal<number | null>(1250); // UI shows "1,250"
  * ```
  */
+/**
+ * Numeric field following the shared AFRICANIES form field pattern.
+ */
 class NumberInputComponent {
     controlId = `africanies-number-input-${++nextNumberInputId}`;
     hintId = `${this.controlId}-hint`;
@@ -11064,6 +11190,9 @@ let nextOtpId = 0;
  * />
  * ```
  */
+/**
+ * One-time-passcode field — discrete digit cells, single string model.
+ */
 class OtpInputComponent {
     destroyRef = inject(DestroyRef);
     cellInputs = viewChildren('cellInput', /* @ts-ignore */
@@ -11487,58 +11616,1052 @@ 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"] }] } });
 
-let nextRadioId = 0;
 /**
- * Radio group following the shared AFRICANIES form field pattern.
+ * ISO 3166-1 alpha-2 → dial code (with `+`).
  *
- * **Prefix/suffix slots are omitted** — radios are mutually exclusive options
- * with labels; affix projection does not apply.
+ * 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.
  *
- * Selected ring and center disc follow {@link ModeColorService}
- * (SFN green / STN orange).
+ * Visual / behavioral cousin of classic `africanies-phone-field`
+ * (`ngx-intl-tel-input`), rebuilt for Angular 22 + AFRICANIES form chrome
+ * (no ngx peer-dep).
  *
- * @typeParam T - Option value type.
+ * **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-radio
- *   label="Shipment mode"
- *   [options]="modeOptions"
- *   [(value)]="mode"
+ * <africanies-phone-input
+ *   label="Phone"
+ *   [countryIso2]="countryIso"
+ *   [lockCountry]="true"
+ *   [error]="phoneError()"
+ *   [(value)]="phone"
  * />
  * ```
  */
-class RadioComponent {
-    modeColor = inject(ModeColorService);
-    groupName = `africanies-radio-${++nextRadioId}`;
-    hintId = `${this.groupName}-hint`;
-    errorId = `${this.groupName}-error`;
+/**
+ * International phone field — flag + dial code + national number.
+ */
+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;
-    /** Group legend / label. */
+    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 copy. Hidden while {@link error} is set. */
+    /** 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. Distinct from `ErrorStateComponent`. */
+    /** Field-level validation message. */
     error = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    /** Options rendered as radios. */
-    options = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    /** Selected option value (`[(value)]` + CVA). */
-    value = model(null, /* @ts-ignore */
+    /** 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 */ []));
-    /** Host disable flag (in addition to CVA). */
+    /**
+     * 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 */ []));
-    describedBy = computed(() => {
+    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.
+ *
+ * **Prefix/suffix slots are omitted** — radios are mutually exclusive options
+ * with labels; affix projection does not apply.
+ *
+ * Selected ring and center disc follow {@link ModeColorService}
+ * (SFN green / STN orange).
+ *
+ * @typeParam T - Option value type.
+ *
+ * @example
+ * ```html
+ * <africanies-radio
+ *   label="Shipment mode"
+ *   [options]="modeOptions"
+ *   [(value)]="mode"
+ * />
+ * ```
+ */
+/**
+ * Radio group following the shared AFRICANIES form field pattern.
+ */
+class RadioComponent {
+    modeColor = inject(ModeColorService);
+    groupName = `africanies-radio-${++nextRadioId}`;
+    hintId = `${this.groupName}-hint`;
+    errorId = `${this.groupName}-error`;
+    labelClass = FORM_LABEL_CLASS;
+    hintClass = FORM_HINT_CLASS;
+    errorClass = FORM_ERROR_CLASS;
+    /** Group legend / label. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Helper copy. Hidden while {@link error} is set. */
+    hint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Field-level validation message. Distinct from `ErrorStateComponent`. */
+    error = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Options rendered as radios. */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Selected option value (`[(value)]` + CVA). */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Host disable flag (in addition to CVA). */
+    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 */ []));
+    describedBy = computed(() => {
         if (this.error()) {
             return this.errorId;
         }
@@ -11753,6 +12876,9 @@ const PANEL_POSITIONS = [
  * />
  * ```
  */
+/**
+ * Generic type-as-you-search combobox with a debounced async lookup and overlay result list.
+ */
 class SearchComboboxComponent {
     destroyRef = inject(DestroyRef);
     controlId = `africanies-search-combobox-${++nextSearchComboboxId}`;
@@ -12382,6 +13508,9 @@ let nextTextareaId = 0;
  * />
  * ```
  */
+/**
+ * Multi-line text field following the shared form-control pattern (`shared AFRICANIES form field pattern`). Supports prefix/suffix slots, field-level `error`, and {@link ControlValueAccessor}.
+ */
 class TextareaComponent {
     controlId = `africanies-textarea-${++nextTextareaId}`;
     hintId = `${this.controlId}-hint`;
@@ -12577,6 +13706,9 @@ let nextToggleId = 0;
  * />
  * ```
  */
+/**
+ * Boolean switch following the shared AFRICANIES form field pattern.
+ */
 class ToggleComponent {
     modeColor = inject(ModeColorService);
     controlId = `africanies-toggle-${++nextToggleId}`;
@@ -12824,6 +13956,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * <africanies-breadcrumb [items]="staticCrumbs" />
  * ```
  */
+/**
+ * Breadcrumb trail for hierarchical navigation.
+ */
 class BreadcrumbComponent {
     modeColor = inject(ModeColorService);
     /** Ordered crumbs; the last entry is the current page. */
@@ -13334,6 +14469,9 @@ const DEFAULT_LINK_ACTIVE$2 = {
  * ]" />
  * ```
  */
+/**
+ * Compact segmented control for view modes and filters.
+ */
 class SegmentComponent {
     router = inject(Router);
     modeColor = inject(ModeColorService);
@@ -13527,7 +14665,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 +14727,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';
@@ -13643,6 +14781,9 @@ const SHIPPING_MODE_GLYPH = `M88.42,68.75a48.8,48.8,0,0,1-4.74,11.1h9.89a7.67,7.
  * </africanies-side-nav>
  * ```
  */
+/**
+ * Two-up shipping mode switcher for app-shell side navs.
+ */
 class ShippingModeSwitchComponent {
     shipping = inject(ShippingModeService);
     /**
@@ -14038,6 +15179,9 @@ const AFRICANIES_BRAND_LOGO_MINI_URL = new InjectionToken('AFRICANIES_BRAND_LOGO
  * Override with a custom `logoSrc` on {@link SideNavComponent} when the host
  * ships its own mark.
  */
+/**
+ * Default AFRICANIES wordmark — inlined so it works without copying static assets.
+ */
 class BrandLogoComponent {
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -14171,6 +15315,9 @@ const DEFAULT_LINK_ACTIVE$1 = {
  * />
  * ```
  */
+/**
+ * App shell side navigation with icons, nested items, and a collapsible rail.
+ */
 class SideNavComponent {
     modeColor = inject(ModeColorService);
     defaultLogoUrl = inject(AFRICANIES_BRAND_LOGO_URL);
@@ -14490,6 +15637,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </ng-template>
  * ```
  */
+/**
+ * Registers projected tab panel content against a tab id for {@link TabsComponent} (local / non-router mode).
+ */
 class TabDefDirective {
     /** Template projected as the active tab panel. */
     template = inject((TemplateRef));
@@ -14543,6 +15693,9 @@ const DEFAULT_LINK_ACTIVE = {
  * <router-outlet />
  * ```
  */
+/**
+ * Tab list for page / section navigation.
+ */
 class TabsComponent {
     router = inject(Router);
     modeColor = inject(ModeColorService);
@@ -14892,6 +16045,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </africanies-page-header>
  * ```
  */
+/**
+ * Page title + subtitle for product screens.
+ */
 class PageHeaderComponent {
     /** Page heading. Omit when the shell already rendered a title. */
     title = input('', /* @ts-ignore */
@@ -14967,6 +16123,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Content chrome above the app-shell body: Back, breadcrumbs, then the page
  * title and optional subtitle.
  */
+/**
+ * Content chrome above the app-shell body: Back, breadcrumbs, then the page title and optional subtitle.
+ */
 class AppShellContentHeaderComponent {
     router = inject(Router);
     breadcrumbs = input([], /* @ts-ignore */
@@ -15090,6 +16249,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * <africanies-avatar name="Ops Team" />
  * ```
  */
+/**
+ * Circular avatar with image or initials fallback.
+ */
 class AvatarComponent {
     /** Display name — used for initials when no image loads. */
     name = input('', /* @ts-ignore */
@@ -15196,6 +16358,9 @@ function initialsFromName(name) {
  * />
  * ```
  */
+/**
+ * Avatar trigger with an attached overflow menu — profile / account actions.
+ */
 class AvatarMenuComponent {
     name = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -15292,6 +16457,9 @@ const MARK_ALL_CONFIRM_MS = 4000;
  *
  * Opened via {@link NotificationDrawerService}.
  */
+/**
+ * Right-edge drawer listing in-app notifications.
+ */
 class NotificationDrawerPanel {
     ref = inject(AfricaniesOverlayRef);
     data = inject(OVERLAY_DATA);
@@ -16098,6 +17266,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  *
  * Requires {@link provideAfricaniesUiOverlays} at bootstrap.
  */
+/**
+ * Opens {@link NotificationDrawerPanel} via {@link DrawerService}.
+ */
 class NotificationDrawerService {
     drawer = inject(DrawerService);
     /**
@@ -16381,13 +17552,14 @@ function hashString(value) {
 }
 
 /** Bump when cache shape or city resolution strategy changes. */
-const CACHE_KEY = 'africanies-header-weather-v7';
-const FETCH_MS = 4_000;
-const BROWSER_GEO_MS = 3_500;
-/** IP fallback — city string is used only when reverse-geocode is empty. */
+const CACHE_KEY = 'africanies-header-weather-v8';
+const FETCH_MS = 8_000;
+/** After Allow, wait for a GPS/Wi-Fi fix. A short timeout loses the prompt and falls through to IP. */
+const DEVICE_GEO_MS = 15_000;
+const DEVICE_GEO_PROMPT_MS = 25_000;
+/** IP city is the office egress (often Lagos) and must not label the device. */
 const GEO_URL = 'https://get.geojs.io/v1/ip/geo.json';
-/** Client reverse-geocode so the label matches the forecast coordinates. */
-const REVERSE_GEO_URL = 'https://api.bigdatacloud.net/data/reverse-geocode-client';
+const REVERSE_GEO_URL = 'https://geocoding-api.open-meteo.com/v1/reverse';
 const WEATHER_LABELS = {
     clear: 'Clear',
     cloudy: 'Cloudy',
@@ -16457,15 +17629,16 @@ function headerWeatherIcon(kind, hour) {
     return 'cloud-o';
 }
 /**
- * City-level forecast via browser / IP geolocation + Open-Meteo (no API key).
+ * City-level forecast. The label is the device location only.
  *
- * Coordinates prefer the browser Geolocation API (accurate for travellers;
- * may prompt once). Otherwise IP geo is used. The city label is reverse-
- * geocoded from those coordinates, with the IP city as a fallback.
+ * The Geolocation API (GPS / nearby Wi-Fi) is reverse-geocoded. IP lookup is
+ * not used for the city — a shared office egress makes every colleague "Lagos".
+ * If the device fix is refused, weather still loads from IP coordinates with
+ * no city.
  *
  * Fails closed: missing browser APIs, timeouts, and HTTP errors all return
- * `null` so the greeting can stay time-of-day only. Cached per local hour
- * in `sessionStorage`.
+ * `null` so the greeting can stay time-of-day only. A snapshot with a city
+ * is cached per local hour in `sessionStorage`.
  *
  * @param fetchFn - Injected `fetch` for tests.
  * @returns Forecast snapshot, or `null` when lookup fails.
@@ -16481,7 +17654,8 @@ async function loadHeaderWeather(fetchFn) {
         return cached;
     }
     try {
-        const coords = await resolveCoordinates(run);
+        const device = await tryDeviceCoordinates();
+        const coords = device ?? (await ipCoordinates(run));
         if (!coords) {
             return null;
         }
@@ -16498,10 +17672,13 @@ async function loadHeaderWeather(fetchFn) {
             return null;
         }
         const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-        const city = (await reverseGeocodeCity(run, coords.latitude, coords.longitude)) ??
-            coords.fallbackCity;
+        const city = device
+            ? await reverseGeocodeCity(run, device.latitude, device.longitude)
+            : undefined;
         const weather = { kind, temperatureC, city };
-        writeCache({ hour, kind, temperatureC, city });
+        if (city) {
+            writeCache({ hour, kind, temperatureC, city });
+        }
         return weather;
     }
     catch {
@@ -16548,41 +17725,27 @@ function writeCache(value) {
         // Private mode / quota — greeting still works without cache.
     }
 }
-/**
- * Prefer device coordinates when available (may prompt once); otherwise fall
- * back to IP geo. IP is always fetched in parallel so its city can backfill
- * the label when reverse-geocode is empty (browser geo has no city string).
- */
-async function resolveCoordinates(fetchFn) {
-    const [browser, ipGeo] = await Promise.all([
-        tryBrowserGeolocation(),
-        fetchIpGeo(fetchFn),
-    ]);
-    const ipCity = asCity(ipGeo?.city);
-    if (browser) {
-        return { ...browser, fallbackCity: ipCity };
-    }
-    const latitude = asNumber(ipGeo?.latitude);
-    const longitude = asNumber(ipGeo?.longitude);
+async function ipCoordinates(fetchFn) {
+    const payload = (await fetchJson(fetchFn, GEO_URL));
+    const latitude = asNumber(payload?.latitude);
+    const longitude = asNumber(payload?.longitude);
     if (latitude === null || longitude === null) {
         return null;
     }
-    return {
-        latitude,
-        longitude,
-        fallbackCity: ipCity,
-    };
-}
-async function fetchIpGeo(fetchFn) {
-    return (await fetchJson(fetchFn, GEO_URL));
+    return { latitude, longitude };
 }
-async function tryBrowserGeolocation() {
+async function tryDeviceCoordinates() {
     if (typeof navigator === 'undefined' ||
         typeof navigator.geolocation?.getCurrentPosition !== 'function') {
         return null;
     }
+    const permission = await geolocationPermission();
+    if (permission === 'denied') {
+        return null;
+    }
+    const timeout = permission === 'granted' ? DEVICE_GEO_MS : DEVICE_GEO_PROMPT_MS;
     return await new Promise((resolve) => {
-        const timer = setTimeout(() => resolve(null), BROWSER_GEO_MS);
+        const timer = setTimeout(() => resolve(null), timeout);
         navigator.geolocation.getCurrentPosition((position) => {
             clearTimeout(timer);
             resolve({
@@ -16593,20 +17756,28 @@ async function tryBrowserGeolocation() {
             clearTimeout(timer);
             resolve(null);
         }, {
-            enableHighAccuracy: false,
-            maximumAge: 600_000,
-            timeout: BROWSER_GEO_MS,
+            enableHighAccuracy: true,
+            maximumAge: 0,
+            timeout,
         });
     });
 }
+async function geolocationPermission() {
+    try {
+        const status = await navigator.permissions?.query({ name: 'geolocation' });
+        return status?.state ?? 'unknown';
+    }
+    catch {
+        return 'unknown';
+    }
+}
 async function reverseGeocodeCity(fetchFn, latitude, longitude) {
     const url = `${REVERSE_GEO_URL}?latitude=${encodeURIComponent(String(latitude))}` +
         `&longitude=${encodeURIComponent(String(longitude))}` +
-        `&localityLanguage=en`;
+        `&language=en&count=1`;
     const payload = (await fetchJson(fetchFn, url));
-    return (asCity(payload?.city) ??
-        asCity(payload?.locality) ??
-        asCity(payload?.principalSubdivision));
+    const place = payload?.results?.[0];
+    return asCity(place?.name) ?? asCity(place?.admin1);
 }
 function asNumber(value) {
     if (typeof value === 'number' && Number.isFinite(value)) {
@@ -16646,6 +17817,9 @@ async function fetchJson(fetchFn, url) {
     }
 }
 
+/**
+ * Marks projected content as extra leading chrome in {@link AppShellHeaderComponent}.
+ */
 /**
  * Marks projected content as extra leading chrome in {@link AppShellHeaderComponent}.
  */
@@ -16663,6 +17837,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 /**
  * Marks projected content as extra trailing chrome in {@link AppShellHeaderComponent}.
  */
+/**
+ * Marks projected content as extra trailing chrome in {@link AppShellHeaderComponent}.
+ */
 class AppShellHeaderEndDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AppShellHeaderEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AppShellHeaderEndDirective, isStandalone: true, selector: "[africaniesAppShellHeaderEnd]", ngImport: i0 });
@@ -16691,6 +17868,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * />
  * ```
  */
+/**
+ * Product header bar for {@link AppShellComponent}: a short time-of-day kicker plus the given name, local weather, live clock, notification inbox drawer, and avatar menu. Breadcrumbs and Back belong in the content column via {@link AppShellContentHeaderComponent}.
+ */
 class AppShellHeaderComponent {
     notificationsDrawer = inject(NotificationDrawerService);
     destroyRef = inject(DestroyRef);
@@ -17125,6 +18305,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  *
  * When present, the built-in {@link AppShellHeaderComponent} is skipped.
  */
+/**
+ * Marks projected content as the custom header for {@link AppShellComponent}.
+ */
 class AppShellHeaderSlotDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AppShellHeaderSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AppShellHeaderSlotDirective, isStandalone: true, selector: "[africaniesAppShellHeader]", ngImport: i0 });
@@ -17166,6 +18349,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </africanies-app-shell>
  * ```
  */
+/**
+ * Application chrome scaffold: side nav + sticky header + constrained content.
+ */
 class AppShellComponent {
     modeColor = inject(ModeColorService);
     logoMiniUrl = inject(AFRICANIES_BRAND_LOGO_MINI_URL);
@@ -17364,6 +18550,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * />
  * ```
  */
+/**
+ * Image with a shaped loading frame and fallback while the asset fetches or if it fails to render.
+ */
 class ImageComponent {
     imgRef = viewChild('img', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "imgRef" }] : /* istanbul ignore next */ []));
@@ -17562,6 +18751,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </ng-template>
  * ```
  */
+/**
+ * Registers a projected cell template against a column key for {@link TableComponent}.
+ */
 class CellDefDirective {
     /** Template projected into matching column body cells. */
     template = inject((TemplateRef));
@@ -17595,6 +18787,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </ng-template>
  * ```
  */
+/**
+ * Registers a projected header cell template against a column key for {@link TableComponent}.
+ */
 class HeaderCellDefDirective {
     /** Template projected into the matching column header cell. */
     template = inject(TemplateRef);
@@ -17627,6 +18822,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </ng-template>
  * ```
  */
+/**
+ * Registers a label / value pair inside an expanded table row.
+ */
 class RowDetailDefDirective {
     /** Template rendered as the detail value. */
     template = inject((TemplateRef));
@@ -17701,6 +18899,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  *
  * Page controls for server-style lists (bind to {@link PaginationMetaModel}).
  */
+/**
+ * Page-size select, numbered pager, and prev/next — driven by {@link PaginationMetaModel} from the API envelope.
+ */
 class PaginationComponent {
     filterQuery = inject(FilterQueryService);
     modeColor = inject(ModeColorService);
@@ -18097,6 +19298,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * to the top of that scrollport. Mobile keeps horizontal-only overflow so
  * page scroll is unchanged.
  */
+/**
+ * Presentational data table with template-based cells.
+ */
 class TableComponent {
     destroyRef = inject(DestroyRef);
     shipping = inject(ShippingModeService);
@@ -19333,6 +20537,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * </ng-template>
  * ```
  */
+/**
+ * Registers projected step body content against a step key for {@link StepperComponent}.
+ */
 class StepDefDirective {
     /** Template projected as the active step body. */
     template = inject((TemplateRef));
@@ -19369,6 +20576,9 @@ function prefersReducedMotion() {
  * When `animateSteps` is true (default), the step body fades/slides via the
  * Web Animations API (skipped when the user prefers reduced motion).
  */
+/**
+ * Multi-step wizard for form flows (e.g. shipment creation).
+ */
 class StepperComponent {
     modeColor = inject(ModeColorService);
     steps = input.required(/* @ts-ignore */
@@ -19657,6 +20867,9 @@ const ACTIONS = [
  * export class ToolbarModule {}
  * ```
  */
+/**
+ * Button, copy-to-clipboard control, overflow action menu, and avatar menu.
+ */
 class AfricaniesActionsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesActionsModule, imports: [ButtonComponent,
@@ -19706,6 +20919,9 @@ const FEEDBACK = [
  * export class ListPageModule {}
  * ```
  */
+/**
+ * Async feedback states, accordion panels, inline alert, and status chips.
+ */
 class AfricaniesFeedbackModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFeedbackModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFeedbackModule, imports: [AccordionComponent,
@@ -19745,6 +20961,7 @@ const FORM_CONTROLS = [
     DatePickerComponent,
     FileUploadComponent,
     OtpInputComponent,
+    PhoneInputComponent,
 ];
 /**
  * All form controls in one import for apps that prefer NgModules.
@@ -19759,6 +20976,9 @@ const FORM_CONTROLS = [
  * export class ShipmentFormsModule {}
  * ```
  */
+/**
+ * All form controls in one import for apps that prefer NgModules.
+ */
 class AfricaniesFormsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFormsModule, imports: [TextInputComponent,
@@ -19771,7 +20991,8 @@ class AfricaniesFormsModule {
             ToggleComponent,
             DatePickerComponent,
             FileUploadComponent,
-            OtpInputComponent], exports: [TextInputComponent,
+            OtpInputComponent,
+            PhoneInputComponent], exports: [TextInputComponent,
             TextareaComponent,
             NumberInputComponent,
             SelectComponent,
@@ -19781,12 +21002,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,
@@ -19804,6 +21027,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * imports: [InfoPopoverComponent, InfoPopoverContentDirective, InfoPopoverTriggerDirective],
  * ```
  */
+/**
+ * NgModule facade for {@link InfoPopoverComponent} and its trigger/content markers.
+ */
 class AfricaniesInfoPopoverModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesInfoPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesInfoPopoverModule, imports: [InfoPopoverComponent,
@@ -19857,6 +21083,9 @@ const NAV = [
  * export class ShellModule {}
  * ```
  */
+/**
+ * App shell, breadcrumb, tabs (+ `africaniesTabDef`), segment, side nav, shipping mode switch, brand logo, avatar menu, and shell header chrome.
+ */
 class AfricaniesNavigationModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesNavigationModule, imports: [AppShellComponent,
@@ -19915,6 +21144,9 @@ const STEPPER = [StepperComponent, StepDefDirective];
  * export class WizardModule {}
  * ```
  */
+/**
+ * Stepper (+ `africaniesStepDef`).
+ */
 class AfricaniesStepperModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesStepperModule, imports: [StepperComponent, StepDefDirective], exports: [StepperComponent, StepDefDirective] });
@@ -19945,6 +21177,9 @@ const DATA = [
  * export class ShipmentsListModule {}
  * ```
  */
+/**
+ * Table (+ `africaniesCellDef`) and pagination.
+ */
 class AfricaniesTableModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesTableModule, imports: [TableComponent,
@@ -19977,6 +21212,9 @@ const TOOLTIP = [TooltipComponent, TooltipTriggerDirective];
  * export class FormHintsModule {}
  * ```
  */
+/**
+ * Tooltip (+ `africaniesTooltipTrigger`).
+ */
 class AfricaniesTooltipModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesTooltipModule, imports: [TooltipComponent, TooltipTriggerDirective], exports: [TooltipComponent, TooltipTriggerDirective] });
@@ -20009,5 +21247,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