@patternfly/elements 3.0.1 → 4.0.0

package/pf-dropdown/test/pf-dropdown.e2e.js

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-dropdown';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-dropdown.e2e.js.map

package/pf-dropdown/test/pf-dropdown.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-dropdown.e2e.js","sourceRoot":"","sources":["pf-dropdown.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-dropdown';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-dropdown.e2e.js","sourceRoot":"","sources":["pf-dropdown.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-dropdown';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

package/pf-icon/pf-icon.css

@@ -1,3 +1,25 @@
+:host {
+  position: relative;
+  display:  inline-block;
+  line-height:  0;
+  height: fit-content !important;
+  width: fit-content !important;
+}
+
+#container {
+  display: grid;
+  grid-template: 1fr / 1fr;
+  place-content: center;
+}
+
+#container.content ::slotted(*) {
+  display: none;
+}
+
+svg {
+  fill: currentcolor;
+}
+
 :host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }
 :host([size=md]) #container { --_size: var(--pf-global--icon--FontSize--md, 18px); }
 :host([size=lg]) #container { --_size: var(--pf-global--icon--FontSize--lg, 24px); }

package/pf-icon/pf-icon.d.ts

@@ -1,21 +1,110 @@
-import { BaseIcon } from './BaseIcon.js';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+type Renderable = unknown;
+export type IconResolverFunction = (set: string, icon: string) => Renderable | Promise<Renderable>;
+/** Fired when an icon fails to load */
+export declare class IconResolveError extends ErrorEvent {
+    /** The original error when importing the icon module */
+    originalError: Error;
+    constructor(set: string, icon: string, 
+    /** The original error when importing the icon module */
+    originalError: Error);
+}
 /**
  * An **icon** component is a container that allows for icons of varying dimensions to
  * seamlessly replace each other without shifting surrounding content.
- *
  * @slot - Slotted content is used as a fallback in case the icon doesn't load
  * @fires load - Fired when an icon is loaded and rendered
  * @fires error - Fired when an icon fails to load
  * @csspart fallback - Container for the fallback (i.e. slotted) content
+ * @cssprop {<length>} --pf-icon--size - size of the icon
  */
