@patternfly/pfe-core 2.4.1 → 4.0.0

package/controllers/logger.js

@@ -1,13 +1,18 @@
-class Logger {
-    static { this.instances = new WeakMap(); }
+import { isServer } from 'lit';
+export class Logger {
     get prefix() {
-        return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;
+        if (!isServer && this.host instanceof HTMLElement) {
+            return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;
+        }
+        else {
+            return `[${this.host.constructor.name}]`;
+        }
     }
     /**
      * A boolean value that indicates if the logging should be printed to the console; used for debugging.
      * For use in a JS file or script tag; can also be added in the constructor of a component during development.
      * @example Logger.debugLog(true);
-     * @tags debug
+     * @param [preference=null]
      */
     static debugLog(preference = null) {
         // wrap localStorage references in a try/catch; merely referencing it can
@@ -19,41 +24,79 @@ class Logger {
             }
             return localStorage.pfeLog === 'true';
         }
-        catch (e) {
+        catch {
             return Logger.logDebug;
         }
     }
+    /* eslint-disable no-console */
+    /**
+     * A logging wrapper which checks the debugLog boolean and prints to the console if true.
+     * @example Logger.debug("Hello");
+     * @param msgs console.log params
+     */
+    static debug(...msgs) {
+        if (Logger.debugLog()) {
+            console.debug(...msgs);
+        }
+    }
+    /**
+     * A logging wrapper which checks the debugLog boolean and prints to the console if true.
+     * @example Logger.info("Hello");
+     * @param msgs console.log params
+     */
+    static info(...msgs) {
+        if (Logger.debugLog()) {
+            console.info(...msgs);
+        }
+    }
     /**
      * A logging wrapper which checks the debugLog boolean and prints to the console if true.
-     *
      * @example Logger.log("Hello");
+     * @param msgs console.log params
      */
     static log(...msgs) {
         if (Logger.debugLog()) {
-            // eslint-disable-next-line no-console
             console.log(...msgs);
         }
     }
     /**
      * A console warning wrapper which formats your output with useful debugging information.
-     *
      * @example Logger.warn("Hello");
+     * @param msgs console.log params
      */
     static warn(...msgs) {
-        console.warn(...msgs); // eslint-disable-line no-console
+        console.warn(...msgs);
     }
     /**
      * A console error wrapper which formats your output with useful debugging information.
      * For use inside a component's function.
      * @example Logger.error("Hello");
+     * @param msgs console.log params
      */
     static error(...msgs) {
-        console.error([...msgs].join(' ')); // eslint-disable-line no-console
+        console.error([...msgs].join(' '));
+    }
+    /* eslint-enable no-console */
+    /**
+     * Debug logging that outputs the tag name as a prefix automatically
+     * @example this.logger.log("Hello");
+     * @param msgs console.log params
+     */
+    debug(...msgs) {
+        Logger.debug(this.prefix, ...msgs);
+    }
+    /**
+     * Info logging that outputs the tag name as a prefix automatically
+     * @example this.logger.log("Hello");
+     * @param msgs console.log params
+     */
+    info(...msgs) {
+        Logger.info(this.prefix, ...msgs);
     }
     /**
      * Local logging that outputs the tag name as a prefix automatically
-     *
      * @example this.logger.log("Hello");
+     * @param msgs console.log params
      */
     log(...msgs) {
         Logger.log(this.prefix, ...msgs);
@@ -62,6 +105,7 @@ class Logger {
      * Local warning wrapper that outputs the tag name as a prefix automatically.
      * For use inside a component's function.
      * @example this.logger.warn("Hello");
+     * @param msgs console.log params
      */
     warn(...msgs) {
         Logger.warn(this.prefix, ...msgs);
@@ -70,6 +114,7 @@ class Logger {
      * Local error wrapper that outputs the tag name as a prefix automatically.
      * For use inside a component's function.
      * @example this.logger.error("Hello");
+     * @param msgs console.log params
      */
     error(...msgs) {
         Logger.error(this.prefix, ...msgs);
@@ -84,8 +129,8 @@ class Logger {
         Logger.instances.set(host, this);
     }
     hostConnected() {
-        this.log('connected');
+        this.debug('connected');
     }
 }
-export { Logger };
+Logger.instances = new WeakMap();
 //# sourceMappingURL=logger.js.map

package/controllers/logger.js.map

@@ -1 +1 @@
-{"version":3,"file":"logger.js","sourceRoot":"","sources":["logger.ts"],"names":[],"mappings":"AAEA,MAAa,MAAM;aAGF,cAAS,GAAiC,IAAI,OAAO,EAAE,CAAC;IAEvE,IAAY,MAAM;QAChB,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;IAC7E,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,IAAI;QAC/B,yEAAyE;QACzE,gDAAgD;QAChD,IAAI;YACF,IAAI,UAAU,KAAK,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC;gBAC/B,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,UAAU,CAAC;aACpC;YACD,OAAO,YAAY,CAAC,MAAM,KAAK,MAAM,CAAC;SACvC;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,MAAM,CAAC,QAAQ,CAAC;SACxB;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,GAAG,CAAC,GAAG,IAAe;QAC3B,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE;YACrB,sCAAsC;YACtC,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;SACtB;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,IAAe;QAC5B,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,iCAAiC;IAC1D,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,GAAG,IAAe;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,iCAAiC;IACvE,CAAC;IAED;;;;OAIG;IACH,GAAG,CAAC,GAAG,IAAe;QACpB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACnC,CAAC;IAED;;;;OAIG;IACH,IAAI,CAAC,GAAG,IAAe;QACrB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACpC,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,GAAG,IAAe;QACtB,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QACvC,4CAA4C;QAC5C,IAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9B,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAW,CAAC;SAC7C;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACzB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,aAAa;QACX,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC;;SAjGU,MAAM","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport class Logger implements ReactiveController {\n  private static logDebug: boolean;\n\n  private static instances: WeakMap<HTMLElement, Logger> = new WeakMap();\n\n  private get prefix() {\n    return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;\n  }\n\n  /**\n   * A boolean value that indicates if the logging should be printed to the console; used for debugging.\n   * For use in a JS file or script tag; can also be added in the constructor of a component during development.\n   * @example Logger.debugLog(true);\n   * @tags debug\n   */\n  static debugLog(preference = null) {\n    // wrap localStorage references in a try/catch; merely referencing it can\n    // throw errors in some locked down environments\n    try {\n      if (preference !== null) {\n        Logger.logDebug = !!preference;\n        localStorage.pfeLog = !!preference;\n      }\n      return localStorage.pfeLog === 'true';\n    } catch (e) {\n      return Logger.logDebug;\n    }\n  }\n\n  /**\n   * A logging wrapper which checks the debugLog boolean and prints to the console if true.\n   *\n   * @example Logger.log(\"Hello\");\n   */\n  static log(...msgs: unknown[]) {\n    if (Logger.debugLog()) {\n      // eslint-disable-next-line no-console\n      console.log(...msgs);\n    }\n  }\n\n  /**\n   * A console warning wrapper which formats your output with useful debugging information.\n   *\n   * @example Logger.warn(\"Hello\");\n   */\n  static warn(...msgs: unknown[]) {\n    console.warn(...msgs); // eslint-disable-line no-console\n  }\n\n  /**\n   * A console error wrapper which formats your output with useful debugging information.\n   * For use inside a component's function.\n   * @example Logger.error(\"Hello\");\n   */\n  static error(...msgs: unknown[]) {\n    console.error([...msgs].join(' ')); // eslint-disable-line no-console\n  }\n\n  /**\n   * Local logging that outputs the tag name as a prefix automatically\n   *\n   * @example this.logger.log(\"Hello\");\n   */\n  log(...msgs: unknown[]) {\n    Logger.log(this.prefix, ...msgs);\n  }\n\n  /**\n   * Local warning wrapper that outputs the tag name as a prefix automatically.\n   * For use inside a component's function.\n   * @example this.logger.warn(\"Hello\");\n   */\n  warn(...msgs: unknown[]) {\n    Logger.warn(this.prefix, ...msgs);\n  }\n\n  /**\n   * Local error wrapper that outputs the tag name as a prefix automatically.\n   * For use inside a component's function.\n   * @example this.logger.error(\"Hello\");\n   */\n  error(...msgs: unknown[]) {\n    Logger.error(this.prefix, ...msgs);\n  }\n\n  constructor(private host: ReactiveElement) {\n    // We only need one logger instance per host\n    if (Logger.instances.get(host)) {\n      return Logger.instances.get(host) as Logger;\n    }\n    host.addController(this);\n    Logger.instances.set(host, this);\n  }\n\n  hostConnected() {\n    this.log('connected');\n  }\n}\n"]}
+{"version":3,"file":"logger.js","sourceRoot":"","sources":["logger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAwD,MAAM,KAAK,CAAC;AAErF,MAAM,OAAO,MAAM;IAKjB,IAAY,MAAM;QAChB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,YAAY,WAAW,EAAE,CAAC;YAClD,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;QAC7E,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC;QAC3C,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,IAAI;QAC/B,yEAAyE;QACzE,gDAAgD;QAChD,IAAI,CAAC;YACH,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;gBACxB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC;gBAC/B,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,UAAU,CAAC;YACrC,CAAC;YACD,OAAO,YAAY,CAAC,MAAM,KAAK,MAAM,CAAC;QACxC,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,MAAM,CAAC,QAAQ,CAAC;QACzB,CAAC;IACH,CAAC;IAED,+BAA+B;IAE/B;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,GAAG,IAAe;QAC7B,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;YACtB,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,IAAe;QAC5B,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;YACtB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,GAAG,CAAC,GAAG,IAAe;QAC3B,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;YACtB,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,IAAe;QAC5B,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IACxB,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,KAAK,CAAC,GAAG,IAAe;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IACrC,CAAC;IAED,8BAA8B;IAE9B;;;;OAIG;IACH,KAAK,CAAC,GAAG,IAAe;QACtB,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,IAAI,CAAC,GAAG,IAAe;QACrB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACpC,CAAC;IAED;;;;OAIG;IACH,GAAG,CAAC,GAAG,IAAe;QACpB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACnC,CAAC;IAED;;;;;OAKG;IACH,IAAI,CAAC,GAAG,IAAe;QACrB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,GAAG,IAAe;QACtB,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,YAAoB,IAA4B;QAA5B,SAAI,GAAJ,IAAI,CAAwB;QAC9C,4CAA4C;QAC5C,IAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YAC/B,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAW,CAAC;QAC9C,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACzB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,aAAa;QACX,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC;;AAhJc,gBAAS,GAAG,IAAI,OAAO,EAAkC,CAAC","sourcesContent":["import { isServer, type ReactiveController, type ReactiveControllerHost } from 'lit';\n\nexport class Logger implements ReactiveController {\n  private static logDebug: boolean;\n\n  private static instances = new WeakMap<ReactiveControllerHost, Logger>();\n\n  private get prefix() {\n    if (!isServer && this.host instanceof HTMLElement) {\n      return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;\n    } else {\n      return `[${this.host.constructor.name}]`;\n    }\n  }\n\n  /**\n   * A boolean value that indicates if the logging should be printed to the console; used for debugging.\n   * For use in a JS file or script tag; can also be added in the constructor of a component during development.\n   * @example Logger.debugLog(true);\n   * @param [preference=null]\n   */\n  static debugLog(preference = null): boolean {\n    // wrap localStorage references in a try/catch; merely referencing it can\n    // throw errors in some locked down environments\n    try {\n      if (preference !== null) {\n        Logger.logDebug = !!preference;\n        localStorage.pfeLog = !!preference;\n      }\n      return localStorage.pfeLog === 'true';\n    } catch {\n      return Logger.logDebug;\n    }\n  }\n\n  /* eslint-disable no-console */\n\n  /**\n   * A logging wrapper which checks the debugLog boolean and prints to the console if true.\n   * @example Logger.debug(\"Hello\");\n   * @param msgs console.log params\n   */\n  static debug(...msgs: unknown[]): void {\n    if (Logger.debugLog()) {\n      console.debug(...msgs);\n    }\n  }\n\n  /**\n   * A logging wrapper which checks the debugLog boolean and prints to the console if true.\n   * @example Logger.info(\"Hello\");\n   * @param msgs console.log params\n   */\n  static info(...msgs: unknown[]): void {\n    if (Logger.debugLog()) {\n      console.info(...msgs);\n    }\n  }\n\n  /**\n   * A logging wrapper which checks the debugLog boolean and prints to the console if true.\n   * @example Logger.log(\"Hello\");\n   * @param msgs console.log params\n   */\n  static log(...msgs: unknown[]): void {\n    if (Logger.debugLog()) {\n      console.log(...msgs);\n    }\n  }\n\n  /**\n   * A console warning wrapper which formats your output with useful debugging information.\n   * @example Logger.warn(\"Hello\");\n   * @param msgs console.log params\n   */\n  static warn(...msgs: unknown[]): void {\n    console.warn(...msgs);\n  }\n\n  /**\n   * A console error wrapper which formats your output with useful debugging information.\n   * For use inside a component's function.\n   * @example Logger.error(\"Hello\");\n   * @param msgs console.log params\n   */\n  static error(...msgs: unknown[]): void {\n    console.error([...msgs].join(' '));\n  }\n\n  /* eslint-enable no-console */\n\n  /**\n   * Debug logging that outputs the tag name as a prefix automatically\n   * @example this.logger.log(\"Hello\");\n   * @param msgs console.log params\n   */\n  debug(...msgs: unknown[]): void {\n    Logger.debug(this.prefix, ...msgs);\n  }\n\n  /**\n   * Info logging that outputs the tag name as a prefix automatically\n   * @example this.logger.log(\"Hello\");\n   * @param msgs console.log params\n   */\n  info(...msgs: unknown[]): void {\n    Logger.info(this.prefix, ...msgs);\n  }\n\n  /**\n   * Local logging that outputs the tag name as a prefix automatically\n   * @example this.logger.log(\"Hello\");\n   * @param msgs console.log params\n   */\n  log(...msgs: unknown[]): void {\n    Logger.log(this.prefix, ...msgs);\n  }\n\n  /**\n   * Local warning wrapper that outputs the tag name as a prefix automatically.\n   * For use inside a component's function.\n   * @example this.logger.warn(\"Hello\");\n   * @param msgs console.log params\n   */\n  warn(...msgs: unknown[]): void {\n    Logger.warn(this.prefix, ...msgs);\n  }\n\n  /**\n   * Local error wrapper that outputs the tag name as a prefix automatically.\n   * For use inside a component's function.\n   * @example this.logger.error(\"Hello\");\n   * @param msgs console.log params\n   */\n  error(...msgs: unknown[]): void {\n    Logger.error(this.prefix, ...msgs);\n  }\n\n  constructor(private host: ReactiveControllerHost) {\n    // We only need one logger instance per host\n    if (Logger.instances.get(host)) {\n      return Logger.instances.get(host) as Logger;\n    }\n    host.addController(this);\n    Logger.instances.set(host, this);\n  }\n\n  hostConnected(): void {\n    this.debug('connected');\n  }\n}\n"]}

package/controllers/overflow-controller.d.ts

@@ -1,17 +1,24 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ReactiveController, ReactiveElement } from 'lit';
 export interface Options {
+    /**
+     * Force hide the scroll buttons regardless of overflow
+     */
     hideOverflowButtons?: boolean;
+    /**
+     * Delay in ms to wait before checking for overflow
+     */
+    scrollTimeoutDelay?: number;
 }
 export declare class OverflowController implements ReactiveController {
     #private;
-    host: ReactiveControllerHost & Element;
+    host: ReactiveElement;
     private options?;
     showScrollButtons: boolean;
     overflowLeft: boolean;
     overflowRight: boolean;
     get firstItem(): HTMLElement | undefined;
     get lastItem(): HTMLElement | undefined;
-    constructor(host: ReactiveControllerHost & Element, options?: Options | undefined);
+    constructor(host: ReactiveElement, options?: Options | undefined);
     init(container: HTMLElement, items: HTMLElement[]): void;
     onScroll: () => void;
     scrollLeft(): void;

package/controllers/overflow-controller.js

@@ -1,80 +1,115 @@
+var _OverflowController_instances, _a, _OverflowController_instances_1, _OverflowController_container, _OverflowController_items, _OverflowController_scrollTimeoutDelay, _OverflowController_scrollTimeout, _OverflowController_hideOverflowButtons, _OverflowController_mo, _OverflowController_ro, _OverflowController_setOverflowState;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';
 export class OverflowController {
-    /** Overflow container */
-    #container;
-    /** Children that can overflow */
-    #items;
-    #scrollTimeoutDelay;
-    #scrollTimeout;
-    /** Default state */
-    #hideOverflowButtons;
     get firstItem() {
-        return this.#items.at(0);
+        return __classPrivateFieldGet(this, _OverflowController_items, "f").at(0);
     }
     get lastItem() {
-        return this.#items.at(-1);
+        return __classPrivateFieldGet(this, _OverflowController_items, "f").at(-1);
     }
-    constructor(host, options) {
+    constructor(
+    // TODO: widen this type to ReactiveControllerHost
+    host, options) {
+        _OverflowController_instances.add(this);
         this.host = host;
         this.options = options;
+        /** Overflow container */
+        _OverflowController_container.set(this, void 0);
         /** Children that can overflow */
-        this.#items = [];
-        this.#scrollTimeoutDelay = 0;
+        _OverflowController_items.set(this, []);
+        _OverflowController_scrollTimeoutDelay.set(this, void 0);
+        _OverflowController_scrollTimeout.set(this, void 0);
         /** Default state */
-        this.#hideOverflowButtons = false;
+        _OverflowController_hideOverflowButtons.set(this, void 0);
+        _OverflowController_mo.set(this, new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+                }
+            }
+        }));
+        _OverflowController_ro.set(this, new ResizeObserver(() => {
+            __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+        }));
         this.showScrollButtons = false;
         this.overflowLeft = false;
         this.overflowRight = false;
         this.onScroll = () => {
-            clearTimeout(this.#scrollTimeout);
-            this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);
+            clearTimeout(__classPrivateFieldGet(this, _OverflowController_scrollTimeout, "f"));
+            __classPrivateFieldSet(this, _OverflowController_scrollTimeout, setTimeout(() => __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this), __classPrivateFieldGet(this, _OverflowController_scrollTimeoutDelay, "f")), "f");
         };
-        this.host.addController(this);
-        if (options?.hideOverflowButtons) {
-            this.#hideOverflowButtons = options?.hideOverflowButtons;
+        __classPrivateFieldSet(this, _OverflowController_hideOverflowButtons, options?.hideOverflowButtons ?? false, "f");
+        __classPrivateFieldSet(this, _OverflowController_scrollTimeoutDelay, options?.scrollTimeoutDelay ?? 0, "f");
+        if (host.isConnected) {
+            __classPrivateFieldGet(_a, _a, "f", _OverflowController_instances_1).add(this);
         }
-    }
-    #setOverflowState() {
-        if (!this.firstItem || !this.lastItem || !this.#container) {
-            return;
-        }
-        this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);
-        this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);
-        let scrollButtonsWidth = 0;
-        if (this.overflowLeft || this.overflowRight) {
-            scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;
+        host.addController(this);
+        if (host.isConnected) {
+            this.hostConnected();
         }
-        this.showScrollButtons = !this.#hideOverflowButtons &&
-            this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);
-        this.host.requestUpdate();
     }
     init(container, items) {
-        this.#container = container;
+        __classPrivateFieldSet(this, _OverflowController_container, container, "f");
         // convert HTMLCollection to HTMLElement[]
-        this.#items = items;
+        __classPrivateFieldSet(this, _OverflowController_items, items, "f");
     }
     scrollLeft() {
-        if (!this.#container) {
+        if (!__classPrivateFieldGet(this, _OverflowController_container, "f")) {
             return;
         }
-        const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;
-        this.#container.scroll({ left: leftScroll, behavior: 'smooth' });
-        this.#setOverflowState();
+        const leftScroll = __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft - __classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth;
+        __classPrivateFieldGet(this, _OverflowController_container, "f").scroll({ left: leftScroll, behavior: 'smooth' });
+        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
     }
     scrollRight() {
-        if (!this.#container) {
+        if (!__classPrivateFieldGet(this, _OverflowController_container, "f")) {
             return;
         }
-        const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;
-        this.#container.scroll({ left: leftScroll, behavior: 'smooth' });
-        this.#setOverflowState();
+        const leftScroll = __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft + __classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth;
+        __classPrivateFieldGet(this, _OverflowController_container, "f").scroll({ left: leftScroll, behavior: 'smooth' });
+        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
     }
     update() {
-        this.#setOverflowState();
+        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
     }
     hostConnected() {
+        __classPrivateFieldGet(this, _OverflowController_mo, "f").observe(this.host, { attributes: false, childList: true, subtree: true });
+        __classPrivateFieldGet(this, _OverflowController_ro, "f").observe(this.host);
         this.onScroll();
-        this.#setOverflowState();
+        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
     }
 }
+_a = OverflowController, _OverflowController_container = new WeakMap(), _OverflowController_items = new WeakMap(), _OverflowController_scrollTimeoutDelay = new WeakMap(), _OverflowController_scrollTimeout = new WeakMap(), _OverflowController_hideOverflowButtons = new WeakMap(), _OverflowController_mo = new WeakMap(), _OverflowController_ro = new WeakMap(), _OverflowController_instances = new WeakSet(), _OverflowController_setOverflowState = function _OverflowController_setOverflowState() {
+    if (!this.firstItem || !this.lastItem || !__classPrivateFieldGet(this, _OverflowController_container, "f")) {
+        return;
+    }
+    const prevLeft = this.overflowLeft;
+    const prevRight = this.overflowRight;
+    this.overflowLeft = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f")
+        && !isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), this.firstItem);
+    this.overflowRight = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f")
+        && !isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), this.lastItem);
+    let scrollButtonsWidth = 0;
+    if (this.overflowLeft || this.overflowRight) {
+        scrollButtonsWidth =
+            (__classPrivateFieldGet(this, _OverflowController_container, "f").parentElement?.querySelector('button')?.getBoundingClientRect().width || 0)
+                * 2;
+    }
+    this.showScrollButtons = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f")
+        && __classPrivateFieldGet(this, _OverflowController_container, "f").scrollWidth > (__classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth + scrollButtonsWidth);
+    // only request update if there has been a change
+    if ((prevLeft !== this.overflowLeft) || (prevRight !== this.overflowRight)) {
+        this.host.requestUpdate();
+    }
+};
+_OverflowController_instances_1 = { value: new Set() };
+(() => {
+    // on resize check for overflows to add or remove scroll buttons
+    globalThis.addEventListener?.('resize', () => {
+        for (const instance of __classPrivateFieldGet(_a, _a, "f", _OverflowController_instances_1)) {
+            instance.onScroll();
+        }
+    }, { capture: false, passive: true });
+})();
 //# sourceMappingURL=overflow-controller.js.map

