@dso-toolkit/core 88.1.1 → 90.0.0

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

@@ -1,4 +1,4 @@
-import { h, F as Fragment, p as proxyCustomElement, H, d as createEvent, t as transformTag } from './p-DBWrx_3r.js';
+import { h, F as Fragment, p as proxyCustomElement, H, d as createEvent, t as transformTag } from './p-DmmKAUIT.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { d as debounce } from './p-baWVwd8J.js';
 
@@ -32,7 +32,7 @@ const DocumentPanel = ({ tabView, panelSize, shrinkDocumentPanel, expandDocument
         }
     } }, !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, inert: !open }, open && (h(Fragment, null, title && h("h3", null, title), h("dso-icon-button", { class: "dso-close", icon: "cross", 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,
@@ -48,605 +48,12 @@ const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, ma
 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: "cross", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }), h("slot", { name: "overlay" })));
 
-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 {
-  --_dt-icon-button-border-start-start-radius: 0;
-  --_dt-icon-button-border-end-start-radius: 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 {
-  --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;
-  --_dt-icon-button-border-start-end-radius: 0;
-  --_dt-icon-button-border-end-end-radius: 0;
-}
-
-.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;
-    background-clip: padding-box;
-  }
-  .dso-tertiary:focus, .dso-tertiary:focus-visible {
-    outline-offset: 2px;
-  }
-  .dso-tertiary:active {
-    outline: 0;
-  }
-  .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;
-    background-clip: padding-box;
-  }
-  .dso-tertiary:focus, .dso-tertiary:focus-visible {
-    outline-offset: 2px;
-  }
-  .dso-tertiary:active {
-    outline: 0;
-  }
-  .dso-tertiary {
-    background-color: var(--_dso-button-tertiary-background-color, );
-    border-color: var(--_dso-button-tertiary-border-color, );
-    color: var(--_dso-button-tertiary-color, #39870c);
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 4px;
-    line-height: 1.5;
-    min-inline-size: auto;
-    padding-block: 11px;
-    padding-inline: 15px;
-  }
-  .dso-tertiary:hover {
-    background-color: var(--_dso-button-tertiary-hover-background-color, );
-    border-color: var(--_dso-button-tertiary-hover-border-color, );
-    color: var(--_dso-button-tertiary-hover-color, #275937);
-  }
-  .dso-tertiary:active {
-    background-color: var(--_dso-button-tertiary-active-background-color, );
-    border-color: var(--_dso-button-tertiary-active-border-color, );
-    color: var(--_dso-button-tertiary-active-color, #173521);
-  }
-  .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {
-    background-color: var(--_dso-button-tertiary-disabled-background-color, );
-    border-color: var(--_dso-button-tertiary-disabled-border-color, );
-    color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
-  }
-  .dso-tertiary.dso-small {
-    line-height: 1rem;
-  }
-  .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {
-    margin-block-end: -4px;
-    margin-block-start: -4px;
-  }
-  .dso-tertiary.dso-small.dso-spinner-left::before {
-    block-size: 16px;
-    inline-size: 16px;
-  }
-  .dso-tertiary.dso-small.dso-spinner-right::after {
-    block-size: 16px;
-    inline-size: 16px;
-  }
-  .dso-tertiary.dso-extra-small {
-    line-height: 1rem;
-  }
-  .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {
-    margin-block-end: -4px;
-    margin-block-start: -4px;
-  }
-  .dso-tertiary.dso-extra-small.dso-spinner-left::before {
-    block-size: 16px;
-    inline-size: 16px;
-  }
-  .dso-tertiary.dso-extra-small.dso-spinner-right::after {
-    block-size: 16px;
-    inline-size: 16px;
-  }
-  .dso-tertiary.dso-extra-small {
-    padding-block: 9px;
-  }
-  .dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
-    margin-inline-start: -8px;
-  }
-  .dso-tertiary span:not(.sr-only) + dso-icon {
-    margin-inline-start: 8px;
-    margin-inline-end: -8px;
-  }
-  .dso-tertiary dso-icon + span:not(.sr-only) {
-    margin-inline-start: 8px;
-  }
-  .dso-tertiary {
-    border: 0;
-    line-height: 1;
-    padding: 0;
-    background-color: transparent;
-  }
-  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
-    color: #39870c;
-  }
-  .dso-tertiary:not([disabled]):hover {
-    text-decoration: underline;
-    text-underline-position: under;
-  }
-  .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 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 {   --_dt-icon-button-border-start-start-radius: 0;   --_dt-icon-button-border-end-start-radius: 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 {   --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;   --_dt-icon-button-border-start-end-radius: 0;   --_dt-icon-button-border-end-end-radius: 0; }  .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;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .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;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     background-color: var(--_dso-button-tertiary-background-color, );     border-color: var(--_dso-button-tertiary-border-color, );     color: var(--_dso-button-tertiary-color, #39870c);     border-width: 1px;     border-style: solid;     border-radius: 4px;     line-height: 1.5;     min-inline-size: auto;     padding-block: 11px;     padding-inline: 15px;   }   .dso-tertiary:hover {     background-color: var(--_dso-button-tertiary-hover-background-color, );     border-color: var(--_dso-button-tertiary-hover-border-color, );     color: var(--_dso-button-tertiary-hover-color, #275937);   }   .dso-tertiary:active {     background-color: var(--_dso-button-tertiary-active-background-color, );     border-color: var(--_dso-button-tertiary-active-border-color, );     color: var(--_dso-button-tertiary-active-color, #173521);   }   .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {     background-color: var(--_dso-button-tertiary-disabled-background-color, );     border-color: var(--_dso-button-tertiary-disabled-border-color, );     color: var(--_dso-button-tertiary-disabled-color, #afcf9d);   }   .dso-tertiary.dso-small {     line-height: 1rem;   }   .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     line-height: 1rem;   }   .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-extra-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     padding-block: 9px;   }   .dso-tertiary dso-icon:has(+ span:not(.sr-only)) {     margin-inline-start: -8px;   }   .dso-tertiary span:not(.sr-only) + dso-icon {     margin-inline-start: 8px;     margin-inline-end: -8px;   }   .dso-tertiary dso-icon + span:not(.sr-only) {     margin-inline-start: 8px;   }   .dso-tertiary {     border: 0;     line-height: 1;     padding: 0;     background-color: transparent;   }   .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {     color: #39870c;   }   .dso-tertiary:not([disabled]):hover {     text-decoration: underline;     text-underline-position: under;   }   .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 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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();
+    const shadowRoot = entry?.target.getRootNode();
     if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {
         shadowRoot.host._checkMainPanelVisibility();
     }
@@ -745,27 +152,25 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         }
     }
     filterPanelOpenWatcher(open) {
-        var _a, _b;
         if (!this.filterPanelSlot) {
             console.warn("slot 'filter-panel' has not been set");
         }
         if (open) {
-            (_a = this.filterPanel) === null || _a === void 0 ? void 0 : _a.show();
+            this.filterPanel?.show();
         }
         else {
-            (_b = this.filterPanel) === null || _b === void 0 ? void 0 : _b.close();
+            this.filterPanel?.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();
+            this.overlay?.showModal();
         }
         else {
-            (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.close();
+            this.overlay?.close();
         }
     }
     /**
@@ -786,12 +191,11 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
     }
     componentDidLoad() {
-        var _a, _b;
         if (this.filterPanelOpen && this.filterPanelSlot) {
-            (_a = this.filterPanel) === null || _a === void 0 ? void 0 : _a.show();
+            this.filterPanel?.show();
         }
         if (this.overlayOpen && this.overlaySlot) {
-            (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.showModal();
+            this.overlay?.showModal();
         }
         if (this.mapElement instanceof HTMLDivElement) {
             resizeObserver.observe(this.mapElement);
@@ -804,13 +208,19 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         }
     }
     render() {
-        return (h(Fragment, { key: 'd1d81c9db00b4fb1394e9938ed698a78e2f54976' }, h("slot", { key: '8523d2e37a153f3b8e6521e1d4a07f0395c67180', name: "top-bar" }), h("div", { key: '64e25d1b9c82661ead44a20dc43fc60b3400b8a9', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '5b3975cd300000076405acd470f1bcc2ed6581f1', class: "dso-navbar" }, h("ul", { key: '8d987841d10e4806ce6025fb81db489d1f583410', 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: '21baa34326e6cce24feef6ae8ac2237520c6dd90', 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: '4f00c13af3676b1dbfb97a05a4c644ed0aa027f2', 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: 'b397c8a90326fd24ebdcd8148d0222dc7038e131', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'ae239735328e35dc97e8fc7653fad4c886dab9eb', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '1a12d6aa3431c11db288a0b07ebb51b772a27df7', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'ee5b23969f8ace7db8d94adce586d8fd91fea08b', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: '3ed1f282513cd338297223ece490378b520f964c' }, h("slot", { key: '5b280f21065d28ab117b0be3ce4b8401d12c3681', name: "top-bar" }), h("div", { key: '6b6cf547099590a74bfa37ba8658e8a10e7184b1', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '61c217c34372c6954e1555fd78416352cd8876dc', class: "dso-navbar" }, h("ul", { key: 'a4f04fe0b438cb15cd6fae19ca0d4d8c72242b90', 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: 'f492afeb76b1d3b2768f34a9abe6c05e0177d39f', 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: '68c47e6064872f8873768031fb3eda07705f4bec', 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: '62bd2d6e01c217f9354f2881ef65f613b0304a1e', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '09b669980be14f810a9c2683841a6515e6687d4c', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '868890e65f51ec5c74e8c56f453d43f9b1a68203', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'fb852f4648f9e5f1072610ec4507f89c4d873ea4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "documentPanelOpen": ["documentPanelOpenWatcher"],
-        "filterPanelOpen": ["filterPanelOpenWatcher"],
-        "overlayOpen": ["overlayOpenWatcher"]
+        "documentPanelOpen": [{
+                "documentPanelOpenWatcher": 0
+            }],
+        "filterPanelOpen": [{
+                "filterPanelOpenWatcher": 0
+            }],
+        "overlayOpen": [{
+                "overlayOpenWatcher": 0
+            }]
     }; }
     static get style() { return viewerGridCss(); }
 }, [257, "dso-viewer-grid", {
@@ -826,9 +236,15 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         "tabView": [32],
         "_checkMainPanelVisibility": [64]
     }, undefined, {
-        "documentPanelOpen": ["documentPanelOpenWatcher"],
-        "filterPanelOpen": ["filterPanelOpenWatcher"],
-        "overlayOpen": ["overlayOpenWatcher"]
+        "documentPanelOpen": [{
+                "documentPanelOpenWatcher": 0
+            }],
+        "filterPanelOpen": [{
+                "filterPanelOpenWatcher": 0
+            }],
+        "overlayOpen": [{
+                "overlayOpenWatcher": 0
+            }]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -848,6 +264,3 @@ const DsoViewerGrid = ViewerGrid;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoViewerGrid, defineCustomElement };
-//# sourceMappingURL=dso-viewer-grid.js.map
-
-//# sourceMappingURL=dso-viewer-grid.js.map