tessl/npm-delon--theme

Angular theme system library providing services, pipes, and utilities for theme management, internationalization, and application-wide settings.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@delon/theme

Name: tessl/npm-delon--theme
Author: tessl

@delon/theme is a comprehensive Angular theme system library that provides essential services, pipes, and utilities for managing application themes, internationalization, and application-wide settings. It's part of the ng-alain ecosystem and offers a complete solution for building enterprise Angular applications with consistent theming, advanced UI component management, and flexible configuration options.

Package Information

Package Name: @delon/theme
Package Type: npm
Language: TypeScript
Installation: npm install @delon/theme

Core Imports

import { AlainThemeModule } from "@delon/theme";

For standalone Angular applications:

import { provideAlain } from "@delon/theme";

Import specific services and pipes:

import { 
  MenuService, 
  SettingsService, 
  ModalHelper, 
  DrawerHelper,
  _HttpClient,
  DatePipe,
  YNPipe 
} from "@delon/theme";

Basic Usage

Module Setup (NgModule approach)

import { NgModule } from "@angular/core";
import { AlainThemeModule } from "@delon/theme";

@NgModule({
  imports: [
    AlainThemeModule.forRoot()
  ]
})
export class AppModule {}

Standalone Setup (Recommended)

import { bootstrapApplication } from "@angular/platform-browser";
import { provideAlain } from "@delon/theme";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
  providers: [
    provideAlain({
      config: { /* AlainConfig options */ },
      defaultLang: {
        abbr: "en",
        ng: enUS,
        zorro: enZorro,
        date: enDate,
        delon: enDelon
      }
    })
  ]
});

Basic Service Usage

import { Component, inject } from "@angular/core";
import { MenuService, SettingsService, ModalHelper } from "@delon/theme";

@Component({
  template: `<button (click)="openModal()">Open Modal</button>`
})
export class MyComponent {
  private menuService = inject(MenuService);
  private settingsService = inject(SettingsService);
  private modalHelper = inject(ModalHelper);

  constructor() {
    // Set menu data
    this.menuService.add([
      { text: "Dashboard", link: "/dashboard" },
      { text: "Users", link: "/users" }
    ]);

    // Update settings
    this.settingsService.setApp({ name: "My App" });
  }

  openModal() {
    this.modalHelper.create(MyModalComponent, { data: "example" });
  }
}

Architecture

@delon/theme is built around several key components:

Services Layer: Core services for menu management, settings, HTTP client, UI helpers (modal/drawer), and internationalization
Pipes System: Data transformation pipes for dates, boolean values, safe HTML/URLs, and internationalization
Locale System: Complete internationalization support with 15+ built-in languages and reactive locale management
Configuration System: Environment and API configuration interfaces with provider-based setup
Module Integration: Both NgModule and standalone provider support for flexible Angular application setup

Capabilities

Menu Management

Comprehensive menu system for application navigation with support for hierarchical menus, dynamic updates, and URL-based routing.

class MenuService {
  readonly change: Observable<Menu[]>;
  readonly menus: Menu[];
  openStrictly: boolean;
  
  add(items: Menu[]): void;
  clear(): void;
  find(options: MenuFindOptions): Menu | null;
  getPathByUrl(url: string, recursive?: boolean): Menu[];
}

interface Menu {
  text?: string;
  i18n?: string;
  link?: string;
  externalLink?: string;
  target?: string;
  icon?: string | MenuIcon;
  badge?: number;
  badgeDot?: boolean;
  children?: Menu[];
  [key: string]: any;
}

Menu System

Application Settings

Centralized settings management with localStorage persistence and reactive updates for layout, app, and user preferences.

class SettingsService<L extends Layout = any, U extends User = any, A extends App = any> {
  readonly notify: Observable<SettingsNotify>;
  layout: L;
  app: A;
  user: U;
  
  setLayout(name: string | L, value?: any): boolean;
  setApp(value: A): void;
  setUser(value: U): void;
  getData(key: string): any;
  setData(key: string, value: any): void;
}

interface Layout {
  [key: string]: any;
}

interface User {
  [key: string]: any;
}

interface App {
  [key: string]: any;
}

Settings Management

UI Helpers

Modal and drawer helper services for creating dynamic Angular components with configuration options and Observable-based result handling.

class ModalHelper {
  create<T>(
    comp: any,
    params?: T,
    options?: ModalHelperOptions
  ): Observable<any>;
  
