@internetarchive/modal-manager 0.3.4 → 1.0.0

package/dist/src/shoelace/active-elements.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export declare function activeElements(activeElement?: Element | null): Generator<Element>;
+export declare function getDeepestActiveElement(): Element | undefined;

package/dist/src/shoelace/active-elements.js

@@ -0,0 +1,27 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export function* activeElements(activeElement = document.activeElement) {
+    if (activeElement === null || activeElement === undefined)
+        return;
+    yield activeElement;
+    if ('shadowRoot' in activeElement &&
+        activeElement.shadowRoot &&
+        activeElement.shadowRoot.mode !== 'closed') {
+        yield* activeElements(activeElement.shadowRoot.activeElement);
+    }
+}
+export function getDeepestActiveElement() {
+    return [...activeElements()].pop();
+}
+//# sourceMappingURL=active-elements.js.map

package/dist/src/shoelace/active-elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-elements.js","sourceRoot":"","sources":["../../../src/shoelace/active-elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,SAAS,CAAC,CAAC,cAAc,CAC7B,gBAAgC,QAAQ,CAAC,aAAa;IAEtD,IAAI,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO;IAElE,MAAM,aAAa,CAAC;IAEpB,IACE,YAAY,IAAI,aAAa;QAC7B,aAAa,CAAC,UAAU;QACxB,aAAa,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAC1C;QACA,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;KAC/D;AACH,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,OAAO,CAAC,GAAG,cAAc,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC;AACrC,CAAC","sourcesContent":["/**\n * Use a generator so we can iterate and possibly break early.\n * @example\n *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.\n *   const allActiveElements = [...activeElements()]\n *\n *   // Early return\n *   for (const activeElement of activeElements()) {\n *     if (<cond>) {\n *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!\n *     }\n *   }\n */\nexport function* activeElements(\n  activeElement: Element | null = document.activeElement\n): Generator<Element> {\n  if (activeElement === null || activeElement === undefined) return;\n\n  yield activeElement;\n\n  if (\n    'shadowRoot' in activeElement &&\n    activeElement.shadowRoot &&\n    activeElement.shadowRoot.mode !== 'closed'\n  ) {\n    yield* activeElements(activeElement.shadowRoot.activeElement);\n  }\n}\n\nexport function getDeepestActiveElement() {\n  return [...activeElements()].pop();\n}\n"]}

package/dist/src/shoelace/modal.d.ts

@@ -0,0 +1,24 @@
+export default class Modal {
+    element: HTMLElement;
+    isExternalActivated: boolean;
+    tabDirection: 'forward' | 'backward';
+    currentFocus: HTMLElement | null;
+    previousFocus: HTMLElement | null;
+    elementsWithTabbableControls: string[];
+    constructor(element: HTMLElement);
+    /** Activates focus trapping. */
+    activate(): void;
+    /** Deactivates focus trapping. */
+    deactivate(): void;
+    /** Determines if this modal element is currently active or not. */
+    isActive(): boolean;
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal(): void;
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal(): void;
+    private checkFocus;
+    private handleFocusIn;
+    private possiblyHasTabbableChildren;
+    private handleKeyDown;
+    private handleKeyUp;
+}

package/dist/src/shoelace/modal.js

@@ -0,0 +1,131 @@
+import { activeElements, getDeepestActiveElement } from './active-elements.js';
+import { getTabbableElements } from './tabbable.js';
+let activeModals = [];
+export default class Modal {
+    constructor(element) {
+        this.isExternalActivated = false;
+        this.tabDirection = 'forward';
+        this.currentFocus = null;
+        this.previousFocus = null;
+        this.handleFocusIn = () => {
+            if (!this.isActive())
+                return;
+            this.checkFocus();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (event.key !== 'Tab' || this.isExternalActivated)
+                return;
+            if (!this.isActive())
+                return;
+            // Because sometimes focus can actually be taken over from outside sources,
+            // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and
+            // recurse through shadowRoots.
+            const currentActiveElement = getDeepestActiveElement();
+            this.previousFocus = currentActiveElement;
+            if (this.previousFocus &&
+                this.possiblyHasTabbableChildren(this.previousFocus)) {
+                return;
+            }
+            if (event.shiftKey) {
+                this.tabDirection = 'backward';
+            }
+            else {
+                this.tabDirection = 'forward';
+            }
+            const tabbableElements = getTabbableElements(this.element);
+            let currentFocusIndex = tabbableElements.findIndex(el => el === currentActiveElement);
+            this.previousFocus = this.currentFocus;
+            const addition = this.tabDirection === 'forward' ? 1 : -1;
+            // eslint-disable-next-line
+            while (true) {
+                if (currentFocusIndex + addition >= tabbableElements.length) {
+                    currentFocusIndex = 0;
+                }
+                else if (currentFocusIndex + addition < 0) {
+                    currentFocusIndex = tabbableElements.length - 1;
+                }
+                else {
+                    currentFocusIndex += addition;
+                }
+                this.previousFocus = this.currentFocus;
+                const nextFocus = 
+                /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];
+                // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element
+                // that possibly has "controls"
+                if (this.tabDirection === 'backward') {
+                    if (this.previousFocus &&
+                        this.possiblyHasTabbableChildren(this.previousFocus)) {
+                        return;
+                    }
+                }
+                if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
+                    return;
+                }
+                event.preventDefault();
+                this.currentFocus = nextFocus;
+                (_a = this.currentFocus) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: false });
+                // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.
+                const allActiveElements = [...activeElements()];
+                if (allActiveElements.includes(this.currentFocus) ||
+                    !allActiveElements.includes(this.previousFocus)) {
+                    break;
+                }
+            }
+            setTimeout(() => this.checkFocus());
+        };
+        this.handleKeyUp = () => {
+            this.tabDirection = 'forward';
+        };
+        this.element = element;
+        this.elementsWithTabbableControls = ['iframe'];
+    }
+    /** Activates focus trapping. */
+    activate() {
+        activeModals.push(this.element);
+        document.addEventListener('focusin', this.handleFocusIn);
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keyup', this.handleKeyUp);
+    }
+    /** Deactivates focus trapping. */
+    deactivate() {
+        activeModals = activeModals.filter(modal => modal !== this.element);
+        this.currentFocus = null;
+        document.removeEventListener('focusin', this.handleFocusIn);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keyup', this.handleKeyUp);
+    }
+    /** Determines if this modal element is currently active or not. */
+    isActive() {
+        // The "active" modal is always the most recent one shown
+        return activeModals[activeModals.length - 1] === this.element;
+    }
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal() {
+        this.isExternalActivated = true;
+    }
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal() {
+        this.isExternalActivated = false;
+    }
+    checkFocus() {
+        if (this.isActive() && !this.isExternalActivated) {
+            const tabbableElements = getTabbableElements(this.element);
+            if (!this.element.matches(':focus-within')) {
+                const start = tabbableElements[0];
+                const end = tabbableElements[tabbableElements.length - 1];
+                const target = this.tabDirection === 'forward' ? start : end;
+                if (typeof (target === null || target === void 0 ? void 0 : target.focus) === 'function') {
+                    this.currentFocus = target;
+                    target.focus({ preventScroll: false });
+                }
+            }
+        }
+    }
+    possiblyHasTabbableChildren(element) {
+        return (this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute('controls')
+        // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?
+        );
+    }
+}
+//# sourceMappingURL=modal.js.map

