@skyux/theme 13.0.0-alpha.0 → 13.0.0-alpha.1

package/fesm2022/skyux-theme.mjs

@@ -237,12 +237,17 @@ class SkyThemeBrand {
     /**
      * Creates a new theme brand.
      * @param name The name of the theme brand.
+     * @param version The version of the theme brand.
      * @param hostClass The class on the host element which child components should reference when
-     * adjusting for a specified theme brand. This defaults to `sky-theme-brand-<name>
+     * adjusting for a specified theme brand. This defaults to `sky-theme-brand-<name>`
+     * @param styleUrl The URL of the stylesheet to load for this brand
+     * @param sriHash The subresource integrity hash for the stylesheet
      */
-    constructor(name, version, hostClass) {
+    constructor(name, version, hostClass, styleUrl, sriHash) {
         this.name = name;
         this.version = version;
+        this.styleUrl = styleUrl;
+        this.sriHash = sriHash;
         this.hostClass = hostClass;
         if (!/\d+\.\d+\.\d+(?:-(?:alpha|beta|rc)\.\d)*$/.test(version)) {
             throw new Error(`Invalid version format "${version}" for theme brand "${name}".`);
@@ -262,6 +267,13 @@ class SkyThemeBrand {
         if (this.hostClass !== defaultHostClass) {
             result.hostClass = this.hostClass;
         }
+        // Include styleUrl and sriHash if they are provided
+        if (this.styleUrl) {
+            result.styleUrl = this.styleUrl;
+        }
+        if (this.sriHash) {
+            result.sriHash = this.sriHash;
+        }
         return result;
     }
     /**
@@ -269,7 +281,7 @@ class SkyThemeBrand {
      * Deserializes a JSON object to a SkyThemeBrand instance.
      */
     static deserialize(data) {
-        return new SkyThemeBrand(data.name, data.version, data.hostClass);
+        return new SkyThemeBrand(data.name, data.version, data.hostClass, data.styleUrl, data.sriHash);
     }
     #buildDefaultHostClassName() {
         return `sky-theme-brand-${this.name}`;
@@ -326,6 +338,7 @@ class SkyThemeSettings {
     }
 }
 
+const BRAND_BLACKBAUD = 'blackbaud';
 function assertCurrentSettings(currentSettings) {
     if (!currentSettings) {
         throw new Error('Theme service is not initialized. Call init() first.');
@@ -346,6 +359,7 @@ class SkyThemeService {
     #hostEl;
     #renderer;
     #settings;
+    #registeredBrands = new Map();
     #_settingsObs;
     constructor() {
         this.#settings = new ReplaySubject(1);
@@ -357,10 +371,17 @@ class SkyThemeService {
      * @param hostEl The host element under which themed components are rendered.
      * @param renderer A Renderer2 instance for updating the host element with theme changes.
      * @param theme The initial theme.
+     * @param registeredBrands An initial set of brands to register. Additional brands can
+     * be registered later via the registerBrand() method.
      */
-    init(hostEl, renderer, theme) {
+    init(hostEl, renderer, theme, registeredBrands) {
         this.#hostEl = hostEl;
         this.#renderer = renderer;
+        if (registeredBrands) {
+            for (const brand of registeredBrands) {
+                this.#registeredBrands.set(brand.name, brand);
+            }
+        }
         this.setTheme(theme);
     }
     /**
@@ -395,7 +416,7 @@ class SkyThemeService {
     setTheme(settingsOrTheme) {
         let settings;
         if (settingsOrTheme instanceof SkyThemeSettings) {
-            settings = settingsOrTheme;
+            settings = this.#applyRegisteredBrand(settingsOrTheme);
         }
         else {
             const current = this.#current;
@@ -413,6 +434,22 @@ class SkyThemeService {
         });
         this.#current = settings;
     }
+    registerBrand(brand) {
+        this.#registeredBrands.set(brand.name, brand);
+    }
+    unregisterBrand(name) {
+        this.#registeredBrands.delete(name);
+    }
+    #applyRegisteredBrand(settings) {
+        const brandName = settings.brand?.name;
+        if (brandName) {
+            const registeredBrand = this.#registeredBrands.get(brandName);
+            if (registeredBrand) {
+                settings = new SkyThemeSettings(settings.theme, settings.mode, settings.spacing, registeredBrand);
+            }
+        }
+        return settings;
+    }
     #updateThemeProperty(property, value) {
         const current = this.#current;
         assertCurrentSettings(current);
@@ -454,14 +491,12 @@ class SkyThemeService {
         }
     }
     #updateBrandStylesheet(currentBrand, previousBrand) {
-        if (currentBrand &&
-            currentBrand.name !== 'blackbaud' &&
-            previousBrand !== currentBrand) {
-            this.#addBrandStylesheet(currentBrand);
-        }
-        else {
+        if (previousBrand && previousBrand.name !== BRAND_BLACKBAUD) {
             this.#removeBrandStylesheet();
         }
+        if (currentBrand && currentBrand.name !== BRAND_BLACKBAUD) {
+            this.#addBrandStylesheet(currentBrand);
+        }
     }
     #updateHostClass(prop, previousClass, currentClass, currentSetting, current, supportedProp) {
         if (previousClass) {
@@ -481,15 +516,19 @@ class SkyThemeService {
         }
     }
     #addBrandStylesheet(brand) {
-        if (brand.name !== 'blackbaud') {
-            const cssPath = `https://sky.blackbaudcdn.net/static/skyux-brand-${brand.name}/${brand.version}/assets/scss/${brand.name}.css`;
-            // Create a link element via Angular's renderer to avoid SSR troubles
-            this.#brandLinkElement = this.#getRenderer().createElement('link');
-            // Add the style to the head section
-            this.#getRenderer().appendChild(this.#hostEl, this.#brandLinkElement);
-            // Set type of the link item and path to the css file
-            this.#getRenderer().setProperty(this.#brandLinkElement, 'rel', 'stylesheet');
-            this.#getRenderer().setProperty(this.#brandLinkElement, 'href', cssPath);
+        if (brand.name !== BRAND_BLACKBAUD) {
+            // Use styleUrl if provided, otherwise build the default URL
+            const styleUrl = brand.styleUrl ||
+                `https://sky.blackbaudcdn.net/static/skyux-brand-${brand.name}/${brand.version}/assets/scss/${brand.name}.css`;
+            const renderer = this.#getRenderer();
+            this.#brandLinkElement = renderer.createElement('link');
+            renderer.appendChild(this.#hostEl, this.#brandLinkElement);
+            renderer.setAttribute(this.#brandLinkElement, 'rel', 'stylesheet');
+            renderer.setAttribute(this.#brandLinkElement, 'href', styleUrl);
+            if (brand.sriHash) {
+                renderer.setAttribute(this.#brandLinkElement, 'integrity', brand.sriHash);
+                renderer.setAttribute(this.#brandLinkElement, 'crossorigin', 'anonymous');
+            }
         }
     }
     #removeBrandStylesheet() {