  createStatic<T>(
    comp: any,
    params?: T,
    options?: ModalHelperOptions
  ): Observable<any>;
}

class DrawerHelper {
  readonly openDrawers: NzDrawerRef[];
  
  create<T>(
    title: string,
    comp: any,
    params?: T,
    options?: DrawerHelperOptions
  ): Observable<any>;
  
  static<T>(
    title: string,
    comp: any,
    params?: T,
    options?: DrawerHelperOptions
  ): Observable<any>;
  
  closeAll(): void;
}

UI Helpers

HTTP Client

Enhanced HTTP client with loading state management, request utilities, and decorator-based API support.

class _HttpClient {
  readonly loading: boolean;
  readonly loadingCount: number;
  
  get<T>(url: string, params?: any, options?: any): Observable<T>;
  post<T>(url: string, body?: any, params?: any, options?: any): Observable<T>;
  delete<T>(url: string, params?: any, options?: any): Observable<T>;
  put<T>(url: string, body?: any, params?: any, options?: any): Observable<T>;
  patch<T>(url: string, body?: any, params?: any, options?: any): Observable<T>;
}

HTTP Client

Internationalization

Complete i18n system with language switching, translation services, and router guards for URL-based internationalization.

interface AlainI18NService {
  readonly change: Observable<string>;
  defaultLang: string;
  currentLang: string;
  
  use(lang: string, data?: Record<string, unknown>): void;
  getLangs(): any[];
  fanyi(path: string, params?: unknown | unknown[]): string;
}

const ALAIN_I18N_TOKEN: InjectionToken<AlainI18NService>;

Internationalization

Data Pipes

Data transformation pipes for formatting dates, converting booleans to yes/no displays, processing object keys, and handling safe HTML/URLs.

// Date formatting with configurable format strings
transform(value: Date | string | number, formatString?: string | null): string; // _date pipe

// Boolean to yes/no conversion with icon and text modes
transform(value: boolean, yes?: string, no?: string, mode?: YNMode, isSafeHtml?: boolean): SafeHtml; // yn pipe

// Object keys to array conversion
transform(value: any, keyIsNumber?: boolean): any[]; // keys pipe

// Safe HTML/URL bypassing Angular sanitization
transform(html: string): string | SafeHtml; // html pipe
transform(url: string): string | SafeUrl; // url pipe

Data Pipes

Locale System

Reactive locale management with built-in support for 15+ languages and component-specific locale data.

class DelonLocaleService {
  readonly change: Observable<FullLocaleData>;
  locale: FullLocaleData;
  
  setLocale(locale: FullLocaleData): void;
  getData<K extends keyof FullLocaleData>(key: K): FullLocaleData[K];
  valueSignal<K extends keyof FullLocaleData>(key: K): Signal<FullLocaleData[K]>;
}

const DELON_LOCALE: InjectionToken<FullLocaleData>;

Locale System

Utility Services

Additional utility services for responsive design, RTL support, title management, and page preloading.

class ResponsiveService {
  genCls(count: number, defaultCol?: number): string[];
}

class RTLService {
  dir: Direction;
  readonly nextDir: Direction;
  readonly change: Observable<Direction>;
  
  toggle(): void;
}

class TitleService {
  setTitle(title?: string | string[]): void;
  setTitleByI18n(key: string, params?: unknown): void;
}

function stepPreloader(): () => void;

Utility Services

Types

interface Environment {
  production: boolean;
  useHash: boolean;
  api: ApiConfig;
  modules?: Array<Type<any> | ModuleWithProviders<any> | any[]>;
  providers?: Array<Provider | EnvironmentProviders>;
  interceptorFns?: HttpInterceptorFn[];
  [key: string]: any;
}

interface ApiConfig {
  baseUrl: string;
  refreshTokenEnabled: boolean;
  refreshTokenType: 're-request' | 'auth-refresh';
  [key: string]: any;
}

interface AlainProvideOptions {
  config?: AlainConfig;
  defaultLang?: AlainProvideLang;
  i18nClass?: Type<any>;
  icons?: IconDefinition[];
}

interface AlainProvideLang {
  abbr: string;
  ng: any;
  zorro: any;
  date: any;
  delon: any;
}

type Direction = 'ltr' | 'rtl';
type YNMode = 'full' | 'icon' | 'text';

const VERSION: Version;