@rb-mwindh/ngx-theme-manager
Version:
Angular component to switch between different theming stylesheets
104 lines (103 loc) • 3.96 kB
TypeScript
import { ContentObserver } from '@angular/cdk/observers';
import { Theme } from '../theme';
import { ThemeRegistryService } from './theme-registry.service';
import * as i0 from "@angular/core";
/**
* A service that manages the activation and deactivation of themes.
*
* The service uses the `ContentObserver` service to observe changes in the `<head>` element
* and updates the {@link ThemeRegistryService internal theme registry}
* when new `<style>` elements are added to the DOM.
*
* Themes are identified by the `data-theme` attribute on the `<style>` element.
*
* The service provides a method `use` to activate a theme with a given ID
* and deactivate all other themes.
*
* @internal
* @group Services
*/
export declare class ThemeStyleManagerService {
#private;
private readonly observer;
private readonly themeRegistry;
private readonly document;
/**
* Creates a new instance.
*
* Subscribes to the `ContentObserver` to listen for new `<style>` elements
* added to the document head. If a new `<style>` element is added, the
* `#updateRegistry()` method is called.
*
* @param {ContentObserver} observer - The Angular ContentObserver service
* @param {ThemeRegistryService} themeRegistry - A service to register new themes
* @param {Document} document - A reference to the current document
*/
constructor(observer: ContentObserver, themeRegistry: ThemeRegistryService, document: Document);
/**
* Activates the theme with the given ID and deactivates all other themes.
*
* @param {string} theme - The theme to activate
* @see turnOn
* @see turnOff
* @remarks A theme may consist of 1 or more `<style>` elements.
*/
use(theme: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ThemeStyleManagerService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<ThemeStyleManagerService>;
}
/**
* Applies a theme identifier to a `<style>` element.
*
* If the provided `id` is truthy, the element receives the attribute
* `data-theme` set to the given `id`. Otherwise, the element
* will get the attribute `data-no-theme` without any value.
*
* @param {HTMLStyleElement} el - The `<style>` element to apply the identifier to
* @param {string | undefined} id - The theme identifier
* @returns {boolean} true, if the style element belongs to a theme
* @group Functions
* @internal
*/
export declare function applyThemeIdentifier(el: HTMLStyleElement, id?: string): boolean;
/**
* Turn off a style element by setting its `media` attribute to `none`.
*
* @param {HTMLStyleElement} el - The style element to turn off.
* @group Functions
* @internal
*/
export declare function turnOff(el: HTMLStyleElement): void;
/**
* Turn on a style element by removing its `media` attribute.
*
* @param {HTMLStyleElement} el - The style element to turn on.
* @group Functions
* @internal
*/
export declare function turnOn(el: HTMLStyleElement): void;
/**
* Extracts theme annotations from a given string.
*
* **Format:** `@@<annotationName> value` (until end of line)
*
* Possible annotation names:
* - `id`: a unique identifier for the theme
* - `displayName`: a human-readable name for the theme
* - `description`: a short description of the theme
* - `defaultTheme`: a boolean flag indicating if this is the default theme
*
* @param {string} s The string to extract annotations from.
* @returns {Theme | null} An object containing the extracted annotations, or null if no annotations were found.
* @group Functions
* @internal
*/
export declare function extractThemeAnnotations(s: undefined | null | string): Theme | null;
/**
* Unwrap a match from a regular expression, returning the first captured group as a string.
*
* @param {RegExpExecArray} match - The match to unwrap.
* @group Functions
* @internal
*/
export declare function unwrap(match: RegExpExecArray | null): string | undefined;