@dso-toolkit/core 62.18.0 → 62.19.0

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -4,13 +4,13 @@ import debounce from "debounce";
 import { DocumentPanel, Filterpanel, MainPanel, Overlay } from "./components";
 import { viewerGridTabLabelMap, viewerGridVdkTabs, viewerGridVrkTabs, } from "./viewer-grid.interfaces";
 const resizeObserver = new ResizeObserver(debounce(([entry]) => {
-  const shadowRoot = entry === null || entry === void 0 ? void 0 : entry.target.getRootNode();
-  if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {
-    shadowRoot.host._checkMainPanelVisibility();
-  }
+    const shadowRoot = entry === null || entry === void 0 ? void 0 : entry.target.getRootNode();
+    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {
+        shadowRoot.host._checkMainPanelVisibility();
+    }
 }, 50));
 function isDsoViewerGridComponent(element) {
-  return element.tagName === "DSO-VIEWER-GRID";
+    return element.tagName === "DSO-VIEWER-GRID";
 }
 const buttonWidth = 40;
 const tabViewBreakpoint = 768 + buttonWidth;
@@ -23,599 +23,599 @@ const minMapElementWidth = 440;
  * @slot document-panel - VDK only
  */
 export class ViewerGrid {
-  constructor() {
-    this.mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;
-    this.switchActiveTab = (tab) => {
-      this.dsoActiveTabSwitch.emit({
-        tab,
-      });
-    };
-    this.emitShrinkMain = () => {
-      this.dsoMainSizeChange.emit({
-        currentSize: this.mainSize,
-        nextSize: this.mainSize === "large" ? "medium" : "small",
-      });
-    };
-    this.emitExpandMain = () => {
-      this.dsoMainSizeChange.emit({
-        currentSize: this.mainSize,
-        nextSize: this.mainSize === "small" ? "medium" : "large",
-      });
-    };
-    this.shrinkDocumentPanel = () => {
-      this.dsoDocumentPanelSizeChange.emit({
-        currentSize: this.documentPanelSize,
-        nextSize: this.documentPanelSize === "large" ? "medium" : "small",
-      });
-    };
-    this.expandDocumentPanel = () => {
-      this.dsoDocumentPanelSizeChange.emit({
-        currentSize: this.documentPanelSize,
-        nextSize: this.documentPanelSize === "small" ? "medium" : "large",
-      });
-    };
-    this.toggleMainPanel = () => {
-      if (this.mapElement instanceof HTMLDivElement &&
-        this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth) {
-        this.mainSize = "small";
-      }
-      this.dsoMainPanelToggle.emit({
-        hide: !this.mainPanelHidden,
-      });
-    };
-    this.changeListener = (largeScreen) => (this.tabView = !largeScreen.matches);
-    this.handleFilterpanelApply = (mouseEvent) => {
-      this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });
-    };
-    this.handleFilterpanelCancel = (mouseEvent) => {
-      this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
-    };
-    this.mode = "vrk";
-    this.filterpanelOpen = false;
-    this.overlayOpen = false;
-    this.documentPanelOpen = false;
-    this.mainSize = "large";
-    this.activeTab = undefined;
-    this.documentPanelSize = "large";
-    this.mainPanelExpanded = false;
-    this.mainPanelHidden = false;
-    this.tabView = window.innerWidth < tabViewBreakpoint;
-  }
-  get filterpanelSlot() {
-    return this.host.querySelector("[slot='filterpanel']");
-  }
-  get overlaySlot() {
-    return this.host.querySelector("[slot='overlay']");
-  }
-  documentPanelOpenWatcher(open) {
-    if (open) {
-      this._checkMainPanelVisibility();
-    }
-  }
-  filterpanelOpenWatcher(open) {
-    var _a, _b;
-    if (!this.filterpanelSlot) {
-      console.warn("slot 'filterpanel' has not been set");
-    }
-    if (open) {
-      (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.showModal();
-    }
-    else {
-      (_b = this.filterpanel) === null || _b === void 0 ? void 0 : _b.close();
-    }
-  }
-  overlayOpenWatcher(open) {
-    var _a, _b;
-    if (!this.overlaySlot) {
-      console.warn("slot 'overlay' has not been set");
-    }
-    if (open) {
-      (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.showModal();
-    }
-    else {
-      (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.close();
-    }
-  }
-  /**
-   * @internal
-   */
-  async _checkMainPanelVisibility() {
-    if (this.mode === "vdk" &&
-      this.documentPanelOpen &&
-      !this.mainPanelHidden &&
-      this.mapElement instanceof HTMLDivElement &&
-      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||
-        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))) {
-      this.dsoMainPanelToggle.emit({
-        hide: true,
-      });
-    }
-  }
-  connectedCallback() {
-    window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
-  }
-  componentDidLoad() {
-    var _a, _b;
-    if (this.filterpanelOpen && this.filterpanelSlot) {
-      (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.showModal();
+    constructor() {
+        this.mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;
+        this.switchActiveTab = (tab) => {
+            this.dsoActiveTabSwitch.emit({
+                tab,
+            });
+        };
+        this.emitShrinkMain = () => {
+            this.dsoMainSizeChange.emit({
+                currentSize: this.mainSize,
+                nextSize: this.mainSize === "large" ? "medium" : "small",
+            });
+        };
+        this.emitExpandMain = () => {
+            this.dsoMainSizeChange.emit({
+                currentSize: this.mainSize,
+                nextSize: this.mainSize === "small" ? "medium" : "large",
+            });
+        };
+        this.shrinkDocumentPanel = () => {
+            this.dsoDocumentPanelSizeChange.emit({
+                currentSize: this.documentPanelSize,
+                nextSize: this.documentPanelSize === "large" ? "medium" : "small",
+            });
+        };
+        this.expandDocumentPanel = () => {
+            this.dsoDocumentPanelSizeChange.emit({
+                currentSize: this.documentPanelSize,
+                nextSize: this.documentPanelSize === "small" ? "medium" : "large",
+            });
+        };
+        this.toggleMainPanel = () => {
+            if (this.mapElement instanceof HTMLDivElement &&
+                this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth) {
+                this.mainSize = "small";
+            }
+            this.dsoMainPanelToggle.emit({
+                hide: !this.mainPanelHidden,
+            });
+        };
+        this.changeListener = (largeScreen) => (this.tabView = !largeScreen.matches);
+        this.handleFilterpanelApply = (mouseEvent) => {
+            this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });
+        };
+        this.handleFilterpanelCancel = (mouseEvent) => {
+            this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
+        };
+        this.mode = "vrk";
+        this.filterpanelOpen = false;
+        this.overlayOpen = false;
+        this.documentPanelOpen = false;
+        this.mainSize = "large";
+        this.activeTab = undefined;
+        this.documentPanelSize = "large";
+        this.mainPanelExpanded = false;
+        this.mainPanelHidden = false;
+        this.tabView = window.innerWidth < tabViewBreakpoint;
     }
-    if (this.overlayOpen && this.overlaySlot) {
-      (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.showModal();
+    get filterpanelSlot() {
+        return this.host.querySelector("[slot='filterpanel']");
     }
-    if (this.mode === "vdk" && this.mapElement instanceof HTMLDivElement) {
-      resizeObserver.observe(this.mapElement);
+    get overlaySlot() {
+        return this.host.querySelector("[slot='overlay']");
     }
-  }
-  disconnectedCallback() {
-    window.matchMedia(this.mediaCondition).removeEventListener("change", this.changeListener);
-    if (this.mode === "vdk" && this.mapElement) {
-      resizeObserver.unobserve(this.mapElement);
+    documentPanelOpenWatcher(open) {
+        if (open) {
+            this._checkMainPanelVisibility();
+        }
     }
-  }
-  render() {
-    const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-    return (h(Fragment, null, this.tabView && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
-  }
-  static get is() { return "dso-viewer-grid"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["viewer-grid.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["viewer-grid.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ViewerGridMode",
-          "resolved": "\"vdk\" | \"vrk\"",
-          "references": {
-            "ViewerGridMode": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridMode"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "VRK or VDK implementation."
-        },
-        "attribute": "mode",
-        "reflect": true,
-        "defaultValue": "\"vrk\""
-      },
-      "filterpanelOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true when filterpanel should show."
-        },
-        "attribute": "filterpanel-open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "overlayOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true when overlay should show."
-        },
-        "attribute": "overlay-open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "documentPanelOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "**VDK only.** Set to true when document panel should show."
-        },
-        "attribute": "document-panel-open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "mainSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ViewerGridPanelSize",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "ViewerGridPanelSize": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridPanelSize"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the panel when component loads.\r\n\r\nDefault size is `large`."
-        },
-        "attribute": "main-size",
-        "reflect": true,
-        "defaultValue": "\"large\""
-      },
-      "activeTab": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ViewerGridVdkTab | ViewerGridVrkTab",
-          "resolved": "\"document\" | \"main\" | \"map\" | \"search\" | undefined",
-          "references": {
-            "ViewerGridVdkTab": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridVdkTab"
-            },
-            "ViewerGridVrkTab": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridVrkTab"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Set active tab in tab view."
-        },
-        "attribute": "active-tab",
-        "reflect": false
-      },
-      "documentPanelSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ViewerGridPanelSize",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "ViewerGridPanelSize": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridPanelSize"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "**VDK only.** Size of the panel when component loads.\r\n\r\nDefault size is `large`."
-        },
-        "attribute": "document-panel-size",
-        "reflect": true,
-        "defaultValue": "\"large\""
-      },
-      "mainPanelExpanded": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "**VDK only.** Set to show main panel expanded."
-        },
-        "attribute": "main-panel-expanded",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "mainPanelHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "**VDK only.** Set to hide the main panel."
-        },
-        "attribute": "main-panel-hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabView": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoCloseOverlay",
-        "name": "dsoCloseOverlay",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when user wants to close the overlay."
-        },
-        "complexType": {
-          "original": "ViewerGridCloseOverlayEvent",
-          "resolved": "ViewerGridCloseOverlayEvent",
-          "references": {
-            "ViewerGridCloseOverlayEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridCloseOverlayEvent"
-            }
-          }
+    filterpanelOpenWatcher(open) {
+        var _a, _b;
+        if (!this.filterpanelSlot) {
+            console.warn("slot 'filterpanel' has not been set");
         }
-      }, {
-        "method": "dsoFilterpanelCancel",
-        "name": "dsoFilterpanelCancel",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when user cancels filterpanel."
-        },
-        "complexType": {
-          "original": "ViewerGridFilterpanelCancelEvent",
-          "resolved": "ViewerGridFilterpanelCancelEvent",
-          "references": {
-            "ViewerGridFilterpanelCancelEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridFilterpanelCancelEvent"
-            }
-          }
+        if (open) {
+            (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.showModal();
         }
-      }, {
-        "method": "dsoFilterpanelApply",
-        "name": "dsoFilterpanelApply",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when user applies filterpanel options."
-        },
-        "complexType": {
-          "original": "ViewerGridFilterpanelApplyEvent",
-          "resolved": "ViewerGridFilterpanelApplyEvent",
-          "references": {
-            "ViewerGridFilterpanelApplyEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridFilterpanelApplyEvent"
-            }
-          }
+        else {
+            (_b = this.filterpanel) === null || _b === void 0 ? void 0 : _b.close();
         }