package/dist/src/shoelace/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/shoelace/modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { activeElements, getDeepestActiveElement } from './active-elements.js';\nimport { getTabbableElements } from './tabbable.js';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  isExternalActivated: boolean = false;\n  tabDirection: 'forward' | 'backward' = 'forward';\n  currentFocus: HTMLElement | null = null;\n  previousFocus: HTMLElement | null = null;\n  elementsWithTabbableControls: string[];\n\n  constructor(element: HTMLElement) {\n    this.element = element;\n\n    this.elementsWithTabbableControls = ['iframe'];\n  }\n\n  /** Activates focus trapping. */\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n    document.addEventListener('keydown', this.handleKeyDown);\n    document.addEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Deactivates focus trapping. */\n  deactivate() {\n    activeModals = activeModals.filter(modal => modal !== this.element);\n    this.currentFocus = null;\n    document.removeEventListener('focusin', this.handleFocusIn);\n    document.removeEventListener('keydown', this.handleKeyDown);\n    document.removeEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Determines if this modal element is currently active or not. */\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  /** Activates external modal behavior and temporarily disables focus trapping. */\n  activateExternal() {\n    this.isExternalActivated = true;\n  }\n\n  /** Deactivates external modal behavior and re-enables focus trapping. */\n  deactivateExternal() {\n    this.isExternalActivated = false;\n  }\n\n  private checkFocus() {\n    if (this.isActive() && !this.isExternalActivated) {\n      const tabbableElements = getTabbableElements(this.element);\n      if (!this.element.matches(':focus-within')) {\n        const start = tabbableElements[0];\n        const end = tabbableElements[tabbableElements.length - 1];\n        const target = this.tabDirection === 'forward' ? start : end;\n\n        if (typeof target?.focus === 'function') {\n          this.currentFocus = target;\n          target.focus({ preventScroll: false });\n        }\n      }\n    }\n  }\n\n  private handleFocusIn = () => {\n    if (!this.isActive()) return;\n    this.checkFocus();\n  };\n\n  private possiblyHasTabbableChildren(element: HTMLElement) {\n    return (\n      this.elementsWithTabbableControls.includes(\n        element.tagName.toLowerCase()\n      ) || element.hasAttribute('controls')\n      // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Tab' || this.isExternalActivated) return;\n    if (!this.isActive()) return;\n\n    // Because sometimes focus can actually be taken over from outside sources,\n    // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and\n    // recurse through shadowRoots.\n    const currentActiveElement = getDeepestActiveElement();\n    this.previousFocus = currentActiveElement as HTMLElement | null;\n\n    if (\n      this.previousFocus &&\n      this.possiblyHasTabbableChildren(this.previousFocus)\n    ) {\n      return;\n    }\n\n    if (event.shiftKey) {\n      this.tabDirection = 'backward';\n    } else {\n      this.tabDirection = 'forward';\n    }\n\n    const tabbableElements = getTabbableElements(this.element);\n\n    let currentFocusIndex = tabbableElements.findIndex(\n      el => el === currentActiveElement\n    );\n\n    this.previousFocus = this.currentFocus;\n\n    const addition = this.tabDirection === 'forward' ? 1 : -1;\n\n    // eslint-disable-next-line\n    while (true) {\n      if (currentFocusIndex + addition >= tabbableElements.length) {\n        currentFocusIndex = 0;\n      } else if (currentFocusIndex + addition < 0) {\n        currentFocusIndex = tabbableElements.length - 1;\n      } else {\n        currentFocusIndex += addition;\n      }\n\n      this.previousFocus = this.currentFocus;\n      const nextFocus =\n        /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];\n\n      // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element\n      // that possibly has \"controls\"\n      if (this.tabDirection === 'backward') {\n        if (\n          this.previousFocus &&\n          this.possiblyHasTabbableChildren(this.previousFocus)\n        ) {\n          return;\n        }\n      }\n\n      if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {\n        return;\n      }\n\n      event.preventDefault();\n      this.currentFocus = nextFocus;\n      this.currentFocus?.focus({ preventScroll: false });\n\n      // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.\n      const allActiveElements = [...activeElements()];\n      if (\n        allActiveElements.includes(this.currentFocus) ||\n        !allActiveElements.includes(this.previousFocus!)\n      ) {\n        break;\n      }\n    }\n\n    setTimeout(() => this.checkFocus());\n  };\n\n  private handleKeyUp = () => {\n    this.tabDirection = 'forward';\n  };\n}\n"]}

package/dist/src/shoelace/tabbable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement;
+    end: HTMLElement;
+};
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];

package/dist/src/shoelace/tabbable.js

@@ -0,0 +1,169 @@
+// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
+// computedStyle calls are "live" so they only need to be retrieved once for an element.
+const computedStyleMap = new WeakMap();
+function getCachedComputedStyle(el) {
+    let computedStyle = computedStyleMap.get(el);
+    if (!computedStyle) {
+        computedStyle = window.getComputedStyle(el, null);
+        computedStyleMap.set(el, computedStyle);
+    }
+    return computedStyle;
+}
+function isVisible(el) {
+    // This is the fastest check, but isn't supported in Safari.
+    if ('checkVisibility' in el && typeof el['checkVisibility'] === 'function') {
+        // Opacity is focusable, visibility is not.
+        /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+        return el['checkVisibility']({
+            checkOpacity: false,
+            checkVisibilityCSS: true,
+        });
+    }
+    // Fallback "polyfill" for "checkVisibility"
+    const computedStyle = getCachedComputedStyle(el);
+    return (computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none');
+}
+// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable
+// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most
+// accessible way of handling overflow areas. [Konnor]
+function isOverflowingAndTabbable(el) {
+    const computedStyle = getCachedComputedStyle(el);
+    const { overflowY, overflowX } = computedStyle;
+    if (overflowY === 'scroll' || overflowX === 'scroll') {
+        return true;
+    }
+    if (overflowY !== 'auto' || overflowX !== 'auto') {
+        return false;
+    }
+    // Always overflow === "auto" by this point
+    const isOverflowingY = el.scrollHeight > el.clientHeight;
+    if (isOverflowingY && overflowY === 'auto') {
+        return true;
+    }
+    const isOverflowingX = el.scrollWidth > el.clientWidth;
+    if (isOverflowingX && overflowX === 'auto') {
+        return true;
+    }
+    return false;
+}
+/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
+function isTabbable(el) {
+    const tag = el.tagName.toLowerCase();
+    const tabindex = Number(el.getAttribute('tabindex'));
+    const hasTabindex = el.hasAttribute('tabindex');
+    // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable
+    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+        return false;
+    }
+    // Elements with a disabled attribute are not tabbable
+    if (el.hasAttribute('disabled')) {
+        return false;
+    }
+    // If any parents have "inert", we aren't "tabbable"
+    if (el.closest('[inert]')) {
+        return false;
+    }
+    // Radios without a checked attribute are not tabbable
+    if (tag === 'input' &&
+        el.getAttribute('type') === 'radio' &&
+        !el.hasAttribute('checked')) {
+        return false;
+    }
+    if (!isVisible(el)) {
+        return false;
+    }
+    // Audio and video elements with the controls attribute are tabbable
+    if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
+        return true;
+    }
+    // Elements with a tabindex other than -1 are tabbable
+    if (el.hasAttribute('tabindex')) {
+        return true;
+    }
+    // Elements with a contenteditable attribute are tabbable
+    if (el.hasAttribute('contenteditable') &&
+        el.getAttribute('contenteditable') !== 'false') {
+        return true;
+    }
+    // At this point, the following elements are considered tabbable
+    const isNativelyTabbable = [
+        'button',
+        'input',
+        'select',
+        'textarea',
+        'a',
+        'audio',
+        'video',
+        'summary',
+        'iframe',
+    ].includes(tag);
+    if (isNativelyTabbable) {
+        return true;
+    }
+    // We save the overflow checks for last, because they're the most expensive
+    return isOverflowingAndTabbable(el);
+}
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export function getTabbableBoundary(root) {
+    var _a, _b;
+    const tabbableElements = getTabbableElements(root);
+    // Find the first and last tabbable elements
+    const start = (_a = tabbableElements[0]) !== null && _a !== void 0 ? _a : null;
+    const end = (_b = tabbableElements[tabbableElements.length - 1]) !== null && _b !== void 0 ? _b : null;
+    return { start, end };
+}
+/**
+ * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
+ * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
+ * This fixes that fun edge case.
+ */
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+    var _a;
+    return (((_a = slotElement.getRootNode({ composed: true })) === null || _a === void 0 ? void 0 : _a.host) !==
+        root);
+}
+export function getTabbableElements(root) {
+    const walkedEls = new WeakMap();
+    const tabbableElements = [];
+    function walk(el) {
+        if (el instanceof Element) {
+            // if the element has "inert" we can just no-op it.
+            if (el.hasAttribute('inert') || el.closest('[inert]')) {
+                return;
+            }
+            if (walkedEls.has(el)) {
+                return;
+            }
+            walkedEls.set(el, true);
+            if (!tabbableElements.includes(el) && isTabbable(el)) {
+                tabbableElements.push(el);
+            }
+            if (el instanceof HTMLSlotElement &&
+                getSlottedChildrenOutsideRootElement(el, root)) {
+                el.assignedElements({ flatten: true }).forEach((assignedEl) => {
+                    walk(assignedEl);
+                });
+            }
+            if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
+                walk(el.shadowRoot);
+            }
+        }
+        for (const e of Array.from(el.children)) {
+            walk(e);
+        }
+    }
+    // Collect all elements including the root
+    walk(root);
+    // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
+    // So is it worth being right? Or fast?
+    return tabbableElements.sort((a, b) => {
+        // Make sure we sort by tabindex.
+        const aTabindex = Number(a.getAttribute('tabindex')) || 0;
+        const bTabindex = Number(b.getAttribute('tabindex')) || 0;
+        return bTabindex - aTabindex;
+    });
+}
+//# sourceMappingURL=tabbable.js.map

