import { Injectable } from '@angular/core' ; import { ThemePickerServiceModule } from './theme-picker-service.module' ; /**
 * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
 * removed or changed later.
 */ @ Injectable ( { providedIn : ThemePickerServiceModule } ) export class StyleManagerService { /**
     * Set the stylesheet with the specified key.
     */ setStyle ( key , href ) { getLinkElementForKey ( key ) . setAttribute ( 'href' , href ) ; } /**
     * Remove the stylesheet with the specified key.
     */ removeStyle ( key ) { const existingLinkElement = getExistingLinkElementByKey ( key ) ; if ( existingLinkElement ) { document . head . removeChild ( existingLinkElement ) ; } } } function getLinkElementForKey ( key ) { return getExistingLinkElementByKey ( key ) || createLinkElementWithKey ( key ) ; } function getExistingLinkElementByKey ( key ) { return document . head . querySelector ( `link[rel="stylesheet"].${ getClassNameForKey ( key ) }` ) ; } function createLinkElementWithKey ( key ) { const linkEl = document . createElement ( 'link' ) ; linkEl . setAttribute ( 'rel' , 'stylesheet' ) ; linkEl . classList . add ( getClassNameForKey ( key ) ) ; document . head . appendChild ( linkEl ) ; return linkEl ; } function getClassNameForKey ( key ) { return `style-manager-${ key }` ; }