-      }, {
-        "method": "dsoActiveTabSwitch",
-        "name": "dsoActiveTabSwitch",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when user applies filterpanel options."
-        },
-        "complexType": {
-          "original": "ViewerGridActiveTabSwitchEvent",
-          "resolved": "ViewerGridActiveTabSwitchEvent",
-          "references": {
-            "ViewerGridActiveTabSwitchEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridActiveTabSwitchEvent"
-            }
-          }
+    }
+    overlayOpenWatcher(open) {
+        var _a, _b;
+        if (!this.overlaySlot) {
+            console.warn("slot 'overlay' has not been set");
         }
-      }, {
-        "method": "dsoMainSizeChange",
-        "name": "dsoMainSizeChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on interaction with sizing buttons."
-        },
-        "complexType": {
-          "original": "ViewerGridChangeSizeEvent",
-          "resolved": "ViewerGridChangeSizeEvent",
-          "references": {
-            "ViewerGridChangeSizeEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridChangeSizeEvent"
-            }
-          }
+        if (open) {
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.showModal();
         }
-      }, {
-        "method": "dsoMainSizeChangeAnimationEnd",
-        "name": "dsoMainSizeChangeAnimationEnd",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after main size animation."
-        },
-        "complexType": {
-          "original": "ViewerGridChangeSizeAnimationEndEvent",
-          "resolved": "ViewerGridChangeSizeAnimationEndEvent",
-          "references": {
-            "ViewerGridChangeSizeAnimationEndEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridChangeSizeAnimationEndEvent"
-            }
-          }
+        else {
+            (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.close();
         }
-      }, {
-        "method": "dsoDocumentPanelSizeChange",
-        "name": "dsoDocumentPanelSizeChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "**VDK only.** Emitted on interaction with sizing buttons."
-        },
-        "complexType": {
-          "original": "ViewerGridChangeSizeEvent",
-          "resolved": "ViewerGridChangeSizeEvent",
-          "references": {
-            "ViewerGridChangeSizeEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridChangeSizeEvent"
-            }
-          }
+    }
+    /**
+     * @internal
+     */
+    async _checkMainPanelVisibility() {
+        if (this.mode === "vdk" &&
+            this.documentPanelOpen &&
+            !this.mainPanelHidden &&
+            this.mapElement instanceof HTMLDivElement &&
+            ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||
+                (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))) {
+            this.dsoMainPanelToggle.emit({
+                hide: true,
+            });
         }