-export declare class PfIcon extends BaseIcon {
+export declare class PfIcon extends LitElement {
+    #private;
     static readonly styles: CSSStyleSheet[];
-    static defaultIconSet: string;
+    private static onIntersect;
+    private static defaultResolve;
+    private static io;
+    private static resolvers;
+    private static instances;
+    /**
+     * Register a new icon set
+     * @param setName - The name of the icon set
+     * @param resolver - A function that returns the URL of an icon
+     * @example returning a URL object
+     *          ```js
+     *          PfIcon.addIconSet('rh', (set, icon) =>
+     *            new URL(`./icons/${set}/${icon}.js`, import.meta.url));
+     *          ```
+     * @example returning a string
+     *          ```js
+     *          PfIcon.addIconSet('rh', (set, icon) =>
+     *            `/assets/icons/${set}/${icon}.js`);
+     *          ```
+     */
+    static addIconSet(setName: string, resolver: IconResolverFunction): void;
+    /** Removes all added icon sets and resets resolve function */
+    static reset(): void;
+    /**
+     * Gets a renderable icon. Override this to customize how icons are resolved.
+     * @param set - The name of the icon set
+     * @param icon - The name of the icon
+     * @returns The icon content, a node or anything else which lit-html can render
+     * @example resolving an icon node from an icon module
+     *          ```js
+     *          PfIcon.resolve = (set, icon) =>
+     *            import(`/assets/icons/${set}/${icon}.js`)
+     *              .then(mod => mod.default.cloneNode(true));
+     *          ```
+     * @example resolving a named export from an icon collection module
+     *          ```js
+     *          PfIcon.resolve = (set, icon) =>
+     *            import(`/assets/icons.js`)
+     *              .then(module => module[icon]?.cloneNode(true));
+     *          ```
+     * @example resolving a new node from an svg file
+     *          ```js
+     *          const iconCacne = new Map();
+     *          function getCachedIconOrNewNode(set, icon, svg) {
+     *            const key = `${set}_${icon}`;
+     *            if (!iconCache.has(key)) {
+     *              const template = document.createElement('template');
+     *                    template.innerHTML = svg;
+     *              iconCache.set(key, template);
+     *            }
+     *            return iconCache.get(key);
+     *          }
+     *          PfIcon.resolve = (set, icon) =>
+     *            fetch(`/assets/icons/${set}/${icon}.svg`)
+     *              .then(response => response.text())
+     *              .then(svg => getCachedIconOrNewNode(set, icon, svg))
+     *              .then(node => node.content.cloneNode(true));
+     *          ```
+     */
+    static resolve: IconResolverFunction;
+    /** Icon set */
+    set: string;
+    /** Icon name */
+    icon: string;
     /** Size of the icon */
     size: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Controls how eager the element will be to load the icon data
+     * - `eager`: eagerly load the icon, blocking the main thread
+     * - `idle`: wait for the browser to attain an idle state before loading
+     * - `lazy` (default): wait for the element to enter the viewport before loading
+     */
+    loading?: 'idle' | 'lazy' | 'eager';
+    /** Icon content. Any value that lit can render */
+    private content?;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult<1>;
+    protected load(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'pf-icon': PfIcon;
     }
 }
+export {};

package/pf-icon/pf-icon.js

@@ -1,30 +1,208 @@
-import { __decorate } from "tslib";
-import { BaseIcon } from './BaseIcon.js';
+var _PfIcon_instances, _a, _PfIcon_intersecting, _PfIcon_logger, _PfIcon_lazyLoad, _PfIcon_load, _PfIcon_contentChanged;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators/state.js';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { css } from "lit";
-const style = css `:host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }\n:host([size=md]) #container { --_size: var(--pf-global--icon--FontSize--md, 18px); }\n:host([size=lg]) #container { --_size: var(--pf-global--icon--FontSize--lg, 24px); }\n:host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }\n\n#container, svg {\n  width: var(--pf-icon--size, var(--_size));\n  height: var(--pf-icon--size, var(--_size));\n  min-width: var(--pf-icon--size, var(--_size));\n  min-height: var(--pf-icon--size, var(--_size));\n}\n\n`;
+const style = css `:host {\n  position: relative;\n  display:  inline-block;\n  line-height:  0;\n  height: fit-content !important;\n  width: fit-content !important;\n}\n\n#container {\n  display: grid;\n  grid-template: 1fr / 1fr;\n  place-content: center;\n}\n\n#container.content ::slotted(*) {\n  display: none;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n:host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }\n:host([size=md]) #container { --_size: var(--pf-global--icon--FontSize--md, 18px); }\n:host([size=lg]) #container { --_size: var(--pf-global--icon--FontSize--lg, 24px); }\n:host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }\n\n#container, svg {\n  width: var(--pf-icon--size, var(--_size));\n  height: var(--pf-icon--size, var(--_size));\n  min-width: var(--pf-icon--size, var(--_size));\n  min-height: var(--pf-icon--size, var(--_size));\n}\n\n`;
 /**
- * An **icon** component is a container that allows for icons of varying dimensions to
- * seamlessly replace each other without shifting surrounding content.
- *
- * @slot - Slotted content is used as a fallback in case the icon doesn't load
- * @fires load - Fired when an icon is loaded and rendered
- * @fires error - Fired when an icon fails to load
- * @csspart fallback - Container for the fallback (i.e. slotted) content
+ * requestIdleCallback when available, requestAnimationFrame when not
+ * @param f callback
  */
-let PfIcon = class PfIcon extends BaseIcon {
+const ric = globalThis.requestIdleCallback
+    ?? globalThis.requestAnimationFrame
+    ?? (async (f) => Promise.resolve().then(f));
+/** Fired when an icon fails to load */
+export class IconResolveError extends ErrorEvent {
+    constructor(set, icon, 
+    /** The original error when importing the icon module */
+    originalError) {
+        super('error', { message: `Could not load icon "${icon}" from set "${set}".` });
+        this.originalError = originalError;
+    }
+}
+let PfIcon = _a = class PfIcon extends LitElement {
     constructor() {
         super(...arguments);
+        _PfIcon_instances.add(this);
+        /** Icon set */
+        this.set = 'fas';
+        /** Icon name */
+        this.icon = '';
         /** Size of the icon */
         this.size = 'sm';
+        /**
+         * Controls how eager the element will be to load the icon data
+         * - `eager`: eagerly load the icon, blocking the main thread
+         * - `idle`: wait for the browser to attain an idle state before loading
+         * - `lazy` (default): wait for the element to enter the viewport before loading
+         */
+        this.loading = 'lazy';
+        _PfIcon_intersecting.set(this, false);
+        _PfIcon_logger.set(this, new Logger(this));
+    }
+    /**
+     * Register a new icon set
+     * @param setName - The name of the icon set
+     * @param resolver - A function that returns the URL of an icon
+     * @example returning a URL object
+     *          ```js
+     *          PfIcon.addIconSet('rh', (set, icon) =>
+     *            new URL(`./icons/${set}/${icon}.js`, import.meta.url));
+     *          ```
+     * @example returning a string
+     *          ```js
+     *          PfIcon.addIconSet('rh', (set, icon) =>
+     *            `/assets/icons/${set}/${icon}.js`);
+     *          ```
+     */
+    static addIconSet(setName, resolver) {
+        if (typeof setName !== 'string') {
+            Logger.warn(`[${this.name}]: the first argument to addIconSet must be a string.`);
+        }
+        else if (typeof resolver !== 'function') {
+            Logger.warn(`[${this.name}]: the second argument to addIconSet must be a function.`);
+        }
+        else {
+            this.resolvers.set(setName, resolver);
+            for (const instance of this.instances) {
+                __classPrivateFieldGet(instance, _PfIcon_instances, "m", _PfIcon_load).call(instance);
+            }
+        }
+    }
+    /** Removes all added icon sets and resets resolve function */
+    static reset() {
+        this.resolvers.clear();
+        this.resolve = this.defaultResolve;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        PfIcon.instances.add(this);
+    }
+    willUpdate(changed) {
+        if (changed.has('icon')) {
+            __classPrivateFieldGet(this, _PfIcon_instances, "m", _PfIcon_load).call(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        PfIcon.io.unobserve(this);
+        PfIcon.instances.delete(this);
+    }
+    render() {
+        const content = this.content ?? '';
+        return html `
+      <div id="container" aria-hidden="true">${content}<span part="fallback"
+          ?hidden=${!!content}><slot></slot>
+        </span>
+      </div>
+    `;
+    }
+    async load() {
+        const { set, icon } = this;
+        const resolver = PfIcon.resolvers.get(set) ?? PfIcon.resolve;
+        if (set && icon && typeof resolver === 'function') {
+            try {
+                this.content = await resolver(set, icon);
+                __classPrivateFieldGet(this, _PfIcon_instances, "m", _PfIcon_contentChanged).call(this);
+            }
+            catch (error) {
+                __classPrivateFieldGet(this, _PfIcon_logger, "f").error(error.message);
+                this.dispatchEvent?.(new IconResolveError(set, icon, error));
+            }
+        }
+    }
+};
+_PfIcon_intersecting = new WeakMap();
+_PfIcon_logger = new WeakMap();
+_PfIcon_instances = new WeakSet();
+_PfIcon_lazyLoad = function _PfIcon_lazyLoad() {
+    PfIcon.io.observe(this);
+    if (__classPrivateFieldGet(this, _PfIcon_intersecting, "f")) {
+        this.load();
     }
 };
-PfIcon.styles = [...BaseIcon.styles, style];
-PfIcon.defaultIconSet = 'fas';
+_PfIcon_load = function _PfIcon_load() {
+    switch (this.loading) {
+        case 'idle': return void ric(() => this.load());
+        case 'lazy': return void __classPrivateFieldGet(this, _PfIcon_instances, "m", _PfIcon_lazyLoad).call(this);
+        case 'eager': return void this.load();
+    }
+};
+_PfIcon_contentChanged = async function _PfIcon_contentChanged() {
+    await this.updateComplete;
+    this.dispatchEvent?.(new Event('load', { bubbles: true }));
+};
+PfIcon.styles = [style];
+PfIcon.onIntersect = records => records.forEach(({ isIntersecting, target }) => {
+    const icon = target;
+    __classPrivateFieldSet(icon, _PfIcon_intersecting, isIntersecting, "f");
+    ric(() => {
+        if (__classPrivateFieldGet(icon, _PfIcon_intersecting, "f")) {
+            icon.load();
+        }
+    });
+});
+PfIcon.defaultResolve = (set, icon) => import(`@patternfly/icons/${set}/${icon}.js`)
+    .then(mod => mod.default.cloneNode(true));
+PfIcon.io = new IntersectionObserver(PfIcon.onIntersect);
+PfIcon.resolvers = new Map();
+PfIcon.instances = new Set();
+/**
+ * Gets a renderable icon. Override this to customize how icons are resolved.
+ * @param set - The name of the icon set
+ * @param icon - The name of the icon
+ * @returns The icon content, a node or anything else which lit-html can render
+ * @example resolving an icon node from an icon module
+ *          ```js
+ *          PfIcon.resolve = (set, icon) =>
+ *            import(`/assets/icons/${set}/${icon}.js`)
+ *              .then(mod => mod.default.cloneNode(true));
+ *          ```
+ * @example resolving a named export from an icon collection module
+ *          ```js
+ *          PfIcon.resolve = (set, icon) =>
+ *            import(`/assets/icons.js`)
+ *              .then(module => module[icon]?.cloneNode(true));
+ *          ```
+ * @example resolving a new node from an svg file
+ *          ```js
+ *          const iconCacne = new Map();
+ *          function getCachedIconOrNewNode(set, icon, svg) {
+ *            const key = `${set}_${icon}`;
+ *            if (!iconCache.has(key)) {
+ *              const template = document.createElement('template');
+ *                    template.innerHTML = svg;
+ *              iconCache.set(key, template);
+ *            }
+ *            return iconCache.get(key);
+ *          }
+ *          PfIcon.resolve = (set, icon) =>
+ *            fetch(`/assets/icons/${set}/${icon}.svg`)
+ *              .then(response => response.text())
+ *              .then(svg => getCachedIconOrNewNode(set, icon, svg))
+ *              .then(node => node.content.cloneNode(true));
+ *          ```
+ */
+PfIcon.resolve = PfIcon.defaultResolve;
+PfIcon.version = "4.0.0";
+__decorate([
+    property()
+], PfIcon.prototype, "set", void 0);
+__decorate([
+    property({ reflect: true })
+], PfIcon.prototype, "icon", void 0);
 __decorate([
     property({ reflect: true })
 ], PfIcon.prototype, "size", void 0);
+__decorate([
+    property()
+], PfIcon.prototype, "loading", void 0);
+__decorate([
+    state()
+], PfIcon.prototype, "content", void 0);
 PfIcon = __decorate([
     customElement('pf-icon')
 ], PfIcon);

package/pf-icon/pf-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;;;;;GAQG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAKL,uBAAuB;QACM,SAAI,GAA8B,IAAI,CAAC;IACtE,CAAC;;AANwB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,AAA9B,CAA+B;AAE9C,qBAAc,GAAG,KAAK,AAAR,CAAS;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAwC;AANzD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAOlB","sourcesContent":["import { BaseIcon } from './BaseIcon.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-icon.css';\n\n/**\n * An **icon** component is a container that allows for icons of varying dimensions to\n * seamlessly replace each other without shifting surrounding content.\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\n@customElement('pf-icon')\nexport class PfIcon extends BaseIcon {\n  public static readonly styles = [...BaseIcon.styles, style];\n\n  public static defaultIconSet = 'fas';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}
+{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './pf-icon.css';\n\ntype Renderable = unknown;\n\nexport type IconResolverFunction = (set: string, icon: string) =>\n  Renderable | Promise<Renderable>;\n\n/**\n * requestIdleCallback when available, requestAnimationFrame when not\n * @param f callback\n */\nconst ric: typeof globalThis.requestIdleCallback =\n     globalThis.requestIdleCallback\n  ?? globalThis.requestAnimationFrame\n  ?? (async (f: () => void) => Promise.resolve().then(f));\n\n/** Fired when an icon fails to load */\nexport class IconResolveError extends ErrorEvent {\n  constructor(\n    set: string,\n    icon: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon \"${icon}\" from set \"${set}\".` });\n  }\n}\n\n/**\n * An **icon** component is a container that allows for icons of varying dimensions to\n * seamlessly replace each other without shifting surrounding content.\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n * @cssprop {<length>} --pf-icon--size - size of the icon\n */\n@customElement('pf-icon')\nexport class PfIcon extends LitElement {\n  public static readonly styles: CSSStyleSheet[] = [style];\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as PfIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.load();\n        }\n      });\n    });\n\n  private static defaultResolve: IconResolverFunction = (set: string, icon: string): Renderable =>\n    import(`@patternfly/icons/${set}/${icon}.js`)\n        .then(mod => mod.default.cloneNode(true));\n\n  private static io = new IntersectionObserver(PfIcon.onIntersect);\n\n  private static resolvers = new Map<string, IconResolverFunction>();\n\n  private static instances = new Set<PfIcon>();\n\n  /**\n   * Register a new icon set\n   * @param setName - The name of the icon set\n   * @param resolver - A function that returns the URL of an icon\n   * @example returning a URL object\n   *          ```js\n   *          PfIcon.addIconSet('rh', (set, icon) =>\n   *            new URL(`./icons/${set}/${icon}.js`, import.meta.url));\n   *          ```\n   * @example returning a string\n   *          ```js\n   *          PfIcon.addIconSet('rh', (set, icon) =>\n   *            `/assets/icons/${set}/${icon}.js`);\n   *          ```\n   */\n  public static addIconSet(setName: string, resolver: IconResolverFunction): void {\n    if (typeof setName !== 'string') {\n      Logger.warn(`[${this.name}]: the first argument to addIconSet must be a string.`);\n    } else if (typeof resolver !== 'function') {\n      Logger.warn(`[${this.name}]: the second argument to addIconSet must be a function.`);\n    } else {\n      this.resolvers.set(setName, resolver);\n      for (const instance of this.instances) {\n        instance.#load();\n      }\n    }\n  }\n\n  /** Removes all added icon sets and resets resolve function */\n  public static reset(): void {\n    this.resolvers.clear();\n    this.resolve = this.defaultResolve;\n  }\n\n  /**\n   * Gets a renderable icon. Override this to customize how icons are resolved.\n   * @param set - The name of the icon set\n   * @param icon - The name of the icon\n   * @returns The icon content, a node or anything else which lit-html can render\n   * @example resolving an icon node from an icon module\n   *          ```js\n   *          PfIcon.resolve = (set, icon) =>\n   *            import(`/assets/icons/${set}/${icon}.js`)\n   *              .then(mod => mod.default.cloneNode(true));\n   *          ```\n   * @example resolving a named export from an icon collection module\n   *          ```js\n   *          PfIcon.resolve = (set, icon) =>\n   *            import(`/assets/icons.js`)\n   *              .then(module => module[icon]?.cloneNode(true));\n   *          ```\n   * @example resolving a new node from an svg file\n   *          ```js\n   *          const iconCacne = new Map();\n   *          function getCachedIconOrNewNode(set, icon, svg) {\n   *            const key = `${set}_${icon}`;\n   *            if (!iconCache.has(key)) {\n   *              const template = document.createElement('template');\n   *                    template.innerHTML = svg;\n   *              iconCache.set(key, template);\n   *            }\n   *            return iconCache.get(key);\n   *          }\n   *          PfIcon.resolve = (set, icon) =>\n   *            fetch(`/assets/icons/${set}/${icon}.svg`)\n   *              .then(response => response.text())\n   *              .then(svg => getCachedIconOrNewNode(set, icon, svg))\n   *              .then(node => node.content.cloneNode(true));\n   *          ```\n   */\n  public static resolve: IconResolverFunction = PfIcon.defaultResolve;\n\n  /** Icon set */\n  @property() set = 'fas';\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Controls how eager the element will be to load the icon data\n   * - `eager`: eagerly load the icon, blocking the main thread\n   * - `idle`: wait for the browser to attain an idle state before loading\n   * - `lazy` (default): wait for the element to enter the viewport before loading\n   */\n  @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n  /** Icon content. Any value that lit can render */\n  @state() private content?: unknown;\n\n  #intersecting = false;\n\n  #logger = new Logger(this);\n\n  #lazyLoad() {\n    PfIcon.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #load() {\n    switch (this.loading) {\n      case 'idle': return void ric(() => this.load());\n      case 'lazy': return void this.#lazyLoad();\n      case 'eager': return void this.load();\n    }\n  }\n\n  async #contentChanged() {\n    await this.updateComplete;\n    this.dispatchEvent?.(new Event('load', { bubbles: true }));\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    PfIcon.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('icon')) {\n      this.#load();\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    PfIcon.io.unobserve(this);\n    PfIcon.instances.delete(this);\n  }\n\n  render(): TemplateResult<1> {\n    const content = this.content ?? '';\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content}<span part=\"fallback\"\n          ?hidden=${!!content}><slot></slot>\n        </span>\n      </div>\n    `;\n  }\n\n  protected async load(): Promise<void> {\n    const { set, icon } = this;\n    const resolver = PfIcon.resolvers.get(set) ?? PfIcon.resolve;\n    if (set && icon && typeof resolver === 'function') {\n      try {\n        this.content = await resolver(set, icon);\n        this.#contentChanged();\n      } catch (error: unknown) {\n        this.#logger.error((error as IconResolveError).message);\n        this.dispatchEvent?.(new IconResolveError(set, icon, error as Error));\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}

package/pf-icon/test/pf-icon.e2e.js

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-icon';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-icon.e2e.js.map

package/pf-icon/test/pf-icon.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-icon.e2e.js","sourceRoot":"","sources":["pf-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-icon';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-icon.e2e.js","sourceRoot":"","sources":["pf-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-icon';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}