@patternfly/pfe-core 2.4.0 → 3.0.0

package/controllers/overflow-controller.js

@@ -1,80 +1,111 @@
+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
+    window.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    window.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,\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 && !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\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[]) {\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.#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() {\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"]}

package/controllers/property-observer-controller.js

@@ -1,7 +1,6 @@
 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(); }
+export class PropertyObserverController {
     delete(key) {
         this.values.delete(key);
     }
@@ -30,5 +29,5 @@ class PropertyObserverController {
         this.values.set(key, [methodName, vals]);
     }
 }
-export { PropertyObserverController };
+PropertyObserverController.hosts = new WeakMap();
 //# 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,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,gCAAgC,CAAC,CAAC;AAc3E,0GAA0G;AAC1G,MAAM,OAAO,0BAA0B;IAK7B,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,CAAC;YAC/C,OAAO,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAA+B,CAAC;QAClF,CAAC;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,CAAC;YAChE,wCAAwC;YACxC,IAAI,CAAC,IAAI,CAAC,UAAmC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACjE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;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;;AAhCc,gCAAK,GAAqD,IAAI,OAAO,EAAE,AAAlE,CAAmE","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"]}

package/controllers/roving-tabindex-controller.d.ts

@@ -1,55 +1,73 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface RovingTabindexControllerOptions<Item extends HTMLElement> {
+    /** @deprecated use getHTMLElement */
+    getElement?: () => Element | null;
+    getHTMLElement?: () => HTMLElement | null;
+    getItems?: () => Item[];
+    getItemContainer?: () => HTMLElement;
+}
 /**
  * Implements roving tabindex, as described in WAI-ARIA practices, [Managing Focus Within
- * Components Using a Roving
- * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)
+ * Components Using a Roving tabindex][rti]
+ *
+ * [rti]: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
  */
-export declare class RovingTabindexController<ItemType extends HTMLElement = HTMLElement> implements ReactiveController {
+export declare class RovingTabindexController<Item extends HTMLElement = HTMLElement> implements ReactiveController {
     #private;
-    host: ReactiveControllerHost & HTMLElement;
+    host: ReactiveControllerHost;
+    private static hosts;
+    static of<Item extends HTMLElement>(host: ReactiveControllerHost, options: RovingTabindexControllerOptions<Item> & {
+        getItems(): Item[];
+    }): RovingTabindexController<Item>;
+    /** @internal */
+    static elements: WeakMap<Element, RovingTabindexController<HTMLElement>>;
     /**
      * active item of array of items
      */
-    get activeItem(): ItemType | undefined;
+    get activeItem(): Item | undefined;
+    /**
+     * all items from array
+     */
+    get items(): Item[];
+    /**
+     * all focusable items from array
+     */
+    get focusableItems(): Item[];
     /**
      * first item in array of focusable items
      */
-    get firstItem(): ItemType | undefined;
+    get firstItem(): Item | undefined;
     /**
      * last item in array of focusable items
      */
-    get lastItem(): ItemType | undefined;
+    get lastItem(): Item | undefined;
     /**
      * next item  after active item in array of focusable items
      */
-    get nextItem(): ItemType | undefined;
+    get nextItem(): Item | undefined;
     /**
      * previous item  after active item in array of focusable items
      */
-    get prevItem(): ItemType | undefined;
-    constructor(host: ReactiveControllerHost & HTMLElement);
+    get prevItem(): Item | undefined;
+    constructor(host: ReactiveControllerHost, options?: RovingTabindexControllerOptions<Item>);
+    hostUpdated(): void;
     /**
-     * sets tabindex of item based on whether or not it is active
+     * removes event listeners from items container
      */
-    updateActiveItem(item?: ItemType): void;
+    hostDisconnected(): void;
     /**
-     * focuses on an item and sets it as active
+     * Sets the active item and focuses it
      */
-    focusOnItem(item?: ItemType): void;
+    setActiveItem(item?: Item): void;
     /**
      * Focuses next focusable item
      */
-    updateItems(items: ItemType[]): void;
+    updateItems(items?: Item[]): void;
+    /** @deprecated use setActiveItem */
+    focusOnItem(item?: Item): void;
     /**
      * from array of HTML items, and sets active items
+     * @deprecated: use getItems and getItemContainer option functions
      */
-    initItems(items: ItemType[], itemsContainer?: HTMLElement): void;
-    /**
-     * adds event listeners to items container
-     */
-    hostConnected(): void;
-    /**
-     * removes event listeners from items container
-     */
-    hostDisconnected(): void;
+    initItems(items: Item[], itemsContainer?: Element): void;
 }