@dso-toolkit/core 59.0.1 → 60.0.0

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

@@ -1,47 +1,102 @@
-import { h, Host } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import clsx from "clsx";
-import { tabs, } from "./viewer-grid.interfaces";
-import { Filterpanel, MainPanel, Overlay } from "./components";
-const tabViewWidth = 768 + 40;
+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();
+  }
+}, 50));
+function isDsoViewerGridComponent(element) {
+  return element.tagName === "DSO-VIEWER-GRID";
+}
+const buttonWidth = 40;
+const tabViewBreakpoint = 768 + buttonWidth;
+const minMapElementWidth = 440;
+/**
+ * @slot main
+ * @slot map
+ * @slot filterpanel
+ * @slot overlay
+ * @slot document-panel - VDK only
+ * @slot main-expanded - VDK only
+ */
 export class ViewerGrid {
   constructor() {
-    this.mediaCondition = `(min-width: ${tabViewWidth}px)`;
-    this.tabLabelMap = {
-      main: "Hoofdpaneel",
-      map: "Kaart",
+    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 = this.mainSize === "small" ? "medium" : "large"),
+      });
     };
-    this.filterpanelSlot = null;
-    this.overlaySlot = null;
-    this.shrinkMain = () => {
-      this.mainSize = this.mainSize === "large" ? "medium" : "small";
+    this.shrinkDocumentPanel = () => {
+      this.dsoDocumentPanelSizeChange.emit({
+        currentSize: this.documentPanelSize,
+        nextSize: this.documentPanelSize === "large" ? "medium" : "small",
+      });
     };
-    this.expandMain = () => {
-      this.mainSize = this.mainSize === "small" ? "medium" : "large";
+    this.expandDocumentPanel = () => {
+      this.dsoDocumentPanelSizeChange.emit({
+        currentSize: this.documentPanelSize,
+        nextSize: (this.documentPanelSize = this.mainSize === "small" ? "medium" : "large"),
+      });
+    };
+    this.expandContent = () => {
+      this.dsoMainPanelExpand.emit({
+        expand: !this.mainPanelExpanded,
+      });
+    };
+    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.initialMainSize = undefined;
+    this.documentPanelOpen = false;
     this.mainSize = "large";
-    this.tabView = window.innerWidth < tabViewWidth;
-    this.activeTab = "main";
+    this.activeTab = undefined;
+    this.documentPanelSize = "large";
+    this.mainPanelExpanded = false;
+    this.mainPanelHidden = false;
+    this.tabView = window.innerWidth < tabViewBreakpoint;
   }
-  mainSizeWatcher(currentSize, previousSize) {
-    var _a;
-    this.dsoMainSizeChange.emit({
-      stage: "start",
-      previousSize,
-      currentSize,
-    });
-    (_a = this.mainPanel) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionend", (e) => {
-      if (e.propertyName === "flex-basis") {
-        this.dsoMainSizeChange.emit({
-          stage: "end",
-          previousSize,
-          currentSize,
-        });
-      }
-    }, { once: true });
+  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;
@@ -67,10 +122,23 @@ export class ViewerGrid {
       (_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);
-    this.filterpanelSlot = this.host.querySelector("div[slot='filterpanel']");
-    this.overlaySlot = this.host.querySelector("div[slot='overlay']");
   }
   componentDidLoad() {
     var _a, _b;
@@ -80,23 +148,19 @@ export class ViewerGrid {
     if (this.overlayOpen && this.overlaySlot) {
       (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.showModal();
     }
-  }
-  componentWillLoad() {
-    if (this.initialMainSize) {
-      this.mainSize = this.initialMainSize;
+    if (this.mode === "vdk" && this.mapElement instanceof HTMLDivElement) {
+      resizeObserver.observe(this.mapElement);
     }
   }
   disconnectedCallback() {
     window.matchMedia(this.mediaCondition).removeEventListener("change", this.changeListener);
-  }
-  handleFilterpanelApply(mouseEvent) {
-    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });
-  }
-  handleFilterpanelCancel(mouseEvent) {
-    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
+    if (this.mode === "vdk" && this.mapElement) {
+      resizeObserver.unobserve(this.mapElement);
+    }
   }
   render() {
-    return (h(Host, Object.assign({}, { [this.mainSize]: true }), this.tabView && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-sub" }, tabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => (this.activeTab = tab) }, this.tabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "main")) && (h(MainPanel, { ref: (element) => (this.mainPanel = element), tabView: this.tabView, mainSize: this.mainSize, shrinkMain: this.shrinkMain, expandMain: this.expandMain })), h(Filterpanel, { ref: (element) => (this.filterpanel = element), onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { class: "map" }, h("slot", { name: "map" }))), h(Overlay, { ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+    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, expandContent: this.expandContent, 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"; }
@@ -112,6 +176,30 @@ export class ViewerGrid {
   }
   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": false,
+        "defaultValue": "\"vrk\""
+      },
       "filterpanelOpen": {
         "type": "boolean",
         "mutable": false,
@@ -148,17 +236,64 @@ export class ViewerGrid {
         "reflect": true,
         "defaultValue": "false"
       },
-      "initialMainSize": {
+      "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": "MainSize",
-          "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+          "original": "ViewerGridPanelSize",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
-            "MainSize": {
+            "ViewerGridPanelSize": {
               "location": "import",
               "path": "./viewer-grid.interfaces",
-              "id": "src/components/viewer-grid/viewer-grid.interfaces.ts::MainSize"
+              "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": false,
+        "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"
             }
           }
         },
@@ -166,18 +301,76 @@ export class ViewerGrid {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n\r\nDefault size is `large`."
+          "text": "Set active tab in tab view."
         },
-        "attribute": "initial-main-size",
+        "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": false,
+        "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 {
-      "mainSize": {},
-      "tabView": {},
-      "activeTab": {}
+      "tabView": {}
     };
   }
   static get events() {
@@ -244,6 +437,27 @@ export class ViewerGrid {
             }
           }
         }
