@dso-toolkit/core 57.0.0 → 58.0.0

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

@@ -4,55 +4,6 @@
   box-sizing: border-box;
 }
 
-:host {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-}
-
-:host([small]) .dso-map-panel {
-  flex-basis: 375px;
-  min-width: 0;
-  max-width: 375px;
-}
-@media screen and (max-width: 375px) {
-  :host([small]) .dso-map-panel {
-    flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 0;
-    transition: none;
-  }
-}
-
-:host([medium]) .dso-map-panel {
-  flex-basis: 624px;
-  min-width: 375px;
-  max-width: 624px;
-}
-@media screen and (max-width: 624px) {
-  :host([medium]) .dso-map-panel {
-    flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 375px;
-    transition: none;
-  }
-}
-
-:host([large]) .dso-map-panel {
-  flex-basis: 60%;
-  min-width: 768px;
-  max-width: 1024px;
-}
-@media screen and (max-width: 768px) {
-  :host([large]) .dso-map-panel {
-    flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 768px;
-    transition: none;
-  }
-}
-
 button {
   -webkit-appearance: button;
   color: inherit;
@@ -259,23 +210,20 @@ button::-moz-focus-inner {
   right: 16px;
 }
 
-.dso-map-panel {
+.dso-main-panel {
   background-color: #fff;
-  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
   flex-shrink: 0;
   flex-grow: 0;
-  padding-right: 8px;
   position: relative;
   transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;
   z-index: 100;
 }
-.dso-map-panel .dso-filterblok-address {
+.dso-main-panel .dso-filterblok-address {
   font-weight: bold;
   margin: 8px 0;
 }
-.dso-map-panel .main {
+.dso-main-panel .main {
   height: 100%;
-  overflow-y: scroll;
   padding: 0 16px 8px;
 }
 
@@ -433,23 +381,23 @@ button::-moz-focus-inner {
   height: 100%;
   width: 100%;
   overflow: hidden;
+  position: relative;
 }
 
 .filterpanel,
 .overlay {
   background-color: #fff;
+  border: 0;
   height: 100%;
+  margin-block: 0;
+  max-height: 100vh;
   overflow-y: auto;
-  position: absolute;
   z-index: 101;
 }
 
 .filterpanel {
-  box-shadow: 2px 0 5px #666;
   padding: 8px 16px;
   left: 0;
-  max-width: 896px;
-  width: calc(100vw - 40px);
 }
 @media screen and (max-width: 768px) {
   .filterpanel {
@@ -466,45 +414,21 @@ button::-moz-focus-inner {
   font-size: 2rem;
   font-weight: 700;
 }
-.filterpanel::before {
-  content: "";
-  display: block;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 896px;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-@media screen and (max-width: 936px) {
-  .filterpanel::before {
-    left: auto;
-    width: 40px;
-  }
-}
 
 .overlay {
-  box-shadow: -2px 0 5px #666;
   padding: 40px 16px 8px;
   right: 0;
   width: 624px;
 }
+.overlay::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
 @media screen and (max-width: 624px) {
   .overlay {
     width: 100vw;
   }
 }
 
-.dimscreen {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 624px;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 102;
-}
-
 .filterpanel-buttons {
   text-align: right;
 }
@@ -750,4 +674,295 @@ button::-moz-focus-inner {
 }
 .filterpanel-buttons .cancel-button + .apply-button {
   margin-left: 16px;
+}
+
+@media screen and (min-width: 808px) {
+  :host {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+  }
+  :host([small]) .dso-main-panel {
+    flex-basis: 375px;
+    min-width: 0;
+    max-width: 375px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 375px) {
+  :host([small]) .dso-main-panel {
+    flex-basis: 100vw;
+    max-width: 100vw;
+    min-width: 0;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  :host([medium]) .dso-main-panel {
+    flex-basis: 624px;
+    min-width: 375px;
+    max-width: 624px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 624px) {
+  :host([medium]) .dso-main-panel {
+    flex-basis: 100vw;
+    max-width: 100vw;
+    min-width: 375px;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  :host([large]) .dso-main-panel {
+    flex-basis: 60%;
+    min-width: 768px;
+    max-width: 1024px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 768px) {
+  :host([large]) .dso-main-panel {
+    flex-basis: 100vw;
+    max-width: 100vw;
+    min-width: 768px;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  .dso-main-panel {
+    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
+    padding-right: 8px;
+  }
+  .dso-main-panel .main {
+    overflow-y: scroll;
+  }
+}
+@media screen and (min-width: 808px) {
+  .filterpanel {
+    box-shadow: 2px 0 5px #666;
+    margin-inline: 0 auto;
+    max-width: 896px;
+    width: calc(100vw - 40px);
+  }
+  .filterpanel::before {
+    content: "";
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 896px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 936px) {
+  .filterpanel::before {
+    left: auto;
+    width: 40px;
+  }
+}
+@media screen and (min-width: 808px) {
+  .overlay {
+    box-shadow: -2px 0 5px #666;
+    margin-inline: auto 0;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-navbar {
+    min-height: 32px;
+  }
+  .dso-navbar .dso-navbar-header {
+    float: left;
+  }
+  .dso-navbar .dso-navbar-toggle {
+    border-radius: 4px;
+    min-width: auto;
+    padding: 5px 0;
+  }
+  .dso-navbar .dso-navbar-toggle dso-icon,
+  .dso-navbar .dso-navbar-toggle svg.di {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+}
+@media screen and (max-width: 807.99px) and (min-width: 992px) {
+  .dso-navbar .dso-navbar-toggle {
+    display: none;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-nav {
+    list-style: none;
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+  .dso-nav > li > a,
+  .dso-nav > li > button {
+    display: block;
+  }
+  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,
+  .dso-nav > li > button,
+  .dso-nav > li > button:hover,
+  .dso-nav > li > button:focus,
+  .dso-nav > li > button:visited {
+    color: #275937;
+  }
+  .dso-nav > li.dso-active > a,
+  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,
+  .dso-nav > li.is-active > button {
+    border-bottom: 4px solid #8b4a6a;
+    font-weight: bold;
+  }
+  .dso-nav.dso-nav-main > li {
+    display: inline-block;
+  }
+  .dso-nav.dso-nav-main > li > a,
+  .dso-nav.dso-nav-main > li > button {
+    text-decoration: none;
+    font-size: 1.25em;
+    line-height: 1;
+    margin-top: 8px;
+    padding: 8px 16px 7px;
+  }
+  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active,
+  .dso-nav.dso-nav-main > li > button:hover,
+  .dso-nav.dso-nav-main > li > button:focus,
+  .dso-nav.dso-nav-main > li > button:active {
+    text-decoration: underline;
+  }
+  .dso-nav.dso-nav-sub > li {
+    display: inline-block;
+  }
+  .dso-nav.dso-nav-sub > li > a,
+  .dso-nav.dso-nav-sub > li > button {
+    text-decoration: none;
+    font-size: 1rem;
+    margin-top: 4px;
+    padding: 4px 8px 3px;
+  }
+  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active,
+  .dso-nav.dso-nav-sub > li > button:hover,
+  .dso-nav.dso-nav-sub > li > button:focus,
+  .dso-nav.dso-nav-sub > li > button:active {
+    text-decoration: underline;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-navbar {
+    padding-inline: 16px;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-nav {
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    gap: 16px;
+    margin-block-start: 0;
+    width: calc(100vw - 32px);
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-tertiary {
+    display: inline-block;
+    font-size: 1em;
+    font-weight: 500;
+    margin-bottom: 0;
+    text-decoration: none;
+    touch-action: manipulation;
+    text-align: left;
+    user-select: none;
+    vertical-align: middle;
+    border: 0;
+    color: #39870c;
+    line-height: 1;
+    padding: 0;
+    background-color: transparent;
+    font-weight: 300;
+  }
+  .dso-tertiary:focus, .dso-tertiary:focus-visible {
+    outline-offset: 2px;
+  }
+  .dso-tertiary:active {
+    outline: 0;
+  }
+  .dso-tertiary[disabled] {
+    color: #afcf9d;
+  }
+  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
+    color: #39870c;
+  }
+  .dso-tertiary:not([disabled]):hover {
+    color: #275937;
+    text-decoration: underline;
+    text-underline-position: under;
+  }
+  .dso-tertiary:not([disabled]):active {
+    color: #173521;
+  }
+  .dso-tertiary.dso-align {
+    line-height: calc(1.5em - 1px);
+    padding: 11px 0;
+    position: relative;
+  }
+  .dso-tertiary.dso-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dso-tertiary.dso-spinner-left::before {
+    background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    content: "";
+    display: inline-block;
+    height: 24px;
+    vertical-align: middle;
+    width: 24px;
+    margin-right: 8px;
+  }
+  .dso-tertiary.dso-spinner-right::after {
+    background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    content: "";
+    display: inline-block;
+    height: 24px;
+    vertical-align: middle;
+    width: 24px;
+    margin-left: 8px;
+  }
+  .dso-tertiary dso-icon + span:not(.sr-only),
+  .dso-tertiary svg.di + span:not(.sr-only),
+  .dso-tertiary span:not(.sr-only) + dso-icon,
+  .dso-tertiary span:not(.sr-only) + svg.di {
+    margin-left: 8px;
+  }
+  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
+  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
+  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
+  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
+    margin-left: 4px;
+  }
+  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
+  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
+  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
+    margin-left: 0;
+  }
+  .dso-tertiary dso-icon,
+  .dso-tertiary svg.di,
+  .dso-tertiary span {
+    vertical-align: middle;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .filterpanel,
+  .overlay {
+    margin-inline: 0;
+    max-width: 100vw;
+    top: 0;
+    width: 100vw;
+  }
 }

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

@@ -1,2 +1,2 @@
-export {};
+export const tabs = ["main", "map"];
 //# sourceMappingURL=viewer-grid.interfaces.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  /**\r\n   * Indicates whether it's before or after the animation\r\n   */\r\n  stage: \"start\" | \"end\";\r\n  previousSize: MainSize;\r\n  currentSize: MainSize;\r\n}\r\n\r\nexport interface FilterpanelEvent {\r\n  originalEvent: MouseEvent;\r\n}\r\n\r\nexport type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n"]}
+{"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"AAyBA,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,KAAK,CAAU,CAAC","sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  /**\r\n   * Indicates whether it's before or after the animation\r\n   */\r\n  stage: \"start\" | \"end\";\r\n  previousSize: MainSize;\r\n  currentSize: MainSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n\r\nexport const tabs = [\"main\", \"map\"] as const;\r\n\r\nexport type Tabs = (typeof tabs)[number];\r\n\r\nexport type TabLabelMap = { [key in Tabs]: string };\r\n"]}

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

@@ -1,12 +1,14 @@
 import { h, Host } from "@stencil/core";
-import { createFocusTrap } from "focus-trap";
-import { ViewerGridFilterpanelButtons } from "./viewer-grid-filterpanel-buttons";
+import clsx from "clsx";
+import { tabs, } from "./viewer-grid.interfaces";
+import { Filterpanel, MainPanel, Overlay } from "./components";
+const tabViewWidth = 768 + 40;
 export class ViewerGrid {
   constructor() {
-    this.sizeLabelMap = {
-      small: "smal",
-      medium: "middel",
-      large: "breed",
+    this.mediaCondition = `(min-width: ${tabViewWidth}px)`;
+    this.tabLabelMap = {
+      main: "Hoofdpaneel",
+      map: "Kaart",
     };
     this.filterpanelSlot = null;
     this.overlaySlot = null;
@@ -16,16 +18,13 @@ export class ViewerGrid {
     this.expandMain = () => {
       this.mainSize = this.mainSize === "small" ? "medium" : "large";
     };
-    this.keyDownListener = (event) => {
-      if (event.key !== "Escape") {
-        return;
-      }
-      this.dsoCloseOverlay.emit(event);
-    };
+    this.changeListener = (largeScreen) => (this.tabView = !largeScreen.matches);
     this.filterpanelOpen = false;
     this.overlayOpen = false;
     this.initialMainSize = undefined;
     this.mainSize = "large";
+    this.tabView = window.innerWidth < tabViewWidth;
+    this.activeTab = "main";
   }
   mainSizeWatcher(currentSize, previousSize) {
     var _a;
@@ -34,7 +33,7 @@ export class ViewerGrid {
       previousSize,
       currentSize,
     });
-    (_a = this.mapPanel) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionend", (e) => {
+    (_a = this.mainPanel) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionend", (e) => {
       if (e.propertyName === "flex-basis") {
         this.dsoMainSizeChange.emit({
           stage: "end",
@@ -44,70 +43,51 @@ export class ViewerGrid {
       }
     }, { once: true });
   }
-  updateFocusTrap() {
+  filterpanelOpenWatcher(open) {
     var _a, _b;
-    if (this.filterpanelOpen && this.overlayOpen) {
-      return;
+    if (!this.filterpanelSlot) {
+      console.warn("slot 'filterpanel' has not been set");
     }
-    if (this.filterpanelFocustrap) {
-      if (this.filterpanelOpen && !((_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.hidden)) {
-        this.filterpanelFocustrap.activate();
-        this.host.addEventListener("keydown", this.keyDownListener);
-      }
-      else {
-        this.filterpanelFocustrap.deactivate();
-        this.host.removeEventListener("keydown", this.keyDownListener);
-      }
+    if (open) {
+      (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.showModal();
     }
-    if (this.overlayFocustrap) {
-      if (this.overlayOpen && !((_b = this.overlay) === null || _b === void 0 ? void 0 : _b.hidden)) {
-        this.overlayFocustrap.activate();
-        this.host.addEventListener("keydown", this.keyDownListener);
-      }
-      else {
-        this.overlayFocustrap.deactivate();
-        this.host.removeEventListener("keydown", this.keyDownListener);
-      }
+    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();
     }
   }
   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() {
-    if (this.filterpanel && this.filterpanelSlot) {
-      this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {
-        escapeDeactivates: false,
-        allowOutsideClick: true,
-        tabbableOptions: {
-          getShadowRoot: true,
-        },
-      });
+    var _a, _b;
+    if (this.filterpanelOpen && this.filterpanelSlot) {
+      (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.showModal();
     }
-    if (this.overlay && this.overlaySlot) {
-      this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {
-        escapeDeactivates: false,
-        allowOutsideClick: true,
-        tabbableOptions: {
-          getShadowRoot: true,
-        },
-      });
+    if (this.overlayOpen && this.overlaySlot) {
+      (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.showModal();
     }
-    this.updateFocusTrap();
   }
   componentWillLoad() {
     if (this.initialMainSize) {
       this.mainSize = this.initialMainSize;
     }
   }
-  componentDidUpdate() {
-    this.updateFocusTrap();
-  }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.overlayFocustrap) === null || _a === void 0 ? void 0 : _a.deactivate();
-    (_b = this.filterpanelFocustrap) === null || _b === void 0 ? void 0 : _b.deactivate();
-    this.host.removeEventListener("keydown", this.keyDownListener);
+    window.matchMedia(this.mediaCondition).removeEventListener("change", this.changeListener);
   }
   handleFilterpanelApply(mouseEvent) {
     this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });
@@ -116,7 +96,7 @@ export class ViewerGrid {
     this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
   }
   render() {
-    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, h("span", { class: "sr-only" }, "Tekstpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, h("span", { class: "sr-only" }, "Tekstpaneel breder maken"), h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, h("h1", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }), h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")))));
+    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 }) })));
   }
   static get is() { return "dso-viewer-grid"; }
   static get encapsulation() { return "shadow"; }
@@ -194,7 +174,9 @@ export class ViewerGrid {
   }
   static get states() {
     return {
-      "mainSize": {}
+      "mainSize": {},
+      "tabView": {},
+      "activeTab": {}
     };
   }
   static get events() {
@@ -209,14 +191,12 @@ export class ViewerGrid {
           "text": "Emitted when user wants to close the overlay."
         },
         "complexType": {
-          "original": "MouseEvent | KeyboardEvent",
-          "resolved": "KeyboardEvent | MouseEvent",
+          "original": "ViewerGridCloseOverlayEvent",
+          "resolved": "ViewerGridCloseOverlayEvent",
           "references": {
-            "MouseEvent": {
-              "location": "global"
-            },
-            "KeyboardEvent": {
-              "location": "global"
+            "ViewerGridCloseOverlayEvent": {
+              "location": "import",
+              "path": "./viewer-grid.interfaces"
             }
           }
         }
@@ -231,10 +211,10 @@ export class ViewerGrid {
           "text": "Emitted when user cancels filterpanel."
         },
         "complexType": {
-          "original": "FilterpanelEvent",
-          "resolved": "FilterpanelEvent",
+          "original": "ViewerGridFilterpanelCancelEvent",
+          "resolved": "ViewerGridFilterpanelCancelEvent",
           "references": {
-            "FilterpanelEvent": {
+            "ViewerGridFilterpanelCancelEvent": {
               "location": "import",
               "path": "./viewer-grid.interfaces"
             }
@@ -251,10 +231,10 @@ export class ViewerGrid {
           "text": "Emitted when user applies filterpanel options."
         },
         "complexType": {
-          "original": "FilterpanelEvent",
-          "resolved": "FilterpanelEvent",
+          "original": "ViewerGridFilterpanelApplyEvent",
+          "resolved": "ViewerGridFilterpanelApplyEvent",
           "references": {
-            "FilterpanelEvent": {
+            "ViewerGridFilterpanelApplyEvent": {
               "location": "import",
               "path": "./viewer-grid.interfaces"
             }
@@ -287,6 +267,12 @@ export class ViewerGrid {
     return [{
         "propName": "mainSize",
         "methodName": "mainSizeWatcher"
+      }, {
+        "propName": "filterpanelOpen",
+        "methodName": "filterpanelOpenWatcher"
+      }, {
+        "propName": "overlayOpen",
+        "methodName": "overlayOpenWatcher"
       }];
   }
 }