npm - @africanies/angular-web-sdk - Versions diffs - 0.1.12 → 0.1.13 - Mend

@africanies/angular-web-sdk 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/.nx/cache/13387631073062967069/dist/libs/africanies-theme/tailwind-preset.cjs ADDED Viewed

@@ -0,0 +1,330 @@
+/**
+ * Shared Tailwind preset for AFRICANIES product UIs.
+ *
+ * WHY a preset (not only CSS variables): consuming apps and `@africanies/africanies-ui`
+ * already use Tailwind utility classes. Shipping the palette as a preset keeps
+ * class names (`text-export`, `bg-import-subtle`, …) consistent and scannable
+ * by Tailwind's content detection across packages.
+ *
+ * Shipped as `.cjs` because ng-packagr publishes this package with
+ * `"type": "module"` — a `.js` CommonJS file would break
+ * `require('@africanies/africanies-theme/tailwind-preset')`.
+ *
+ * Consumer setup (see THEME.md):
+ *   presets: [require('@africanies/africanies-theme/tailwind-preset')]
+ *   content: app sources + ./node_modules/@africanies/africanies-ui (js/mjs)
+ *
+ * Also injects base autofill overrides so Chrome/Safari do not paint a
+ * yellow/blue fill over AFRICANIES form shells (`bg-white` / `dark:bg-ink-950`),
+ * and a pointer cursor on interactive controls.
+ *
+ * @type {import('tailwindcss').Config}
+ */
+/**
+ * Pointer cursor on clickable controls.
+ *
+ * WHY base CSS (not only `cursor-pointer` utilities): browsers use
+ * `cursor: default` on `button`, and Tailwind v4 content detection often
+ * skips pnpm-linked `@africanies/africanies-ui` bundles so the utility is never emitted.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesInteractiveCursorPlugin({ addBase }) {
+  addBase({
+    [[
+      'a[href]',
+      'button:not(:disabled):not([aria-disabled="true"])',
+      'summary',
+      'label[for]',
+      'select:not(:disabled)',
+      'input[type="button"]:not(:disabled)',
+      'input[type="submit"]:not(:disabled)',
+      'input[type="reset"]:not(:disabled)',
+      'input[type="checkbox"]:not(:disabled)',
+      'input[type="radio"]:not(:disabled)',
+      'input[type="file"]:not(:disabled)',
+      '[role="button"]:not([aria-disabled="true"])',
+      '[role="link"]:not([aria-disabled="true"])',
+      '[role="menuitem"]:not([aria-disabled="true"])',
+      '[role="option"]:not([aria-disabled="true"])',
+      '[role="tab"]:not([aria-disabled="true"])',
+      '[role="checkbox"]:not([aria-disabled="true"])',
+      '[role="radio"]:not([aria-disabled="true"])',
+      '[role="switch"]:not([aria-disabled="true"])',
+    ].join(', ')]: {
+      cursor: 'pointer',
+    },
+    ':disabled, [aria-disabled="true"]': {
+      cursor: 'not-allowed',
+    },
+  });
+}
+/**
+ * Neutralize browser autofill chrome so fields keep AFRICANIES tokens.
+ *
+ * WHY inset box-shadow (not `background-color`): WebKit ignores background
+ * on `:-webkit-autofill`. A large inset shadow matches the field shell
+ * (`white` / `ink-950`) and `-webkit-text-fill-color` keeps body text on
+ * `ink` / white. `.dark` matches `ThemeService` (`class` on `<html>`).
+ *
+ * WHY one selector per `addBase` key: joining autofill selectors with commas
+ * under a single `.dark ${list}` key only scopes the first selector — the rest
+ * leak into light mode. WHY no `color` in the long transition: delaying color
+ * freezes text when the user toggles light/dark.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesAutofillPlugin({ addBase }) {
+  const autofillSelectors = [
+    'input:-webkit-autofill',
+    'input:-webkit-autofill:hover',
+    'input:-webkit-autofill:focus',
+    'input:-webkit-autofill:active',
+    'textarea:-webkit-autofill',
+    'textarea:-webkit-autofill:hover',
+    'textarea:-webkit-autofill:focus',
+    'textarea:-webkit-autofill:active',
+  ];
+  /** @type {Record<string, Record<string, string>>} */
+  const rules = {};
+  for (const selector of autofillSelectors) {
+    rules[selector] = {
+      WebkitTextFillColor: '#172033',
+      caretColor: '#172033',
+      boxShadow: '0 0 0 1000px #ffffff inset',
+      transition: 'background-color 99999s ease-in-out 0s',
+    };
+    rules[`.dark ${selector}`] = {
+      WebkitTextFillColor: '#ffffff',
+      caretColor: '#ffffff',
+      boxShadow: '0 0 0 1000px #272729 inset',
+    };
+  }
+  addBase(rules);
+}
+/**
+ * Always emit spinner motion.
+ *
+ * WHY: Tailwind v4 content detection often skips pnpm-linked `@africanies/africanies-ui`
+ * bundles, so `animate-spin` on button loading never lands in consumer CSS.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesSpinPlugin({ addBase }) {
+  addBase({
+    '@keyframes africanies-spin': {
+      to: { transform: 'rotate(360deg)' },
+    },
+    '.animate-spin': {
+      animation: 'africanies-spin 1s linear infinite',
+    },
+  });
+}
+/**
+ * Keep toasts above dialogs, drawers, and other CDK overlays.
+ *
+ * WHY: CDK sets `z-index: 1000` on overlay wrappers, panes, and backdrops.
+ * This covers overlays outside the popover top layer; inside it, ToastService
+ * re-shows the toast popover to stay in front.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesOverlayStackPlugin({ addBase }) {
+  addBase({
+    '.cdk-global-overlay-wrapper.africanies-toast-overlay, .cdk-overlay-pane.africanies-toast-panel':
+      {
+        zIndex: '1100',
+      },
+  });
+}
+/**
+ * Shared elevated card shell so list/detail pages keep one light-theme recipe.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesSurfacePlugin({ addComponents }) {
+  addComponents({
+    '.africanies-card': {
+      borderRadius: '0.75rem',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: '#dde3ea',
+      backgroundColor: '#ffffff',
+      padding: '1.25rem',
+      color: '#172033',
+      boxShadow:
+        '0 1px 2px rgb(23 32 51 / 0.04), 0 1px 3px rgb(23 32 51 / 0.06)',
+      '@media (min-width: 640px)': {
+        padding: '1.5rem',
+      },
+    },
+    '.dark .africanies-card': {
+      borderColor: 'rgba(255, 255, 255, 0.1)',
+      backgroundColor: '#272729',
+      color: '#ffffff',
+      boxShadow: 'none',
+    },
+  });
+}
+/**
+ * Keep overlay scrollbars off close buttons and other end-aligned chrome.
+ *
+ * WHY: modal/drawer panes used to scroll themselves. Overlay (and some
+ * classic) scrollbars paint in the padding box and cover a top-right close
+ * control. The pane stays `overflow: hidden`; the hosted component scrolls
+ * with `scrollbar-gutter: stable` so the track is reserved even before
+ * content overflows. Dialogs that split header/body can set `overflow-hidden`
+ * on the host (a utility, so it wins this base rule) and put
+ * `.africanies-overlay-scroll` on the body.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesOverlayScrollPlugin({ addBase }) {
+  addBase({
+    '.africanies-modal-panel, .africanies-drawer-panel': {
+      overflow: 'hidden',
+      overscrollBehavior: 'contain',
+    },
+    '.africanies-modal-panel > *, .africanies-drawer-panel > *': {
+      minHeight: 0,
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      overscrollBehavior: 'contain',
+      scrollbarGutter: 'stable',
+    },
+    '.africanies-drawer-panel > *': {
+      height: '100%',
+    },
+    '.africanies-overlay-scroll': {
+      overscrollBehavior: 'contain',
+      scrollbarGutter: 'stable',
+    },
+  });
+}
+module.exports = {
+  darkMode: 'class',
+  plugins: [
+    africaniesInteractiveCursorPlugin,
+    africaniesSpinPlugin,
+    africaniesOverlayStackPlugin,
+    africaniesOverlayScrollPlugin,
+    africaniesSurfacePlugin,
+    africaniesAutofillPlugin,
+  ],
+  theme: {
+    extend: {
+      colors: {
+        black: '#000000',
+        white: '#ffffff',
+        surface: {
+          DEFAULT: '#ffffff',
+          subtle: '#f8fafc',
+          hover: '#e9eef5',
+          sunken: '#eef2f6',
+        },
+        ink: {
+          // High-contrast cool navy for light-theme body and heading text.
+          DEFAULT: '#172033',
+          blue: '#192a3e',
+          brand: '#172033',
+          // Previous ink DEFAULT — dark elevated cards / panels (`dark:bg-ink-surface`).
+          surface: '#212529',
+          950: '#272729',
+        },
+        neutral: {
+          50: '#f8fafc',
+          100: '#eef2f6',
+          200: '#dde3ea',
+          300: '#c9d5e1',
+          // Keep 300/400 stable: they are the established dark-theme foregrounds.
+          400: '#a9b5cb',
+          500: '#667185',
+          600: '#526071',
+          700: '#3e4a59',
+          800: '#2c3644',
+          900: '#172033',
+        },
+        border: {
+          // Quiet card/divider chrome. Controls use the stronger `control` token.
+          DEFAULT: '#dde3ea',
+          strong: '#c4cdd8',
+        },
+        // 3.1:1 against white: visible enough for meaningful control boundaries.
+        control: '#8793a3',
+        focus: '#175cd3',
+        background: {
+          // Cooler canvas and a clearer inset level beneath white surfaces.
+          chrome: '#f4f6f8',
+          // Nested wells inside white cards.
+          well: '#eef2f6',
+          // Auth / welcome / soft hover.
+          welcome: '#f8fafc',
+          hover: '#e9eef5',
+        },
+        export: {
+          DEFAULT: '#26bd5d',
+          light: '#24dc6d',
+          subtle: '#e4fff3',
+          tint: '#f2fff8',
+          // Accessible normal-text / white-text-control foreground (5.43:1).
+          strong: '#0b7a3e',
+          hover: '#096833',
+        },
+        import: {
+          DEFAULT: '#f08829',
+          light: '#ffa95b',
+          subtle: '#fffcef',
+          // Brand orange (same as DEFAULT) — portal STN primary.
+          strong: '#f08829',
+          hover: '#7f3e09',
+        },
+        danger: {
+          DEFAULT: '#ff001c',
+          dark: '#b4233c',
+          strong: '#C00B19',
+          subtle: '#FFF2F2',
+        },
+        warning: {
+          DEFAULT: '#DBB316',
+          dark: '#8a5a00',
+          subtle: '#FFF6E6',
+        },
+        info: {
+          DEFAULT: '#175cd3',
+          subtle: '#eff6ff',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      fontSize: {
+        // PROVISIONAL — see THEME.md; sizes may tighten after design QA.
+        'heading-1': ['2.5rem', { lineHeight: 1.2, fontWeight: 700 }],
+        'heading-2': ['2rem', { lineHeight: 1.25, fontWeight: 700 }],
+        'heading-3': ['1.5rem', { lineHeight: 1.3, fontWeight: 600 }],
+        'body-lg': ['1.125rem', { lineHeight: 1.5, fontWeight: 400 }],
+        body: ['1rem', { lineHeight: 1.5, fontWeight: 400 }],
+        'body-sm': ['0.875rem', { lineHeight: 1.4, fontWeight: 400 }],
+        caption: ['0.75rem', { lineHeight: 1.3, fontWeight: 400 }],
+      },
+      borderRadius: {
+        control: '0.5rem',
+        panel: '0.75rem',
+      },
+      boxShadow: {
+        card:
+          '0 1px 2px rgb(23 32 51 / 0.04), 0 1px 3px rgb(23 32 51 / 0.06)',
+        floating:
+          '0 12px 32px rgb(23 32 51 / 0.12), 0 2px 8px rgb(23 32 51 / 0.06)',
+      },
+    },
+  },
+};

package/.nx/cache/13387631073062967069/dist/libs/africanies-theme/types/africanies-africanies-theme.d.ts ADDED Viewed

@@ -0,0 +1,178 @@
+import * as i0 from '@angular/core';
+/**
+ * Tailwind safelist side-effect for shipping-mode color utilities.
+ *
+ * WHY this file exists: JIT/content scanning only keeps class names that appear
+ * as *literal strings* in scanned sources. {@link ModeColorService} already
+ * returns these literals, but keeping a dedicated comment list makes the
+ * contract obvious for consumers who configure `safelist` or purge plugins.
+ *
+ * Do not rename these strings without updating ModeColorService and THEME.md.
+ *
+ * SFN (export / green):
+ * text-export-strong bg-export-strong hover:bg-export-hover border-export-strong
+ * text-export bg-export bg-export-subtle bg-export-light border-export
+ * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15
+ * dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export
+ *
+ * STN (import / orange):
+ * text-import-strong bg-import-strong hover:bg-import-hover border-import-strong
+ * text-import bg-import bg-import-subtle bg-import-light border-import
+ * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15
+ * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)] dark:bg-import dark:text-import dark:border-import
+ */
+declare const MODE_COLOR_SAFELIST: readonly ["text-export", "text-export-strong", "bg-export", "bg-export-strong", "bg-export-subtle", "bg-export-light", "border-export", "border-export-strong", "hover:bg-export-hover", "hover:bg-export-light", "hover:bg-export-subtle", "dark:bg-export/15", "dark:hover:bg-export/15", "dark:hover:bg-export-light", "dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]", "dark:bg-export", "dark:text-export", "dark:border-export", "text-import", "text-import-strong", "bg-import", "bg-import-strong", "bg-import-subtle", "bg-import-light", "border-import", "border-import-strong", "hover:bg-import-hover", "hover:bg-import-light", "hover:bg-import-subtle", "dark:bg-import/15", "dark:hover:bg-import/15", "dark:hover:bg-import-light", "dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]", "dark:bg-import", "dark:text-import", "dark:border-import"];
+/**
+ * Tailwind class bundle for the active shipping mode (SFN export / STN import).
+ *
+ * Use these for **primary** product chrome: CTAs, selected controls, progress,
+ * and accent text. Semantic colors (danger / warning) stay mode-independent.
+ */
+interface ModeColorClasses {
+    /**
+     * Accessible accent text — mode brand color in light and dark.
+     */
+    text: string;
+    /** Solid background utility, e.g. `bg-export`. */
+    bg: string;
+    /** Soft background utility, e.g. `bg-export-subtle`. */
+    bgSubtle: string;
+    /** Border matching the mode accent, e.g. `border-export`. */
+    border: string;
+    /**
+     * Filled primary CTA — `variant="primary"` on buttons.
+     * Includes hover utility as a literal so Tailwind keeps it.
+     */
+    primary: string;
+    /**
+     * Transparent / text-only CTA — `variant="ghost-primary"` on buttons.
+     * Mode accent text + soft hover fill.
+     */
+    ghostPrimary: string;
+    /**
+     * Soft highlight for selected / active rows (works in dark mode).
+     * Dark uses a translucent tint — fine over solid surfaces, not for
+     * sticky overlays (see {@link softSolid}).
+     */
+    soft: string;
+    /**
+     * Opaque soft fill — same tint as {@link soft}, but dark mode mixes into
+     * ink so scrolled content cannot show through (sticky table headers/cells).
+     */
+    softSolid: string;
+    /**
+     * Soft hover highlight for menus and lists.
+     */
+    softHover: string;
+    /**
+     * Active nav leaf / collapsed rail — solid mode fill + white text.
+     */
+    activeFill: string;
+    /**
+     * Stroked secondary CTA — white fill, mode border + text (portal `.btn-stroked`).
+     */
+    stroked: string;
+}
+/**
+ * Maps {@link ShippingModeService} to mode-accent Tailwind classes.
+ *
+ * - **SFN** → export green is primary
+ * - **STN** → import orange is primary
+ *
+ * WHY literal class strings: Tailwind's scanner cannot see dynamically built
+ * names like `` `text-${token}` ``. Returning full literals (`text-export`, …)
+ * keeps utilities in the compiled CSS. See {@link MODE_COLOR_SAFELIST}.
+ *
+ * @example
+ * ```html
+ * @let colors = modeColor.classes();
+ * <button type="button" [class]="colors.primary">Save</button>
+ * <span [class]="colors.text">Mode accent</span>
+ * ```
+ */
+declare class ModeColorService {
+    private readonly shippingMode;
+    /**
+     * Mode-dependent utility classes. Recomputes when shipping mode changes.
+     */
+    readonly classes: i0.Signal<ModeColorClasses>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModeColorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ModeColorService>;
+}
+/**
+ * Supported UI color schemes for {@link ThemeService}.
+ *
+ * Kept as a closed string union so storage values and DOM class toggles stay
+ * aligned — unknown persisted strings are ignored and fall back to system
+ * preference / light.
+ */
+type Theme = 'light' | 'dark';
+/**
+ * Application light/dark theme preference.
+ *
+ * WHY signals (not BehaviorSubject): theme is synchronous UI state read from
+ * templates and other services; a signal avoids RxJS subscription boilerplate
+ * and matches Angular 22 change detection. Persistence goes through
+ * {@link STORAGE_TOKEN} so tests can swap storage without touching `localStorage`.
+ *
+ * Applies the Tailwind `darkMode: 'class'` contract by toggling `dark` on
+ * `document.documentElement`, and sets `color-scheme` so native UI (date
+ * pickers, scrollbars, form controls) matches the app theme — class-based
+ * dark mode alone does not restyle browser chrome.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * import { inject, provideAppInitializer } from '@angular/core';
+ * import { ThemeService } from '@africanies/africanies-theme';
+ *
+ * export const appConfig = {
+ *   providers: [
+ *     provideAppInitializer(() => {
+ *       inject(ThemeService); // applies stored / system theme once
+ *     }),
+ *   ],
+ * };
+ *
+ * // In a component
+ * const theme = inject(ThemeService);
+ * theme.toggle();
+ * theme.setTheme('dark');
+ * const current = theme.theme(); // 'light' | 'dark'
+ * ```
+ */
+declare class ThemeService {
+    private readonly storage;
+    private readonly document;
+    /**
+     * Current theme. Prefer reading via `theme()` in templates / computed values
+     * rather than caching the string, so dark-class consumers stay in sync.
+     */
+    readonly theme: i0.WritableSignal<Theme>;
+    constructor();
+    /**
+     * Sets and persists the theme, updating the `dark` class and `color-scheme`
+     * on `<html>`.
+     *
+     * @param theme - Absolute preference to store.
+     */
+    setTheme(theme: Theme): void;
+    /**
+     * Flips between light and dark.
+     *
+     * @returns The theme after the toggle.
+     */
+    toggle(): Theme;
+    private resolveInitialTheme;
+    private prefersDark;
+    private applyToDocument;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}
+export { MODE_COLOR_SAFELIST, ModeColorService, ThemeService };
+export type { ModeColorClasses, Theme };

package/.nx/cache/16704640000606796352/dist/libs/africanies-storage/README.md ADDED Viewed

@@ -0,0 +1,31 @@
+# @africanies/africanies-storage
+Injectable browser storage for the AFRICANIES Web SDK. Provides a swappable
+`StorageService` behind `STORAGE_TOKEN`, with `localStorage` (default) and
+`sessionStorage` implementations plus `provideLocalStorage()` /
+`provideSessionStorage()` helpers.
+Shipping mode (`ShippingModeService` in `@africanies/africanies-core`) always persists
+via `SessionStorageService` directly so each browser tab can use a different
+STN/SFN mode. Theme and auth token use `STORAGE_TOKEN` (localStorage by default).
+## Usage
+```ts
+import {
+  STORAGE_TOKEN,
+  provideLocalStorage,
+  AFRICANIES_THEME_KEY,
+} from '@africanies/africanies-storage';
+// app.config.ts
+providers: [provideLocalStorage()];
+// elsewhere
+const storage = inject(STORAGE_TOKEN);
+storage.set(AFRICANIES_THEME_KEY, 'dark');
+```
+## Tests
+Run `nx test africanies-storage`.