+      }, {
+        "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",
@@ -252,7 +466,49 @@ export class ViewerGrid {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted before and after main size animation. Inspect `detail` property for more information."
+          "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",
@@ -265,13 +521,100 @@ export class ViewerGrid {
             }
           }
         }
+      }, {
+        "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": "mainSize",
-        "methodName": "mainSizeWatcher"
+        "propName": "documentPanelOpen",
+        "methodName": "documentPanelOpenWatcher"
       }, {
         "propName": "filterpanelOpen",
         "methodName": "filterpanelOpenWatcher"

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

@@ -1 +1 @@
-{"version":3,"file":"viewer-grid.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAQL,IAAI,GACL,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE/D,MAAM,YAAY,GAAG,GAAG,GAAG,EAAE,CAAC;AAO9B,MAAM,OAAO,UAAU;;IACb,mBAAc,GAAG,eAAe,YAAY,KAAK,CAAC;IAElD,gBAAW,GAAgB;MACjC,IAAI,EAAE,aAAa;MACnB,GAAG,EAAE,OAAO;KACb,CAAC;IA8DM,oBAAe,GAAuB,IAAI,CAAC;IAI3C,gBAAW,GAA0B,IAAI,CAAC;IAmD1C,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IACjE,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IACjE,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,WAAgC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;2BArHnF,KAAK;uBAMT,KAAK;;oBAWE,OAAO;mBAGlB,MAAM,CAAC,UAAU,GAAG,YAAY;qBAGxB,MAAM;;EAsCxB,eAAe,CAAC,WAAqB,EAAE,YAAsB;;IAC3D,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;MAC1B,KAAK,EAAE,OAAO;MACd,YAAY;MACZ,WAAW;KACZ,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,SAAS,0CAAE,gBAAgB,CAC9B,eAAe,EACf,CAAC,CAAC,EAAE,EAAE;MACJ,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;UAC1B,KAAK,EAAE,KAAK;UACZ,YAAY;UACZ,WAAW;SACZ,CAAC,CAAC;OACJ;IACH,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;EACJ,CAAC;EAGD,sBAAsB,CAAC,IAAa;;IAClC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACzB,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;KACrD;IAED,IAAI,IAAI,EAAE;MACR,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,EAAE,CAAC;KAC/B;SAAM;MACL,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;KAC3B;EACH,CAAC;EAGD,kBAAkB,CAAC,IAAa;;IAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;KACjD;IAED,IAAI,IAAI,EAAE;MACR,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;KAC3B;SAAM;MACL,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;KACvB;EACH,CAAC;EAYD,iBAAiB;IACf,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAEvF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAiB,yBAAyB,CAAC,CAAC;IAE1F,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAiB,qBAAqB,CAAC,CAAC;EACpF,CAAC;EAED,gBAAgB;;IACd,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE;MAChD,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,EAAE,CAAC;KAC/B;IAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE;MACxC,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;KAC3B;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC;KACtC;EACH,CAAC;EAED,oBAAoB;IAClB,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;EAC5F,CAAC;EAEO,sBAAsB,CAAC,UAA8B;IAC3D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;EAC/D,CAAC;EAEO,uBAAuB,CAAC,UAA8B;IAC5D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;EAChE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,oBAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE;MAChC,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAC,YAAY;QACrB,UAAI,KAAK,EAAC,qBAAqB,IAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE,CAAC;UACjE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IAC7E,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CACf,CACN,CACN,CAAC,CACC,CACD,CACP;MACA,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,IAAI,CACjE,EAAC,SAAS,IACR,GAAG,EAAE,CAAC,OAAmC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,EACxE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,GAChB,CACd;MACD,EAAC,WAAW,IACV,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,EAC9C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,GACnC;MACd,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,IAAI,CAChE,WAAK,KAAK,EAAC,KAAK;QACd,YAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP;MACD,EAAC,OAAO,IACN,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAC1C,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC9D,CACN,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  MainSize,\r\n  TabLabelMap,\r\n  Tabs,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  tabs,\r\n} from \"./viewer-grid.interfaces\";\r\nimport { Filterpanel, MainPanel, Overlay } from \"./components\";\r\n\r\nconst tabViewWidth = 768 + 40;\r\n\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewWidth}px)`;\r\n\r\n  private tabLabelMap: TabLabelMap = {\r\n    main: \"Hoofdpaneel\",\r\n    map: \"Kaart\",\r\n  };\r\n\r\n  private mainPanel?: HTMLDivElement;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  initialMainSize?: MainSize;\r\n\r\n  @State()\r\n  mainSize: MainSize = \"large\";\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewWidth;\r\n\r\n  @State()\r\n  activeTab: Tabs = \"main\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  private filterpanel: HTMLDialogElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\r\n\r\n  @Watch(\"mainSize\")\r\n  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n    this.dsoMainSizeChange.emit({\r\n      stage: \"start\",\r\n      previousSize,\r\n      currentSize,\r\n    });\r\n\r\n    this.mainPanel?.addEventListener(\r\n      \"transitionend\",\r\n      (e) => {\r\n        if (e.propertyName === \"flex-basis\") {\r\n          this.dsoMainSizeChange.emit({\r\n            stage: \"end\",\r\n            previousSize,\r\n            currentSize,\r\n          });\r\n        }\r\n      },\r\n      { once: true }\r\n    );\r\n  }\r\n\r\n  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  private shrinkMain = () => {\r\n    this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n  };\r\n\r\n  private expandMain = () => {\r\n    this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n\r\n    this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n    this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.initialMainSize) {\r\n      this.mainSize = this.initialMainSize;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent | Event) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent | Event) {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host {...{ [this.mainSize]: true }}>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabs.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => (this.activeTab = tab)}>\r\n                    {this.tabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"main\")) && (\r\n          <MainPanel\r\n            ref={(element: HTMLDivElement | undefined) => (this.mainPanel = element)}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            shrinkMain={this.shrinkMain}\r\n            expandMain={this.expandMain}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={(e) => this.handleFilterpanelApply(e)}\r\n          onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\">\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"viewer-grid.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACjH,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAQ,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAaL,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,GAElB,MAAM,0BAA0B,CAAC;AAElC,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;EACnB,MAAM,UAAU,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,WAAW,EAAE,CAAC;EAC/C,IAAI,UAAU,YAAY,UAAU,IAAI,wBAAwB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;IACjF,UAAU,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC;GAC7C;AACH,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;AAEF,SAAS,wBAAwB,CAAC,OAAgB;EAChD,OAAO,OAAO,CAAC,OAAO,KAAK,iBAAiB,CAAC;AAC/C,CAAC;AAED,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,MAAM,iBAAiB,GAAG,GAAG,GAAG,WAAW,CAAC;AAE5C,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAE/B;;;;;;;GAOG;AAMH,MAAM,OAAO,UAAU;;IACb,mBAAc,GAAG,eAAe,iBAAiB,KAAK,CAAC;IAkMvD,oBAAe,GAAG,CAAC,GAAkB,EAAE,EAAE;MAC/C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,GAAG;OACJ,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,WAAW,EAAE,IAAI,CAAC,QAAQ;QAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;OACzD,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,WAAW,EAAE,IAAI,CAAC,QAAQ;QAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;OAC3E,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MACjC,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;QACnC,WAAW,EAAE,IAAI,CAAC,iBAAiB;QACnC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;OAClE,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MACjC,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;QACnC,WAAW,EAAE,IAAI,CAAC,iBAAiB;QACnC,QAAQ,EAAE,CAAC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;OACpF,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MAC3B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,MAAM,EAAE,CAAC,IAAI,CAAC,iBAAiB;OAChC,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,IACE,IAAI,CAAC,UAAU,YAAY,cAAc;QACzC,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAC7E;QACA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;OACzB;MAED,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe;OAC5B,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,WAAgC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE7F,2BAAsB,GAAG,CAAC,UAA8B,EAAE,EAAE;MAClE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEM,4BAAuB,GAAG,CAAC,UAA8B,EAAE,EAAE;MACnE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;IAChE,CAAC,CAAC;gBAvPqB,KAAK;2BAMV,KAAK;uBAMT,KAAK;6BAMC,KAAK;oBAQO,OAAO;;6BAcE,OAAO;6BAM5B,KAAK;2BAMP,KAAK;mBAoEb,MAAM,CAAC,UAAU,GAAG,iBAAiB;;EAI/C,IAAY,eAAe;IACzB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;EACzD,CAAC;EAED,IAAY,WAAW;IACrB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;EACrD,CAAC;EAKD,wBAAwB,CAAC,IAAa;IACpC,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,yBAAyB,EAAE,CAAC;KAClC;EACH,CAAC;EAGD,sBAAsB,CAAC,IAAa;;IAClC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACzB,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;KACrD;IAED,IAAI,IAAI,EAAE;MACR,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,EAAE,CAAC;KAC/B;SAAM;MACL,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;KAC3B;EACH,CAAC;EAGD,kBAAkB,CAAC,IAAa;;IAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;KACjD;IAED,IAAI,IAAI,EAAE;MACR,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;KAC3B;SAAM;MACL,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;KACvB;EACH,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,yBAAyB;IAC7B,IACE,IAAI,CAAC,IAAI,KAAK,KAAK;MACnB,IAAI,CAAC,iBAAiB;MACtB,CAAC,IAAI,CAAC,eAAe;MACrB,IAAI,CAAC,UAAU,YAAY,cAAc;MACzC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,kBAAkB,GAAG,WAAW,GAAG,WAAW,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;QACzG,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,WAAW,GAAG,WAAW,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,EACvF;MACA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,IAAI,EAAE,IAAI;OACX,CAAC,CAAC;KACJ;EACH,CAAC;EAiED,iBAAiB;IACf,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;EACzF,CAAC;EAED,gBAAgB;;IACd,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE;MAChD,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,EAAE,CAAC;KAC/B;IAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE;MACxC,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;KAC3B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,YAAY,cAAc,EAAE;MACpE,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACzC;EACH,CAAC;EAED,oBAAoB;IAClB,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAE1F,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE;MAC1C,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C;EACH,CAAC;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAE9E,OAAO,CACL;MACG,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAC,YAAY;QACrB,UAAI,KAAK,EAAC,qBAAqB,IAC5B,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACtB,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE,CAAC;UACjE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAChF,qBAAqB,CAAC,GAAG,CAAC,CACpB,CACN,CACN,CAAC,CACC,CACD,CACP;MACA,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAClG,EAAC,SAAS,IACR,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,6BAA6B,EAAE,IAAI,CAAC,6BAA6B,GACtD,CACd;MACD,EAAC,WAAW,IACV,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,EAC9C,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,GACzB;MACd,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,IAAI,CAChE,WAAK,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;QAC5D,YAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP;MACA,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,IAAI,CACjG,EAAC,aAAa,IACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,iBAAiB,EACjC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,sCAAsC,EAAE,IAAI,CAAC,sCAAsC,GACpE,CAClB;MACD,EAAC,OAAO,IACN,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAC1C,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC9D,CACV,CACJ,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, Filterpanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridVdkTab,\r\n  ViewerGridVrkTab,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  ViewerGridMainExpandEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridMode,\r\n  viewerGridTabLabelMap,\r\n  viewerGridVdkTabs,\r\n  viewerGridVrkTabs,\r\n  ViewerGridTab,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50)\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\r\n * @slot main-expanded - VDK only\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * VRK or VDK implementation.\r\n   */\r\n  @Prop()\r\n  mode: ViewerGridMode = \"vrk\";\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n  /**\r\n   * **VDK only.** Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * **VDK only.** Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user wants to expand the main panel.\r\n   */\r\n  @Event()\r\n  dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterpanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterpanelSlot() {\r\n    return this.host.querySelector(\"[slot='filterpanel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.mode === \"vdk\" &&\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private emitShrinkMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private emitExpandMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: (this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\"),\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: (this.documentPanelSize = this.mainSize === \"small\" ? \"medium\" : \"large\"),\r\n    });\r\n  };\r\n\r\n  private expandContent = () => {\r\n    this.dsoMainPanelExpand.emit({\r\n      expand: !this.mainPanelExpanded,\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  private handleFilterpanelApply = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private handleFilterpanelCancel = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n    return (\r\n      <>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabLabels.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                    {viewerGridTabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && (this.activeTab === \"main\" || this.activeTab === \"search\"))) && (\r\n          <MainPanel\r\n            mode={this.mode}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            documentPanelOpen={this.documentPanelOpen}\r\n            mainPanelExpanded={this.mainPanelExpanded}\r\n            mainPanelHidden={this.mainPanelHidden}\r\n            shrinkMain={this.emitShrinkMain}\r\n            expandMain={this.emitExpandMain}\r\n            expandContent={this.expandContent}\r\n            toggleMainPanel={this.toggleMainPanel}\r\n            dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={this.handleFilterpanelApply}\r\n          onCancel={this.handleFilterpanelCancel}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n          <DocumentPanel\r\n            tabView={this.tabView}\r\n            panelSize={this.documentPanelSize}\r\n            shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n            expandDocumentPanel={this.expandDocumentPanel}\r\n            dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n          ></DocumentPanel>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}