@africanies/angular-web-sdk 0.1.11 → 0.1.13

package/.nx/workspace-data/project-graph.json

@@ -826,7 +826,7 @@
           "targetGroups": {},
           "js": {
             "packageName": "@africanies/angular-web-sdk",
-            "packageVersion": "0.1.11",
+            "packageVersion": "0.1.13",
             "isInPackageManagerWorkspaces": true
           }
         },
@@ -42095,5 +42095,5 @@
   },
   "version": "6.0",
   "errors": [],
-  "computedAt": 1788962337694
+  "computedAt": 1789139553650
 }

package/apps/playground/src/app/pages/forms-page.ts

@@ -11,6 +11,7 @@ import {
   type FileUploadResult,
   NumberInputComponent,
   OtpInputComponent,
+  PhoneInputComponent,
   RadioComponent,
   type RadioOption,
   SelectComponent,
@@ -30,6 +31,7 @@ import {
   FORMS_LIVE_VALUES,
   FORMS_NUMBER,
   FORMS_OTP,
+  FORMS_PHONE,
   FORMS_SELECT,
   FORMS_TEXT,
   FORMS_TEXTAREA,
@@ -48,6 +50,7 @@ import {
     TextareaComponent,
     SelectComponent,
     AddressInputComponent,
+    PhoneInputComponent,
     NumberInputComponent,
     OtpInputComponent,
     FileUploadComponent,
@@ -134,6 +137,33 @@ import {
         </div>
       </app-demo-section>
 
+      <app-demo-section
+        title="Phone input"
+        hint="International number — flag + dial code + national digits. [(value)] is E.164 (e.g. +2348012345678) so edit screens can prepopulate from the API string."
+        [code]="phoneCode"
+      >
+        <div class="grid gap-5 md:grid-cols-2">
+          <africanies-phone-input
+            label="Consignee phone"
+            hint="Prefilled from a stored E.164 value"
+            countryIso2="NG"
+            [(value)]="phone"
+          />
+          <africanies-phone-input
+            label="Locked sender phone"
+            countryIso2="GH"
+            [lockCountry]="true"
+            [(value)]="lockedPhone"
+          />
+          <africanies-phone-input
+            label="Phone with error"
+            error="Enter a valid mobile number"
+            countryIso2="US"
+            [(value)]="phoneError"
+          />
+        </div>
+      </app-demo-section>
+
       <app-demo-section
         title="Select"
         hint="Choose from a list — searchable, creatable free text, and multi-select for tags and filters."
@@ -357,6 +387,12 @@ import {
               {{ tracking() || '—' }}
             </dd>
           </div>
+          <div>
+            <dt class="text-neutral-600">Phone</dt>
+            <dd class="m-0 font-medium text-ink dark:text-white">
+              {{ phone() || '—' }}
+            </dd>
+          </div>
           <div>
             <dt class="text-neutral-600">Amount</dt>
             <dd class="m-0 font-medium text-ink dark:text-white">
@@ -403,14 +439,17 @@ import {
   `,
 })
 export class FormsPage {
-  protected readonly tracking = signal('');
-  protected readonly reference = signal('');
+  protected readonly tracking = signal('AWB-10482');
+  protected readonly reference = signal('PO-7781');
   protected readonly email = signal('not-an-email');
   protected readonly locked = signal('WH-LOCKED-01');
-  protected readonly instructions = signal('');
+  protected readonly instructions = signal('Fragile — keep upright');
   protected readonly notesError = signal('x'.repeat(12));
   protected readonly amount = signal<number | null>(12500);
   protected readonly weight = signal<number | null>(24.5);
+  protected readonly phone = signal('+2348012345678');
+  protected readonly lockedPhone = signal('+233244123456');
+  protected readonly phoneError = signal('+15551212');
   protected readonly warehouses = signal<SelectOption<string>[]>([
     { label: 'Lagos Hub', value: 'los', prefix: 'warehouse', suffix: 'globe' },
     { label: 'Accra Depot', value: 'acc', prefix: 'warehouse' },
@@ -422,24 +461,31 @@ export class FormsPage {
     },
     { label: 'Cairo Gateway', value: 'cai', prefix: 'warehouse' },
   ]);
-  protected readonly selectedWarehouse = signal<SelectOption<string> | null>(
-    null,
-  );
+  protected readonly selectedWarehouse = signal<SelectOption<string> | null>({
+    label: 'Lagos Hub',
+    value: 'los',
+    prefix: 'warehouse',
+    suffix: 'globe',
+  });
   protected readonly tags = signal<SelectOption<string>[]>([
     { label: 'Fragile', value: 'fragile', prefix: 'warning' },
     { label: 'Priority', value: 'priority', prefix: 'alarm' },
     { label: 'Bonded', value: 'bonded', prefix: 'anchor' },
   ]);
-  protected readonly selectedTags = signal<SelectOption<string>[]>([]);
+  protected readonly selectedTags = signal<SelectOption<string>[]>([
+    { label: 'Fragile', value: 'fragile', prefix: 'warning' },
+    { label: 'Priority', value: 'priority', prefix: 'alarm' },
+  ]);
   protected readonly incoterms: SelectOption<string>[] = [
     { label: 'DDP', value: 'ddp' },
     { label: 'DAP', value: 'dap' },
     { label: 'EXW', value: 'exw' },
     { label: 'FOB', value: 'fob' },
   ];
-  protected readonly selectedIncoterm = signal<SelectOption<string> | null>(
-    null,
-  );
+  protected readonly selectedIncoterm = signal<SelectOption<string> | null>({
+    label: 'DDP',
+    value: 'ddp',
+  });
   protected readonly carriers: SelectOption<string>[] = [
     {
       label: 'DHL Express',
@@ -453,7 +499,16 @@ export class FormsPage {
   protected readonly selectedCarrier = signal<SelectOption<string> | null>(
     null,
   );
-  protected readonly pickupAddress = signal<AddressPlace | null>(null);
+  protected readonly pickupAddress = signal<AddressPlace | null>({
+    placeId: 'place-lagos-1',
+    formattedAddress: '12 Broad Street, Lagos, Nigeria',
+    name: '12 Broad Street',
+    lat: 6.4541,
+    lng: 3.3947,
+    locality: 'Lagos',
+    country: 'Nigeria',
+    countryCode: 'NG',
+  });
   protected readonly lastPlaceSelected = signal<AddressPlace | null>(null);
   protected readonly signature = signal(true);
   protected readonly insured = signal(false);
@@ -469,12 +524,12 @@ export class FormsPage {
   ];
   protected readonly serviceLevel = signal<string | null>('standard');
   protected readonly readyDate = signal<string | null>('2026-08-15');
-  protected readonly cutoffDate = signal<string | null>(null);
+  protected readonly cutoffDate = signal<string | null>('2026-08-14');
   protected readonly files = signal<FileUploadResult[]>([]);
   protected readonly buttonFiles = signal<FileUploadResult[]>([]);
   protected readonly compactFiles = signal<FileUploadResult[]>([]);
-  protected readonly otpCodeValue = signal('');
-  protected readonly otpPin = signal('');
+  protected readonly otpCodeValue = signal('482913');
+  protected readonly otpPin = signal('7391');
   protected readonly otpError = signal('0000');
   protected readonly lastOtpCompleted = signal('');
   protected readonly otpResendCount = signal(0);
@@ -482,6 +537,7 @@ export class FormsPage {
   protected readonly textCode = FORMS_TEXT;
   protected readonly textareaCode = FORMS_TEXTAREA;
   protected readonly numberCode = FORMS_NUMBER;
+  protected readonly phoneCode = FORMS_PHONE;
   protected readonly selectCode = FORMS_SELECT;
   protected readonly addressCode = FORMS_ADDRESS;
   protected readonly choiceCode = FORMS_CHOICE;

package/apps/playground/src/app/snippets/forms.snippets.ts

@@ -41,8 +41,8 @@ import { TextInputComponent } from '@africanies/africanies-ui';
   \`,
 })
 export class ShipmentReferenceFormComponent {
-  protected readonly tracking = signal('');
-  protected readonly reference = signal('');
+  protected readonly tracking = signal('AWB-10482');
+  protected readonly reference = signal('PO-7781');
   protected readonly email = signal('not-an-email');
   protected readonly locked = signal('WH-LOCKED-01');
 }
@@ -79,8 +79,8 @@ import { TextareaComponent } from '@africanies/africanies-ui';
   \`,
 })
 export class ShipmentInstructionsFormComponent {
-  protected readonly instructions = signal('');
-  protected readonly notesError = signal('');
+  protected readonly instructions = signal('Fragile — keep upright');
+  protected readonly notesError = signal('x'.repeat(12));
 }
 `;
 
@@ -122,6 +122,41 @@ export class ShipmentValueFormComponent {
 }
 `;
 
+export /**
+ *
+ */
+const FORMS_PHONE = `
+// [(value)] is an E.164 string (+234…). Edit screens prepopulate from the API
+// phone field; countryIso2 is a hint when dial codes are shared (e.g. +1).
+
+import { Component, signal } from '@angular/core';
+import { PhoneInputComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-consignee-phone-form',
+  standalone: true,
+  imports: [PhoneInputComponent],
+  template: \`
+    <africanies-phone-input
+      label="Consignee phone"
+      countryIso2="NG"
+      [(value)]="phone"
+    />
+
+    <africanies-phone-input
+      label="Locked sender phone"
+      countryIso2="GH"
+      [lockCountry]="true"
+      [(value)]="lockedPhone"
+    />
+  \`,
+})
+export class ConsigneePhoneFormComponent {
+  protected readonly phone = signal('+2348012345678');
+  protected readonly lockedPhone = signal('+233244123456');
+}
+`;
+
 export /**
  *
  */
@@ -476,8 +511,8 @@ import { OtpInputComponent } from '@africanies/africanies-ui';
   \`,
 })
 export class VerifyOtpFormComponent {
-  protected readonly code = signal('');
-  protected readonly pin = signal('');
+  protected readonly code = signal('482913');
+  protected readonly pin = signal('7391');
 
   protected verify(code: string): void {
     // POST /auth/verify { code }

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

@@ -48,6 +48,9 @@ const DEFAULT_MODE = 'sfn';
  * console.log(shipping.mode()); // 'stn'
  * ```
  */
+/**
+ * Signal-based holder for the active {@link ShippingMode}.
+ */
 class ShippingModeService {
     storage = inject(SessionStorageService);
     injector = inject(Injector);
@@ -970,6 +973,9 @@ function mapResourcePayload(id, raw, mapOne, mapMany) {
  * });
  * ```
  */
+/**
+ * Endpoint-agnostic HTTP façade over Angular {@link HttpClient}.
+ */
 class ApiClient {
     http = inject(HttpClient);
     config = inject(AFRICANIES_SDK_CONFIG);
@@ -1295,6 +1301,9 @@ function resolveModeRegionConfig(config, mode, countryCode) {
  * }
  * ```
  */
+/**
+ * Source of truth for region currency and measurement units (STN / SFN).
+ */
 class ModeConfigService {
     api = inject(ApiClient);
     storage = inject(STORAGE_TOKEN);
@@ -1456,6 +1465,9 @@ const AUTH_FORGOT_PASSWORD_PATH = '/auth/forgot/password';
  * });
  * ```
  */
+/**
+ * Unauthenticated auth endpoints (`POST /auth/…`).
+ */
 class AuthService {
     api = inject(ApiClient);
     /**
@@ -1502,6 +1514,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * });
  * ```
  */
+/**
+ * Holds the bearer access token used by {@link authInterceptor}.
+ */
 class AuthTokenService {
     storage = inject(STORAGE_TOKEN);
     api = inject(ApiClient);
@@ -1914,6 +1929,9 @@ const COUNTRY_CACHE_TTL_MS = 5 * 60_000;
  * countries.readById(1).subscribe((res) => console.log(res.data?.name));
  * ```
  */
+/**
+ * Public country utility reads (`GET /public/country/read/{id?}`).
+ */
 class CountryService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -2117,6 +2135,9 @@ const DOCUMENT_CACHE_TTL_MS = 5 * 60_000;
  * });
  * ```
  */
+/**
+ * Public document catalog reads (`GET /public/document/read/{id?}`).
+ */
 class DocumentService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -2240,6 +2261,9 @@ const PLAN_CACHE_TTL_MS = 5 * 60_000;
  * });
  * ```
  */
+/**
+ * Public subscription-plan reads (`GET /public/plan/read/{id?}`).
+ */
 class PlanService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -2337,6 +2361,9 @@ const SERVICE_CACHE_TTL_MS = 5 * 60_000;
  * services.readById(3).subscribe((res) => console.log(res.data?.name));
  * ```
  */
+/**
+ * Public subscription-service reads (`GET /public/service/read/{id?}`).
+ */
 class ServiceService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -2539,6 +2566,9 @@ const CURRENCY_CACHE_TTL_MS = 5 * 60_000;
  * currencies.readById(5).subscribe((res) => console.log(res.data?.name));
  * ```
  */
+/**
+ * Currency App Settings API (`GET /currency/read/{id?}` plus create / update / delete).
+ */
 class CurrencyService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -2741,6 +2771,9 @@ const PAYMENT_METHOD_CACHE_TTL_MS = 5 * 60_000;
  * });
  * ```
  */
+/**
+ * Payment-method App Settings API (`GET /payment_method/read/{id?}` plus update).
+ */
 class PaymentMethodService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -2944,6 +2977,9 @@ const SHIPMENT_METHOD_CACHE_TTL_MS = 5 * 60_000;
  * methods.readById(12).subscribe((res) => console.log(res.data?.name));
  * ```
  */
+/**
+ * Shipment method / carrier utility reads (`GET /shipment_method/read/{id?}`).
+ */
 class ShipmentMethodService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -3085,6 +3121,9 @@ const WAREHOUSE_CACHE_TTL_MS = 5 * 60_000;
  * warehouses.readById(37).subscribe((res) => console.log(res.data?.name));
  * ```
  */
+/**
+ * Warehouse utility reads (`GET /warehouse/read/{id?}`).
+ */
 class WarehouseService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -3180,6 +3219,9 @@ const ZONE_CACHE_TTL_MS = 5 * 60_000;
  * zones.readById(1).subscribe((res) => console.log(res.data?.name));
  * ```
  */
+/**
+ * Zone utility reads (`GET /zone/read/records/{id?}`).
+ */
 class ZoneService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -3552,6 +3594,9 @@ function mapUser(raw) {
  * });
  * ```
  */
+/**
+ * Current authenticated user (`GET /user`).
+ */
 class UserService {
     api = inject(ApiClient);
     /**
@@ -3692,6 +3737,9 @@ function mapNotificationInboxItem(notification) {
  * });
  * ```
  */
+/**
+ * Authenticated user notifications (`GET /user/notifications/read/{id?}`).
+ */
 class NotificationService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -3957,6 +4005,9 @@ function isLegacyPortalHost(hostname) {
  * });
  * ```
  */
+/**
+ * File utility reads (`POST /file/read`).
+ */
 class FileService {
     api = inject(ApiClient);
     /**
@@ -4090,6 +4141,9 @@ const PRODUCT_CACHE_TTL_MS = 5 * 60_000;
  * products.readById(6280).subscribe((res) => console.log(res.data?.name));
  * ```
  */
+/**
+ * Product utility reads (`GET /product/read/{id?}`).
+ */
 class ProductService {
     api = inject(ApiClient);
     read(id = null, params) {
@@ -4228,6 +4282,9 @@ const SDK_FILTER_OPTIONS_SOURCES = new Set([
  * });
  * ```
  */
+/**
+ * Resolves filter drawer select options from built-in SDK catalog services.
+ */
 class FilterOptionsResolver {
     warehouses = inject(WarehouseService);
     shipmentMethods = inject(ShipmentMethodService);
@@ -4347,6 +4404,9 @@ const OVERLAY_ROUTE_CONFIGS = new InjectionToken('AFRICANIES_OVERLAY_ROUTE_CONFI
  * Modal/drawer implementations live in `@africanies/africanies-ui` and are injected through
  * {@link MODAL_SERVICE} / {@link DRAWER_SERVICE} to avoid a circular dependency.
  */
+/**
+ * Keeps query-param state in sync with modal/drawer overlays.
+ */
 class RouteOverlayService {
     route = inject(ActivatedRoute);
     router = inject(Router);