@moatamed-sce/core

The foundation of the SCE Platform design system: design tokens, global stylesheets, icon assets, and the Angular providers, services, guards and validators that every other @moatamed-sce/* package builds on.

What's in it

• Providers — provideSceUi() (icon asset base path) and provideSceCore() (the full SCE application shell; read the warning below before reaching for it).
• Design tokens and stylesheets — the complete SCSS cascade (primitive tokens, semantic tokens, typography, layout, PrimeNG theme bridge) under assets/styles/, and the SVG icon set under assets/icons/.
• Services — LanguageService (Arabic/English and dir switching), ThemeService (light/dark), AuthService, TokenStorageService, PaginationService, SearchService, ConnectivityService, plus typed API clients for the SCE backend (LookupApiService, EntityApiService, PaymentsApiService, DocumentContractApiService, and many more).
• Validators — Saudi-specific reactive-form validators: saudiIdValidator, iqamaValidator, saudiMobileValidator, ibanValidator, passwordStrengthValidator, arabicOnlyValidator, dateRangeValidator, fileSizeValidator, and the composeValidators / optionalValidator helpers.
• Guards and tokens — authSessionGuard, sceLibraryAccessGuard, APP_CONFIG, HTTP_BASE_URL, APP_ENVIRONMENT.
• Models and enums — the shared domain types (contracts, offices, entities, invoices, lookups) used across the platform.

Install

npm install @moatamed-sce/core
ng add @moatamed-sce/core

ng add is the supported path and wires everything in one step: it registers the global stylesheets in your build target in cascade order, mounts the icon assets, adds the root providers, and sets lang="ar" dir="rtl" on index.html (pass --rtl=false for an LTR shell; --skipStyles, --skipAssets, --skipProviders opt out of individual parts). It is idempotent, so re-running it after an upgrade is safe. Wiring this by hand is discouraged: the cascade is long, the order matters, and a single missing sheet gives you an app that builds clean and renders completely unstyled.

Peer dependencies

Angular 21 (@angular/core, common, forms, router, platform-browser, animations), PrimeNG 21, @primeuix/themes 2, @ngx-translate/core 18 and RxJS 7.8. jspdf, html2canvas, web-vitals and @angular/service-worker are optional peers, needed only by the features that use them. Exact ranges live in this package's package.json.

Quick start — and a warning about provideSceCore()

The one decision that matters is which provider you call.

provideSceCore() takes no arguments and has SCE's own development environment compiled into the shipped bundle — mockMode: true and apiBaseUrl: ''. Inside the SCE monorepo that file is swapped at build time through Angular fileReplacements; an external app installing the published package cannot do that. So calling it installs SCE's mock interceptor at the head of your HTTP chain, an auth interceptor that attaches SCE headers to every relative URL (including your own /api/... calls), a 401 handler that can redirect you to /system-login, and a replacement ErrorHandler. That is an entire application shell, not a design system.

Unless you are building an SCE-branded app that talks to the SCE backend, bring your own HttpClient and call provideSceUi() instead:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideSceUi } from '@moatamed-sce/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(), // required — SceIcon fetches its SVGs over HttpClient
    provideSceUi(), // icon base path; defaults to '/assets/icons'
    // provideSceUi({ iconBasePath: '/cdn/sce-icons' }),
  ],
};

provideSceUi() provides exactly one thing — the icon asset base token — and is safe in any application. Skipping provideSceCore() means you supply your own PrimeNG theme, HTTP stack and ngx-translate setup; components that use the translate pipe or PrimeNG still need those present in DI.

What the tarball does not ship

The published package contains only assets/icons and assets/styles. There is no i18n JSON, no fonts, and no images.

• Translations: you must author and serve your own ar.json / en.json. Without a dictionary, every component renders the raw key (COMMON.SAVE) instead of a label.
• Fonts: fonts.scss declares @font-face for Somar Sans (Arabic), but the font files are not included. Host the licensed fonts at the paths that sheet expects, or drop it and point --font-family-arabic-primary at a font you do ship.
• Images: components referencing /assets/images/* render broken until you supply those files.

Design tokens

Tokens are CSS custom properties, consumed as var(--space-*), var(--color-*), var(--font-size-*), var(--radius-*).

The spacing scale is measured in pixels, not rem steps. --space-4 is 4px and --space-6 is 6px. If you want 16px of padding, write var(--space-16). Assuming a Tailwind-style 4px-per-step scale will give you a layout four times too tight. The radius family is --radius-*; there is no --border-radius-*.

Notes

• Import from the package root: import { provideSceUi, LanguageService } from '@moatamed-sce/core';. Deep paths into lib/ are monorepo path aliases, not published entry points.
• Dark mode is an attribute on <html>, not a class.

Docs

• Consuming the packages in an external app
• Design tokens
• Component catalog

License

MIT