package/dist/src/shoelace/tabbable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../../src/shoelace/tabbable.ts"],"names":[],"mappings":"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","sourcesContent":["// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.\n// computedStyle calls are \"live\" so they only need to be retrieved once for an element.\nconst computedStyleMap = new WeakMap<Element, CSSStyleDeclaration>();\n\nfunction getCachedComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n  let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);\n\n  if (!computedStyle) {\n    computedStyle = window.getComputedStyle(el, null);\n    computedStyleMap.set(el, computedStyle);\n  }\n\n  return computedStyle;\n}\n\nfunction isVisible(el: HTMLElement): boolean {\n  // This is the fastest check, but isn't supported in Safari.\n  if ('checkVisibility' in el && typeof el['checkVisibility'] === 'function') {\n    // Opacity is focusable, visibility is not.\n    /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */\n    return (el as any)['checkVisibility']({\n      checkOpacity: false,\n      checkVisibilityCSS: true,\n    });\n  }\n\n  // Fallback \"polyfill\" for \"checkVisibility\"\n  const computedStyle = getCachedComputedStyle(el as HTMLElement);\n\n  return (\n    computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none'\n  );\n}\n\n// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable\n// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most\n// accessible way of handling overflow areas. [Konnor]\nfunction isOverflowingAndTabbable(el: HTMLElement): boolean {\n  const computedStyle = getCachedComputedStyle(el);\n\n  const { overflowY, overflowX } = computedStyle;\n\n  if (overflowY === 'scroll' || overflowX === 'scroll') {\n    return true;\n  }\n\n  if (overflowY !== 'auto' || overflowX !== 'auto') {\n    return false;\n  }\n\n  // Always overflow === \"auto\" by this point\n  const isOverflowingY = el.scrollHeight > el.clientHeight;\n\n  if (isOverflowingY && overflowY === 'auto') {\n    return true;\n  }\n\n  const isOverflowingX = el.scrollWidth > el.clientWidth;\n\n  if (isOverflowingX && overflowX === 'auto') {\n    return true;\n  }\n\n  return false;\n}\n\n/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  const tabindex = Number(el.getAttribute('tabindex'));\n  const hasTabindex = el.hasAttribute('tabindex');\n\n  // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable\n  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // If any parents have \"inert\", we aren't \"tabbable\"\n  if (el.closest('[inert]')) {\n    return false;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  if (!isVisible(el)) {\n    return false;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // At this point, the following elements are considered tabbable\n  const isNativelyTabbable = [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n    'iframe',\n  ].includes(tag);\n\n  if (isNativelyTabbable) {\n    return true;\n  }\n\n  // We save the overflow checks for last, because they're the most expensive\n  return isOverflowingAndTabbable(el);\n}\n\n/**\n * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single\n * element because it short-circuits after finding the first and last ones.\n */\nexport function getTabbableBoundary(root: HTMLElement | ShadowRoot) {\n  const tabbableElements = getTabbableElements(root);\n\n  // Find the first and last tabbable elements\n  const start = tabbableElements[0] ?? null;\n  const end = tabbableElements[tabbableElements.length - 1] ?? null;\n\n  return { start, end };\n}\n\n/**\n * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.\n * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.\n * This fixes that fun edge case.\n */\nfunction getSlottedChildrenOutsideRootElement(\n  slotElement: HTMLSlotElement,\n  root: HTMLElement | ShadowRoot\n) {\n  return (\n    (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !==\n    root\n  );\n}\n\nexport function getTabbableElements(root: HTMLElement | ShadowRoot) {\n  const walkedEls = new WeakMap();\n  const tabbableElements: HTMLElement[] = [];\n\n  function walk(el: HTMLElement | ShadowRoot) {\n    if (el instanceof Element) {\n      // if the element has \"inert\" we can just no-op it.\n      if (el.hasAttribute('inert') || el.closest('[inert]')) {\n        return;\n      }\n\n      if (walkedEls.has(el)) {\n        return;\n      }\n      walkedEls.set(el, true);\n\n      if (!tabbableElements.includes(el) && isTabbable(el)) {\n        tabbableElements.push(el);\n      }\n\n      if (\n        el instanceof HTMLSlotElement &&\n        getSlottedChildrenOutsideRootElement(el, root)\n      ) {\n        el.assignedElements({ flatten: true }).forEach(\n          (assignedEl: Element) => {\n            walk(assignedEl as HTMLElement | ShadowRoot);\n          }\n        );\n      }\n\n      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {\n        walk(el.shadowRoot);\n      }\n    }\n\n    for (const e of Array.from(el.children) as HTMLElement[]) {\n      walk(e);\n    }\n  }\n\n  // Collect all elements including the root\n  walk(root);\n\n  // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.\n  // So is it worth being right? Or fast?\n  return tabbableElements.sort((a, b) => {\n    // Make sure we sort by tabindex.\n    const aTabindex = Number(a.getAttribute('tabindex')) || 0;\n    const bTabindex = Number(b.getAttribute('tabindex')) || 0;\n    return bTabindex - aTabindex;\n  });\n}\n"]}

