@dso-toolkit/core 38.1.1 → 40.1.0

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -1,7 +1,9 @@
 import { Component, h, Prop, Event } from '@stencil/core';
+import { v4 as uuidv4 } from 'uuid';
 export class MapBaseLayers {
   constructor() {
     this.selectableRefs = {};
+    this.group = uuidv4();
   }
   baseLayerChangeHandler(baseLayer) {
     this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
@@ -23,7 +25,7 @@ export class MapBaseLayers {
       h("legend", { class: "sr-only" }, "Achtergrond"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")),
-      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, ref: ref => this.selectableRefs[baseLayer.id] = ref, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
+      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: ref => this.selectableRefs[baseLayer.id] = ref, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
         baseLayer.name,
         baseLayer.info
           ? h("p", { slot: "info" }, baseLayer.info)
@@ -38,6 +40,24 @@ export class MapBaseLayers {
     "$": ["map-base-layers.css"]
   }; }
   static get properties() { return {
+    "group": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "group",
+      "reflect": false,
+      "defaultValue": "uuidv4()"
+    },
     "baseLayers": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/map-controls/map-controls.css

@@ -375,7 +375,7 @@ button::-moz-focus-inner {
   border: 0;
 }
 
-section {
+section:not([hidden]) {
   display: flex;
   flex-direction: column;
   height: 100%;

package/dist/collection/components/map-overlays/map-overlays.js

@@ -1,7 +1,9 @@
 import { Component, Event, Prop, h } from '@stencil/core';
+import { v4 as uuidv4 } from 'uuid';
 export class MapOverlays {
   constructor() {
     this.selectableRefs = {};
+    this.group = uuidv4();
   }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
@@ -24,7 +26,7 @@ export class MapOverlays {
       h("legend", { class: "sr-only" }, "Kaartlagen"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")),
-      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, ref: ref => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
+      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: ref => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
         overlay.name,
         overlay.info
           ? h("p", { slot: "info" }, overlay.info)
@@ -39,6 +41,24 @@ export class MapOverlays {
     "$": ["map-overlays.css"]
   }; }
   static get properties() { return {
+    "group": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "group",
+      "reflect": false,
+      "defaultValue": "uuidv4()"
+    },
     "overlays": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/ozon-content/ozon-content.js

@@ -44,7 +44,10 @@ export class OzonContent {
         transformed,
         h("span", { class: "deleted-end" }, "Einde verwijderd element")));
     }
-    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, transformed));
+    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) },
+      h("slot", { name: "prefix" }),
+      transformed,
+      h("slot", { name: "suffix" })));
   }
   static get is() { return "dso-ozon-content"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ozon-content/ozon-content.template.js

@@ -1,6 +1,6 @@
-import { html } from 'lit-html';
+import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function ozonContentTemplate({ content, inline, interactive, deleted, onAnchorClick, onClick }) {
+export function ozonContentTemplate({ content, inline, interactive, deleted, prefix, suffix, onAnchorClick, onClick }) {
   return html `
     <dso-ozon-content
       .content=${content}
@@ -9,6 +9,6 @@ export function ozonContentTemplate({ content, inline, interactive, deleted, onA
       ?deleted=${deleted}
       @anchorClick=${onAnchorClick}
       @dsoClick=${ifDefined(interactive ? onClick : undefined)}
-    ></dso-ozon-content>
+    >${prefix ? html `<span slot="prefix">${prefix}</span>` : nothing}${suffix ? html `<span slot="suffix">${suffix}</span>` : nothing}</dso-ozon-content>
   `;
 }

package/dist/collection/components/pagination/pagination.css

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.pagination {
+  text-align: center;
+}
+.pagination > li {
+  display: inline-block;
+  font-weight: bold;
+  line-height: 28px;
+  text-align: center;
+  vertical-align: middle;
+}
+.pagination > li > a,
+.pagination > li > span {
+  align-items: center;
+  color: #39870c;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  position: relative;
+  width: 32px;
+}
+.pagination > li > a:active,
+.pagination > li > span:active {
+  background-color: #ebf3e6;
+}
+.pagination > li > span {
+  border: 2px solid transparent;
+  border-radius: 50%;
+}
+.pagination > li a {
+  line-height: 32px;
+  text-decoration: none;
+}
+.pagination > li a:hover, .pagination > li a:focus {
+  text-decoration: none;
+}
+.pagination > li a:hover::after, .pagination > li a:focus::after {
+  border-bottom-color: #39870c;
+}
+.pagination > li a::after {
+  border-bottom: 3px solid transparent;
+  bottom: 0;
+  content: "";
+  display: inline-block;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+.pagination > li.active span {
+  background-color: #39870c;
+  color: #fff;
+}
+.pagination > li + li {
+  margin-left: 8px;
+}
+
+.dso-page-hidden {
+  visibility: hidden;
+}

package/dist/collection/components/pagination/pagination.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/pagination/pagination.js

@@ -0,0 +1,114 @@
+import { h, Component, Event, Prop } from '@stencil/core';
+export class Pagination {
+  constructor() {
+    /**
+     * This function is called to format the href
+     */
+    this.formatHref = (page) => '#' + page;
+  }
+  clickHandler(e, page) {
+    if (e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
+      return;
+    }
+    e.preventDefault();
+    this.selectPage.emit({ originalEvent: e, page });
+  }
+  ;
+  render() {
+    if (!this.totalPages) {
+      return null;
+    }
+    const pages = Array.from({ length: this.totalPages }, (_value, i) => i + 1);
+    return (h("ul", { class: "pagination" },
+      h("li", { class: this.currentPage === pages[0] ? 'dso-page-hidden' : undefined },
+        h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => this.clickHandler(e, pages[0]) },
+          h("dso-icon", { icon: "chevron-left" }))),
+      pages.map(page => (h("li", { key: page, class: this.currentPage === page ? 'active' : undefined }, this.currentPage === page
+        ? (h("span", { "aria-current": "page" }, page))
+        : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))),
+      h("li", { class: this.currentPage === pages[pages.length - 1] ? 'dso-page-hidden' : undefined },
+        h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => this.clickHandler(e, pages[pages.length - 1]) },
+          h("dso-icon", { icon: "chevron-right" })))));
+  }
+  static get is() { return "dso-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["pagination.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pagination.css"]
+  }; }
+  static get properties() { return {
+    "totalPages": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Total pages"
+      },
+      "attribute": "total-pages",
+      "reflect": false
+    },
+    "currentPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Current page"
+      },
+      "attribute": "current-page",
+      "reflect": false
+    },
+    "formatHref": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(page: number) => string",
+        "resolved": "(page: number) => string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This function is called to format the href"
+      },
+      "defaultValue": "(page) => '#' + page"
+    }
+  }; }
+  static get events() { return [{
+      "method": "selectPage",
+      "name": "selectPage",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted on page select"
+      },
+      "complexType": {
+        "original": "PaginationSelectPageEvent",
+        "resolved": "PaginationSelectPageEvent",
+        "references": {
+          "PaginationSelectPageEvent": {
+            "location": "import",
+            "path": "./pagination.interfaces"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/components/pagination/pagination.template.js

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+export function paginationTemplate({ totalPages, currentPage, onSelectPage, formatHref, }) {
+  return html `
+    <dso-pagination
+      total-pages=${totalPages}
+      current-page=${currentPage}
+      .formatHref=${formatHref}
+      @selectPage=${onSelectPage}
+    ></dso-pagination>
+  `;
+}

package/dist/collection/components/responsive-element/responsive-element.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/responsive-element/responsive-element.js

@@ -0,0 +1,46 @@
+import { Component, Element, Host, State, h } from '@stencil/core';
+const elementSizes = [
+  {
+    width: 624, alias: 'large'
+  },
+  {
+    width: 375, alias: 'medium'
+  },
+  {
+    width: 0, alias: 'small'
+  }
+];
+export class ResponsiveElement {
+  constructor() {
+    this.sizeAlias = elementSizes[0].alias;
+    this.sizeWidth = 0;
+    this.observer = new ResizeObserver(([entry]) => {
+      var _a, _b;
+      const size = (_b = (_a = elementSizes.find(s => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
+      this.sizeAlias = size;
+    });
+  }
+  componentWillLoad() {
+    this.observer.observe(this.host);
+  }
+  disconnectedCallback() {
+    this.observer.unobserve(this.host);
+  }
+  render() {
+    return (h(Host, { small: this.sizeAlias === 'small', medium: this.sizeAlias === 'medium', large: this.sizeAlias === 'large' },
+      h("slot", null)));
+  }
+  static get is() { return "dso-responsive-element"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./responsive-element.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["responsive-element.css"]
+  }; }
+  static get states() { return {
+    "sizeAlias": {},
+    "sizeWidth": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/responsive-element/responsive-element.template.js

@@ -0,0 +1,8 @@
+import { html } from 'lit-html';
+export function responsiveElementTemplate({ children }) {
+  return html `
+    <dso-responsive-element>
+      ${children}
+    </dso-responsive-element>
+  `;
+}

package/dist/collection/components/selectable/selectable.js

@@ -31,20 +31,21 @@ export class Selectable {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
     return (h(Fragment, null,
-      h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: e => this.change.emit(e), ref: (el) => this.input = el }),
+      h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": (hasInfo && this.infoFixed) ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: e => this.change.emit(e), ref: (el) => this.input = el }),
       h("label", { htmlFor: this.getIdentifier() },
         h("slot", null)),
       hasInfo && (h(Fragment, null,
         !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onToggle: e => this.infoActive = e.detail.active })),
-        h("dso-info", { fixed: this.infoFixed, active: this.infoActive, onClose: () => this.infoActive = false },
-          h("slot", { name: "info" }))))));
+        h("dso-info", { id: (hasInfo && this.infoFixed) ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onClose: () => this.infoActive = false },
+          h("div", null,
+            h("slot", { name: "info" })))))));
   }
   getIdentifier() {
     var _a;
     return (_a = this.identifier) !== null && _a !== void 0 ? _a : this.fallbackIdentifier;
   }
   static get is() { return "dso-selectable"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["selectable.scss"]
   }; }

