@tylertech/forge-core 2.3.0 → 2.3.1

package/esm/custom-elements/component-utils.js

@@ -1,4 +1,7 @@
 import { replaceElement, isArray, removeAllChildren, walkUpUntil } from '../utils';
+export const CUSTOM_ELEMENT_STYLES_PROPERTY = '_forgeElementStyles';
+/** Whether the browser supports constructable stylesheets */
+export const supportsConstructableStyleSheets = window.ShadowRoot && 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;
 /**
  * Recursively defines a component as a custom elements and all of its dependencies.
  * @param component The component to import.
@@ -83,11 +86,14 @@ export function attachLightTemplate(componentInstance, template) {
  * @param {string} elementName The name of the element the shadow root is to be attached to.
  * @param {string} template The shadow root template HTML string.
  * @param {string | string[]} styles The shadow root styles string to be encapsulated by this shadow root.
- * @param {boolean} [delegatesFocus=false] Should the component delagate focus.
+ * @param {boolean} [delegatesFocus=false] Should the component delegate focus.
  */
 export function attachShadowTemplate(componentInstance, template, styles, delegatesFocus = false) {
-    const templateElement = prepareShadowTemplate(template, styles);
+    const templateElement = prepareShadowTemplate(template);
     componentInstance.attachShadow({ mode: 'open', delegatesFocus });
+    if (styles) {
+        setShadowStyles(componentInstance, styles);
+    }
     setShadowTemplate(componentInstance, templateElement);
 }
 /**
@@ -101,10 +107,13 @@ export function replaceShadowTemplate(componentInstance, template, styles) {
     if (!componentInstance.shadowRoot) {
         throw new Error('This element does not contain a shadow root. Did you mean to call `attachShadowTemplate`?');
     }
-    const templateElement = prepareShadowTemplate(template, styles);
+    const templateElement = prepareShadowTemplate(template);
     if (componentInstance.shadowRoot.children.length) {
         removeAllChildren(componentInstance.shadowRoot);
     }
+    if (styles) {
+        setShadowStyles(componentInstance, styles, { force: true });
+    }
     setShadowTemplate(componentInstance, templateElement);
 }
 /**
@@ -115,10 +124,16 @@ export function replaceShadowTemplate(componentInstance, template, styles) {
  */
 export function prepareShadowTemplate(template, styles) {
     const templateElement = parseTemplateString(template);
+    // Deprecated in favor of `setShadowStyles()`, leaving for backwards compatibility
+    // TODO: remove this in next major version, and remove `styles` argument above
     if (styles) {
         styles = styles instanceof Array ? styles : [styles];
         const styleElement = document.createElement('style');
-        styleElement.type = 'text/css';
+        // eslint-disable-next-line @typescript-eslint/dot-notation
+        const nonce = window['forgeNonce'];
+        if (nonce) {
+            styleElement.setAttribute('nonce', nonce);
+        }
         styleElement.textContent = styles.join(' ');
         templateElement.content.appendChild(styleElement);
     }
@@ -132,6 +147,45 @@ export function prepareShadowTemplate(template, styles) {
 export function setShadowTemplate(componentInstance, templateElement) {
     componentInstance.shadowRoot.appendChild(templateElement.content.cloneNode(true));
 }
+/**
+ * Applies styles to the shadow root of the provided element instance.
+ * @param {T} componentInstance A component instance.
+ * @param {string | string[]} styles The styles to be applied to the shadow root.
+ * @param options Options for setting the styles.
+ */
+export function setShadowStyles(componentInstance, styles, { force } = { force: false }) {
+    const ctor = componentInstance.constructor;
+    if (!componentInstance.shadowRoot || !styles) {
+        if (supportsConstructableStyleSheets) {
+            if (ctor[CUSTOM_ELEMENT_STYLES_PROPERTY]) {
+                ctor[CUSTOM_ELEMENT_STYLES_PROPERTY] = [];
+            }
+            if (componentInstance.shadowRoot) {
+                componentInstance.shadowRoot.adoptedStyleSheets = [];
+            }
+        }
+        return;
+    }
+    styles = styles instanceof Array ? styles : [styles];
+    if (supportsConstructableStyleSheets) {
+        if (force || !ctor[CUSTOM_ELEMENT_STYLES_PROPERTY]) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(styles.join(' '));
+            ctor[CUSTOM_ELEMENT_STYLES_PROPERTY] = [sheet];
+        }
+        componentInstance.shadowRoot.adoptedStyleSheets = ctor[CUSTOM_ELEMENT_STYLES_PROPERTY];
+    }
+    else {
+        const styleElement = document.createElement('style');
+        // eslint-disable-next-line @typescript-eslint/dot-notation
+        const nonce = window['forgeNonce'];
+        if (nonce) {
+            styleElement.setAttribute('nonce', nonce);
+        }
+        styleElement.textContent = styles.join(' ');
+        componentInstance.shadowRoot.appendChild(styleElement);
+    }
+}
 /**
  * Copies style rules from the provided document stylesheets collection to the provided shadow root stylesheet.
  * @param {Document} fromDocument The document to find the style sheets in.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-core",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "A library of core web utilities that support Forge Web Component libraries.",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
@@ -16,4 +16,4 @@
     "@floating-ui/dom": "^0.5.0",
     "tslib": "^2.3.1"
   }
-}
+}

package/typings/custom-elements/component-utils.d.ts

@@ -1,3 +1,6 @@
+export declare const CUSTOM_ELEMENT_STYLES_PROPERTY = "_forgeElementStyles";
+/** Whether the browser supports constructable stylesheets */
+export declare const supportsConstructableStyleSheets: boolean;
 /**
  * Recursively defines a component as a custom elements and all of its dependencies.
  * @param component The component to import.
@@ -46,7 +49,7 @@ export declare function attachLightTemplate<T extends HTMLElement>(componentInst
  * @param {string} elementName The name of the element the shadow root is to be attached to.
  * @param {string} template The shadow root template HTML string.
  * @param {string | string[]} styles The shadow root styles string to be encapsulated by this shadow root.
- * @param {boolean} [delegatesFocus=false] Should the component delagate focus.
+ * @param {boolean} [delegatesFocus=false] Should the component delegate focus.
  */
 export declare function attachShadowTemplate<T extends HTMLElement>(componentInstance: T, template: string, styles?: string | string[], delegatesFocus?: boolean): void;
 /**
@@ -70,6 +73,15 @@ export declare function prepareShadowTemplate(template: string, styles?: string
  * @param {HTMLTemplateElement} templateElement A template element to be cloned.
  */
 export declare function setShadowTemplate<T extends HTMLElement>(componentInstance: T, templateElement: HTMLTemplateElement): void;
+/**
+ * Applies styles to the shadow root of the provided element instance.
+ * @param {T} componentInstance A component instance.
+ * @param {string | string[]} styles The styles to be applied to the shadow root.
+ * @param options Options for setting the styles.
+ */
+export declare function setShadowStyles<T extends HTMLElement>(componentInstance: T, styles: string | string[], { force }?: {
+    force: boolean;
+}): void;
 /**
  * Copies style rules from the provided document stylesheets collection to the provided shadow root stylesheet.
  * @param {Document} fromDocument The document to find the style sheets in.

package/typings/custom-elements/decorators/custom-element.d.ts

@@ -2,6 +2,12 @@ declare global {
     interface Window {
         __forgeFlags__autoDefine: any;
     }
+    interface ShadowRoot {
+        adoptedStyleSheets: CSSStyleSheet[];
+    }
+    interface CSSStyleSheet {
+        replaceSync(cssText: string): void;
+    }
 }
 export interface ICustomElementConfig {
     /** The name of the custom element tag. */