package/dist/test/modal-manager.test.js

@@ -42,7 +42,7 @@ describe('Modal Manager', () => {
         setTimeout(() => {
             el.showModal({ config });
         });
-        const response = yield oneEvent(el, 'modeChanged');
+        const response = yield oneEvent(el, 'modeChanged', false);
         expect(response.detail.mode).to.equal(ModalManagerMode.Open);
     }));
     it('emits a modeChanged event when closing', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -55,7 +55,7 @@ describe('Modal Manager', () => {
         setTimeout(() => {
             el.closeModal();
         });
-        const response = yield oneEvent(el, 'modeChanged');
+        const response = yield oneEvent(el, 'modeChanged', false);
         expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
     }));
     it('can show a modal', () => __awaiter(void 0, void 0, void 0, function* () {

package/dist/test/modal-manager.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG7D,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,oBAAoB,EAAE,GAAS,EAAE;QAClC,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAS,EAAE;QACnD,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;6BACL,gBAAgB,CAAC,IAAI;KAC7C,CAAC,CAAiB,CAAC;QAEpB,EAAE,CAAC,kBAAkB,GAAI,KAAmC,CAAC;QAC7D,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9C,EAAE,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACnC,MAAM,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACpD,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAS,EAAE;;QACzD,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;6BACL,gBAAgB,CAAC,IAAI;KAC7C,CAAC,CAAiB,CAAC;QAEpB,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAE3C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAS,EAAE;QACtD,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QAEjC,UAAU,CAAC,GAAG,EAAE;YACd,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;QACnD,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAS,EAAE;QACtD,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QACzB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,UAAU,CAAC,GAAG,EAAE;YACd,EAAE,CAAC,UAAU,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;QACnD,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACjE,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,GAAS,EAAE;QAChC,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QACzB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,GAAS,EAAE;QAC/E,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QACzB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,UAAU,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAClE,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAChC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QACjE,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,mEAAmE,EAAE,GAAS,EAAE;;QACjF,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,IAAI,cAAc,GAAG,KAAK,CAAC;QAC3B,MAAM,QAAQ,GAAG,GAAS,EAAE;YAC1B,cAAc,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QACF,EAAE,CAAC,SAAS,CAAC;YACX,MAAM;YACN,uBAAuB,EAAE,QAAQ;SAClC,CAAC,CAAC;QACH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAEpC,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,sEAAsE,EAAE,GAAS,EAAE;QACpF,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,IAAI,cAAc,GAAG,KAAK,CAAC;QAC3B,MAAM,QAAQ,GAAG,GAAS,EAAE;YAC1B,cAAc,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QACF,EAAE,CAAC,SAAS,CAAC;YACX,MAAM;YACN,uBAAuB,EAAE,QAAQ;SAClC,CAAC,CAAC;QACH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,EAAE,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,mEAAmE,EAAE,GAAS,EAAE;;QACjF,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,IAAI,cAAc,GAAG,KAAK,CAAC;QAC3B,MAAM,QAAQ,GAAG,GAAS,EAAE;YAC1B,cAAc,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QACF,EAAE,CAAC,SAAS,CAAC;YACX,MAAM;YACN,uBAAuB,EAAE,QAAQ;SAClC,CAAC,CAAC;QACH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,KAAK,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7D,MAAM,WAAW,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QACtE,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAEvC,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,GAAS,EAAE;;QAClE,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QACzB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAEjC,MAAM,KAAK,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7D,MAAM,WAAW,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QACtE,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAEvC,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,GAAS,EAAE;;QACrF,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAiB,CAAC;QAEpB,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACnC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QACzB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAEpC,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,6EAA6E,EAAE,GAAS,EAAE;;QAC3F,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAA0B,CAAC;QAE7B,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,oBAAoB,GAAG,KAAK,CAAC;QACpC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QACzB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAEpC,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAS,EAAE;;QACnD,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAA0B,CAAC;QAE7B,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,cAAc,GAAG,KAAK,CAAC;QAC9B,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QACzB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;IAChC,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport { TemplateResult, html } from 'lit';\n\nimport '../src/modal-manager';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport { ModalManagerMode } from '../src/modal-manager-mode';\nimport { ModalManagerInterface } from '../src/modal-manager-interface';\n\ndescribe('Modal Manager', () => {\n  it('defaults to closed', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('can be closed by calling closeModal', async () => {\n    const el = (await fixture(html`\n      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n    `)) as ModalManager;\n\n    el.customModalContent = ('foo' as unknown) as TemplateResult;\n    await elementUpdated(el);\n\n    expect(el.customModalContent).to.equal('foo');\n    el.closeModal();\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n    expect(el.customModalContent).to.equal(undefined);\n  });\n\n  it('can be closed by clicking on the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n    `)) as ModalManager;\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n\n    backdrop?.dispatchEvent(clickEvent);\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('emits a modeChanged event when opening', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n\n    setTimeout(() => {\n      el.showModal({ config });\n    });\n    const response = await oneEvent(el, 'modeChanged');\n    expect(response.detail.mode).to.equal(ModalManagerMode.Open);\n  });\n\n  it('emits a modeChanged event when closing', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    setTimeout(() => {\n      el.closeModal();\n    });\n    const response = await oneEvent(el, 'modeChanged');\n    expect(response.detail.mode).to.equal(ModalManagerMode.Closed);\n  });\n\n  it('can show a modal', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n    expect(el.mode).to.equal(ModalManagerMode.Open);\n  });\n\n  it('sets the --containerHeight CSS property when the window resizes', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n    const event = new Event('resize');\n    const propBefore = el.style.getPropertyValue('--containerHeight');\n    expect(propBefore).to.equal('');\n    window.dispatchEvent(event);\n    await elementUpdated(el);\n    const propAfter = el.style.getPropertyValue('--containerHeight');\n    expect(propAfter).to.not.equal('');\n  });\n\n  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(callbackCalled).to.equal(true);\n  });\n\n  it('does not call the userClosedModalCallback when the modal just closes', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n    el.closeModal();\n    await elementUpdated(el);\n    expect(callbackCalled).to.equal(false);\n  });\n\n  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n\n    const modal = el.shadowRoot?.querySelector('modal-template');\n    const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n    closeButton?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(callbackCalled).to.equal(true);\n  });\n\n  it('mode is set to closed when close button is pressed', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('open');\n\n    const modal = el.shadowRoot?.querySelector('modal-template');\n    const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n    closeButton?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('allows the user to close by clicking on the backdrop if configured to', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    config.closeOnBackdropClick = true;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it(\"dont't allow the user to close by clicking on the backdrop if configured to\", async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManagerInterface;\n\n    const config = new ModalConfig();\n    config.closeOnBackdropClick = false;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.getMode()).to.equal('open');\n  });\n\n  it('ia logo should not visible on modal', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManagerInterface;\n\n    const config = new ModalConfig();\n    config.showHeaderLogo = false;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const logoIcon = el.shadowRoot?.querySelector('.logo-icon');\n    expect(logoIcon).to.not.exist;\n  });\n});\n"]}
+{"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport { TemplateResult, html } from 'lit';\n\nimport '../src/modal-manager';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport { ModalManagerMode } from '../src/modal-manager-mode';\nimport { ModalManagerInterface } from '../src/modal-manager-interface';\n\ndescribe('Modal Manager', () => {\n  it('defaults to closed', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('can be closed by calling closeModal', async () => {\n    const el = (await fixture(html`\n      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n    `)) as ModalManager;\n\n    el.customModalContent = 'foo' as unknown as TemplateResult;\n    await elementUpdated(el);\n\n    expect(el.customModalContent).to.equal('foo');\n    el.closeModal();\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n    expect(el.customModalContent).to.equal(undefined);\n  });\n\n  it('can be closed by clicking on the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n    `)) as ModalManager;\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n\n    backdrop?.dispatchEvent(clickEvent);\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('emits a modeChanged event when opening', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n\n    setTimeout(() => {\n      el.showModal({ config });\n    });\n    const response = await oneEvent(el, 'modeChanged', false);\n    expect(response.detail.mode).to.equal(ModalManagerMode.Open);\n  });\n\n  it('emits a modeChanged event when closing', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    setTimeout(() => {\n      el.closeModal();\n    });\n    const response = await oneEvent(el, 'modeChanged', false);\n    expect(response.detail.mode).to.equal(ModalManagerMode.Closed);\n  });\n\n  it('can show a modal', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n    expect(el.mode).to.equal(ModalManagerMode.Open);\n  });\n\n  it('sets the --containerHeight CSS property when the window resizes', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n    const event = new Event('resize');\n    const propBefore = el.style.getPropertyValue('--containerHeight');\n    expect(propBefore).to.equal('');\n    window.dispatchEvent(event);\n    await elementUpdated(el);\n    const propAfter = el.style.getPropertyValue('--containerHeight');\n    expect(propAfter).to.not.equal('');\n  });\n\n  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(callbackCalled).to.equal(true);\n  });\n\n  it('does not call the userClosedModalCallback when the modal just closes', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n    el.closeModal();\n    await elementUpdated(el);\n    expect(callbackCalled).to.equal(false);\n  });\n\n  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    let callbackCalled = false;\n    const callback = (): void => {\n      callbackCalled = true;\n    };\n    el.showModal({\n      config,\n      userClosedModalCallback: callback,\n    });\n    await elementUpdated(el);\n\n    const modal = el.shadowRoot?.querySelector('modal-template');\n    const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n    closeButton?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(callbackCalled).to.equal(true);\n  });\n\n  it('mode is set to closed when close button is pressed', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('open');\n\n    const modal = el.shadowRoot?.querySelector('modal-template');\n    const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n    closeButton?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it('allows the user to close by clicking on the backdrop if configured to', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManager;\n\n    const config = new ModalConfig();\n    config.closeOnBackdropClick = true;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.mode).to.equal('closed');\n  });\n\n  it(\"dont't allow the user to close by clicking on the backdrop if configured to\", async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManagerInterface;\n\n    const config = new ModalConfig();\n    config.closeOnBackdropClick = false;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const backdrop = el.shadowRoot?.querySelector('.backdrop');\n    const clickEvent = new MouseEvent('click');\n    backdrop?.dispatchEvent(clickEvent);\n\n    await elementUpdated(el);\n\n    expect(el.getMode()).to.equal('open');\n  });\n\n  it('ia logo should not visible on modal', async () => {\n    const el = (await fixture(html`\n      <modal-manager></modal-manager>\n    `)) as ModalManagerInterface;\n\n    const config = new ModalConfig();\n    config.showHeaderLogo = false;\n    el.showModal({ config });\n    await elementUpdated(el);\n\n    const logoIcon = el.shadowRoot?.querySelector('.logo-icon');\n    expect(logoIcon).to.not.exist;\n  });\n});\n"]}

package/dist/test/modal-template.test.js

@@ -35,7 +35,7 @@ describe('Modal Template', () => {
         setTimeout(() => {
             closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(clickEvent);
         });
-        const response = yield oneEvent(el, 'closeButtonPressed');
+        const response = yield oneEvent(el, 'closeButtonPressed', false);
         expect(response).to.exist;
     }));
     it('shows the processing indicator if configured to', () => __awaiter(void 0, void 0, void 0, function* () {

package/dist/test/modal-template.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-template.test.js","sourceRoot":"","sources":["../../test/modal-template.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,mCAAmC,EAAE,GAAS,EAAE;;QACjD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,qCAAqC,CAAC,CAAC;QAEpE,MAAM,cAAc,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACxE,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,KAAK,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAgB,CAAC;QAEtE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC9B,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC3B,oEAAoE;QACpE,MAAM,CAAC,QAAQ,IAAI,cAAe,CAAC,SAAS,CAAC,CAAC;IAChD,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,GAAS,EAAE;;QAC3D,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC;QAEzB,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;gCACD,MAAM;KACjC,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACvD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,GAAS,EAAE;;QAC3E,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,qCAAqC,CAAC,CAAC;QAEpE,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QAClE,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAE3C,UAAU,CAAC,GAAG,EAAE;YACd,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC;QAC1D,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC5B,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,GAAS,EAAE;;QAC/D,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,uBAAuB,GAAG,IAAI,CAAC;QAEtC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;gCACD,MAAM;KACjC,CAAC,CAAC;QAEH,MAAM,cAAc,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACxE,MAAM,SAAS,GAAG,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,SAAS,mCAAI,EAAE,CAAC;QAClD,MAAM,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,GAAS,EAAE;;QACvD,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,eAAe,GAAG,IAAI,CAAC;QAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;gCACD,MAAM;KACjC,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QAClE,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,GAAS,EAAE;;QACvD,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;gCACD,MAAM;KACjC,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QAClE,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;IACnC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAS,EAAE;;QACpD,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAA,MAAM,CAAC;QAC1B,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAA,KAAK,CAAC;QAC5B,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAA,KAAK,CAAC;QAC5B,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA,KAAK,CAAC;QAE3B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;gCACD,MAAM;KACjC,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAEzD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACvB,MAAM,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAE1C,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAE5C,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAE9C,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACzB,MAAM,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, expect, oneEvent } from '@open-wc/testing';\nimport { html } from 'lit';\nimport '../src/modal-template';\nimport { ModalConfig } from '../src/modal-config';\n\ndescribe('Modal Template', () => {\n  it('has correct default configuration', async () => {\n    const el = await fixture(html` <modal-template></modal-template> `);\n\n    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');\n    const headline = el.shadowRoot?.querySelector('.headline');\n    const message = el.shadowRoot?.querySelector('.message');\n    const title = el.shadowRoot?.querySelector('h1.title') as HTMLElement;\n\n    expect(headline).to.not.exist;\n    expect(message).to.not.exist;\n    expect(title).to.not.exist;\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    expect('hidden' in processingLogo!.classList);\n  });\n\n  it('does not show the title if one not provided', async () => {\n    const config = new ModalConfig();\n    config.title = undefined;\n\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const title = el.shadowRoot?.querySelector('h1.title');\n    expect(title).to.not.exist;\n  });\n\n  it('emits closeButtonPressed event when close button is pressed', async () => {\n    const el = await fixture(html` <modal-template></modal-template> `);\n\n    const closeButton = el.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n\n    setTimeout(() => {\n      closeButton?.dispatchEvent(clickEvent);\n    });\n    const response = await oneEvent(el, 'closeButtonPressed');\n    expect(response).to.exist;\n  });\n\n  it('shows the processing indicator if configured to', async () => {\n    const config = new ModalConfig();\n    config.showProcessingIndicator = true;\n\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');\n    const classList = processingLogo?.classList ?? [];\n    expect('hidden' in classList).to.equal(false);\n  });\n\n  it('shows the close button if configured to', async () => {\n    const config = new ModalConfig();\n    config.showCloseButton = true;\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const closeButton = el.shadowRoot?.querySelector('.close-button');\n    expect(closeButton).to.exist;\n  });\n\n  it('hides the close button if configured to', async () => {\n    const config = new ModalConfig();\n    config.showCloseButton = false;\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const closeButton = el.shadowRoot?.querySelector('.close-button');\n    expect(closeButton).to.not.exist;\n  });\n\n  it('shows the properties from the config', async () => {\n    const config = new ModalConfig();\n    config.title = html`Boop`;\n    config.subtitle = html`Bop`;\n    config.headline = html`Foo`;\n    config.message = html`Bar`;\n\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const title = el.shadowRoot?.querySelector('h1');\n    const subtitle = el.shadowRoot?.querySelector('h2');\n\n    const headline = el.shadowRoot?.querySelector('.headline');\n    const message = el.shadowRoot?.querySelector('.message');\n\n    expect(title).to.exist;\n    expect(title?.innerText).to.equal('Boop');\n\n    expect(subtitle).to.exist;\n    expect(subtitle?.innerText).to.equal('Bop');\n\n    expect(headline).to.exist;\n    expect(headline?.textContent).to.equal('Foo');\n\n    expect(message).to.exist;\n    expect(message?.textContent).to.equal('Bar');\n  });\n});\n"]}
+{"version":3,"file":"modal-template.test.js","sourceRoot":"","sources":["../../test/modal-template.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, oneEvent } from '@open-wc/testing';\nimport { html } from 'lit';\nimport '../src/modal-template';\nimport { ModalConfig } from '../src/modal-config';\n\ndescribe('Modal Template', () => {\n  it('has correct default configuration', async () => {\n    const el = await fixture(html` <modal-template></modal-template> `);\n\n    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');\n    const headline = el.shadowRoot?.querySelector('.headline');\n    const message = el.shadowRoot?.querySelector('.message');\n    const title = el.shadowRoot?.querySelector('h1.title') as HTMLElement;\n\n    expect(headline).to.not.exist;\n    expect(message).to.not.exist;\n    expect(title).to.not.exist;\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    expect('hidden' in processingLogo!.classList);\n  });\n\n  it('does not show the title if one not provided', async () => {\n    const config = new ModalConfig();\n    config.title = undefined;\n\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const title = el.shadowRoot?.querySelector('h1.title');\n    expect(title).to.not.exist;\n  });\n\n  it('emits closeButtonPressed event when close button is pressed', async () => {\n    const el = await fixture(html` <modal-template></modal-template> `);\n\n    const closeButton = el.shadowRoot?.querySelector('.close-button');\n    const clickEvent = new MouseEvent('click');\n\n    setTimeout(() => {\n      closeButton?.dispatchEvent(clickEvent);\n    });\n    const response = await oneEvent(el, 'closeButtonPressed', false);\n    expect(response).to.exist;\n  });\n\n  it('shows the processing indicator if configured to', async () => {\n    const config = new ModalConfig();\n    config.showProcessingIndicator = true;\n\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');\n    const classList = processingLogo?.classList ?? [];\n    expect('hidden' in classList).to.equal(false);\n  });\n\n  it('shows the close button if configured to', async () => {\n    const config = new ModalConfig();\n    config.showCloseButton = true;\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const closeButton = el.shadowRoot?.querySelector('.close-button');\n    expect(closeButton).to.exist;\n  });\n\n  it('hides the close button if configured to', async () => {\n    const config = new ModalConfig();\n    config.showCloseButton = false;\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const closeButton = el.shadowRoot?.querySelector('.close-button');\n    expect(closeButton).to.not.exist;\n  });\n\n  it('shows the properties from the config', async () => {\n    const config = new ModalConfig();\n    config.title = html`Boop`;\n    config.subtitle = html`Bop`;\n    config.headline = html`Foo`;\n    config.message = html`Bar`;\n\n    const el = await fixture(html`\n      <modal-template .config=${config}></modal-template>\n    `);\n\n    const title = el.shadowRoot?.querySelector('h1');\n    const subtitle = el.shadowRoot?.querySelector('h2');\n\n    const headline = el.shadowRoot?.querySelector('.headline');\n    const message = el.shadowRoot?.querySelector('.message');\n\n    expect(title).to.exist;\n    expect(title?.innerText).to.equal('Boop');\n\n    expect(subtitle).to.exist;\n    expect(subtitle?.innerText).to.equal('Bop');\n\n    expect(headline).to.exist;\n    expect(headline?.textContent).to.equal('Foo');\n\n    expect(message).to.exist;\n    expect(message?.textContent).to.equal('Bar');\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/modal-manager",
-  "version": "0.3.4",
+  "version": "1.0.0",
   "description": "A Modal Manager Web Component",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "circular": "madge --circular .",
     "test": "tsc && npm run lint && npm run circular && karma start --coverage",
     "test:watch": "concurrently --kill-others --names tsc,karma \"npm run tsc:watch\" \"karma start --auto-watch=true --single-run=false\"",
-    "publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha && npm publish --tag alpha"
+    "publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha --no-git-tag-version && npm publish --tag alpha"
   },
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.4",
@@ -37,28 +37,27 @@
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
-    "@open-wc/eslint-config": "^2.0.0",
-    "@open-wc/testing": "^3.0.3",
+    "@open-wc/eslint-config": "^9.2.2",
+    "@open-wc/testing": "^4.0.0",
     "@open-wc/testing-karma": "^3.0.0",
     "@types/mocha": "^10.0.0",
     "@types/node": "^20.8.4",
     "@types/throttle-debounce": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "concurrently": "^8.0.0",
     "deepmerge": "^4.0.0",
     "es-dev-server": "^2.0.0",
-    "eslint": "^6.1.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^6.11.0",
-    "husky": "^7.0.0",
+    "husky": "^9.0.0",
     "lint-staged": "^14.0.1",
-    "lit-html": "^2.0.2",
-    "madge": "^4.0.1",
-    "prettier": "^2.0.4",
+    "madge": "^6.0.0",
+    "prettier": "^2.7.1",
     "rimraf": "^5.0.5",
-    "tslib": "^1.11.0",
+    "tslib": "^2.4.0",
     "typedoc": "^0.25.0",
-    "typescript": "^4.4.4",
+    "typescript": "^4.7.4",
     "vite": "^4.4.11"
   },
   "eslintConfig": {

package/test/modal-manager.test.ts

@@ -21,7 +21,7 @@ describe('Modal Manager', () => {
       <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
     `)) as ModalManager;
 
-    el.customModalContent = ('foo' as unknown) as TemplateResult;
+    el.customModalContent = 'foo' as unknown as TemplateResult;
     await elementUpdated(el);
 
     expect(el.customModalContent).to.equal('foo');
@@ -56,7 +56,7 @@ describe('Modal Manager', () => {
     setTimeout(() => {
       el.showModal({ config });
     });
-    const response = await oneEvent(el, 'modeChanged');
+    const response = await oneEvent(el, 'modeChanged', false);
     expect(response.detail.mode).to.equal(ModalManagerMode.Open);
   });
 
@@ -72,7 +72,7 @@ describe('Modal Manager', () => {
     setTimeout(() => {
       el.closeModal();
     });
-    const response = await oneEvent(el, 'modeChanged');
+    const response = await oneEvent(el, 'modeChanged', false);
     expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
   });
 

package/test/modal-template.test.ts

@@ -40,7 +40,7 @@ describe('Modal Template', () => {
     setTimeout(() => {
       closeButton?.dispatchEvent(clickEvent);
     });
-    const response = await oneEvent(el, 'closeButtonPressed');
+    const response = await oneEvent(el, 'closeButtonPressed', false);
     expect(response).to.exist;
   });