package/dist/collection/components/tooltip/tooltip.js

@@ -4,6 +4,13 @@ import { h, Component, Element, Host, Listen, Method, Prop, State, Watch } from
 import clsx from 'clsx';
 // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
+function hasOverflow(el) {
+  const style = window.getComputedStyle(el);
+  const overflowX = style.getPropertyValue('overflow-x');
+  const overflowY = style.getPropertyValue('overflow-y');
+  const overflowValues = ['hidden', 'clip'];
+  return overflowValues.indexOf(overflowX) != -1 || overflowValues.indexOf(overflowY) != -1;
+}
 export class Tooltip {
   constructor() {
     /**
@@ -14,6 +21,10 @@ export class Tooltip {
      * Set position of tooltip relative to target
      */
     this.position = 'top';
+    /**
+     * Set position strategy of tooltip
+     */
+    this.strategy = 'auto';
     /**
      * Set attribute `no-arrow` to hide the arrow
      */
@@ -57,6 +68,33 @@ export class Tooltip {
       placement: this.position
     });
   }
+  watchStrategy() {
+    this.setStrategy();
+  }
+  setStrategy() {
+    if (!this.popper) {
+      return;
+    }
+    if (this.strategy == 'absolute' || this.strategy == 'fixed') {
+      this.popper.setOptions({
+        strategy: this.strategy,
+      });
+      return;
+    }
+    let element = this.element;
+    while ((element === null || element === void 0 ? void 0 : element.parentNode) != null && element.parentNode != document) {
+      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+      if (element != null && hasOverflow(element)) {
+        this.popper.setOptions({
+          strategy: 'fixed',
+        });
+        return;
+      }
+    }
+    this.popper.setOptions({
+      strategy: 'absolute',
+    });
+  }
   watchActive() {
     var _a;
     if (this.active) {
@@ -121,6 +159,7 @@ export class Tooltip {
   }
   componentDidRender() {
     var _a;
+    this.setStrategy();
     if (this.active) {
       (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
     }
@@ -198,6 +237,24 @@ export class Tooltip {
       "reflect": false,
       "defaultValue": "'top'"
     },
+    "strategy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'auto' | 'absolute' | 'fixed'",
+        "resolved": "\"absolute\" | \"auto\" | \"fixed\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set position strategy of tooltip"
+      },
+      "attribute": "strategy",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    },
     "for": {
       "type": "string",
       "mutable": false,
@@ -331,6 +388,9 @@ export class Tooltip {
   static get watchers() { return [{
       "propName": "position",
       "methodName": "watchPosition"
+    }, {
+      "propName": "strategy",
+      "methodName": "watchStrategy"
     }, {
       "propName": "active",
       "methodName": "watchActive"

package/dist/collection/components/viewer-grid/example-pages/viewer-grid-document-header.example-template.js

@@ -0,0 +1,22 @@
+import { AlertType } from "@dso-toolkit/sources";
+import { documentHeaderTemplate } from '@dso-toolkit/css/src/components/document-header/document-header.template';
+import { status, features, statusContent } from '@dso-toolkit/css/src/components/document-header/document-header.content';
+import { alertTemplate } from '../../alert/alert.template';
+import { viewerGridTemplate } from '../templates/viewer-grid.template';
+export function viewerGridDocumentHeaderExampleTemplate({ documentHeaderFeaturesOpen, documentHeaderFeatureAction, documentHeaderStatusOpen }) {
+  return viewerGridTemplate({
+    main: documentHeaderTemplate({
+      title: 'Omgevingsplan gemeente Gouda',
+      type: 'Een omgevingsplan waar de omgeving mooier van wordt',
+      owner: 'Gemeente Gouda',
+      features,
+      featureAction: documentHeaderFeatureAction,
+      featuresOpen: documentHeaderFeaturesOpen,
+      statusContentOpen: documentHeaderStatusOpen,
+      status: status(documentHeaderFeaturesOpen, documentHeaderFeatureAction),
+      statusContent
+    }),
+    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
+  });
+}
+;

package/dist/collection/components/viewer-grid/example-pages/viewer-grid-document-list.example-template.js

@@ -0,0 +1,12 @@
+import { AlertType } from "@dso-toolkit/sources";
+import { documentListStatusDemoContentMapper } from '@dso-toolkit/css/src/components/document-list/document-list.mapper';
+import { documentListTemplate } from '@dso-toolkit/css/src/components/document-list/document-list.template';
+import { alertTemplate } from "../../alert/alert.template";
+import { viewerGridTemplate } from '../templates/viewer-grid.template';
+export function viewerGridDocumentListExampleTemplate(documentList) {
+  return viewerGridTemplate({
+    main: documentListTemplate({ items: documentList.items.map(item => (Object.assign(Object.assign({}, item), { status: documentListStatusDemoContentMapper(item.status) }))) }),
+    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
+  });
+}
+;

package/dist/collection/components/viewer-grid/example-pages/viewer-grid-filterblok.example-template.js

@@ -0,0 +1,60 @@
+import { AlertType } from "@dso-toolkit/sources";
+import { html } from "lit-html";
+import { alertTemplate } from "../../alert/alert.template";
+import { buttonTemplate } from "../../button/button.template";
+import { contextTemplate } from "../../context/context.template";
+import { labelGroupTemplate } from "../../label-group/label-group.template";
+import { viewerGridTemplate } from "../templates/viewer-grid.template";
+export function viewerGridFilterblokExampleTemplate() {
+  const activeFilters = [
+    {
+      label: "Geldend",
+      status: "bright",
+    },
+    {
+      label: "Regels",
+      status: "bright",
+    },
+    {
+      label: "Tuin",
+      status: "bright",
+    },
+    {
+      label: "Woongebied",
+      status: "bright",
+    },
+    {
+      label: "Geluidzone",
+      status: "bright",
+    },
+    {
+      label: "Thema: milieu algemeen",
+      status: "bright",
+    },
+  ];
+  return viewerGridTemplate({
+    main: html `
+      <section class="dso-filterblok">
+        <div class="dso-highlight-box">
+          ${contextTemplate({
+      type: "label",
+      label: html `<h3>Uw keuzes</h3>`,
+      content: buttonTemplate({
+        variant: "tertiary",
+        label: "Alle opties",
+        icon: {
+          icon: "pencil",
+        },
+      }),
+      children: html `
+              <p class="dso-filterblok-address">Achterwillenseweg 9a, Gouda</p>
+              ${labelGroupTemplate({ labels: activeFilters })}
+            `,
+    })}
+        </div>
+      </section>
+    `,
+    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
+  });
+}
+;

package/dist/collection/components/viewer-grid/example-pages/viewer-grid-tiles.example-template.js

@@ -0,0 +1,17 @@
+import { AlertType } from "@dso-toolkit/sources";
+import { html } from "lit-html";
+import { alertTemplate } from "../../alert/alert.template";
+import { tileGridTemplate } from "@dso-toolkit/css/src/components/tile-grid/tile-grid.template";
+import { tileTemplate } from "@dso-toolkit/css/src/components/tile/tile.template";
+import { viewerGridTemplate } from "../templates/viewer-grid.template";
+export function viewerGridTilesExampleTemplate(tiles) {
+  return viewerGridTemplate({
+    main: html `
+      <h2>Thema's</h2>
+      <p>Bekijk regels en beleid rond een bepaald thema.</p>
+      ${tileGridTemplate({ children: html `${tiles.map(tile => tileTemplate(tile))}` })}
+    `,
+    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
+  });
+}
+;

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

@@ -0,0 +1,20 @@
+import { html, nothing } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+export function viewerGridTemplate({ filterpanel, main, map, overlay, filterpanelOpen, overlayOpen, initialMainSize, mainSizeChange, filterpanelApply, filterpanelCancel, closeOverlay, }) {
+  return html `
+    <dso-viewer-grid
+      ?filterpanel-open=${filterpanelOpen}
+      ?overlay-open=${overlayOpen}
+      @mainSizeChange=${mainSizeChange}
+      @closeOverlay=${closeOverlay}
+      @filterpanelApply=${filterpanelApply}
+      @filterpanelCancel=${filterpanelCancel}
+      initial-main-size=${ifDefined(initialMainSize)}
+    >
+      ${filterpanel ? html `<div slot="filterpanel">${filterpanel}</div>` : nothing}
+      <div slot="main">${main}</div>
+      <div slot="map">${map}</div>
+      ${overlay ? html `<div slot="overlay">${overlay}</div>` : nothing}
+    </dso-viewer-grid>
+  `;
+}