-      }, {
-        "method": "dsoDocumentPanelSizeChangeAnimationEnd",
-        "name": "dsoDocumentPanelSizeChangeAnimationEnd",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "**VDK only.** Emitted after main size animation."
-        },
-        "complexType": {
-          "original": "ViewerGridChangeSizeAnimationEndEvent",
-          "resolved": "ViewerGridChangeSizeAnimationEndEvent",
-          "references": {
-            "ViewerGridChangeSizeAnimationEndEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridChangeSizeAnimationEndEvent"
-            }
-          }
+    }
+    connectedCallback() {
+        window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        if (this.filterpanelOpen && this.filterpanelSlot) {
+            (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.showModal();
         }
-      }, {
-        "method": "dsoMainPanelExpand",
-        "name": "dsoMainPanelExpand",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "**VDK only.** Emitted when the user wants to expand the main panel."
-        },
-        "complexType": {
-          "original": "ViewerGridMainExpandEvent",
-          "resolved": "ViewerGridMainExpandEvent",
-          "references": {
-            "ViewerGridMainExpandEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridMainExpandEvent"
-            }
-          }
+        if (this.overlayOpen && this.overlaySlot) {
+            (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.showModal();
         }
-      }, {
-        "method": "dsoMainPanelToggle",
-        "name": "dsoMainPanelToggle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "**VDK only.** Emitted when the user toggles the visibility of the main panel.\r\n\r\nAlso emitted by scripting when the panels do not fit anymore."
-        },
-        "complexType": {
-          "original": "ViewerGridMainToggleEvent",
-          "resolved": "ViewerGridMainToggleEvent",
-          "references": {
-            "ViewerGridMainToggleEvent": {
-              "location": "import",
-              "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridMainToggleEvent"
-            }
-          }
+        if (this.mode === "vdk" && this.mapElement instanceof HTMLDivElement) {
+            resizeObserver.observe(this.mapElement);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "_checkMainPanelVisibility": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }]
+    }
+    disconnectedCallback() {
+        window.matchMedia(this.mediaCondition).removeEventListener("change", this.changeListener);
+        if (this.mode === "vdk" && this.mapElement) {
+            resizeObserver.unobserve(this.mapElement);
         }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "documentPanelOpen",
-        "methodName": "documentPanelOpenWatcher"
-      }, {
-        "propName": "filterpanelOpen",
-        "methodName": "filterpanelOpenWatcher"
-      }, {
-        "propName": "overlayOpen",
-        "methodName": "overlayOpenWatcher"
-      }];
-  }
+    }
+    render() {
+        const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
+        return (h(Fragment, null, this.tabView && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'add4077ee9747707243b50dc59a2cbf8a0c33038', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '311e8fb876d303de6c19fd59c62226f5323406e6', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+    }
+    static get is() { return "dso-viewer-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["viewer-grid.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["viewer-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ViewerGridMode",
+                    "resolved": "\"vdk\" | \"vrk\"",
+                    "references": {
+                        "ViewerGridMode": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "VRK or VDK implementation."
+                },
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "\"vrk\""
+            },
+            "filterpanelOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true when filterpanel should show."
+                },
+                "attribute": "filterpanel-open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "overlayOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true when overlay should show."
+                },
+                "attribute": "overlay-open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "documentPanelOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "**VDK only.** Set to true when document panel should show."
+                },
+                "attribute": "document-panel-open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "mainSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ViewerGridPanelSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "ViewerGridPanelSize": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridPanelSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the panel when component loads.\r\n\r\nDefault size is `large`."
+                },
+                "attribute": "main-size",
+                "reflect": true,
+                "defaultValue": "\"large\""
+            },
+            "activeTab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ViewerGridVdkTab | ViewerGridVrkTab",
+                    "resolved": "\"document\" | \"main\" | \"map\" | \"search\" | undefined",
+                    "references": {
+                        "ViewerGridVdkTab": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridVdkTab"
+                        },
+                        "ViewerGridVrkTab": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridVrkTab"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set active tab in tab view."
+                },
+                "attribute": "active-tab",
+                "reflect": false
+            },
+            "documentPanelSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ViewerGridPanelSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "ViewerGridPanelSize": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridPanelSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "**VDK only.** Size of the panel when component loads.\r\n\r\nDefault size is `large`."
+                },
+                "attribute": "document-panel-size",
+                "reflect": true,
+                "defaultValue": "\"large\""
+            },
+            "mainPanelExpanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "**VDK only.** Set to show main panel expanded."
+                },
+                "attribute": "main-panel-expanded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "mainPanelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "**VDK only.** Set to hide the main panel."
+                },
+                "attribute": "main-panel-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tabView": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoCloseOverlay",
+                "name": "dsoCloseOverlay",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user wants to close the overlay."
+                },
+                "complexType": {
+                    "original": "ViewerGridCloseOverlayEvent",
+                    "resolved": "ViewerGridCloseOverlayEvent",
+                    "references": {
+                        "ViewerGridCloseOverlayEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridCloseOverlayEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoFilterpanelCancel",
+                "name": "dsoFilterpanelCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user cancels filterpanel."
+                },
+                "complexType": {
+                    "original": "ViewerGridFilterpanelCancelEvent",
+                    "resolved": "ViewerGridFilterpanelCancelEvent",
+                    "references": {
+                        "ViewerGridFilterpanelCancelEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridFilterpanelCancelEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoFilterpanelApply",
+                "name": "dsoFilterpanelApply",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user applies filterpanel options."
+                },
+                "complexType": {
+                    "original": "ViewerGridFilterpanelApplyEvent",
+                    "resolved": "ViewerGridFilterpanelApplyEvent",
+                    "references": {
+                        "ViewerGridFilterpanelApplyEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridFilterpanelApplyEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoActiveTabSwitch",
+                "name": "dsoActiveTabSwitch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user applies filterpanel options."
+                },
+                "complexType": {
+                    "original": "ViewerGridActiveTabSwitchEvent",
+                    "resolved": "ViewerGridActiveTabSwitchEvent",
+                    "references": {
+                        "ViewerGridActiveTabSwitchEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridActiveTabSwitchEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoMainSizeChange",
+                "name": "dsoMainSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on interaction with sizing buttons."
+                },
+                "complexType": {
+                    "original": "ViewerGridChangeSizeEvent",
+                    "resolved": "ViewerGridChangeSizeEvent",
+                    "references": {
+                        "ViewerGridChangeSizeEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridChangeSizeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoMainSizeChangeAnimationEnd",
+                "name": "dsoMainSizeChangeAnimationEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after main size animation."
+                },
+                "complexType": {
+                    "original": "ViewerGridChangeSizeAnimationEndEvent",
+                    "resolved": "ViewerGridChangeSizeAnimationEndEvent",
+                    "references": {
+                        "ViewerGridChangeSizeAnimationEndEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridChangeSizeAnimationEndEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoDocumentPanelSizeChange",
+                "name": "dsoDocumentPanelSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "**VDK only.** Emitted on interaction with sizing buttons."
+                },
+                "complexType": {
+                    "original": "ViewerGridChangeSizeEvent",
+                    "resolved": "ViewerGridChangeSizeEvent",
+                    "references": {
+                        "ViewerGridChangeSizeEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridChangeSizeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoDocumentPanelSizeChangeAnimationEnd",
+                "name": "dsoDocumentPanelSizeChangeAnimationEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "**VDK only.** Emitted after main size animation."
+                },
+                "complexType": {
+                    "original": "ViewerGridChangeSizeAnimationEndEvent",
+                    "resolved": "ViewerGridChangeSizeAnimationEndEvent",
+                    "references": {
+                        "ViewerGridChangeSizeAnimationEndEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridChangeSizeAnimationEndEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoMainPanelExpand",
+                "name": "dsoMainPanelExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "**VDK only.** Emitted when the user wants to expand the main panel."
+                },
+                "complexType": {
+                    "original": "ViewerGridMainExpandEvent",
+                    "resolved": "ViewerGridMainExpandEvent",
+                    "references": {
+                        "ViewerGridMainExpandEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridMainExpandEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoMainPanelToggle",
+                "name": "dsoMainPanelToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "**VDK only.** Emitted when the user toggles the visibility of the main panel.\r\n\r\nAlso emitted by scripting when the panels do not fit anymore."
+                },
+                "complexType": {
+                    "original": "ViewerGridMainToggleEvent",
+                    "resolved": "ViewerGridMainToggleEvent",
+                    "references": {
+                        "ViewerGridMainToggleEvent": {
+                            "location": "import",
+                            "path": "./viewer-grid.interfaces",
+                            "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::ViewerGridMainToggleEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "_checkMainPanelVisibility": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "documentPanelOpen",
+                "methodName": "documentPanelOpenWatcher"
+            }, {
+                "propName": "filterpanelOpen",
+                "methodName": "filterpanelOpenWatcher"
+            }, {
+                "propName": "overlayOpen",
+                "methodName": "overlayOpenWatcher"
+            }];
+    }
 }
 //# sourceMappingURL=viewer-grid.js.map