feat(style-manager): for change theme runtime

src/cdk/style-manager/index.ts

@@ -0,0 +1,2 @@
+
+export * from './public-api';

src/cdk/style-manager/public-api.ts

@@ -0,0 +1,2 @@
+
+export * from './style-manager';

src/cdk/style-manager/style-manager.spec.ts

@@ -0,0 +1,56 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+
+import { StyleManager } from './style-manager';
+
+
+describe('StyleManager', () => {
+    let styleManager: StyleManager;
+
+    beforeEach(() => TestBed.configureTestingModule({
+        imports: [HttpClientModule],
+        providers: [StyleManager]
+    }));
+
+    beforeEach(inject([StyleManager], (sm: StyleManager) => {
+        styleManager = sm;
+    }));
+
+    afterEach(() => {
+        const links = document.head.querySelectorAll('link');
+
+        for (const link of Array.prototype.slice.call(links)) {
+            if (link.className.includes('style-manager-')) {
+                document.head.removeChild(link);
+            }
+        }
+    });
+
+    it('should add stylesheet to head', () => {
+        styleManager.setStyle('test', 'test.css');
+        const styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+        expect(styleEl).not.toBeNull();
+        expect(styleEl.href.endsWith('test.css')).toBe(true);
+    });
+
+    it('should change existing stylesheet', () => {
+        styleManager.setStyle('test', 'test.css');
+        const styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+        expect(styleEl).not.toBeNull();
+        expect(styleEl.href.endsWith('test.css')).toBe(true);
+
+        styleManager.setStyle('test', 'new.css');
+        expect(styleEl.href.endsWith('new.css')).toBe(true);
+    });
+
+    it('should remove existing stylesheet', () => {
+        styleManager.setStyle('test', 'test.css');
+        let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+        expect(styleEl).not.toBeNull();
+        expect(styleEl.href.endsWith('test.css')).toBe(true);
+
+        styleManager.removeStyle('test');
+        styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+        expect(styleEl).toBeNull();
+    });
+});

src/cdk/style-manager/style-manager.ts

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

src/cdk/style-manager/tsconfig.build.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.build",
+  "files": [
+    "public-api.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": false,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@ptsecurity/cdk/style-manager",
+    "skipTemplateCodegen": true,
+    "fullTemplateTypeCheck": true
+  }
+}