@nanoporetech-digital/components 2.8.0 → 2.10.1

package/dist/collection/components/dialog/dialog.js

@@ -37,6 +37,8 @@ export class Dialog {
     this.noUserDismiss = false;
     /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */
     this.storeMethod = 'url-hash';
+    /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */
+    this.hoist = false;
     this.handleKeyDown = (event) => {
       if (event.key === 'Escape') {
         this.requestClose();
@@ -71,6 +73,11 @@ export class Dialog {
   handleOpenChange() {
     this.open ? this.show() : this.hide();
   }
+  handleHoistChange() {
+    if (!this.hoist || document.body.children[0] === this.host)
+      return;
+    document.body.prepend(this.host);
+  }
   /** Shows the dialog */
   async show() {
     if (this.willShow) {
@@ -130,6 +137,7 @@ export class Dialog {
     });
   }
   connectedCallback() {
+    this.handleHoistChange();
     this.modal = new Modal(this.host);
     if (this.panel) {
       this.addedTransEnd = true;
@@ -150,6 +158,8 @@ export class Dialog {
     }
   }
   disconnectedCallback() {
+    if (!this.panel)
+      return;
     unlockBodyScrolling(this.host);
     this.addedTransEnd = false;
     this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
@@ -336,7 +346,7 @@ export class Dialog {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },
@@ -351,6 +361,26 @@ export class Dialog {
       "attribute": "store-method",
       "reflect": false,
       "defaultValue": "'url-hash'"
+    },
+    "hoist": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "hoist",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -490,6 +520,9 @@ export class Dialog {
   static get watchers() { return [{
       "propName": "open",
       "methodName": "handleOpenChange"
+    }, {
+      "propName": "hoist",
+      "methodName": "handleHoistChange"
     }]; }
 }
 //# sourceMappingURL=dialog.js.map

package/dist/collection/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLNanoDialogElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      this.host.addEventListener(\n        'nanoAfterShow',\n        () => {\n          const nanoInitialFocus = this.nanoInitialFocus.emit();\n          if (!nanoInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        },\n        { once: true }\n      );\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout((_) => (this.noDismiss = false), 250);\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n      this.host.querySelectorAll('iframe,video')\n    );\n    videos.forEach((video) => {\n      if (video.tagName.toLowerCase() === 'video')\n        (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon,\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div\n            part=\"overlay\"\n            class=\"dialog__overlay\"\n            ref={(el) => (this.overlay = el)}\n            onClick={this.requestClose}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span\n                      part=\"title\"\n                      class=\"dialog__title\"\n                      id={`${this.componentId}-title`}\n                    >\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    )}\n                  </header>\n                </nano-sticker>\n              )}\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss && (\n                      <button\n                        class=\"dialog__close-txt\"\n                        onClick={this.requestClose}\n                      >\n                        Close\n                      </button>\n                    )}\n                  </footer>\n                </nano-sticker>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLNanoDialogElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || document.body.children[0] === this.host) return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      this.host.addEventListener(\n        'nanoAfterShow',\n        () => {\n          const nanoInitialFocus = this.nanoInitialFocus.emit();\n          if (!nanoInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        },\n        { once: true }\n      );\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout((_) => (this.noDismiss = false), 250);\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n      this.host.querySelectorAll('iframe,video')\n    );\n    videos.forEach((video) => {\n      if (video.tagName.toLowerCase() === 'video')\n        (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    if (!this.panel) return;\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon,\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div\n            part=\"overlay\"\n            class=\"dialog__overlay\"\n            ref={(el) => (this.overlay = el)}\n            onClick={this.requestClose}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span\n                      part=\"title\"\n                      class=\"dialog__title\"\n                      id={`${this.componentId}-title`}\n                    >\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    )}\n                  </header>\n                </nano-sticker>\n              )}\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss && (\n                      <button\n                        class=\"dialog__close-txt\"\n                        onClick={this.requestClose}\n                      >\n                        Close\n                      </button>\n                    )}\n                  </footer>\n                </nano-sticker>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown.js

@@ -410,7 +410,7 @@ export class Dropdown {
         "references": {
           "PopoverPlacement": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/popover.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/utils/popover.ts"
           }
         }
       },