package/controllers/overflow-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-controller.js","sourceRoot":"","sources":["overflow-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nexport interface Options {\n  hideOverflowButtons?: boolean;\n}\n\nexport class OverflowController implements ReactiveController {\n  /** Overflow container */\n  #container?: HTMLElement;\n  /** Children that can overflow */\n  #items: HTMLElement[] = [];\n\n  #scrollTimeoutDelay = 0;\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  /** Default state */\n  #hideOverflowButtons = false;\n  showScrollButtons = false;\n  overflowLeft = false;\n  overflowRight = false;\n\n  get firstItem(): HTMLElement | undefined {\n    return this.#items.at(0);\n  }\n\n  get lastItem(): HTMLElement | undefined {\n    return this.#items.at(-1);\n  }\n\n  constructor(public host: ReactiveControllerHost & Element, private options?: Options) {\n    this.host.addController(this);\n    if (options?.hideOverflowButtons) {\n      this.#hideOverflowButtons = options?.hideOverflowButtons;\n    }\n  }\n\n  #setOverflowState(): void {\n    if (!this.firstItem || !this.lastItem || !this.#container) {\n      return;\n    }\n    this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);\n    this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);\n    let scrollButtonsWidth = 0;\n    if (this.overflowLeft || this.overflowRight) {\n      scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;\n    }\n    this.showScrollButtons = !this.#hideOverflowButtons &&\n    this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);\n    this.host.requestUpdate();\n  }\n\n  init(container: HTMLElement, items: HTMLElement[]) {\n    this.#container = container;\n    // convert HTMLCollection to HTMLElement[]\n    this.#items = items;\n  }\n\n  onScroll = () => {\n    clearTimeout(this.#scrollTimeout);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);\n  };\n\n  scrollLeft() {\n    if (!this.#container) {\n      return;\n    }\n    const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;\n    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n    this.#setOverflowState();\n  }\n\n  scrollRight() {\n    if (!this.#container) {\n      return;\n    }\n    const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;\n    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n    this.#setOverflowState();\n  }\n\n  update() {\n    this.#setOverflowState();\n  }\n\n  hostConnected(): void {\n    this.onScroll();\n    this.#setOverflowState();\n  }\n}\n"]}
+{"version":3,"file":"overflow-controller.js","sourceRoot":"","sources":["overflow-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nexport interface Options {\n  /**\n   * Force hide the scroll buttons regardless of overflow\n   */\n  hideOverflowButtons?: boolean;\n  /**\n   * Delay in ms to wait before checking for overflow\n   */\n  scrollTimeoutDelay?: number;\n}\n\nexport class OverflowController implements ReactiveController {\n  static #instances = new Set<OverflowController>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    globalThis.addEventListener?.('resize', () => {\n      for (const instance of this.#instances) {\n        instance.onScroll();\n      }\n    }, { capture: false, passive: true });\n  }\n\n  /** Overflow container */\n  #container?: HTMLElement;\n  /** Children that can overflow */\n  #items: HTMLElement[] = [];\n\n  #scrollTimeoutDelay: number;\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  /** Default state */\n  #hideOverflowButtons: boolean;\n\n  #mo = new MutationObserver(mutations => {\n    for (const mutation of mutations) {\n      if (mutation.type === 'childList') {\n        this.#setOverflowState();\n      }\n    }\n  });\n\n  #ro = new ResizeObserver(() => {\n    this.#setOverflowState();\n  });\n\n  showScrollButtons = false;\n  overflowLeft = false;\n  overflowRight = false;\n\n  get firstItem(): HTMLElement | undefined {\n    return this.#items.at(0);\n  }\n\n  get lastItem(): HTMLElement | undefined {\n    return this.#items.at(-1);\n  }\n\n  constructor(\n    // TODO: widen this type to ReactiveControllerHost\n    public host: ReactiveElement,\n    private options?: Options | undefined,\n  ) {\n    this.#hideOverflowButtons = options?.hideOverflowButtons ?? false;\n    this.#scrollTimeoutDelay = options?.scrollTimeoutDelay ?? 0;\n    if (host.isConnected) {\n      OverflowController.#instances.add(this);\n    }\n    host.addController(this);\n    if (host.isConnected) {\n      this.hostConnected();\n    }\n  }\n\n  #setOverflowState(): void {\n    if (!this.firstItem || !this.lastItem || !this.#container) {\n      return;\n    }\n    const prevLeft = this.overflowLeft;\n    const prevRight = this.overflowRight;\n\n    this.overflowLeft = !this.#hideOverflowButtons\n      && !isElementInView(this.#container, this.firstItem);\n    this.overflowRight = !this.#hideOverflowButtons\n      && !isElementInView(this.#container, this.lastItem);\n    let scrollButtonsWidth = 0;\n    if (this.overflowLeft || this.overflowRight) {\n      scrollButtonsWidth =\n        (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0)\n      * 2;\n    }\n    this.showScrollButtons = !this.#hideOverflowButtons\n    && this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);\n\n    // only request update if there has been a change\n    if ((prevLeft !== this.overflowLeft) || (prevRight !== this.overflowRight)) {\n      this.host.requestUpdate();\n    }\n  }\n\n  init(container: HTMLElement, items: HTMLElement[]): void {\n    this.#container = container;\n    // convert HTMLCollection to HTMLElement[]\n    this.#items = items;\n  }\n\n  onScroll = (): void => {\n    clearTimeout(this.#scrollTimeout);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);\n  };\n\n  scrollLeft(): void {\n    if (!this.#container) {\n      return;\n    }\n    const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;\n    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n    this.#setOverflowState();\n  }\n\n  scrollRight(): void {\n    if (!this.#container) {\n      return;\n    }\n    const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;\n    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n    this.#setOverflowState();\n  }\n\n  update(): void {\n    this.#setOverflowState();\n  }\n\n  hostConnected(): void {\n    this.#mo.observe(this.host, { attributes: false, childList: true, subtree: true });\n    this.#ro.observe(this.host);\n    this.onScroll();\n    this.#setOverflowState();\n  }\n}\n"]}

package/controllers/perf-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"perf-controller.js","sourceRoot":"","sources":["perf-controller.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,OAAO,cAAc;IAKzB,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QAJzC,gBAAW,GAAG,KAAK,CAAC;QAKlB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEzB,oEAAoE;QACpE,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC3C;aAAM,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAC3E,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;SAC9C;QAED,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,UAAU,CAAC,CAAC;IAC7C,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,OAAO,EAAE,CAAC;SAChB;IACH,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAExB,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC;QAE5C,yFAAyF;QACzF,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,kCAAkC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC;QAE5G,6DAA6D;QAC7D,WAAW,CAAC,OAAO,CACjB,GAAG,IAAI,CAAC,MAAM,+BAA+B,EAC7C,GAAG,IAAI,CAAC,MAAM,UAAU,EACxB,GAAG,IAAI,CAAC,MAAM,WAAW,CAC1B,CAAC;QAEF,wEAAwE;QACxE,yCAAyC;QACzC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;CACF","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { getRandomId } from '../functions/random.js';\n\nexport class PerfController implements ReactiveController {\n  hasMeasured = false;\n\n  markId: string;\n\n  constructor(private host: ReactiveElement) {\n    host.addController(this);\n\n    // Set up the mark ID based on existing ID on component if it exists\n    if (!host.id) {\n      this.markId = getRandomId(host.localName);\n    } else if (host.id.startsWith('pf-') && !host.id.startsWith(host.localName)) {\n      this.markId = host.id.replace('pf', host.localName);\n    } else {\n      this.markId = `${host.localName}-${host.id}`;\n    }\n\n    performance.mark(`${this.markId}-defined`);\n  }\n\n  hostUpdate() {\n    if (!this.hasMeasured) {\n      this.measure();\n    }\n  }\n\n  measure() {\n    this.hasMeasured = true;\n\n    performance.mark(`${this.markId}-rendered`);\n\n    // Navigation start, i.e., the browser first sees that the user has navigated to the page\n    performance.measure(`${this.markId}-from-navigation-to-first-render`, undefined, `${this.markId}-rendered`);\n\n    // Render is run before connection unless delayRender is used\n    performance.measure(\n      `${this.markId}-from-defined-to-first-render`,\n      `${this.markId}-defined`,\n      `${this.markId}-rendered`\n    );\n\n    // Once we've measured time to render, we no longer need the controller,\n    // so we allow it to be garbage-collected\n    this.host.removeController(this);\n  }\n}\n"]}
+{"version":3,"file":"perf-controller.js","sourceRoot":"","sources":["perf-controller.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,OAAO,cAAc;IAKzB,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QAJzC,gBAAW,GAAG,KAAK,CAAC;QAKlB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEzB,oEAAoE;QACpE,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACb,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5C,CAAC;aAAM,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;YAC5E,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;QAC/C,CAAC;QAED,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,UAAU,CAAC,CAAC;IAC7C,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAExB,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC;QAE5C,yFAAyF;QACzF,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,kCAAkC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC;QAE5G,6DAA6D;QAC7D,WAAW,CAAC,OAAO,CACjB,GAAG,IAAI,CAAC,MAAM,+BAA+B,EAC7C,GAAG,IAAI,CAAC,MAAM,UAAU,EACxB,GAAG,IAAI,CAAC,MAAM,WAAW,CAC1B,CAAC;QAEF,wEAAwE;QACxE,yCAAyC;QACzC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;CACF","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { getRandomId } from '../functions/random.js';\n\nexport class PerfController implements ReactiveController {\n  hasMeasured = false;\n\n  markId: string;\n\n  constructor(private host: ReactiveElement) {\n    host.addController(this);\n\n    // Set up the mark ID based on existing ID on component if it exists\n    if (!host.id) {\n      this.markId = getRandomId(host.localName);\n    } else if (host.id.startsWith('pf-') && !host.id.startsWith(host.localName)) {\n      this.markId = host.id.replace('pf', host.localName);\n    } else {\n      this.markId = `${host.localName}-${host.id}`;\n    }\n\n    performance.mark(`${this.markId}-defined`);\n  }\n\n  hostUpdate(): void {\n    if (!this.hasMeasured) {\n      this.measure();\n    }\n  }\n\n  measure(): void {\n    this.hasMeasured = true;\n\n    performance.mark(`${this.markId}-rendered`);\n\n    // Navigation start, i.e., the browser first sees that the user has navigated to the page\n    performance.measure(`${this.markId}-from-navigation-to-first-render`, undefined, `${this.markId}-rendered`);\n\n    // Render is run before connection unless delayRender is used\n    performance.measure(\n      `${this.markId}-from-defined-to-first-render`,\n      `${this.markId}-defined`,\n      `${this.markId}-rendered`\n    );\n\n    // Once we've measured time to render, we no longer need the controller,\n    // so we allow it to be garbage-collected\n    this.host.removeController(this);\n  }\n}\n"]}

