@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
96 lines (95 loc) • 3.67 kB
TypeScript
import { RendererFactory2 } from '@angular/core';
import { FontDefinition, ThemeVariants } from '../models/theme';
import * as i0 from "@angular/core";
/**
* Service responsible for all DOM manipulation and CSS injection
* Decouples DOM operations from business logic
*/
export declare class ThemeDomService {
private readonly rendererFactory;
private readonly document;
private readonly renderer;
constructor(rendererFactory: RendererFactory2, document: Document);
/**
* Injects font-face declarations into the document head
* Creates a single style tag containing all font face definitions
* @param fonts - Array of font definitions with faces
*/
injectFonts(fonts: FontDefinition[]): void;
/**
* Injects global CSS variables as root-level custom properties
* Sets variables directly on the document element
* @param variables - Record of CSS variable names to values
*/
injectGlobalVariables(variables: Record<string, string>): void;
/**
* Injects theme-specific CSS variables as data-theme selectors
* Creates styles for each theme variant (light/dark)
* @param themes - Theme definitions with variants
*/
injectThemeStyles(themes: Record<string, ThemeVariants>): void;
/**
* Injects CSS variables for a single theme only
* @param themeName - Theme key
* @param variants - Theme variants to inject
*/
injectSingleThemeStyles(themeName: string, variants: ThemeVariants): void;
/**
* Sets the active theme on the document body
* Uses data-theme attribute for CSS theme targeting
* @param themeIdentifier - Theme identifier (e.g., "sixbell_telco__light")
*/
setActiveTheme(themeIdentifier: string): void;
/**
* Builds @font-face CSS rules from font definitions
* Private helper to construct font-face declarations
* @param fonts - Array of font definitions
* @returns CSS content string with @font-face rules
*/
private buildFontFaceStyles;
/**
* Builds @font-face rules for a single font family
* @param font - Font definition with faces
* @returns CSS content string with all faces for this family
*/
private buildFontFaceForFamily;
/**
* Builds a single @font-face rule
* @param fontFamily - Font family name
* @param face - Font face definition
* @returns @font-face CSS rule
*/
private buildFontFaceRule;
/**
* Builds theme style definitions as CSS custom properties
* Creates selectors for each theme variant
* @param themes - Theme definitions mapped by theme code
* @returns CSS content string with theme definitions
*/
private buildThemeStyles;
/**
* Builds CSS rules for light and dark variants of a theme
* @param themeName - Name of the theme
* @param variants - Light and dark variants
* @returns Array of CSS rules for each variant
*/
private buildThemeVariantStyles;
/**
* Builds a single theme variant CSS rule
* @param themeName - Name of the theme
* @param scheme - Scheme variant ('light' or 'dark')
* @param variables - CSS variables for this variant
* @returns CSS rule string
*/
private buildThemeVariantRule;
/**
* Appends a style tag to the document head
* Helper to inject CSS into the document
* @param content - CSS content to inject
*/
private appendStyleToHead;
private flattenVariables;
private replaceThemeStyle;
static ɵfac: i0.ɵɵFactoryDeclaration<ThemeDomService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<ThemeDomService>;
}