@africanies/angular-web-sdk 0.1.9 → 0.1.11

package/libs/africanies-ui/src/lib/navigation/shipping-mode-switch/shipping-mode-switch.component.ts

@@ -3,13 +3,46 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
   inject,
   input,
+  model,
 } from '@angular/core';
 
 import { ShippingModeService } from '@africanies/africanies-core';
+import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 import type { ShippingMode } from '@africanies/africanies-models';
 
+import { ChipComponent, type ChipVariant } from '../../chip/chip.component';
+
+const PANEL_OPEN_STORAGE_KEY = 'africanies-shipping-mode-panel-open';
+
+function readStoredPanelOpen(): boolean {
+  if (typeof localStorage === 'undefined') {
+    return true;
+  }
+  try {
+    const raw = localStorage.getItem(PANEL_OPEN_STORAGE_KEY);
+    if (raw === null) {
+      return true;
+    }
+    return raw !== '0' && raw !== 'false';
+  } catch {
+    return true;
+  }
+}
+
+function writeStoredPanelOpen(open: boolean): void {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+  try {
+    localStorage.setItem(PANEL_OPEN_STORAGE_KEY, open ? '1' : '0');
+  } catch {
+    // Private mode / quota — panel still toggles in-session.
+  }
+}
+
 /**
  * Shared globe + plane glyph for STN / SFN. STN paints it rotated 180°.
  *
@@ -25,12 +58,13 @@ const SHIPPING_MODE_GLYPH = `M88.42,68.75a48.8,48.8,0,0,1-4.74,11.1h9.89a7.67,7.
  * import orange; **from Nigeria** uses export green. Both tiles keep equal
  * chrome so unselected does not look like floating text.
  *
- * Project into `<africanies-side-nav>` with the `footer` attribute.
+ * Project into `<africanies-side-nav>` with the `pre-nav` attribute (above the
+ * nav list). `footer` still works for legacy placement under the list.
  *
  * @example
  * ```html
  * <africanies-side-nav [items]="nav" [(collapsed)]="collapsed">
- *   <africanies-shipping-mode-switch footer [collapsed]="collapsed()" />
+ *   <africanies-shipping-mode-switch pre-nav [collapsed]="collapsed()" />
  * </africanies-side-nav>
  * ```
  */
@@ -38,71 +72,143 @@ const SHIPPING_MODE_GLYPH = `M88.42,68.75a48.8,48.8,0,0,1-4.74,11.1h9.89a7.67,7.
   selector: 'africanies-shipping-mode-switch',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AfricaniesIconComponent, ChipComponent],
   host: {
     '[class]': 'hostClass()',
   },
   template: `