package/controllers/property-observer-controller.d.ts

@@ -1,20 +1,17 @@
 import type { ReactiveController, ReactiveElement } from 'lit';
-export declare const observedController: unique symbol;
-export type ChangeCallback<T = ReactiveElement> = (this: T, old?: T[keyof T], newV?: T[keyof T]) => void;
-export type ChangeCallbackName = `_${string}Changed`;
-export type PropertyObserverHost<T> = T & Record<ChangeCallbackName, ChangeCallback<T>> & {
-    [observedController]: PropertyObserverController;
-};
-/** This controller holds a cache of observed property values which were set before the element updated */
-export declare class PropertyObserverController implements ReactiveController {
+export type ChangeCallback<T extends ReactiveElement, V = T[keyof T]> = (this: T, old?: V, newV?: V) => void;
+export interface PropertyObserverOptions<T extends ReactiveElement> {
+    propertyName: string & keyof T;
+    callback: ChangeCallback<T>;
+    waitFor?: 'connected' | 'updated' | 'firstUpdated';
+}
+export declare class PropertyObserverController<T extends ReactiveElement> implements ReactiveController {
+    #private;
     private host;
-    private static hosts;
-    private values;
-    private delete;
-    constructor(host: ReactiveElement);
+    private options;
+    private oldVal;
+    constructor(host: T, options: PropertyObserverOptions<T>);
+    hostConnected(): void;
     /** Set any cached valued accumulated between constructor and connectedCallback */
-    hostUpdate(): void;
-    /** Once the element has updated, we no longer need this controller, so we remove it */
-    hostUpdated(): void;
-    cache(key: string, methodName: string, ...vals: [unknown, unknown]): void;
+    hostUpdate(): Promise<void>;
 }

package/controllers/property-observer-controller.js

@@ -1,34 +1,62 @@
-export const observedController = Symbol('observed properties controller');
-/** This controller holds a cache of observed property values which were set before the element updated */
-class PropertyObserverController {
-    static { this.hosts = new WeakMap(); }
-    delete(key) {
-        this.values.delete(key);
-    }
-    constructor(host) {
+var _PropertyObserverController_instances, _PropertyObserverController_neverRan, _PropertyObserverController_init;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+import { notEqual } from 'lit';
+const UNINITIALIZED = Symbol('uninitialized');
+export class PropertyObserverController {
+    constructor(host, options) {
+        _PropertyObserverController_instances.add(this);
         this.host = host;
-        this.values = new Map();
-        if (PropertyObserverController.hosts.get(host)) {
-            return PropertyObserverController.hosts.get(host);
-        }
-        host.addController(this);
-        host[observedController] = this;
+        this.options = options;
+        this.oldVal = UNINITIALIZED;
+        _PropertyObserverController_neverRan.set(this, true);
+    }
+    hostConnected() {
+        __classPrivateFieldGet(this, _PropertyObserverController_instances, "m", _PropertyObserverController_init).call(this);
     }
     /** Set any cached valued accumulated between constructor and connectedCallback */
-    hostUpdate() {
-        for (const [key, [methodName, [oldVal, newVal]]] of this.values) {
-            // @ts-expect-error: be cool, typescript
-            this.host[methodName]?.(oldVal, newVal);
-            this.delete(key);
+    async hostUpdate() {
+        __classPrivateFieldGet(this, _PropertyObserverController_instances, "m", _PropertyObserverController_init).call(this);
+        const { oldVal, options: { waitFor, propertyName, callback } } = this;
+        if (!callback) {
+            throw new Error(`no callback for ${propertyName}`);
+        }
+        const newVal = this.host[propertyName];
+        this.oldVal = newVal;
+        if (newVal !== oldVal) {
+            switch (waitFor) {
+                case 'connected':
+                    if (!this.host.isConnected) {
+                        const origConnected = this.host.connectedCallback;
+                        await new Promise(resolve => {
+                            this.host.connectedCallback = function () {
+                                resolve(origConnected?.call(this));
+                            };
+                        });
+                    }
+                    break;
+                case 'firstUpdated':
+                    if (!this.host.hasUpdated) {
+                        await this.host.updateComplete;
+                    }
+                    break;
+                case 'updated':
+                    await this.host.updateComplete;
+                    break;
+            }
+        }
+        const Class = this.host.constructor;
+        const hasChanged = Class
+            .getPropertyOptions(this.options.propertyName)
+            .hasChanged ?? notEqual;
+        if (__classPrivateFieldGet(this, _PropertyObserverController_neverRan, "f") || hasChanged(oldVal, newVal)) {
+            callback.call(this.host, oldVal, newVal);
+            __classPrivateFieldSet(this, _PropertyObserverController_neverRan, false, "f");
         }
-    }
-    /** Once the element has updated, we no longer need this controller, so we remove it */
-    hostUpdated() {
-        this.host.removeController(this);
-    }
-    cache(key, methodName, ...vals) {
-        this.values.set(key, [methodName, vals]);
     }
 }
-export { PropertyObserverController };
+_PropertyObserverController_neverRan = new WeakMap(), _PropertyObserverController_instances = new WeakSet(), _PropertyObserverController_init = function _PropertyObserverController_init() {
+    if (this.oldVal === UNINITIALIZED) {
+        this.oldVal = this.host[this.options.propertyName];
+    }
+};
 //# sourceMappingURL=property-observer-controller.js.map

package/controllers/property-observer-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-observer-controller.js","sourceRoot":"","sources":["property-observer-controller.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,gCAAgC,CAAC,CAAC;AAc3E,0GAA0G;AAC1G,MAAa,0BAA0B;aACtB,UAAK,GAAqD,IAAI,OAAO,EAAE,AAAlE,CAAmE;IAI/E,MAAM,CAAC,GAAW;QACxB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QANjC,WAAM,GAAG,IAAI,GAAG,EAA4D,CAAC;QAOnF,IAAI,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9C,OAAO,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAA+B,CAAC;SACjF;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAA8C,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;IAC7E,CAAC;IAED,kFAAkF;IAClF,UAAU;QACR,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;YAC/D,wCAAwC;YACxC,IAAI,CAAC,IAAI,CAAC,UAAmC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACjE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC;IAED,uFAAuF;IACvF,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,KAAK,CAAC,GAAW,EAAE,UAAkB,EAAE,GAAG,IAAwB;QAChE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3C,CAAC;;SAjCU,0BAA0B","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const observedController = Symbol('observed properties controller');\n\nexport type ChangeCallback<T = ReactiveElement> = (\n  this: T,\n  old?: T[keyof T],\n  newV?: T[keyof T],\n) => void;\n\nexport type ChangeCallbackName = `_${string}Changed`;\n\nexport type PropertyObserverHost<T> = T & Record<ChangeCallbackName, ChangeCallback<T>> & {\n  [observedController]: PropertyObserverController;\n}\n\n/** This controller holds a cache of observed property values which were set before the element updated */\nexport class PropertyObserverController implements ReactiveController {\n  private static hosts: WeakMap<HTMLElement, PropertyObserverController> = new WeakMap();\n\n  private values = new Map<string, [methodName: string, values: [unknown, unknown]]>();\n\n  private delete(key: string) {\n    this.values.delete(key);\n  }\n\n  constructor(private host: ReactiveElement) {\n    if (PropertyObserverController.hosts.get(host)) {\n      return PropertyObserverController.hosts.get(host) as PropertyObserverController;\n    }\n    host.addController(this);\n    (host as PropertyObserverHost<ReactiveElement>)[observedController] = this;\n  }\n\n  /** Set any cached valued accumulated between constructor and connectedCallback */\n  hostUpdate() {\n    for (const [key, [methodName, [oldVal, newVal]]] of this.values) {\n      // @ts-expect-error: be cool, typescript\n      this.host[methodName as keyof ReactiveElement]?.(oldVal, newVal);\n      this.delete(key);\n    }\n  }\n\n  /** Once the element has updated, we no longer need this controller, so we remove it */\n  hostUpdated() {\n    this.host.removeController(this);\n  }\n\n  cache(key: string, methodName: string, ...vals: [unknown, unknown]) {\n    this.values.set(key, [methodName, vals]);\n  }\n}\n"]}
+{"version":3,"file":"property-observer-controller.js","sourceRoot":"","sources":["property-observer-controller.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAc/B,MAAM,aAAa,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;AAE9C,MAAM,OAAO,0BAA0B;IAKrC,YACU,IAAO,EACP,OAAmC;;QADnC,SAAI,GAAJ,IAAI,CAAG;QACP,YAAO,GAAP,OAAO,CAA4B;QAJrC,WAAM,GAAe,aAA2B,CAAC;QAQzD,+CAAY,IAAI,EAAC;IAFjB,CAAC;IAID,aAAa;QACX,uBAAA,IAAI,+EAAM,MAAV,IAAI,CAAQ,CAAC;IACf,CAAC;IAiBD,kFAAkF;IAClF,KAAK,CAAC,UAAU;QACd,uBAAA,IAAI,+EAAM,MAAV,IAAI,CAAQ,CAAC;QACb,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,GAAG,IAAI,CAAC;QACtE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,MAAM,IAAI,KAAK,CAAC,mBAAmB,YAAY,EAAE,CAAC,CAAC;QACrD,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,QAAQ,OAAO,EAAE,CAAC;gBAChB,KAAK,WAAW;oBACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;wBAC3B,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;wBAClD,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;4BAChC,IAAI,CAAC,IAAI,CAAC,iBAAiB,GAAG;gCAC5B,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;4BACrC,CAAC,CAAC;wBACJ,CAAC,CAAC,CAAC;oBACL,CAAC;oBACD,MAAM;gBACR,KAAK,cAAc;oBACjB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;wBAC1B,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;oBACjC,CAAC;oBACD,MAAM;gBACR,KAAK,SAAS;oBACZ,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;oBAC/B,MAAM;YACV,CAAC;QACH,CAAC;QACD,MAAM,KAAK,GAAI,IAAI,CAAC,IAAI,CAAC,WAAsC,CAAC;QAChE,MAAM,UAAU,GAAG,KAAK;aACnB,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;aAC7C,UAAU,IAAI,QAAQ,CAAC;QAC5B,IAAI,uBAAA,IAAI,4CAAU,IAAI,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;YACjD,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,MAAoB,EAAE,MAAM,CAAC,CAAC;YACvD,uBAAA,IAAI,wCAAa,KAAK,MAAA,CAAC;QACzB,CAAC;IACH,CAAC;CACF;;IA7CG,IAAI,IAAI,CAAC,MAAM,KAAK,aAAa,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IACrD,CAAC;AACH,CAAC","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { notEqual } from 'lit';\n\nexport type ChangeCallback<T extends ReactiveElement, V = T[keyof T]> = (\n  this: T,\n  old?: V,\n  newV?: V,\n) => void;\n\nexport interface PropertyObserverOptions<T extends ReactiveElement> {\n  propertyName: string & keyof T;\n  callback: ChangeCallback<T>;\n  waitFor?: 'connected' | 'updated' | 'firstUpdated';\n}\n\nconst UNINITIALIZED = Symbol('uninitialized');\n\nexport class PropertyObserverController<\n  T extends ReactiveElement\n> implements ReactiveController {\n  private oldVal: T[keyof T] = UNINITIALIZED as T[keyof T];\n\n  constructor(\n    private host: T,\n    private options: PropertyObserverOptions<T>\n  ) {\n  }\n\n  #neverRan = true;\n\n  hostConnected(): void {\n    this.#init();\n  }\n\n  /**\n   * Because of how typescript transpiles private fields,\n   * the __accessPrivate helper might not be entirely initialized\n   * by the time this constructor runs (in `addInitializer`'s instance callback')\n   * Therefore, we pull this shtick.\n   *\n   * When browser support improves to the point we can ship decorated private fields,\n   * we'll be able to get rid of this.\n   */\n  #init() {\n    if (this.oldVal === UNINITIALIZED) {\n      this.oldVal = this.host[this.options.propertyName];\n    }\n  }\n\n  /** Set any cached valued accumulated between constructor and connectedCallback */\n  async hostUpdate(): Promise<void> {\n    this.#init();\n    const { oldVal, options: { waitFor, propertyName, callback } } = this;\n    if (!callback) {\n      throw new Error(`no callback for ${propertyName}`);\n    }\n    const newVal = this.host[propertyName];\n    this.oldVal = newVal;\n    if (newVal !== oldVal) {\n      switch (waitFor) {\n        case 'connected':\n          if (!this.host.isConnected) {\n            const origConnected = this.host.connectedCallback;\n            await new Promise<void>(resolve => {\n              this.host.connectedCallback = function() {\n                resolve(origConnected?.call(this));\n              };\n            });\n          }\n          break;\n        case 'firstUpdated':\n          if (!this.host.hasUpdated) {\n            await this.host.updateComplete;\n          }\n          break;\n        case 'updated':\n          await this.host.updateComplete;\n          break;\n      }\n    }\n    const Class = (this.host.constructor as typeof ReactiveElement);\n    const hasChanged = Class\n        .getPropertyOptions(this.options.propertyName)\n        .hasChanged ?? notEqual;\n    if (this.#neverRan || hasChanged(oldVal, newVal)) {\n      callback.call(this.host, oldVal as T[keyof T], newVal);\n      this.#neverRan = false;\n    }\n  }\n}\n"]}