npm - @dso-toolkit/core - Versions diffs - 79.1.0 → 81.0.0 - Mend

@dso-toolkit/core 79.1.0 → 81.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (738) hide show

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

@@ -1,4 +1,4 @@
-import { h, p as proxyCustomElement, H, e as createEvent, F as Fragment } from './p-Dm38fPV4.js';
+import { h, F as Fragment, p as proxyCustomElement, H, e as createEvent } from './p-Dm38fPV4.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { d as debounce } from './p-BxvZeNWe.js';
@@ -41,10 +41,10 @@ const DocumentPanel = ({ tabView, panelSize, shrinkDocumentPanel, expandDocument
     h("div", { class: "content" },
         h("slot", { name: "document-panel" }))));
-const FilterPanel = ({ title, ref, dsoCloseFilterPanel }) => (h("dialog", { class: "filter-panel", ref: ref },
+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" })));
+    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,
@@ -68,7 +68,7 @@ const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", r
     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  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 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  .dso-navbar .dso-navbar-toggle svg.di {\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 svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-inline-start: 4px;\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 svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\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 svg.di,\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 = "*,\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  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 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 resizeObserver = new ResizeObserver(debounce(([entry]) => {
     const shadowRoot = entry === null || entry === void 0 ? void 0 : entry.target.getRootNode();
@@ -227,7 +227,7 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         }
     }
     render() {
-        return (h(Fragment, { key: '658a8edbeaea68e9f834357f41c4609a2b10c2c9' }, h("slot", { key: 'b207e35e823a59c96f93155468cf8895b663659b', name: "top-bar" }), h("div", { key: '81bd7ac43da4173bab3484733cb6f4c540a5e647', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '20cff1c9b5cd02c773525035b9a8644c380fc2e9', class: "dso-navbar" }, h("ul", { key: '82e30824aabfad9e8656c44c05fd22d17df4f701', 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: 'a96601c167929e6f9a74340fcb2adaf8a33e0564', 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: '428fa0c7a5751cd5ccac91996de71cd5083ffcfc', 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: '2d6f5612e9a69488b2c8c5e52f8aaa5a77a2014a', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'a58aca0a87871c350a6043f673be099390a705b7', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '701b9ea14cd5afaff96fd44f07828e95622019c7', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'b10afc262b406a5cf37a35cc46d27bfbbcb73e17', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: '1a4122fc962df5d43cd8f68ee78ca712ddd33bba' }, h("slot", { key: 'e1928ab063a06b93f2041fe71e76012070bdca31', name: "top-bar" }), h("div", { key: '18488465f8df22fb195eab8374d8701ccb5774c0', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'b975c12a1f6087e8be56fa61a5401bcf51c9549c', class: "dso-navbar" }, h("ul", { key: '9f45193f92f2e6893b9489029ba0051c878a33dd', 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: '16175775a1fc2c1c6733859b79129589a72276bd', 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: 'a77bde1daaea831831e6aef8c72d9b116d8cf57e', 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: '94d2c4cf569223c72b575d562237dcb6bbf64abf', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '30b93bee7bd78970448f80e5eb0cadbf7e3f3838', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '27332cb7110ad6354d9512570ee0885bcff55f51', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '3138b795a0ead5eb104b8195a9cfc0877a387f88', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/bundle/dso-viewer-grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-viewer-grid.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/filter-panel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n currentSize: ViewerGridPanelSize;\r\n nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterPanelEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n hide: boolean;\r\n}\r\n\r\nexport type ViewerGridPanelSize = \"small\" \| \"medium\" \| \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridTab = (typeof viewerGridTabs)[number];\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n map: \"Kaart\",\r\n document: \"Document\",\r\n search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n className: string;\r\n onClick: any;\r\n label: string;\r\n icon: \"chevron-left\" \| \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n <dso-icon-button variant=\"map\" class={className} onDsoClick={onClick} icon={icon} label={label} />\r\n);\r\n\r\ninterface SizingButtonProps {\r\n panelLabel: string;\r\n size: ViewerGridPanelSize;\r\n expand: () => void;\r\n shrink: () => void;\r\n placement: \"left\" \| \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n shrink,\r\n expand,\r\n size,\r\n panelLabel,\r\n placement,\r\n}) => {\r\n const buttons = [];\r\n\r\n if (size !== \"small\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={shrink}\r\n label={`${panelLabel} smaller maken`}\r\n icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n className=\"shrink\"\r\n />,\r\n );\r\n }\r\n\r\n if (size !== \"large\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={expand}\r\n label={`${panelLabel} breder maken`}\r\n icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n className=\"expand\"\r\n />,\r\n );\r\n }\r\n\r\n return (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n </span>\r\n {buttons}\r\n </div>\r\n );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n tabView: boolean;\r\n panelSize: ViewerGridPanelSize;\r\n shrinkDocumentPanel: () => void;\r\n expandDocumentPanel: () => void;\r\n dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n tabView,\r\n panelSize,\r\n shrinkDocumentPanel,\r\n expandDocumentPanel,\r\n dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class=\"dso-document-panel\"\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n }\r\n }}\r\n >\r\n {!tabView && (\r\n <SizingButtons\r\n panelLabel=\"Documentpaneel\"\r\n size={panelSize}\r\n expand={expandDocumentPanel}\r\n shrink={shrinkDocumentPanel}\r\n placement=\"right\"\r\n />\r\n )}\r\n <div class=\"content\">\r\n <slot name=\"document-panel\" />\r\n </div>\r\n </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterPanelProps {\r\n title?: string;\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n dsoCloseFilterPanel: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const FilterPanel: FunctionalComponent<ViewerGridFilterPanelProps> = ({ title, ref, dsoCloseFilterPanel }) => (\r\n <dialog class=\"filter-panel\" ref={ref}>\r\n {title && <h3>{title}</h3>}\r\n <dso-icon-button\r\n class=\"dso-close\"\r\n icon=\"times\"\r\n variant=\"tertiary\"\r\n label=\"Sluiten\"\r\n onDsoClick={dsoCloseFilterPanel}\r\n />\r\n <slot name=\"filter-panel\" />\r\n </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n tabView: boolean;\r\n mainSize: ViewerGridPanelSize;\r\n documentPanelOpen: boolean;\r\n mainPanelExpanded: boolean;\r\n mainPanelHidden: boolean;\r\n toggleMainPanel: () => void;\r\n dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n tabView,\r\n mainSize,\r\n documentPanelOpen,\r\n mainPanelExpanded,\r\n mainPanelHidden,\r\n toggleMainPanel,\r\n dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class={clsx(\"dso-main-panel\", {\r\n compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,\r\n expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n collapsed: mainPanelHidden,\r\n })}\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n }\r\n }}\r\n >\r\n {!tabView && documentPanelOpen && (\r\n <div class=\"toggle-button\">\r\n <dso-icon-button\r\n variant=\"map\"\r\n label={`Zoeken paneel ${mainPanelHidden ? \"tonen\" : \"verbergen\"}`}\r\n icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}\r\n onDsoClick={toggleMainPanel}\r\n ></dso-icon-button>\r\n </div>\r\n )}\r\n <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n dsoCloseOverlay: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n <dialog\r\n class=\"overlay\"\r\n ref={ref}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n dsoCloseOverlay(e);\r\n }}\r\n >\r\n <dso-icon-button\r\n class=\"overlay-close-button\"\r\n icon=\"times\"\r\n variant=\"tertiary\"\r\n label=\"Sluiten\"\r\n onDsoClick={dsoCloseOverlay}\r\n />\r\n <slot name=\"overlay\" />\r\n </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n .overlay {\r\n block-size: calc(100% - units.$u4);\r\n margin-block: units.$u2;\r\n margin-inline: auto units.$u2;\r\n }\r\n\r\n .dso-main-panel {\r\n transition:\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n margin-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.overlay-close-button {\r\n position: absolute;\r\n line-height: 1;\r\n inset-block-start: units.$u1;\r\n inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n visibility: hidden;\r\n}\r\n\r\n.viewer-grid-columns {\r\n position: relative;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n .content {\r\n block-size: 100%;\r\n padding-block: 0;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n }\r\n}\r\n\r\n.dso-main-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n &.compact,\r\n &.expanded {\r\n &.collapsed {\r\n inset-inline-start: -432px;\r\n }\r\n }\r\n\r\n &.compact,\r\n &.contracted {\r\n flex-shrink: unset;\r\n flex-grow: unset;\r\n position: absolute;\r\n transition: none;\r\n }\r\n\r\n &.expanded.collapsed {\r\n position: absolute;\r\n block-size: 100%;\r\n }\r\n\r\n .sizing-buttons,\r\n .toggle-button {\r\n inset-inline-start: calc(100% + 1px);\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: 0 units.$u1 * 0.5;\r\n }\r\n\r\n .toggle-button {\r\n --_dso-icon-button-map-border-radius: 0 4px 4px 0;\r\n }\r\n}\r\n\r\n.dso-document-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n .sizing-buttons {\r\n inset-block-start: auto;\r\n inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inset-inline-end: calc(100% + 1px);\r\n transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: units.$u1 * 0.5 0;\r\n\r\n .shrink,\r\n .expand {\r\n --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;\r\n --_dso-icon-button-map-border-radius: 4px 0 0 4px;\r\n }\r\n }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n overflow-x: hidden;\r\n position: absolute;\r\n inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n z-index: zindex.$viewer-grid-sizing-buttons;\r\n}\r\n\r\n.map {\r\n block-size: 100%;\r\n inline-size: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.filter-panel,\r\n.overlay {\r\n background-color: colors.$wit;\r\n border: 0;\r\n block-size: 100%;\r\n margin-block: 0;\r\n max-block-size: 100vh;\r\n overflow-y: auto;\r\n z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filter-panel {\r\n display: block;\r\n position: absolute;\r\n padding-block: units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-block-start: 0;\r\n block-size: 100%;\r\n inset-inline-start: calc(core-viewer-grid-variables.$filter-panel-max-inline-size * -1);\r\n inline-size: 100%;\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$filter-panel-inline-size) {\r\n inline-size: 100vw;\r\n\r\n &::before {\r\n display: none !important;\r\n }\r\n }\r\n\r\n @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n max-inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n }\r\n\r\n &[open] {\r\n inset-inline-start: 0;\r\n box-shadow: none;\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n }\r\n\r\n h3 {\r\n color: colors.$bosgroen;\r\n }\r\n\r\n .dso-close {\r\n --_dso-icon-button-tertiary-color: #{colors.$grijs-90};\r\n\r\n position: absolute;\r\n inset-block-start: 20px;\r\n inset-inline-end: 20px;\r\n }\r\n}\r\n\r\n.overlay {\r\n padding-block: units.$u5 units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-inline-end: 0;\r\n inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n &::backdrop {\r\n background-color: rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n inline-size: 100vw;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n :host([main-size=\"small\"]) .dso-main-panel,\r\n :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$small;\r\n min-inline-size: 0;\r\n max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: 0;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"medium\"]) .dso-main-panel,\r\n :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$medium;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"large\"]) .dso-main-panel,\r\n :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$large;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host {\r\n display: flex;\r\n flex-direction: column;\r\n block-size: 100vh;\r\n overflow: clip;\r\n position: relative;\r\n\r\n .dso-main-panel.compact,\r\n .dso-main-panel.expanded {\r\n flex-basis: unset;\r\n min-inline-size: unset;\r\n max-inline-size: unset;\r\n inline-size: 440px;\r\n }\r\n\r\n .viewer-grid-columns {\r\n display: flex;\r\n overflow: hidden;\r\n flex-grow: 1;\r\n }\r\n }\r\n\r\n .dso-main-panel,\r\n .dso-document-panel {\r\n box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n .content {\r\n overflow-y: auto;\r\n }\r\n }\r\n\r\n .filter-panel {\r\n margin-inline: 0 auto;\r\n inline-size: calc(100vw - 40px);\r\n\r\n &[open] {\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n }\r\n }\r\n\r\n .overlay {\r\n box-shadow: -2px 0 5px colors.$grijs-60;\r\n margin-inline: auto 0;\r\n }\r\n\r\n @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n :host([filter-panel-open]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filter-panel-max-inline-size});\r\n }\r\n }\r\n\r\n .filter-panel {\r\n inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n inset-inline-start: -(core-viewer-grid-variables.$filter-panel-max-inline-size);\r\n }\r\n }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n @include navbar.root();\r\n\r\n .dso-navbar {\r\n padding-inline: units.$u2;\r\n }\r\n\r\n .dso-nav {\r\n @include navbar.nav-border();\r\n\r\n display: flex;\r\n gap: units.$u2;\r\n margin-block-start: 0;\r\n inline-size: calc(100vw - units.$u4);\r\n }\r\n\r\n .dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n font-weight: 300;\r\n }\r\n }\r\n\r\n .filter-panel,\r\n .overlay {\r\n margin-inline: 0;\r\n max-inline-size: 100vw;\r\n inset-block-start: 0;\r\n inline-size: 100vw;\r\n }\r\n\r\n .filter-panel {\r\n inset-inline-start: -100vw;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n :host([filter-panel-open]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, FilterPanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n ViewerGridActiveTabSwitchEvent,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n ViewerGridChangeSizeEvent,\r\n ViewerGridCloseFilterPanelEvent,\r\n ViewerGridCloseOverlayEvent,\r\n ViewerGridMainToggleEvent,\r\n ViewerGridPanelSize,\r\n ViewerGridTab,\r\n viewerGridTabLabelMap,\r\n viewerGridTabs,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n const shadowRoot = entry?.target.getRootNode();\r\n if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n shadowRoot.host._checkMainPanelVisibility();\r\n }\r\n }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/*\r\n @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\r\n * @slot main\r\n * @slot map\r\n * @slot filter-panel\r\n * @slot overlay\r\n * @slot document-panel\r\n /\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n private mapElement?: HTMLDivElement;\r\n\r\n /\r\n The title of the filter panel\r\n /\r\n @Prop({ reflect: true })\r\n filterPanelTitle?: string;\r\n\r\n /\r\n Set to true when filter panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n filterPanelOpen = false;\r\n\r\n /\r\n Set to true when overlay should show.\r\n /\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /\r\n Set to true when document panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelOpen = false;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set active tab in tab view.\r\n /\r\n @Prop()\r\n activeTab?: ViewerGridTab;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set to show main panel expanded.\r\n /\r\n @Prop()\r\n mainPanelExpanded = false;\r\n\r\n /\r\n Set to hide the main panel.\r\n /\r\n @Prop()\r\n mainPanelHidden = false;\r\n\r\n /\r\n Emitted when user wants to close the overlay.\r\n /\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n /\r\n Emitted when user wants to close the filter panel.\r\n /\r\n @Event()\r\n dsoCloseFilterPanel!: EventEmitter<ViewerGridCloseFilterPanelEvent>;\r\n\r\n /\r\n Emitted when user applies filter panel options.\r\n /\r\n @Event()\r\n dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n Emitted on interaction with sizing buttons.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n Emitted when the user toggles the visibility of the main panel.\r\n \r\n Also emitted by scripting when the panels do not fit anymore.\r\n /\r\n @Event()\r\n dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n @State()\r\n tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n private filterPanel: HTMLDialogElement \| undefined;\r\n\r\n private get filterPanelSlot() {\r\n return this.host.querySelector(\"[slot='filter-panel']\");\r\n }\r\n\r\n private get overlaySlot() {\r\n return this.host.querySelector(\"[slot='overlay']\");\r\n }\r\n\r\n private overlay: HTMLDialogElement \| undefined;\r\n\r\n @Watch(\"documentPanelOpen\")\r\n documentPanelOpenWatcher(open: boolean) {\r\n if (open) {\r\n this._checkMainPanelVisibility();\r\n }\r\n }\r\n\r\n @Watch(\"filterPanelOpen\")\r\n filterPanelOpenWatcher(open: boolean) {\r\n if (!this.filterPanelSlot) {\r\n console.warn(\"slot 'filter-panel' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.filterPanel?.show();\r\n } else {\r\n this.filterPanel?.close();\r\n }\r\n }\r\n\r\n @Watch(\"overlayOpen\")\r\n overlayOpenWatcher(open: boolean) {\r\n if (!this.overlaySlot) {\r\n console.warn(\"slot 'overlay' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.overlay?.showModal();\r\n } else {\r\n this.overlay?.close();\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _checkMainPanelVisibility() {\r\n if (\r\n this.documentPanelOpen &&\r\n !this.mainPanelHidden &&\r\n this.mapElement instanceof HTMLDivElement &&\r\n ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) \|\|\r\n (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n ) {\r\n this.dsoMainPanelToggle.emit({\r\n hide: true,\r\n });\r\n }\r\n }\r\n\r\n private switchActiveTab = (tab: ViewerGridTab) => {\r\n this.dsoActiveTabSwitch.emit({\r\n tab,\r\n });\r\n };\r\n\r\n private shrinkDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private expandDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private toggleMainPanel = () => {\r\n if (\r\n this.mapElement instanceof HTMLDivElement &&\r\n this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n ) {\r\n this.mainSize = \"small\";\r\n }\r\n\r\n this.dsoMainPanelToggle.emit({\r\n hide: !this.mainPanelHidden,\r\n });\r\n };\r\n\r\n private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n connectedCallback() {\r\n window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterPanelOpen && this.filterPanelSlot) {\r\n this.filterPanel?.show();\r\n }\r\n\r\n if (this.overlayOpen && this.overlaySlot) {\r\n this.overlay?.showModal();\r\n }\r\n\r\n if (this.mapElement instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.mapElement);\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n if (this.mapElement) {\r\n resizeObserver.unobserve(this.mapElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot name=\"top-bar\" />\r\n <div class=\"viewer-grid-columns\">\r\n {this.tabView && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {viewerGridTabs.map((tab) => (\r\n <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n {viewerGridTabLabelMap[tab]}\r\n </button>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"search\")) && (\r\n <MainPanel\r\n tabView={this.tabView}\r\n mainSize={this.mainSize}\r\n documentPanelOpen={this.documentPanelOpen}\r\n mainPanelExpanded={this.mainPanelExpanded}\r\n mainPanelHidden={this.mainPanelHidden}\r\n toggleMainPanel={this.toggleMainPanel}\r\n dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n ></MainPanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"search\")) && (\r\n <FilterPanel\r\n title={this.filterPanelTitle}\r\n ref={(element) => (this.filterPanel = element)}\r\n dsoCloseFilterPanel={(e) => this.dsoCloseFilterPanel.emit({ originalEvent: e })}\r\n ></FilterPanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"map\")) && (\r\n <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n <slot name=\"map\" />\r\n </div>\r\n )}\r\n {((!this.tabView && this.documentPanelOpen) \|\| (this.tabView && this.activeTab === \"document\")) && (\r\n <DocumentPanel\r\n tabView={this.tabView}\r\n panelSize={this.documentPanelSize}\r\n shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n expandDocumentPanel={this.expandDocumentPanel}\r\n dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n ></DocumentPanel>\r\n )}\r\n <Overlay\r\n ref={(element) => (this.overlay = element)}\r\n dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n ></Overlay>\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-viewer-grid.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/filter-panel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n currentSize: ViewerGridPanelSize;\r\n nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterPanelEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n hide: boolean;\r\n}\r\n\r\nexport type ViewerGridPanelSize = \"small\" \| \"medium\" \| \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridTab = (typeof viewerGridTabs)[number];\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n map: \"Kaart\",\r\n document: \"Document\",\r\n search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n className: string;\r\n onClick: any;\r\n label: string;\r\n icon: \"chevron-left\" \| \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n <dso-icon-button variant=\"map\" class={className} onDsoClick={onClick} icon={icon} label={label} />\r\n);\r\n\r\ninterface SizingButtonProps {\r\n panelLabel: string;\r\n size: ViewerGridPanelSize;\r\n expand: () => void;\r\n shrink: () => void;\r\n placement: \"left\" \| \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n shrink,\r\n expand,\r\n size,\r\n panelLabel,\r\n placement,\r\n}) => {\r\n const buttons = [];\r\n\r\n if (size !== \"small\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={shrink}\r\n label={`${panelLabel} smaller maken`}\r\n icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n className=\"shrink\"\r\n />,\r\n );\r\n }\r\n\r\n if (size !== \"large\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={expand}\r\n label={`${panelLabel} breder maken`}\r\n icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n className=\"expand\"\r\n />,\r\n );\r\n }\r\n\r\n return (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n </span>\r\n {buttons}\r\n </div>\r\n );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n tabView: boolean;\r\n panelSize: ViewerGridPanelSize;\r\n shrinkDocumentPanel: () => void;\r\n expandDocumentPanel: () => void;\r\n dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n tabView,\r\n panelSize,\r\n shrinkDocumentPanel,\r\n expandDocumentPanel,\r\n dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class=\"dso-document-panel\"\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n }\r\n }}\r\n >\r\n {!tabView && (\r\n <SizingButtons\r\n panelLabel=\"Documentpaneel\"\r\n size={panelSize}\r\n expand={expandDocumentPanel}\r\n shrink={shrinkDocumentPanel}\r\n placement=\"right\"\r\n />\r\n )}\r\n <div class=\"content\">\r\n <slot name=\"document-panel\" />\r\n </div>\r\n </div>\r\n);\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterPanelProps {\r\n open: boolean;\r\n title?: string;\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n dsoCloseFilterPanel: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const FilterPanel: FunctionalComponent<ViewerGridFilterPanelProps> = ({\r\n open,\r\n title,\r\n ref,\r\n dsoCloseFilterPanel,\r\n}) => (\r\n <dialog class=\"filter-panel\" ref={ref}>\r\n {open && (\r\n <Fragment>\r\n {title && <h3>{title}</h3>}\r\n <dso-icon-button\r\n class=\"dso-close\"\r\n icon=\"times\"\r\n variant=\"tertiary\"\r\n label=\"Sluiten\"\r\n onDsoClick={dsoCloseFilterPanel}\r\n />\r\n <slot name=\"filter-panel\" />\r\n </Fragment>\r\n )}\r\n </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n tabView: boolean;\r\n mainSize: ViewerGridPanelSize;\r\n documentPanelOpen: boolean;\r\n mainPanelExpanded: boolean;\r\n mainPanelHidden: boolean;\r\n toggleMainPanel: () => void;\r\n dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n tabView,\r\n mainSize,\r\n documentPanelOpen,\r\n mainPanelExpanded,\r\n mainPanelHidden,\r\n toggleMainPanel,\r\n dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class={clsx(\"dso-main-panel\", {\r\n compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,\r\n expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n collapsed: mainPanelHidden,\r\n })}\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n }\r\n }}\r\n >\r\n {!tabView && documentPanelOpen && (\r\n <div class=\"toggle-button\">\r\n <dso-icon-button\r\n variant=\"map\"\r\n label={`Zoeken paneel ${mainPanelHidden ? \"tonen\" : \"verbergen\"}`}\r\n icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}\r\n onDsoClick={toggleMainPanel}\r\n ></dso-icon-button>\r\n </div>\r\n )}\r\n <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n dsoCloseOverlay: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n <dialog\r\n class=\"overlay\"\r\n ref={ref}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n dsoCloseOverlay(e);\r\n }}\r\n >\r\n <dso-icon-button\r\n class=\"overlay-close-button\"\r\n icon=\"times\"\r\n variant=\"tertiary\"\r\n label=\"Sluiten\"\r\n onDsoClick={dsoCloseOverlay}\r\n />\r\n <slot name=\"overlay\" />\r\n </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n .overlay {\r\n block-size: calc(100% - units.$u4);\r\n margin-block: units.$u2;\r\n margin-inline: auto units.$u2;\r\n }\r\n\r\n .dso-main-panel {\r\n transition:\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n margin-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.overlay-close-button {\r\n position: absolute;\r\n line-height: 1;\r\n inset-block-start: units.$u1;\r\n inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n visibility: hidden;\r\n}\r\n\r\n.viewer-grid-columns {\r\n position: relative;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n .content {\r\n block-size: 100%;\r\n padding-block: 0;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n }\r\n}\r\n\r\n.dso-main-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n &.compact,\r\n &.expanded {\r\n &.collapsed {\r\n inset-inline-start: -432px;\r\n }\r\n }\r\n\r\n &.compact,\r\n &.contracted {\r\n flex-shrink: unset;\r\n flex-grow: unset;\r\n position: absolute;\r\n transition: none;\r\n }\r\n\r\n &.expanded.collapsed {\r\n position: absolute;\r\n block-size: 100%;\r\n }\r\n\r\n .sizing-buttons,\r\n .toggle-button {\r\n inset-inline-start: calc(100% + 1px);\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: 0 units.$u1 * 0.5;\r\n }\r\n\r\n .toggle-button {\r\n --_dso-icon-button-map-border-radius: 0 4px 4px 0;\r\n }\r\n}\r\n\r\n.dso-document-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n .sizing-buttons {\r\n inset-block-start: auto;\r\n inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inset-inline-end: calc(100% + 1px);\r\n transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: units.$u1 * 0.5 0;\r\n\r\n .shrink,\r\n .expand {\r\n --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;\r\n --_dso-icon-button-map-border-radius: 4px 0 0 4px;\r\n }\r\n }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n overflow-x: hidden;\r\n position: absolute;\r\n inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n z-index: zindex.$viewer-grid-sizing-buttons;\r\n}\r\n\r\n.map {\r\n block-size: 100%;\r\n inline-size: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.filter-panel,\r\n.overlay {\r\n background-color: colors.$wit;\r\n border: 0;\r\n block-size: 100%;\r\n margin-block: 0;\r\n max-block-size: 100vh;\r\n overflow-y: auto;\r\n z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filter-panel {\r\n display: block;\r\n position: absolute;\r\n padding-block: units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-block-start: 0;\r\n block-size: 100%;\r\n inset-inline-start: calc(core-viewer-grid-variables.$filter-panel-max-inline-size * -1);\r\n inline-size: 100%;\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$filter-panel-inline-size) {\r\n inline-size: 100vw;\r\n\r\n &::before {\r\n display: none !important;\r\n }\r\n }\r\n\r\n @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n max-inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n }\r\n\r\n &[open] {\r\n inset-inline-start: 0;\r\n box-shadow: none;\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n }\r\n\r\n h3 {\r\n color: colors.$bosgroen;\r\n }\r\n\r\n .dso-close {\r\n --_dso-icon-button-tertiary-color: #{colors.$grijs-90};\r\n\r\n position: absolute;\r\n inset-block-start: 20px;\r\n inset-inline-end: 20px;\r\n }\r\n}\r\n\r\n.overlay {\r\n padding-block: units.$u5 units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-inline-end: 0;\r\n inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n &::backdrop {\r\n background-color: rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n inline-size: 100vw;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n :host([main-size=\"small\"]) .dso-main-panel,\r\n :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$small;\r\n min-inline-size: 0;\r\n max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: 0;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"medium\"]) .dso-main-panel,\r\n :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$medium;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"large\"]) .dso-main-panel,\r\n :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$large;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host {\r\n display: flex;\r\n flex-direction: column;\r\n block-size: 100vh;\r\n overflow: clip;\r\n position: relative;\r\n\r\n .dso-main-panel.compact,\r\n .dso-main-panel.expanded {\r\n flex-basis: unset;\r\n min-inline-size: unset;\r\n max-inline-size: unset;\r\n inline-size: 440px;\r\n }\r\n\r\n .viewer-grid-columns {\r\n display: flex;\r\n overflow: hidden;\r\n flex-grow: 1;\r\n }\r\n }\r\n\r\n .dso-main-panel,\r\n .dso-document-panel {\r\n box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n .content {\r\n overflow-y: auto;\r\n }\r\n }\r\n\r\n .filter-panel {\r\n margin-inline: 0 auto;\r\n inline-size: calc(100vw - 40px);\r\n\r\n &[open] {\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n }\r\n }\r\n\r\n .overlay {\r\n box-shadow: -2px 0 5px colors.$grijs-60;\r\n margin-inline: auto 0;\r\n }\r\n\r\n @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n :host([filter-panel-open]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filter-panel-max-inline-size});\r\n }\r\n }\r\n\r\n .filter-panel {\r\n inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n inset-inline-start: -(core-viewer-grid-variables.$filter-panel-max-inline-size);\r\n }\r\n }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n @include navbar.root();\r\n\r\n .dso-navbar {\r\n padding-inline: units.$u2;\r\n }\r\n\r\n .dso-nav {\r\n @include navbar.nav-border();\r\n\r\n display: flex;\r\n gap: units.$u2;\r\n margin-block-start: 0;\r\n inline-size: calc(100vw - units.$u4);\r\n }\r\n\r\n .dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n font-weight: 300;\r\n }\r\n }\r\n\r\n .filter-panel,\r\n .overlay {\r\n margin-inline: 0;\r\n max-inline-size: 100vw;\r\n inset-block-start: 0;\r\n inline-size: 100vw;\r\n }\r\n\r\n .filter-panel {\r\n inset-inline-start: -100vw;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n :host([filter-panel-open]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, FilterPanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n ViewerGridActiveTabSwitchEvent,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n ViewerGridChangeSizeEvent,\r\n ViewerGridCloseFilterPanelEvent,\r\n ViewerGridCloseOverlayEvent,\r\n ViewerGridMainToggleEvent,\r\n ViewerGridPanelSize,\r\n ViewerGridTab,\r\n viewerGridTabLabelMap,\r\n viewerGridTabs,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n const shadowRoot = entry?.target.getRootNode();\r\n if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n shadowRoot.host._checkMainPanelVisibility();\r\n }\r\n }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/*\r\n @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\r\n * @slot main\r\n * @slot map\r\n * @slot filter-panel\r\n * @slot overlay\r\n * @slot document-panel\r\n /\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n private mapElement?: HTMLDivElement;\r\n\r\n /\r\n The title of the filter panel\r\n /\r\n @Prop({ reflect: true })\r\n filterPanelTitle?: string;\r\n\r\n /\r\n Set to true when filter panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n filterPanelOpen = false;\r\n\r\n /\r\n Set to true when overlay should show.\r\n /\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /\r\n Set to true when document panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelOpen = false;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set active tab in tab view.\r\n /\r\n @Prop()\r\n activeTab?: ViewerGridTab;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set to show main panel expanded.\r\n /\r\n @Prop()\r\n mainPanelExpanded = false;\r\n\r\n /\r\n Set to hide the main panel.\r\n /\r\n @Prop()\r\n mainPanelHidden = false;\r\n\r\n /\r\n Emitted when user wants to close the overlay.\r\n /\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n /\r\n Emitted when user wants to close the filter panel.\r\n /\r\n @Event()\r\n dsoCloseFilterPanel!: EventEmitter<ViewerGridCloseFilterPanelEvent>;\r\n\r\n /\r\n Emitted when user applies filter panel options.\r\n /\r\n @Event()\r\n dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n Emitted on interaction with sizing buttons.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n Emitted when the user toggles the visibility of the main panel.\r\n \r\n Also emitted by scripting when the panels do not fit anymore.\r\n /\r\n @Event()\r\n dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n @State()\r\n tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n private filterPanel: HTMLDialogElement \| undefined;\r\n\r\n private get filterPanelSlot() {\r\n return this.host.querySelector(\"[slot='filter-panel']\");\r\n }\r\n\r\n private get overlaySlot() {\r\n return this.host.querySelector(\"[slot='overlay']\");\r\n }\r\n\r\n private overlay: HTMLDialogElement \| undefined;\r\n\r\n @Watch(\"documentPanelOpen\")\r\n documentPanelOpenWatcher(open: boolean) {\r\n if (open) {\r\n this._checkMainPanelVisibility();\r\n }\r\n }\r\n\r\n @Watch(\"filterPanelOpen\")\r\n filterPanelOpenWatcher(open: boolean) {\r\n if (!this.filterPanelSlot) {\r\n console.warn(\"slot 'filter-panel' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.filterPanel?.show();\r\n } else {\r\n this.filterPanel?.close();\r\n }\r\n }\r\n\r\n @Watch(\"overlayOpen\")\r\n overlayOpenWatcher(open: boolean) {\r\n if (!this.overlaySlot) {\r\n console.warn(\"slot 'overlay' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.overlay?.showModal();\r\n } else {\r\n this.overlay?.close();\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _checkMainPanelVisibility() {\r\n if (\r\n this.documentPanelOpen &&\r\n !this.mainPanelHidden &&\r\n this.mapElement instanceof HTMLDivElement &&\r\n ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) \|\|\r\n (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n ) {\r\n this.dsoMainPanelToggle.emit({\r\n hide: true,\r\n });\r\n }\r\n }\r\n\r\n private switchActiveTab = (tab: ViewerGridTab) => {\r\n this.dsoActiveTabSwitch.emit({\r\n tab,\r\n });\r\n };\r\n\r\n private shrinkDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private expandDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private toggleMainPanel = () => {\r\n if (\r\n this.mapElement instanceof HTMLDivElement &&\r\n this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n ) {\r\n this.mainSize = \"small\";\r\n }\r\n\r\n this.dsoMainPanelToggle.emit({\r\n hide: !this.mainPanelHidden,\r\n });\r\n };\r\n\r\n private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n connectedCallback() {\r\n window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterPanelOpen && this.filterPanelSlot) {\r\n this.filterPanel?.show();\r\n }\r\n\r\n if (this.overlayOpen && this.overlaySlot) {\r\n this.overlay?.showModal();\r\n }\r\n\r\n if (this.mapElement instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.mapElement);\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n if (this.mapElement) {\r\n resizeObserver.unobserve(this.mapElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot name=\"top-bar\" />\r\n <div class=\"viewer-grid-columns\">\r\n {this.tabView && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {viewerGridTabs.map((tab) => (\r\n <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n {viewerGridTabLabelMap[tab]}\r\n </button>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"search\")) && (\r\n <MainPanel\r\n tabView={this.tabView}\r\n mainSize={this.mainSize}\r\n documentPanelOpen={this.documentPanelOpen}\r\n mainPanelExpanded={this.mainPanelExpanded}\r\n mainPanelHidden={this.mainPanelHidden}\r\n toggleMainPanel={this.toggleMainPanel}\r\n dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n ></MainPanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"search\")) && (\r\n <FilterPanel\r\n open={this.filterPanelOpen}\r\n title={this.filterPanelTitle}\r\n ref={(element) => (this.filterPanel = element)}\r\n dsoCloseFilterPanel={(e) => this.dsoCloseFilterPanel.emit({ originalEvent: e })}\r\n ></FilterPanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"map\")) && (\r\n <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n <slot name=\"map\" />\r\n </div>\r\n )}\r\n {((!this.tabView && this.documentPanelOpen) \|\| (this.tabView && this.activeTab === \"document\")) && (\r\n <DocumentPanel\r\n tabView={this.tabView}\r\n panelSize={this.documentPanelSize}\r\n shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n expandDocumentPanel={this.expandDocumentPanel}\r\n dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n ></DocumentPanel>\r\n )}\r\n <Overlay\r\n ref={(element) => (this.overlay = element)}\r\n dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n ></Overlay>\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/dsot-document-component-demo.js CHANGED Viewed

@@ -1,20 +1,21 @@
 import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
 import { g as getDefaultExportFromCjs, c as commonjsGlobal } from './p-BxvZeNWe.js';
-import { d as defineCustomElement$g } from './p-Dd-GhTkt.js';
-import { d as defineCustomElement$f } from './p-Du2B4UJi.js';
-import { d as defineCustomElement$e } from './p-LlmPNkbk.js';
-import { d as defineCustomElement$d } from './p-CMO4UirQ.js';
-import { d as defineCustomElement$c } from './p-Dwv_hVo9.js';
-import { d as defineCustomElement$b } from './p--HbwCvQM.js';
-import { d as defineCustomElement$a } from './p-DdLngpp0.js';
-import { d as defineCustomElement$9 } from './p-CVzuETs2.js';
-import { d as defineCustomElement$8 } from './p-CTcIwB2o.js';
-import { d as defineCustomElement$7 } from './p-yEg3EESJ.js';
-import { d as defineCustomElement$6 } from './p-D-Dm2Gh7.js';
-import { d as defineCustomElement$5 } from './p-B1X31Uiw.js';
-import { d as defineCustomElement$4 } from './p-ZUzIHCVc.js';
-import { d as defineCustomElement$3 } from './p-Vek1sFf5.js';
-import { d as defineCustomElement$2 } from './p-BOnELf-b.js';
+import { d as defineCustomElement$h } from './p-D_6TKRgI.js';
+import { d as defineCustomElement$g } from './p-YEwuOvaY.js';
+import { d as defineCustomElement$f } from './p-Bv7dmPUW.js';
+import { d as defineCustomElement$e } from './p-CFAsG6Ok.js';
+import { d as defineCustomElement$d } from './p-DTle6By6.js';
+import { d as defineCustomElement$c } from './p-BJ43Q58h.js';
+import { d as defineCustomElement$b } from './p-DAvYoaob.js';
+import { d as defineCustomElement$a } from './p-BDuXq5bx.js';
+import { d as defineCustomElement$9 } from './p-CN3aN7RU.js';
+import { d as defineCustomElement$8 } from './p-BuyCa_uF.js';
+import { d as defineCustomElement$7 } from './p-Cpkqb2I3.js';
+import { d as defineCustomElement$6 } from './p-B4T_HZRq.js';
+import { d as defineCustomElement$5 } from './p-UaaPHvKJ.js';
+import { d as defineCustomElement$4 } from './p-CS5wngFb.js';
+import { d as defineCustomElement$3 } from './p-nPKr7LCS.js';
+import { d as defineCustomElement$2 } from './p-CpYhA6kG.js';
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1662,7 +1663,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
     constructor() {
         super();
         this.__registerHost();
-        this.dsotOzonContentAnchorClick = createEvent(this, "dsotOzonContentAnchorClick", 7);
+        this.dsotOzonContentClick = createEvent(this, "dsotOzonContentClick", 7);
         this.dsotTableOfContentsClick = createEvent(this, "dsotTableOfContentsClick", 3);
         /**
          * Show canvas to where Document Component extends.
@@ -1699,7 +1700,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
             const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);
             return (h("dso-document-component", { annotated: this.isAnnotated(documentComponent), bevatOntwerpInformatie: !!documentComponent.bevatOntwerpInformatie, filtered: this.isOpen(documentComponent)
                     ? this.isFiltered(documentComponent)
-                    : this.hasFilteredChildren(documentComponent), genesteOntwerpInformatie: this.hasNestedDraft(documentComponent), gereserveerd: documentComponent.gereserveerd, heading: "h2", kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: () => this.handleAnnotationToggle(documentComponent), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), onDsoOzonContentAnchorClick: (e) => this.handleOzonContentAnchorClick(e), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && (embeddedDocuments === null || embeddedDocuments === void 0 ? void 0 : embeddedDocuments.documentComponents.length) && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
+                    : this.hasFilteredChildren(documentComponent), genesteOntwerpInformatie: this.hasNestedDraft(documentComponent), gereserveerd: documentComponent.gereserveerd, heading: "h2", kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: () => this.handleAnnotationToggle(documentComponent), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && (embeddedDocuments === null || embeddedDocuments === void 0 ? void 0 : embeddedDocuments.documentComponents.length) && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
         };
         this.MenuButton = ({ documentComponent }) => {
             const { type } = documentComponent;
@@ -1786,8 +1787,8 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
             ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)
             : [...this.activeAnnotationSelectables, documentComponent];
     }
-    handleOzonContentAnchorClick(e) {
-        this.dsotOzonContentAnchorClick.emit(e.detail);
+    handleOzonContentClick(e) {
+        this.dsotOzonContentClick.emit(e.detail);
     }
     handleTableOfContentsClick(e) {
         this.dsotTableOfContentsClick.emit(e.detail);
@@ -1841,7 +1842,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
     render() {
         var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '2bcab3ad56efe0d64c645743c0697d9ea81ceb61', class: "dso-document-components" }, h("div", { key: '591753c5dc2670c3015cc88a6fca7fa7edc55679', class: "dso-navbar" }, h("ul", { key: '0b2280e168d462c61f59efdf3bb8ff9d665d540a', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '01859b0da6de69c28a40532a5d06eeadb48506dc', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '9f474f3a534583930952c7c0083c22479cdae8a9', class: "dso-document-components" }, h("div", { key: '2ba0ba69aedb99545683afea1ea8dfb25d549e20', class: "dso-navbar" }, h("ul", { key: '54f6dc89d56e807c732688c1b1db3a18b22a36ac', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'ae175e6987ca3f5640607cc7bb77251ab65e346a', path: [this.document] })));
     }
     static get watchers() { return {
         "jsonFile": ["jsonFileWatcher"],
@@ -1854,6 +1855,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
         "openDefault": [4, "open-default"],
         "mode": [513],
         "ozonContentUrlResolver": [16, "ozon-content-url-resolver"],
+        "ozonContentBegripResolver": [16, "ozon-content-begrip-resolver"],
         "response": [32],
         "document": [32],
         "openOrClosed": [32],
@@ -1869,7 +1871,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dsot-document-component-demo", "dso-alert", "dso-annotation-locatie", "dso-badge", "dso-document-component", "dso-icon", "dso-icon-button", "dso-image-overlay", "dso-label", "dso-ozon-content", "dso-panel", "dso-renvooi", "dso-responsive-element", "dso-slide-toggle", "dso-table", "dso-tooltip"];
+    const components = ["dsot-document-component-demo", "dso-alert", "dso-annotation-locatie", "dso-badge", "dso-document-component", "dso-icon", "dso-icon-button", "dso-image-overlay", "dso-label", "dso-ozon-content", "dso-ozon-content-toggletip", "dso-panel", "dso-renvooi", "dso-responsive-element", "dso-slide-toggle", "dso-table", "dso-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "dsot-document-component-demo":
             if (!customElements.get(tagName)) {
@@ -1878,45 +1880,50 @@ function defineCustomElement$1() {
             break;
         case "dso-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "dso-annotation-locatie":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "dso-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "dso-document-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "dso-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "dso-icon-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "dso-image-overlay":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "dso-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "dso-ozon-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "dso-ozon-content-toggletip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }