@africanies/angular-web-sdk 0.1.2 → 0.1.3

package/libs/africanies-core/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@africanies/africanies-core",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
     "@angular/router": "^22.0.0",
     "rxjs": "^7.8.0",
-    "@africanies/africanies-models": "^0.0.2",
-    "@africanies/africanies-storage": "^0.0.1"
+    "@africanies/africanies-models": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-storage": ">=0.0.1 <0.1.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/libs/africanies-core/src/lib/payment-method/payment-method.mapper.spec.ts

@@ -76,6 +76,21 @@ describe('payment-method.mapper', () => {
     );
   });
 
+  it('unwraps paginated nested currencies', () => {
+    const mapped = mapPaymentMethod({
+      id: 4,
+      name: 'Squad',
+      model: 'App\\Models\\Squad',
+      currencies: {
+        current_page: 1,
+        data: WIRE_SQUAD.currencies,
+        total: 1,
+      },
+    });
+    expect(mapped.currencies).toHaveLength(1);
+    expect(mapped.currencies[0]?.id).toBe(5);
+  });
+
   it('toPaymentMethodFlag01 serializes booleans and wire flags', () => {
     expect(toPaymentMethodFlag01(true)).toBe('1');
     expect(toPaymentMethodFlag01(false)).toBe('0');

package/libs/africanies-core/src/lib/payment-method/payment-method.mapper.ts

@@ -15,7 +15,6 @@ import {
   asNumber,
   asRecord,
   asString,
-  mapArray,
   mapList,
   toFlag01,
 } from '../http/wire';
@@ -101,7 +100,7 @@ export function mapPaymentMethod(raw: unknown): PaymentMethodModel {
     deleted_at: asNullableString(record['deleted_at'] ?? record['deletedAt']),
     created_at: asNullableString(record['created_at'] ?? record['createdAt']),
     updated_at: asNullableString(record['updated_at'] ?? record['updatedAt']),
-    currencies: mapArray(record['currencies'], mapPaymentMethodCurrency),
+    currencies: mapList(record['currencies'], mapPaymentMethodCurrency),
   };
 }
 

package/libs/africanies-theme/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@africanies/africanies-theme",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
-    "@africanies/africanies-core": "^0.0.2",
-    "@africanies/africanies-storage": "^0.0.1"
+    "@africanies/africanies-core": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-storage": ">=0.0.1 <0.1.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/libs/africanies-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africanies/africanies-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
@@ -8,10 +8,10 @@
     "@angular/forms": "^22.0.0",
     "@angular/router": "^22.0.0",
     "rxjs": "^7.8.0",
-    "@africanies/africanies-models": "^0.0.2",
-    "@africanies/africanies-icons": "^0.0.1",
-    "@africanies/africanies-core": "^0.0.2",
-    "@africanies/africanies-theme": "^0.0.1"
+    "@africanies/africanies-models": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-icons": ">=0.0.1 <0.1.0",
+    "@africanies/africanies-core": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-theme": ">=0.0.1 <0.1.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/libs/africanies-ui/src/index.ts

@@ -32,6 +32,12 @@ export {
   type LoadingStateMode,
 } from './lib/feedback';
 
+// Accordion (expandable bordered panels)
+export {
+  AccordionComponent,
+  type AccordionSize,
+} from './lib/accordion';
+
 // Alert (inline banners — distinct from ErrorState / Toast)
 export { AlertComponent, type AlertVariant } from './lib/alert';
 

package/libs/africanies-ui/src/lib/accordion/accordion.component.ts

@@ -0,0 +1,135 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+} from '@angular/core';
+
+import { AfricaniesIconComponent } from '@africanies/africanies-icons';
+
+/**
+ * Visual density for {@link AccordionComponent}.
+ *
+ * - `md` — page sections (pay review, top-level cards)
+ * - `sm` — nested panels (e.g. export boxes inside a manifest box)
+ */
+export type AccordionSize = 'md' | 'sm';
+
+/**
+ * Bordered expandable panel with animated fold — the pattern used on
+ * Manifest detail and Make Payment review.
+ *
+ * Parent owns open state via {@link open} (`model()` / `[(open)]`).
+ *
+ * @example
+ * ```html
+ * <africanies-accordion
+ *   title="Customer Information"
+ *   [open]="isOpen('customer')"
+ *   (openChange)="onOpenChange('customer', $event)"
+ * >
+ *   <dl>…</dl>
+ * </africanies-accordion>
+ * ```
+ */
+@Component({
+  selector: 'africanies-accordion',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AfricaniesIconComponent],
+  host: {
+    class: 'block',
+  },
+  styles: `
+    .africanies-accordion-fold {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 200ms ease;
+    }
+
+    .africanies-accordion-fold-open {
+      grid-template-rows: 1fr;
+    }
+
+    .africanies-accordion-fold-body {
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .africanies-accordion-fold {
+        transition: none;
+      }
+    }
+  `,
+  template: `
+    <div [class]="shellClass()">
+      <button
+        type="button"
+        [class]="triggerClass()"
+        [attr.aria-expanded]="open()"
+        (click)="toggle()"
+      >
+        <span class="min-w-0 flex-1 font-medium">
+          <ng-content select="[africaniesAccordionTitle]" />
+          @if (title()) {
+            {{ title() }}
+          }
+        </span>
+        <africanies-icon
+          name="chevron-down"
+          class="shrink-0 transition-transform duration-200"
+          [class.rotate-180]="open()"
+          [size]="chevronSize()"
+        />
+      </button>
+      <div
+        class="africanies-accordion-fold"
+        [class.africanies-accordion-fold-open]="open()"
+      >
+        <div class="africanies-accordion-fold-body">
+          <div [class]="bodyClass()">
+            <ng-content />
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class AccordionComponent {
+  /** Plain-text header. Prefer projected `[africaniesAccordionTitle]` for rich titles. */
+  readonly title = input('');
+
+  /** Whether the panel body is expanded. */
+  readonly open = model(false);
+
+  /** Padding / chevron density. */
+  readonly size = input<AccordionSize>('md');
+
+  protected readonly chevronSize = computed(() =>
+    this.size() === 'sm' ? 14 : 16,
+  );
+
+  protected readonly shellClass = computed(() =>
+    this.size() === 'sm'
+      ? 'rounded-lg border border-border dark:border-white/10'
+      : 'rounded-xl border border-border dark:border-white/10',
+  );
+
+  protected readonly triggerClass = computed(() =>
+    this.size() === 'sm'
+      ? 'flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-ink dark:text-white'
+      : 'flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-ink dark:text-white',
+  );
+
+  protected readonly bodyClass = computed(() =>
+    this.size() === 'sm'
+      ? 'border-t border-border px-3 py-2 dark:border-white/10'
+      : 'border-t border-border px-4 py-3 dark:border-white/10',
+  );
+
+  protected toggle(): void {
+    this.open.update((value) => !value);
+  }
+}

package/libs/africanies-ui/src/lib/accordion/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Expandable bordered panels (`africanies-accordion`).
+ */
+export {
+  AccordionComponent,
+  type AccordionSize,
+} from './accordion.component';

package/libs/africanies-ui/src/lib/action-menu/action-menu.component.ts

@@ -10,14 +10,21 @@ import {
   computed,
   contentChild,
   ElementRef,
+  inject,
   input,
   signal,
   viewChild,
 } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 
 import { ButtonComponent } from '../button/button.component';
+import {
+  isModifiedClick,
+  navigateNavItem,
+  navItemHref,
+} from '../navigation/navigate-nav-item';
 import { ActionMenuTriggerDirective } from './action-menu-trigger.directive';
 import type { AfricaniesMenuItem } from './menu-item';
 
@@ -53,6 +60,9 @@ const MENU_PANEL_POSITIONS: ConnectedPosition[] = [
  * clipped by table `overflow`. Default trigger is a ghost ellipsis button;
  * project a custom control with {@link ActionMenuTriggerDirective}.
  *
+ * Items with {@link AfricaniesMenuItem.routerLink} render as anchors so users
+ * can right-click / modified-click to open in a new tab.
+ *
  * @example
  * ```html
  * <!-- Default icon trigger (table row) -->
@@ -68,7 +78,12 @@ const MENU_PANEL_POSITIONS: ConnectedPosition[] = [
  * ```ts
  * rowActions(row: Shipment): AfricaniesMenuItem[] {
  *   return [
- *     { label: 'Open', icon: 'eye', onClick: () => this.open(row) },
+ *     {
+ *       label: 'Open',
+ *       icon: 'eye',
+ *       routerLink: ['/shipments', row.id],
+ *       onClick: () => this.open(row),
+ *     },
  *     { label: 'Edit', icon: 'edit', onClick: () => this.edit(row) },
  *     {
  *       label: 'Delete',
@@ -156,26 +171,49 @@ const MENU_PANEL_POSITIONS: ConnectedPosition[] = [
               role="separator"
             ></div>
           }
-          <button
-            type="button"
-            role="menuitem"
-            [id]="itemDomId(i)"
-            [class]="itemClass(item, i)"
-            [disabled]="!!item.disabled"
-            (click)="selectItem(item)"
-            (mouseenter)="activeIndex.set(i)"
-          >
-            @if (item.icon; as icon) {
-              <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
-            }
-            <span class="min-w-0 flex-1 truncate text-left">{{ item.label }}</span>
-          </button>
+          @if (item.routerLink !== null && item.routerLink !== undefined) {
+            <a
+              role="menuitem"
+              [id]="itemDomId(i)"
+              [class]="itemClass(item, i)"
+              [attr.href]="item.disabled ? null : hrefFor(item)"
+              [attr.aria-disabled]="item.disabled ? true : null"
+              (click)="onRoutedItemClick($event, item)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (item.icon; as icon) {
+                <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
+              }
+              <span class="min-w-0 flex-1 truncate text-left">{{
+                item.label
+              }}</span>
+            </a>
+          } @else {
+            <button
+              type="button"
+              role="menuitem"
+              [id]="itemDomId(i)"
+              [class]="itemClass(item, i)"
+              [disabled]="!!item.disabled"
+              (click)="selectItem(item)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (item.icon; as icon) {
+                <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
+              }
+              <span class="min-w-0 flex-1 truncate text-left">{{
+                item.label
+              }}</span>
+            </button>
+          }
         }
       </div>
     </ng-template>
   `,
 })
 export class ActionMenuComponent {
+  private readonly router = inject(Router);
+
   protected readonly panelPositions = MENU_PANEL_POSITIONS;
 
   private readonly panelRef = viewChild<ElementRef<HTMLElement>>('panel');
@@ -206,7 +244,7 @@ export class ActionMenuComponent {
   protected itemClass(item: AfricaniesMenuItem, index: number): string {
     const active = this.activeIndex() === index;
     const base =
-      'flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-body-sm transition-colors ' +
+      'flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-body-sm no-underline transition-colors ' +
       'disabled:cursor-not-allowed disabled:opacity-50 ' +
       'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ink';
     if (item.danger) {
@@ -225,6 +263,10 @@ export class ActionMenuComponent {
     );
   }
 
+  protected hrefFor(item: AfricaniesMenuItem): string | null {
+    return navItemHref(this.router, item);
+  }
+
   protected onTriggerClick(event: MouseEvent): void {
     event.preventDefault();
     event.stopPropagation();
@@ -304,11 +346,36 @@ export class ActionMenuComponent {
     this.open.set(false);
   }
 
+  /**
+   * Primary click on a routed item: in-app activate via {@link onClick} or
+   * router. Modified clicks keep native link behaviour (new tab).
+   */
+  protected onRoutedItemClick(event: MouseEvent, item: AfricaniesMenuItem): void {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    if (isModifiedClick(event)) {
+      this.close();
+      return;
+    }
+    event.preventDefault();
+    this.activateItem(item);
+  }
+
   protected selectItem(item: AfricaniesMenuItem): void {
     if (item.disabled) {
       return;
     }
-    item.onClick();
+    this.activateItem(item);
+  }
+
+  private activateItem(item: AfricaniesMenuItem): void {
+    if (item.onClick) {
+      item.onClick();
+    } else if (item.routerLink != null) {
+      void navigateNavItem(this.router, item, false);
+    }
     this.close();
   }
 

package/libs/africanies-ui/src/lib/action-menu/menu-item.ts

@@ -2,14 +2,31 @@ import type { IconName } from '@africanies/africanies-icons';
 
 /**
  * Option row for {@link ActionMenuComponent}.
+ *
+ * Set optional {@link routerLink} (and `queryParams` / `fragment`) so the row
+ * renders as an `<a href>` — right-click / ⌘-click can open in a new tab.
+ * Primary click still runs {@link onClick} when provided; otherwise the menu
+ * navigates via the router (same pattern as tabs / segment).
  */
 export interface AfricaniesMenuItem {
   /** Visible label. */
   label: string;
-  /** Invoked when the user activates this row (then the menu closes). */
-  onClick: () => void;
+  /**
+   * Invoked on primary activation (then the menu closes).
+   * Optional when {@link routerLink} is set — the menu navigates instead.
+   */
+  onClick?: () => void;
   /** Optional leading icon from `@africanies/africanies-icons`. */
   icon?: IconName;
+  /**
+   * Optional Angular router link (`string` or commands array).
+   * When set, the row is an `<a>` with a real `href` for open-in-new-tab.
+   */
+  routerLink?: string | readonly unknown[];
+  /** Optional query params passed with {@link routerLink}. */
+  queryParams?: Record<string, unknown>;
+  /** Optional URL fragment with {@link routerLink}. */
+  fragment?: string;
   /** When true, the item cannot be activated. */
   disabled?: boolean;
   /** Destructive styling (e.g. Delete). */

package/libs/africanies-ui/src/lib/modules/africanies-feedback.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { AccordionComponent } from '../accordion';
 import { AlertComponent } from '../alert';
 import { ChipComponent } from '../chip';
 import {
@@ -11,6 +12,7 @@ import {
 } from '../feedback';
 
 const FEEDBACK = [
+  AccordionComponent,
   LoadingStateComponent,
   ErrorStateComponent,
   ErrorIndicatorComponent,
@@ -21,7 +23,7 @@ const FEEDBACK = [
 ] as const;
 
 /**
- * Async feedback states, inline alert, and status chips.
+ * Async feedback states, accordion panels, inline alert, and status chips.
  *
  * Toast stays out of this module — register {@link provideAfricaniesToasts} instead.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africanies/angular-web-sdk",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "packageManager": "pnpm@11.24.0",
   "license": "MIT",
   "contributors": [