@dso-toolkit/core 83.1.0 → 84.0.0

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

@@ -1,4 +1,4 @@
-import { h, Fragment, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { h, Fragment, proxyCustomElement, HTMLElement, createEvent, transformTag } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
 import { d as debounce } from './index2.js';
 
@@ -23,28 +23,16 @@ const SizingButtons = ({ shrink, expand, size, panelLabel, placement, }) => {
     if (size !== "large") {
         buttons.push(h(SizingButton, { onClick: expand, label: `${panelLabel} breder maken`, icon: placement === "right" ? "chevron-left" : "chevron-right", className: "expand" }));
     }
-    return (h("div", { class: "sizing-buttons" },
-        h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" },
-            "Breedte ",
-            panelLabel.toLocaleLowerCase(),
-            ": ",
-            viewerGridSizeLabelMap[size]),
-        buttons));
+    return (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte ", panelLabel.toLocaleLowerCase(), ": ", viewerGridSizeLabelMap[size]), buttons));
 };
 
 const DocumentPanel = ({ tabView, panelSize, shrinkDocumentPanel, expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd, }) => (h("div", { class: "dso-document-panel", onTransitionEnd: (e) => {
         if (e.propertyName === "flex-basis") {
             dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });
         }
-    } },
-    !tabView && (h(SizingButtons, { panelLabel: "Documentpaneel", size: panelSize, expand: expandDocumentPanel, shrink: shrinkDocumentPanel, placement: "right" })),
-    h("div", { class: "content" },
-        h("slot", { name: "document-panel" }))));
+    } }, !tabView && (h(SizingButtons, { panelLabel: "Documentpaneel", size: panelSize, expand: expandDocumentPanel, shrink: shrinkDocumentPanel, placement: "right" })), h("div", { class: "content" }, h("slot", { name: "document-panel" }))));
 
-const FilterPanel = ({ open, title, ref, dsoCloseFilterPanel, }) => (h("dialog", { class: "filter-panel", ref: ref }, open && (h(Fragment, null,
-    title && h("h3", null, title),
-    h("dso-icon-button", { class: "dso-close", icon: "times", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseFilterPanel }),
-    h("slot", { name: "filter-panel" })))));
+const FilterPanel = ({ open, title, ref, dsoCloseFilterPanel, }) => (h("dialog", { class: "filter-panel", ref: ref }, open && (h(Fragment, null, title && h("h3", null, title), h("dso-icon-button", { class: "dso-close", icon: "times", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseFilterPanel }), h("slot", { name: "filter-panel" })))));
 
 const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
         compact: !tabView && documentPanelOpen && !mainPanelExpanded,
@@ -55,20 +43,524 @@ const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, ma
         if (e.propertyName === "flex-basis") {
             dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
         }
-    } },
-    !tabView && documentPanelOpen && (h("div", { class: "toggle-button" },
-        h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))),
-    h("div", { class: clsx("content", { invisible: mainPanelHidden }) },
-        h("slot", { name: "main" }))));
+    } }, !tabView && documentPanelOpen && (h("div", { class: "toggle-button" }, h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }))));
 
 const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", ref: ref, onCancel: (e) => {
         e.preventDefault();
         dsoCloseOverlay(e);
-    } },
-    h("dso-icon-button", { class: "overlay-close-button", icon: "times", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }),
-    h("slot", { name: "overlay" })));
+    } }, h("dso-icon-button", { class: "overlay-close-button", icon: "times", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }), h("slot", { name: "overlay" })));
 