-    @if (!collapsed()) {
-      <p
-        class="m-0 mb-2 px-1 text-caption font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
-      >
-        Shipping mode
-      </p>
-    }
-    <div
-      class="grid gap-1.5"
-      [class.grid-cols-1]="collapsed()"
-      [class.grid-cols-2]="!collapsed()"
-      role="radiogroup"
-      aria-label="Shipping mode"
-    >
-      <button
-        type="button"
-        role="radio"
-        [attr.aria-checked]="mode() === 'stn'"
-        aria-label="Shipping to Nigeria"
-        [class]="cardClass('stn')"
-        (click)="select('stn')"
+    @if (collapsed()) {
+      <!-- Narrow rail: icon tiles only — chip + chevron reads as cramped. -->
+      <div
+        class="grid grid-cols-1 gap-1.5"
+        role="radiogroup"
+        aria-label="Shipping mode"
       >
-        <svg
-          viewBox="0 0 122.88 107.54"
-          class="h-6 w-6 shrink-0 rotate-180"
-          aria-hidden="true"
-          focusable="false"
+        <button
+          type="button"
+          role="radio"
+          [attr.aria-checked]="mode() === 'stn'"
+          aria-label="Shipping to Nigeria"
+          title="Shipping to Nigeria"
+          [class]="cardClass('stn')"
+          (click)="select('stn')"
         >
-          <path [attr.d]="glyphPath()" fill="currentColor" />
-        </svg>
-        @if (!collapsed()) {
-          <span class="flex flex-col leading-tight">
-            <span>Shipping</span>
-            <span>to Nigeria</span>
-          </span>
-        }
-      </button>
-      <button
-        type="button"
-        role="radio"
-        [attr.aria-checked]="mode() === 'sfn'"
-        aria-label="Shipping from Nigeria"
-        [class]="cardClass('sfn')"
-        (click)="select('sfn')"
-      >
-        <svg
-          viewBox="0 0 122.88 107.54"
-          class="h-6 w-6 shrink-0"
-          aria-hidden="true"
-          focusable="false"
+          <svg
+            viewBox="0 0 122.88 107.54"
+            class="h-5 w-5 shrink-0 rotate-180"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path [attr.d]="glyphPath()" fill="currentColor" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          role="radio"
+          [attr.aria-checked]="mode() === 'sfn'"
+          aria-label="Shipping from Nigeria"
+          title="Shipping from Nigeria"
+          [class]="cardClass('sfn')"
+          (click)="select('sfn')"
+        >
+          <svg
+            viewBox="0 0 122.88 107.54"
+            class="h-5 w-5 shrink-0"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path [attr.d]="glyphPath()" fill="currentColor" />
+          </svg>
+        </button>
+      </div>
+    } @else {
+      <div class="mb-2 flex items-center gap-1.5">
+        <p
+          class="m-0 shrink-0 px-1 text-caption font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
         >
-          <path [attr.d]="glyphPath()" fill="currentColor" />
-        </svg>
-        @if (!collapsed()) {
-          <span class="flex flex-col leading-tight">
-            <span>Shipping</span>
-            <span>from Nigeria</span>
-          </span>
+          Shipping mode
+        </p>
+        <!-- STN / SFN chip only when the tiles are collapsed — open panel already shows both modes. -->
+        @if (!panelOpen()) {
+          <africanies-chip [variant]="modeChipVariant()" size="sm">
+            {{ modeChipLabel() }}
+          </africanies-chip>
         }
-      </button>
-    </div>
+        <span class="min-w-0 flex-1" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+          [attr.aria-label]="
+            panelOpen() ? 'Hide shipping modes' : 'Show shipping modes'
+          "
+          [attr.aria-expanded]="panelOpen()"
+          (click)="togglePanel()"
+        >
+          <africanies-icon
+            [name]="panelOpen() ? 'chevron-up' : 'chevron-down'"
+            [size]="14"
+          />
+        </button>
+      </div>
+
+      <div
+        class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+        [style.grid-template-rows]="panelOpen() ? '1fr' : '0fr'"
+        [attr.aria-hidden]="!panelOpen()"
+        [class.pointer-events-none]="!panelOpen()"
+      >
+        <div class="min-h-0 overflow-hidden">
+          <div
+            class="grid grid-cols-2 gap-1.5"
+            role="radiogroup"
+            aria-label="Shipping mode"
+          >
+            <button
+              type="button"
+              role="radio"
+              [attr.aria-checked]="mode() === 'stn'"
+              aria-label="Shipping to Nigeria"
+              [class]="cardClass('stn')"
+              (click)="select('stn')"
+            >
+              <svg
+                viewBox="0 0 122.88 107.54"
+                class="h-6 w-6 shrink-0 rotate-180"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path [attr.d]="glyphPath()" fill="currentColor" />
+              </svg>
+              <span class="flex flex-col leading-tight">
+                <span>Shipping</span>
+                <span>to Nigeria</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              role="radio"
+              [attr.aria-checked]="mode() === 'sfn'"
+              aria-label="Shipping from Nigeria"
+              [class]="cardClass('sfn')"
+              (click)="select('sfn')"
+            >
+              <svg
+                viewBox="0 0 122.88 107.54"
+                class="h-6 w-6 shrink-0"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path [attr.d]="glyphPath()" fill="currentColor" />
+              </svg>
+              <span class="flex flex-col leading-tight">
+                <span>Shipping</span>
+                <span>from Nigeria</span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    }
   `,
 })
 export class ShippingModeSwitchComponent {
@@ -125,16 +231,41 @@ export class ShippingModeSwitchComponent {
    */
   readonly collapsed = input(false, { transform: booleanAttribute });
 
+  /**
+   * When true, the mode tiles are visible. Persisted in `localStorage`.
+   * Two-way bindable for hosts that need to force-open (e.g. onboarding).
+   */
+  readonly panelOpen = model(readStoredPanelOpen());
+
   /** Active mode from {@link ShippingModeService}. */
   protected readonly mode = this.shipping.mode;
 
-  /** Host padding / divider — tighter when the rail is collapsed. */
+  protected readonly modeChipLabel = computed(() =>
+    this.mode() === 'stn' ? 'STN' : 'SFN',
+  );
+
+  protected readonly modeChipVariant = computed(
+    (): ChipVariant => (this.mode() === 'stn' ? 'import' : 'export'),
+  );
+
+  /** Host padding / divider — sits above the nav list (`border-b`). */
   protected readonly hostClass = computed(() =>
     this.collapsed()
-      ? 'block shrink-0 border-t border-border px-1.5 py-3 dark:border-white/10'
-      : 'block shrink-0 border-t border-border px-2 py-3 dark:border-white/10',
+      ? 'block shrink-0 border-b border-border px-1.5 py-2 dark:border-white/10'
+      : 'block shrink-0 border-b border-border px-2 py-2.5 dark:border-white/10',
   );
 
+  constructor() {
+    effect(() => {
+      writeStoredPanelOpen(this.panelOpen());
+    });
+  }
+
+  /** Show or hide the mode tiles. */
+  protected togglePanel(): void {
+    this.panelOpen.update((open) => !open);
+  }
+
   /**
    * Requests a mode change through {@link ShippingModeService.requestModeChange}
    * so feature guards (e.g. Create Shipment confirm) can run first.
@@ -160,7 +291,7 @@ export class ShippingModeSwitchComponent {
     const base =
       'flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border text-center text-caption font-medium transition-colors ' +
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus ' +
-      (compact ? 'min-h-9 px-1 py-1.5' : 'min-h-[4.5rem] px-1.5 py-2');
+      (compact ? 'size-9 min-h-0 px-0 py-0' : 'min-h-[4.5rem] px-1.5 py-2');
     const idle =
       'border-control bg-surface text-ink hover:bg-background-hover dark:border-white/15 dark:bg-ink-950 dark:text-white dark:hover:bg-white/10';
 
@@ -170,7 +301,7 @@ export class ShippingModeSwitchComponent {
         : `${base} ${idle}`;
     }
     return selected
-      ? `${base} border-export-strong bg-export-strong text-white dark:border-export dark:bg-export`
+      ? `${base} border-export bg-export text-white dark:border-export dark:bg-export`
       : `${base} ${idle}`;
   }
 }

package/libs/africanies-ui/src/lib/navigation/side-nav/africanies-side-nav.component.html

@@ -58,15 +58,17 @@
         </button>
       </div>
 
+      <ng-content select="[pre-nav]" />
+
       <nav
         class="africanies-overlay-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-visible px-3 py-3"
       >
         @if (!collapsed() && expandParents() && hasOpenBranches()) {
           <!-- Zero-height sticky host: keeps the control pinned without reserving a row. -->
-          <div class="sticky top-0 z-10 h-0 overflow-visible">
+          <div class="sticky top-0 z-20 h-0 overflow-visible">
             <button
               type="button"
-              class="absolute right-0 top-0 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-surface text-neutral-600 shadow-sm ring-1 ring-border-strong transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white"
+              class="absolute -right-2 -top-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-surface text-neutral-600 shadow-sm ring-1 ring-border-strong transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-ink-surface dark:hover:text-white"
               data-onboarding="nav-branches-collapse"
               aria-label="Collapse all"
               (click)="collapseAllBranches()"

package/libs/africanies-ui/src/lib/navigation/side-nav/africanies-side-nav.component.ts

@@ -47,7 +47,9 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
  * **Expanded rail:** branches start open by default (`expandBranchesByDefault`).
  * Clicking a parent only opens/closes the branch (no route change). When any
  * branch is open, a sticky collapse-all control sits above the list (top right).
- * The rail expand/collapse control stays pinned in the logo header.
+ * The rail expand/collapse control stays pinned in the logo header. Project
+ * chrome above the scrollable list with `pre-nav` (e.g. shipping modes) or
+ * below with `footer`.
  * **Collapsed rail:** clicking a parent expands the rail, opens the
  * branch, and activates the first enabled child (router or `activeId`).
  *

package/libs/africanies-ui/src/lib/table/table.component.spec.ts

@@ -1,6 +1,8 @@
 import { Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { of } from 'rxjs';
+
 import { ShippingModeService } from '@africanies/africanies-core';
 import type { ShippingMode } from '@africanies/africanies-models';
 
@@ -45,6 +47,7 @@ describe('TableComponent keep-rows loading', () => {
           provide: ShippingModeService,
           useValue: {
             mode: mode.asReadonly(),
+            requestModeChange: () => of(true),
           },
         },
       ],