-const viewerGridCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\n}\n:host .dso-main-panel {\n  transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(0);\n}\n\n.overlay-close-button {\n  position: absolute;\n  line-height: 1;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.viewer-grid-columns {\n  position: relative;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .toggle-button {\n  --_dso-icon-button-map-border-radius: 0 4px 4px 0;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  inset-block-start: auto;\n  inset-block-end: 16px;\n  inset-inline-end: calc(100% + 1px);\n  transition: inset-inline-end 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons .shrink,\n.dso-document-panel .sizing-buttons .expand {\n  --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;\n  --_dso-icon-button-map-border-radius: 4px 0 0 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  inset-block-start: 16px;\n  inline-size: 44px;\n  z-index: -1;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filter-panel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filter-panel {\n  display: block;\n  position: absolute;\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-block-start: 0;\n  block-size: 100%;\n  inset-inline-start: -380px;\n  inline-size: 100%;\n  transition: inset-inline-start 200ms ease-in;\n}\n@media screen and (max-width: 768px) {\n  .filter-panel {\n    inline-size: 100vw;\n  }\n  .filter-panel::before {\n    display: none !important;\n  }\n}\n@media screen and (min-width: 992px) {\n  .filter-panel {\n    max-inline-size: 380px;\n  }\n}\n.filter-panel[open] {\n  inset-inline-start: 0;\n  box-shadow: none;\n  border-inline-end: 1px solid #e5e5e5;\n}\n.filter-panel h3 {\n  color: #275937;\n}\n.filter-panel .dso-close {\n  --_dso-icon-button-tertiary-color: #191919;\n  position: absolute;\n  inset-block-start: 20px;\n  inset-inline-end: 20px;\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    inline-size: 100vw;\n  }\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    flex-direction: column;\n    block-size: 100vh;\n    overflow: clip;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .viewer-grid-columns {\n    display: flex;\n    overflow: hidden;\n    flex-grow: 1;\n  }\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n  .filter-panel {\n    margin-inline: 0 auto;\n    inline-size: calc(100vw - 40px);\n  }\n  .filter-panel[open] {\n    border-inline-end: 1px solid #e5e5e5;\n  }\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 1031.99px) {\n  :host([filter-panel-open]) .dso-main-panel {\n    margin-inline-start: 380px;\n    max-inline-size: calc(100vw - 380px);\n  }\n  .filter-panel {\n    inline-size: 380px;\n    inset-inline-start: -380px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon {\n    margin-inline-start: 8px;\n    margin-inline-end: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-block-end: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\n  }\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n  .dso-nav {\n    border-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: calc(100vw - 32px);\n  }\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    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\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    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\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon {\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n  .filter-panel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n  .filter-panel {\n    inset-inline-start: -100vw;\n  }\n}\n@media screen and (min-width: 992px) {\n  :host([filter-panel-open]) .dso-main-panel {\n    margin-inline-start: 380px;\n  }\n}";
+const viewerGridCss = () => `*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host .overlay {
+  block-size: calc(100% - 32px);
+  margin-block: 16px;
+  margin-inline: auto 16px;
+}
+:host .dso-main-panel {
+  transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;
+}
+
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  border: 0;
+  overflow: hidden;
+  clip-path: rect(0 0 0 0);
+}
+
+.overlay-close-button {
+  position: absolute;
+  line-height: 1;
+  inset-block-start: 8px;
+  inset-inline-end: 16px;
+}
+
+.content.invisible {
+  visibility: hidden;
+}
+
+.viewer-grid-columns {
+  position: relative;
+}
+
+.dso-main-panel .content,
+.dso-document-panel .content {
+  block-size: 100%;
+  padding-block: 0;
+  padding-inline: 16px;
+}
+
+.dso-main-panel {
+  background-color: #fff;
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;
+  z-index: 100;
+}
+.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {
+  inset-inline-start: -432px;
+}
+.dso-main-panel.compact, .dso-main-panel.contracted {
+  flex-shrink: unset;
+  flex-grow: unset;
+  position: absolute;
+  transition: none;
+}
+.dso-main-panel.expanded.collapsed {
+  position: absolute;
+  block-size: 100%;
+}
+.dso-main-panel .sizing-buttons,
+.dso-main-panel .toggle-button {
+  inset-inline-start: calc(100% + 1px);
+  transition: inset-inline-start 200ms ease-in;
+  padding-block: 0 8px;
+  padding-inline: 0 4px;
+}
+.dso-main-panel .toggle-button {
+  --_dso-icon-button-map-border-radius: 0 4px 4px 0;
+}
+
+.dso-document-panel {
+  background-color: #fff;
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;
+  z-index: 100;
+}
+.dso-document-panel .sizing-buttons {
+  inset-block-start: auto;
+  inset-block-end: 16px;
+  inset-inline-end: calc(100% + 1px);
+  transition: inset-inline-end 200ms ease-in;
+  padding-block: 0 8px;
+  padding-inline: 4px 0;
+}
+.dso-document-panel .sizing-buttons .shrink,
+.dso-document-panel .sizing-buttons .expand {
+  --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;
+  --_dso-icon-button-map-border-radius: 4px 0 0 4px;
+}
+
+.sizing-buttons,
+.toggle-button {
+  overflow-x: hidden;
+  position: absolute;
+  inset-block-start: 16px;
+  inline-size: 44px;
+  z-index: -1;
+}
+
+.map {
+  block-size: 100%;
+  inline-size: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.filter-panel,
+.overlay {
+  background-color: #fff;
+  border: 0;
+  block-size: 100%;
+  margin-block: 0;
+  max-block-size: 100vh;
+  overflow-y: auto;
+  z-index: 101;
+}
+
+.filter-panel {
+  display: block;
+  position: absolute;
+  padding-block: 8px;
+  padding-inline: 16px;
+  inset-block-start: 0;
+  block-size: 100%;
+  inset-inline-start: -380px;
+  inline-size: 100%;
+  transition: inset-inline-start 200ms ease-in;
+}
+@media screen and (max-width: 768px) {
+  .filter-panel {
+    inline-size: 100vw;
+  }
+  .filter-panel::before {
+    display: none !important;
+  }
+}
+@media screen and (min-width: 992px) {
+  .filter-panel {
+    max-inline-size: 380px;
+  }
+}
+.filter-panel[open] {
+  inset-inline-start: 0;
+  box-shadow: none;
+  border-inline-end: 1px solid #e5e5e5;
+}
+.filter-panel h3 {
+  color: #275937;
+}
+.filter-panel .dso-close {
+  --_dso-icon-button-tertiary-color: #191919;
+  position: absolute;
+  inset-block-start: 20px;
+  inset-inline-end: 20px;
+}
+
+.overlay {
+  padding-block: 40px 8px;
+  padding-inline: 16px;
+  inset-inline-end: 0;
+  inline-size: 624px;
+}
+.overlay::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+@media screen and (max-width: 624px) {
+  .overlay {
+    inline-size: 100vw;
+  }
+}
+
+@media screen and (min-width: 808px) {
+  :host([main-size=small]) .dso-main-panel,
+  :host([document-panel-size=small]) .dso-document-panel {
+    flex-basis: 375px;
+    min-inline-size: 0;
+    max-inline-size: 375px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 375px) {
+  :host([main-size=small]) .dso-main-panel,
+  :host([document-panel-size=small]) .dso-document-panel {
+    flex-basis: 100vw;
+    max-inline-size: 100vw;
+    min-inline-size: 0;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  :host([main-size=medium]) .dso-main-panel,
+  :host([document-panel-size=medium]) .dso-document-panel {
+    flex-basis: 624px;
+    min-inline-size: 375px;
+    max-inline-size: 624px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 624px) {
+  :host([main-size=medium]) .dso-main-panel,
+  :host([document-panel-size=medium]) .dso-document-panel {
+    flex-basis: 100vw;
+    max-inline-size: 100vw;
+    min-inline-size: 375px;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  :host([main-size=large]) .dso-main-panel,
+  :host([document-panel-size=large]) .dso-document-panel {
+    flex-basis: 60%;
+    min-inline-size: 768px;
+    max-inline-size: 1024px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 768px) {
+  :host([main-size=large]) .dso-main-panel,
+  :host([document-panel-size=large]) .dso-document-panel {
+    flex-basis: 100vw;
+    max-inline-size: 100vw;
+    min-inline-size: 768px;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  :host {
+    display: flex;
+    flex-direction: column;
+    block-size: 100vh;
+    overflow: clip;
+    position: relative;
+  }
+  :host .dso-main-panel.compact,
+  :host .dso-main-panel.expanded {
+    flex-basis: unset;
+    min-inline-size: unset;
+    max-inline-size: unset;
+    inline-size: 440px;
+  }
+  :host .viewer-grid-columns {
+    display: flex;
+    overflow: hidden;
+    flex-grow: 1;
+  }
+  .dso-main-panel,
+  .dso-document-panel {
+    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
+  }
+  .dso-main-panel .content,
+  .dso-document-panel .content {
+    overflow-y: auto;
+  }
+  .filter-panel {
+    margin-inline: 0 auto;
+    inline-size: calc(100vw - 40px);
+  }
+  .filter-panel[open] {
+    border-inline-end: 1px solid #e5e5e5;
+  }
+  .overlay {
+    box-shadow: -2px 0 5px #666;
+    margin-inline: auto 0;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 1031.99px) {
+  :host([filter-panel-open]) .dso-main-panel {
+    margin-inline-start: 380px;
+    max-inline-size: calc(100vw - 380px);
+  }
+  .filter-panel {
+    inline-size: 380px;
+    inset-inline-start: -380px;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-navbar {
+    min-block-size: 32px;
+  }
+  .dso-navbar .dso-navbar-header {
+    float: inline-start;
+  }
+  .dso-navbar .dso-navbar-toggle {
+    border-radius: 4px;
+    min-inline-size: auto;
+    padding-block: 5px;
+    padding-inline: 0;
+  }
+  .dso-navbar .dso-navbar-toggle dso-icon {
+    margin-inline-start: 8px;
+    margin-inline-end: 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-navbar.dso-has-navbar-extension .dso-nav > li:last-child {
+    margin-inline-end: 8rem;
+  }
+  .dso-nav {
+    list-style: none;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+  }
+  .dso-nav > li > button {
+    border: 0;
+    background-color: transparent;
+  }
+  .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-block-end: 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;
+  }
+  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,
+  .dso-nav.dso-nav-main > li > button:hover,
+  .dso-nav.dso-nav-main > li > button:focus-visible,
+  .dso-nav.dso-nav-main > li > button:active {
+    text-decoration: underline;
+  }
+  .dso-nav.dso-nav-main > li > a,
+  .dso-nav.dso-nav-main > li > button {
+    font-size: 1.25em;
+    line-height: 1;
+    margin-block-start: 8px;
+    padding-block: 8px 7px;
+    padding-inline: 16px;
+  }
+  .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;
+  }
+  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,
+  .dso-nav.dso-nav-sub > li > button:hover,
+  .dso-nav.dso-nav-sub > li > button:focus-visible,
+  .dso-nav.dso-nav-sub > li > button:active {
+    text-decoration: underline;
+  }
+  .dso-nav.dso-nav-sub > li > a,
+  .dso-nav.dso-nav-sub > li > button {
+    font-size: 1rem;
+    margin-block-start: 4px;
+    padding-block: 4px 3px;
+    padding-inline: 8px;
+  }
+  .dso-navbar {
+    padding-inline: 16px;
+  }
+  .dso-nav {
+    border-block-end: 1px solid #ccc;
+    display: flex;
+    gap: 16px;
+    margin-block-start: 0;
+    inline-size: calc(100vw - 32px);
+  }
+  .dso-tertiary {
+    display: inline-block;
+    font-size: 1em;
+    font-weight: 500;
+    margin-block-end: 0;
+    text-decoration: none;
+    touch-action: manipulation;
+    text-align: start;
+    user-select: none;
+    vertical-align: middle;
+  }
+  .dso-tertiary:focus, .dso-tertiary:focus-visible {
+    outline-offset: 2px;
+  }
+  .dso-tertiary:active {
+    outline: 0;
+  }
+  .dso-tertiary {
+    border: 0;
+    color: #39870c;
+    line-height: 1;
+    padding: 0;
+    background-color: transparent;
+  }
+  .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-block: 11px;
+    padding-inline: 0;
+    position: relative;
+  }
+  .dso-tertiary.dso-truncate {
+    max-inline-size: 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;
+    block-size: 24px;
+    vertical-align: middle;
+    inline-size: 24px;
+    margin-inline-end: 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;
+    block-size: 24px;
+    vertical-align: middle;
+    inline-size: 24px;
+    margin-inline-start: 8px;
+  }
+  .dso-tertiary dso-icon + span:not(.sr-only),
+  .dso-tertiary span:not(.sr-only) + dso-icon {
+    margin-inline-start: 8px;
+  }
+  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
+    margin-inline-start: 0;
+  }
+  .dso-tertiary dso-icon,
+  .dso-tertiary span {
+    vertical-align: middle;
+  }
+  .dso-tertiary {
+    font-weight: 300;
+  }
+  .filter-panel,
+  .overlay {
+    margin-inline: 0;
+    max-inline-size: 100vw;
+    inset-block-start: 0;
+    inline-size: 100vw;
+  }
+  .filter-panel {
+    inset-inline-start: -100vw;
+  }
+}
+@media screen and (min-width: 992px) {
+  :host([filter-panel-open]) .dso-main-panel {
+    margin-inline-start: 380px;
+  }
+}`;
 
 const resizeObserver = new ResizeObserver(debounce(([entry]) => {
     const shadowRoot = entry === null || entry === void 0 ? void 0 : entry.target.getRootNode();
@@ -83,9 +575,11 @@ const buttonWidth = 40;
 const tabViewBreakpoint = 768 + buttonWidth;
 const minMapElementWidth = 440;
 const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoCloseOverlay = createEvent(this, "dsoCloseOverlay", 7);
         this.dsoCloseFilterPanel = createEvent(this, "dsoCloseFilterPanel", 7);
@@ -227,7 +721,7 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends HTM
         }
     }
     render() {
-        return (h(Fragment, { key: 'a48a36d4ac0af81689454c72d95083c96bf1f93c' }, h("slot", { key: '5a21af9c400be63c727edc49a8fc474ae7f834df', name: "top-bar" }), h("div", { key: '0b023e20278d58a1d304f639ed6f9c0297b9b36a', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'a90a9c21eef330a791b743052bb8a801901a9203', class: "dso-navbar" }, h("ul", { key: 'bf0bd1e258e060d826c65d9216d406a66edac293', class: "dso-nav dso-nav-sub" }, viewerGridTabs.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 === "search")) && (h(MainPanel, { key: '72d1d08f4e4b0a21616a32c0c140e72d86347324', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: 'c08b343416d10416fb758d46cd7be5eb556f5bd9', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '2f74ea4fb5fa62d2e8630bb28995fb70bb76f4e9', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '9eea3ac2333b32d5e38c7d85458f54dfb0728503', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '9cb838005d169bb21a4b2ea3ac5176a2d03db7c5', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '3c4295d9aced9e9ee53a01d4410133e729b08242', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: 'f26948c9fb34150cb83653bfaf5d7e5fc6c4efef' }, h("slot", { key: '55285a50520f0c0357d56dc010fea37964db11dd', name: "top-bar" }), h("div", { key: '87da07cf41beb1549292629836c9b0484eba7862', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '4313446e6e0a436f58a1eb3a4141404a1056ee3a', class: "dso-navbar" }, h("ul", { key: '6056f1273a55a45875dafefd6cfa9db6c85e587c', class: "dso-nav dso-nav-sub" }, viewerGridTabs.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 === "search")) && (h(MainPanel, { key: '7fe8580f6d34172669db9dde4b70ea4a99a26261', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: 'aa536d1c0f5df00bfcf2d98d6c55ca5f8db99043', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'dedb4410a56de0f2ca50b2f4cc51de72aefc27ef', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '7408a9a762723f7f3e272965d5cb81bc811e8c0a', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'a0742d7b4f47517f5d661a0318bb738a46904cec', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '04de20f4685c3993ffbf25fc5966b4fb2d96586c', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -235,7 +729,7 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends HTM
         "filterPanelOpen": ["filterPanelOpenWatcher"],
         "overlayOpen": ["overlayOpenWatcher"]
     }; }
-    static get style() { return viewerGridCss; }
+    static get style() { return viewerGridCss(); }
 }, [257, "dso-viewer-grid", {
         "filterPanelTitle": [513, "filter-panel-title"],
         "filterPanelOpen": [516, "filter-panel-open"],
@@ -260,8 +754,8 @@ function defineCustomElement$1() {
     const components = ["dso-viewer-grid"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-viewer-grid":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ViewerGrid);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), ViewerGrid);
             }
             break;
     } });