@dso-toolkit/core 101.2.0 → 103.0.0

package/dist/esm/dso-viewer-grid.entry.js

@@ -53,7 +53,7 @@ const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", r
         dsoCloseOverlay(e);
     } }, h("dso-icon-button", { class: "overlay-close-button", icon: "cross", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }), h("slot", { name: "overlay" })));
 
-const viewerGridCss = () => `*, *::after, *::before {   box-sizing: border-box; }  :host .overlay {   block-size: calc(100% - 32px);   margin-block: 16px;   margin-inline: auto 16px; } :host .dso-main-panel {   transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; }  :host(:not([print])) {   display: flex;   flex-direction: column;   block-size: 100dvh;   overflow: clip;   position: relative; } :host(:not([print])) .viewer-grid-columns {   display: flex;   overflow: hidden;   flex-grow: 1;   min-block-size: 0; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel {   min-block-size: 0; } :host(:not([print])) .dso-main-panel .content, :host(:not([print])) .dso-document-panel .content {   overflow-y: auto; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   letter-spacing: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .overlay-close-button {   position: absolute;   line-height: 1;   inset-block-start: 8px;   inset-inline-end: 16px; }  .content.invisible {   visibility: hidden; }  .viewer-grid-columns {   position: relative; }  .dso-main-panel .content, .dso-document-panel .content {   block-size: 100%;   padding-block: 0;   padding-inline: 16px; }  .dso-main-panel {   background-color: #fff;   flex-shrink: 0;   flex-grow: 0;   position: relative;   transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;   z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {   inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted {   flex-shrink: unset;   flex-grow: unset;   position: absolute;   transition: none; } .dso-main-panel.expanded.collapsed {   position: absolute;   block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button {   inset-inline-start: calc(100% + 1px);   transition: inset-inline-start 200ms ease-in;   padding-block: 0 8px;   padding-inline: 0 4px; } .dso-main-panel .toggle-button {   --_dso-icon-button-border-start-start-radius: 0;   --_dso-icon-button-border-end-start-radius: 0; }  .dso-document-panel {   background-color: #fff;   flex-shrink: 0;   flex-grow: 0;   position: relative;   transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;   z-index: 100; } .dso-document-panel .sizing-buttons {   inset-block-start: auto;   inset-block-end: 16px;   inset-inline-end: calc(100% + 1px);   transition: inset-inline-end 200ms ease-in;   padding-block: 0 8px;   padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand {   --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;   --_dso-icon-button-border-start-end-radius: 0;   --_dso-icon-button-border-end-end-radius: 0; }  .sizing-buttons, .toggle-button {   overflow-x: hidden;   position: absolute;   inset-block-start: 16px;   inline-size: 44px;   z-index: -1; }  .map-area {   block-size: 100%;   inline-size: 100%;   overflow: hidden;   position: relative; }  .map {   position: absolute;   inset: 0;   overflow: hidden; }  slot[name=legend] {   display: block;   position: absolute;   inset-block-end: 16px;   inset-inline-start: 16px;   z-index: 1; }  .filter-panel, .overlay {   background-color: #fff;   border: 0;   block-size: 100%;   margin-block: 0;   max-block-size: 100vh;   overflow-y: auto;   z-index: 101; }  .filter-panel {   display: block;   position: absolute;   padding-block: 8px;   padding-inline: 16px;   inset-block-start: 0;   block-size: 100%;   inset-inline-start: -380px;   inline-size: 100%;   transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) {   .filter-panel {     inline-size: 100vw;   }   .filter-panel::before {     display: none !important;   } } @media screen and (min-width: 992px) {   .filter-panel {     max-inline-size: 380px;   } } .filter-panel[open] {   inset-inline-start: 0;   box-shadow: none;   border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 {   color: #275937; } .filter-panel .dso-close {   --_dso-icon-button-tertiary-color: #191919;   position: absolute;   inset-block-start: 20px;   inset-inline-end: 20px; }  .overlay {   padding-block: 40px 8px;   padding-inline: 16px;   inset-inline-end: 0;   inline-size: 624px; } .overlay::backdrop {   background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) {   .overlay {     inline-size: 100vw;   } }  @media screen and (min-width: 1032px) {   :host(:not([print])[main-size=small]) .dso-main-panel,   :host(:not([print])[document-panel-size=small]) .dso-document-panel {     flex-basis: 375px;     min-inline-size: 0;     max-inline-size: 375px;   } } @media screen and (min-width: 1032px) and (max-width: 375px) {   :host(:not([print])[main-size=small]) .dso-main-panel,   :host(:not([print])[document-panel-size=small]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 0;     transition: none;   } } @media screen and (min-width: 1032px) {   :host(:not([print])[main-size=medium]) .dso-main-panel,   :host(:not([print])[document-panel-size=medium]) .dso-document-panel {     flex-basis: 624px;     min-inline-size: 375px;     max-inline-size: 624px;   } } @media screen and (min-width: 1032px) and (max-width: 624px) {   :host(:not([print])[main-size=medium]) .dso-main-panel,   :host(:not([print])[document-panel-size=medium]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 375px;     transition: none;   } } @media screen and (min-width: 1032px) {   :host(:not([print])[main-size=large]) .dso-main-panel,   :host(:not([print])[document-panel-size=large]) .dso-document-panel {     flex-basis: 60%;     min-inline-size: 768px;     max-inline-size: 1024px;   } } @media screen and (min-width: 1032px) and (max-width: 768px) {   :host(:not([print])[main-size=large]) .dso-main-panel,   :host(:not([print])[document-panel-size=large]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 768px;     transition: none;   } } @media screen and (min-width: 1032px) {   :host(:not([print])) .dso-main-panel.compact,   :host(:not([print])) .dso-main-panel.expanded {     flex-basis: unset;     min-inline-size: unset;     max-inline-size: unset;     inline-size: 440px;   }   :host(:not([print])) .dso-main-panel,   :host(:not([print])) .dso-document-panel {     box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);   }   :host(:not([print])) .filter-panel {     margin-inline: 0 auto;     inline-size: calc(100vw - 40px);   }   :host(:not([print])) .filter-panel[open] {     border-inline-end: 1px solid #e5e5e5;   }   :host(:not([print])) .overlay {     box-shadow: -2px 0 5px #666;   } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) {   :host(:not([print])[filter-panel-open]) .dso-main-panel {     margin-inline-start: 380px;     max-inline-size: calc(100vw - 380px);   }   :host(:not([print])) .filter-panel {     inline-size: 380px;     inset-inline-start: -380px;   } } @media screen and (max-width: 1031.99px) {   .dso-navbar {     min-block-size: 32px;   }   .dso-navbar .dso-navbar-header {     float: inline-start;   }   .dso-navbar .dso-navbar-toggle {     border-radius: 4px;     min-inline-size: auto;     padding-block: 5px;     padding-inline: 0;   }   .dso-navbar .dso-navbar-toggle dso-icon {     margin-inline-start: 8px;     margin-inline-end: 8px;   } } @media screen and (max-width: 1031.99px) and (min-width: 992px) {   .dso-navbar .dso-navbar-toggle {     display: none;   } } @media screen and (max-width: 1031.99px) {   .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {     margin-inline-end: 8rem;   }   .dso-nav {     list-style: none;     margin-block-end: 0;     padding-inline-start: 0;   }   .dso-nav > li > button {     border: 0;     background-color: transparent;   }   .dso-nav > li > a,   .dso-nav > li > button {     display: block;   }   .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,   .dso-nav > li > button,   .dso-nav > li > button:hover,   .dso-nav > li > button:focus,   .dso-nav > li > button:visited {     color: #275937;   }   .dso-nav > li.dso-active > a,   .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,   .dso-nav > li.is-active > button {     border-block-end: 4px solid #8b4a6a;     font-weight: bold;   }   .dso-nav.dso-nav-main > li {     display: inline-block;   }   .dso-nav.dso-nav-main > li > a,   .dso-nav.dso-nav-main > li > button {     text-decoration: none;   }   .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,   .dso-nav.dso-nav-main > li > button:hover,   .dso-nav.dso-nav-main > li > button:focus-visible,   .dso-nav.dso-nav-main > li > button:active {     text-decoration: underline;   }   .dso-nav.dso-nav-main > li > a,   .dso-nav.dso-nav-main > li > button {     font-size: 1.25em;     line-height: 1;     margin-block-start: 8px;     padding-block: 8px 7px;     padding-inline: 16px;   }   .dso-nav.dso-nav-sub > li {     display: inline-block;   }   .dso-nav.dso-nav-sub > li > a,   .dso-nav.dso-nav-sub > li > button {     text-decoration: none;   }   .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,   .dso-nav.dso-nav-sub > li > button:hover,   .dso-nav.dso-nav-sub > li > button:focus-visible,   .dso-nav.dso-nav-sub > li > button:active {     text-decoration: underline;   }   .dso-nav.dso-nav-sub > li > a,   .dso-nav.dso-nav-sub > li > button {     font-size: 1rem;     margin-block-start: 4px;     padding-block: 4px 3px;     padding-inline: 8px;   }   .dso-navbar {     padding-inline: 16px;   }   .dso-nav {     border-block-end: 1px solid #ccc;     display: flex;     gap: 16px;     margin-block-start: 0;     inline-size: calc(100vw - 32px);   }   .dso-tertiary {     display: inline-block;     font-size: 1em;     font-weight: 500;     margin-block-end: 0;     text-decoration: none;     touch-action: manipulation;     text-align: var(--_dso-button-text-align, start);     user-select: none;     vertical-align: middle;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     display: inline-block;     font-size: 1em;     font-weight: 500;     margin-block-end: 0;     text-decoration: none;     touch-action: manipulation;     text-align: var(--_dso-button-text-align, start);     user-select: none;     vertical-align: middle;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     background-color: var(--_dso-button-tertiary-background-color, );     border-color: var(--_dso-button-tertiary-border-color, );     color: var(--_dso-button-tertiary-color, #39870c);     float: var(--_dso-button-float-tertiary, none);     border-width: 1px;     border-style: solid;     border-radius: 4px;     line-height: 1.5;     min-inline-size: auto;     inline-size: var(--_dso-button-inline-size, auto);     padding-block: 11px;     padding-inline: 15px;   }   .dso-tertiary:hover {     background-color: var(--_dso-button-tertiary-hover-background-color, );     border-color: var(--_dso-button-tertiary-hover-border-color, );     color: var(--_dso-button-tertiary-hover-color, #275937);     float: var(--_dso-button-float-tertiary, none);   }   .dso-tertiary:active {     background-color: var(--_dso-button-tertiary-active-background-color, );     border-color: var(--_dso-button-tertiary-active-border-color, );     color: var(--_dso-button-tertiary-active-color, #173521);     float: var(--_dso-button-float-tertiary, none);   }   .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {     background-color: var(--_dso-button-tertiary-disabled-background-color, );     border-color: var(--_dso-button-tertiary-disabled-border-color, );     color: var(--_dso-button-tertiary-disabled-color, #afcf9d);     float: var(--_dso-button-float-tertiary, none);   }   .dso-tertiary.dso-small {     line-height: 1rem;   }   .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     line-height: 1rem;   }   .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-extra-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     padding-block: 9px;   }   .dso-tertiary {     border: 0;     line-height: 1;     padding-inline: 0;     padding-block: var(--_dso-button-padding-block-tertiary, 0);     background-color: transparent;   }   .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {     color: #39870c;   }   .dso-tertiary:not([disabled]):hover {     text-decoration: underline;     text-underline-position: under;   }   .dso-tertiary.dso-align {     line-height: calc(1.5em - 1px);     padding-block: 11px;     padding-inline: 0;     position: relative;   }   .dso-tertiary.dso-truncate {     max-inline-size: 100%;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;   }   .dso-tertiary.dso-spinner-left::before {     background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");     background-repeat: no-repeat;     content: "";     display: inline-block;     block-size: 24px;     vertical-align: middle;     inline-size: 24px;     margin-inline-end: 8px;   }   .dso-tertiary.dso-spinner-right::after {     background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");     background-repeat: no-repeat;     content: "";     display: inline-block;     block-size: 24px;     vertical-align: middle;     inline-size: 24px;     margin-inline-start: 8px;   }   .dso-tertiary dso-icon + span:not(.sr-only),   .dso-tertiary span:not(.sr-only) + dso-icon {     margin-inline-start: 4px;   }   .dso-tertiary dso-icon,   .dso-tertiary span {     vertical-align: middle;   }   .dso-tertiary {     font-weight: 300;   }   :host(:not([print])) .viewer-grid-columns {     flex-direction: column;   }   :host(:not([print])) .dso-main-panel,   :host(:not([print])) .dso-document-panel,   :host(:not([print])) .map-area {     flex: 1;     inline-size: 100%;     max-inline-size: none;     min-inline-size: 0;   }   :host(:not([print])) .map {     position: relative;     inset: auto;   }   :host(:not([print])) .overlay {     inline-size: calc(100vw - 32px);   }   :host(:not([print])) .filter-panel,   :host(:not([print])) .overlay {     max-inline-size: 100vw;     inset-block-start: 0;   }   :host(:not([print])) .filter-panel {     margin-inline: 0;     inset-inline-start: -100vw;     inline-size: 100vw;   }   :host(:not([print])) .filter-panel[open] {     inset-inline-start: 0;   } } @media screen and (min-width: 992px) {   :host(:not([print])[filter-panel-open]) .dso-main-panel {     margin-inline-start: 380px;   } } :host([print]) {   display: flex;   flex-direction: column;   block-size: auto;   overflow: visible; } :host([print]) .viewer-grid-columns {   display: flex;   flex-direction: column;   overflow: visible; } :host([print]) .map-area {   display: flex;   flex-direction: row;   align-items: flex-start;   overflow: visible;   flex-shrink: 0;   order: -1; } :host([print]) .map {   flex: 1;   min-inline-size: 0;   align-self: stretch;   block-size: 400px;   position: relative;   inset: auto; } :host([print]) slot[name=legend] {   position: relative;   inset: auto;   flex-shrink: 0;   --_dso-legend-content-max-block-size: none; } :host([print]) .dso-main-panel {   block-size: auto;   box-shadow: none;   inline-size: 100%;   max-inline-size: none;   min-inline-size: 0;   position: relative;   margin-inline-start: 0; } :host([print]) .dso-main-panel .content {   align-items: flex-start;   block-size: auto;   display: flex;   flex-direction: row;   gap: 32px;   overflow-y: visible; } :host([print]) .dso-main-panel .content slot[name=main] {   display: block;   flex: 1;   min-inline-size: 0; } :host([print]) .filter-panel {   block-size: auto;   box-shadow: none;   flex-shrink: 0;   inline-size: 380px;   margin-inline: 0;   max-inline-size: none;   min-inline-size: 0;   position: relative;   transition: none; } :host([print]) .dso-document-panel {   block-size: auto;   box-shadow: none;   inline-size: 100%;   max-inline-size: none;   min-inline-size: 0;   position: static; } :host([print]) .dso-document-panel .content {   block-size: auto;   overflow-y: visible; } :host([print]) .sizing-buttons, :host([print]) .toggle-button {   display: none; }`;
+const viewerGridCss = () => `*, *::after, *::before {   box-sizing: border-box; }  :host .overlay {   block-size: calc(100% - 32px);   margin-block: 16px;   margin-inline: auto 16px; } :host .dso-main-panel {   transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; }  :host(:not([print])) {   display: flex;   flex-direction: column;   block-size: 100dvh;   overflow: clip;   position: relative; } :host(:not([print])) .viewer-grid-columns {   display: flex;   overflow: hidden;   flex-grow: 1;   min-block-size: 0; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel {   min-block-size: 0; } :host(:not([print])) .dso-main-panel .content, :host(:not([print])) .dso-document-panel .content {   overflow-y: auto; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   letter-spacing: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .overlay-close-button {   position: absolute;   line-height: 1;   inset-block-start: 8px;   inset-inline-end: 16px; }  .content.invisible {   visibility: hidden; }  .viewer-grid-columns {   position: relative; }  .dso-main-panel .content, .dso-document-panel .content {   block-size: 100%;   padding-block: 0;   padding-inline: 16px; }  .dso-main-panel {   background-color: #fff;   flex-shrink: 0;   flex-grow: 0;   position: relative;   transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;   z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {   inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted {   flex-shrink: unset;   flex-grow: unset;   position: absolute;   transition: none; } .dso-main-panel.expanded.collapsed {   position: absolute;   block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button {   inset-inline-start: calc(100% + 1px);   transition: inset-inline-start 200ms ease-in;   padding-block: 0 8px;   padding-inline: 0 4px; } .dso-main-panel .toggle-button {   --_dso-icon-button-border-start-start-radius: 0;   --_dso-icon-button-border-end-start-radius: 0; }  .dso-document-panel {   background-color: #fff;   flex-shrink: 0;   flex-grow: 0;   position: relative;   transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;   z-index: 100; } .dso-document-panel .sizing-buttons {   inset-block-start: auto;   inset-block-end: 16px;   inset-inline-end: calc(100% + 1px);   transition: inset-inline-end 200ms ease-in;   padding-block: 0 8px;   padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand {   --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;   --_dso-icon-button-border-start-end-radius: 0;   --_dso-icon-button-border-end-end-radius: 0; }  .sizing-buttons, .toggle-button {   overflow-x: hidden;   position: absolute;   inset-block-start: 16px;   inline-size: 44px;   z-index: -1; }  .map-area {   block-size: 100%;   inline-size: 100%;   overflow: hidden;   position: relative; }  .map {   position: absolute;   inset: 0;   overflow: hidden; }  slot[name=legend] {   display: block;   position: absolute;   inset-block-end: 16px;   inset-inline-start: 16px;   z-index: 1; }  .filter-panel, .overlay {   background-color: #fff;   border: 0;   block-size: 100%;   margin-block: 0;   max-block-size: 100vh;   overflow-y: auto;   z-index: 101; }  .filter-panel {   display: block;   position: absolute;   padding-block: 8px;   padding-inline: 16px;   inset-block-start: 0;   block-size: 100%;   inset-inline-start: -380px;   inline-size: 100%;   transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) {   .filter-panel {     inline-size: 100vw;   }   .filter-panel::before {     display: none !important;   } } @media screen and (min-width: 992px) {   .filter-panel {     max-inline-size: 380px;   } } .filter-panel[open] {   inset-inline-start: 0;   box-shadow: none;   border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 {   color: #275937; } .filter-panel .dso-close {   --_dso-icon-button-tertiary-color: #191919;   position: absolute;   inset-block-start: 20px;   inset-inline-end: 20px; }  .overlay {   padding-block: 40px 8px;   padding-inline: 16px;   inset-inline-end: 0;   inline-size: 624px; } .overlay::backdrop {   background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) {   .overlay {     inline-size: 100vw;   } }  @media screen and (min-width: 1032px) {   :host(:not([print])[main-size=small]) .dso-main-panel {     flex-basis: 375px;     min-inline-size: 0;     max-inline-size: 375px;   }   :host(:not([print])[main-size=medium]) .dso-main-panel {     flex-basis: 624px;     min-inline-size: 375px;     max-inline-size: 624px;   }   :host(:not([print])[main-size=large]) .dso-main-panel {     flex-basis: 60%;     min-inline-size: 768px;     max-inline-size: 1024px;   }   :host(:not([print])[document-panel-size=small]) .dso-document-panel {     flex-basis: 25%;     min-inline-size: 375px;     max-inline-size: 623px;   }   :host(:not([print])[document-panel-size=medium]) .dso-document-panel {     flex-basis: 40%;     min-inline-size: 624px;     max-inline-size: 1024px;   }   :host(:not([print])[document-panel-size=large]) .dso-document-panel {     flex-basis: 60%;     min-inline-size: 768px;     max-inline-size: 1200px;   }   :host(:not([print])) .dso-main-panel.compact,   :host(:not([print])) .dso-main-panel.expanded {     flex-basis: unset;     min-inline-size: unset;     max-inline-size: unset;     inline-size: 440px;   }   :host(:not([print])) .dso-main-panel,   :host(:not([print])) .dso-document-panel {     box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);   }   :host(:not([print])) .filter-panel {     margin-inline: 0 auto;     inline-size: calc(100vw - 40px);   }   :host(:not([print])) .filter-panel[open] {     border-inline-end: 1px solid #e5e5e5;   }   :host(:not([print])) .overlay {     box-shadow: -2px 0 5px #666;   } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) {   :host(:not([print])[filter-panel-open]) .dso-main-panel {     margin-inline-start: 380px;     max-inline-size: calc(100vw - 380px);   }   :host(:not([print])) .filter-panel {     inline-size: 380px;     inset-inline-start: -380px;   } } @media screen and (max-width: 1031.99px) {   .dso-navbar {     min-block-size: 32px;   }   .dso-navbar .dso-navbar-header {     float: inline-start;   }   .dso-navbar .dso-navbar-toggle {     border-radius: 4px;     min-inline-size: auto;     padding-block: 5px;     padding-inline: 0;   }   .dso-navbar .dso-navbar-toggle dso-icon {     margin-inline-start: 8px;     margin-inline-end: 8px;   } } @media screen and (max-width: 1031.99px) and (min-width: 992px) {   .dso-navbar .dso-navbar-toggle {     display: none;   } } @media screen and (max-width: 1031.99px) {   .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {     margin-inline-end: 8rem;   }   .dso-nav {     list-style: none;     margin-block-end: 0;     padding-inline-start: 0;   }   .dso-nav > li > button {     border: 0;     background-color: transparent;   }   .dso-nav > li > a,   .dso-nav > li > button {     display: block;   }   .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,   .dso-nav > li > button,   .dso-nav > li > button:hover,   .dso-nav > li > button:focus,   .dso-nav > li > button:visited {     color: #275937;   }   .dso-nav > li.dso-active > a,   .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,   .dso-nav > li.is-active > button {     border-block-end: 4px solid #8b4a6a;     font-weight: bold;   }   .dso-nav.dso-nav-main > li {     display: inline-block;   }   .dso-nav.dso-nav-main > li > a,   .dso-nav.dso-nav-main > li > button {     text-decoration: none;   }   .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,   .dso-nav.dso-nav-main > li > button:hover,   .dso-nav.dso-nav-main > li > button:focus-visible,   .dso-nav.dso-nav-main > li > button:active {     text-decoration: underline;   }   .dso-nav.dso-nav-main > li > a,   .dso-nav.dso-nav-main > li > button {     font-size: 1.25em;     line-height: 1;     margin-block-start: 8px;     padding-block: 8px 7px;     padding-inline: 16px;   }   .dso-nav.dso-nav-sub > li {     display: inline-block;   }   .dso-nav.dso-nav-sub > li > a,   .dso-nav.dso-nav-sub > li > button {     text-decoration: none;   }   .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,   .dso-nav.dso-nav-sub > li > button:hover,   .dso-nav.dso-nav-sub > li > button:focus-visible,   .dso-nav.dso-nav-sub > li > button:active {     text-decoration: underline;   }   .dso-nav.dso-nav-sub > li > a,   .dso-nav.dso-nav-sub > li > button {     font-size: 1rem;     margin-block-start: 4px;     padding-block: 4px 3px;     padding-inline: 8px;   }   .dso-navbar {     padding-inline: 16px;   }   .dso-nav {     border-block-end: 1px solid #ccc;     display: flex;     gap: 16px;     margin-block-start: 0;     inline-size: calc(100vw - 32px);   }   .dso-tertiary {     display: inline-block;     font-size: 1em;     font-weight: 500;     margin-block-end: 0;     text-decoration: none;     touch-action: manipulation;     text-align: var(--_dso-button-text-align, start);     user-select: none;     vertical-align: middle;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     display: inline-block;     font-size: 1em;     font-weight: 500;     margin-block-end: 0;     text-decoration: none;     touch-action: manipulation;     text-align: var(--_dso-button-text-align, start);     user-select: none;     vertical-align: middle;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     background-color: var(--_dso-button-tertiary-background-color, );     border-color: var(--_dso-button-tertiary-border-color, );     color: var(--_dso-button-tertiary-color, #39870c);     float: var(--_dso-button-float-tertiary, none);     border-width: 1px;     border-style: solid;     border-radius: 4px;     line-height: 1.5;     min-inline-size: auto;     inline-size: var(--_dso-button-inline-size, auto);     padding-block: 11px;     padding-inline: 15px;   }   .dso-tertiary:hover {     background-color: var(--_dso-button-tertiary-hover-background-color, );     border-color: var(--_dso-button-tertiary-hover-border-color, );     color: var(--_dso-button-tertiary-hover-color, #275937);     float: var(--_dso-button-float-tertiary, none);   }   .dso-tertiary:active {     background-color: var(--_dso-button-tertiary-active-background-color, );     border-color: var(--_dso-button-tertiary-active-border-color, );     color: var(--_dso-button-tertiary-active-color, #173521);     float: var(--_dso-button-float-tertiary, none);   }   .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {     background-color: var(--_dso-button-tertiary-disabled-background-color, );     border-color: var(--_dso-button-tertiary-disabled-border-color, );     color: var(--_dso-button-tertiary-disabled-color, #afcf9d);     float: var(--_dso-button-float-tertiary, none);   }   .dso-tertiary.dso-small {     line-height: 1rem;   }   .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     line-height: 1rem;   }   .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-extra-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     padding-block: 9px;   }   .dso-tertiary {     border: 0;     line-height: 1;     padding-inline: 0;     padding-block: var(--_dso-button-padding-block-tertiary, 0);     background-color: transparent;   }   .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {     color: #39870c;   }   .dso-tertiary:not([disabled]):hover {     text-decoration: underline;     text-underline-position: under;   }   .dso-tertiary.dso-align {     line-height: calc(1.5em - 1px);     padding-block: 11px;     padding-inline: 0;     position: relative;   }   .dso-tertiary.dso-truncate {     max-inline-size: 100%;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;   }   .dso-tertiary.dso-spinner-left::before {     background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");     background-repeat: no-repeat;     content: "";     display: inline-block;     block-size: 24px;     vertical-align: middle;     inline-size: 24px;     margin-inline-end: 8px;   }   .dso-tertiary.dso-spinner-right::after {     background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");     background-repeat: no-repeat;     content: "";     display: inline-block;     block-size: 24px;     vertical-align: middle;     inline-size: 24px;     margin-inline-start: 8px;   }   .dso-tertiary dso-icon + span:not(.sr-only),   .dso-tertiary span:not(.sr-only) + dso-icon {     margin-inline-start: 4px;   }   .dso-tertiary dso-icon,   .dso-tertiary span {     vertical-align: middle;   }   .dso-tertiary {     font-weight: 300;   }   :host(:not([print])) .viewer-grid-columns {     flex-direction: column;   }   :host(:not([print])) .dso-main-panel,   :host(:not([print])) .dso-document-panel,   :host(:not([print])) .map-area {     flex: 1;     inline-size: 100%;     max-inline-size: none;     min-inline-size: 0;   }   :host(:not([print])) .map {     position: relative;     inset: auto;   }   :host(:not([print])) .overlay {     inline-size: calc(100vw - 32px);   }   :host(:not([print])) .filter-panel,   :host(:not([print])) .overlay {     max-inline-size: 100vw;     inset-block-start: 0;   }   :host(:not([print])) .filter-panel {     margin-inline: 0;     inset-inline-start: -100vw;     inline-size: 100vw;   }   :host(:not([print])) .filter-panel[open] {     inset-inline-start: 0;   } } @media screen and (min-width: 992px) {   :host(:not([print])[filter-panel-open]) .dso-main-panel {     margin-inline-start: 380px;   } } :host([print]) {   display: flex;   flex-direction: column;   block-size: auto;   overflow: visible; } :host([print]) .viewer-grid-columns {   display: flex;   flex-direction: column;   overflow: visible; } :host([print]) .map-area {   display: flex;   flex-direction: row;   align-items: flex-start;   overflow: visible;   flex-shrink: 0;   order: -1; } :host([print]) .map {   flex: 1;   min-inline-size: 0;   align-self: stretch;   block-size: 400px;   position: relative;   inset: auto; } :host([print]) slot[name=legend] {   position: relative;   inset: auto;   flex-shrink: 0;   --_dso-legend-content-max-block-size: none; } :host([print]) .dso-main-panel {   block-size: auto;   box-shadow: none;   inline-size: 100%;   max-inline-size: none;   min-inline-size: 0;   position: relative;   margin-inline-start: 0; } :host([print]) .dso-main-panel .content {   align-items: flex-start;   block-size: auto;   display: flex;   flex-direction: row;   gap: 32px;   overflow-y: visible; } :host([print]) .dso-main-panel .content slot[name=main] {   display: block;   flex: 1;   min-inline-size: 0; } :host([print]) .filter-panel {   block-size: auto;   box-shadow: none;   flex-shrink: 0;   inline-size: 380px;   margin-inline: 0;   max-inline-size: none;   min-inline-size: 0;   position: relative;   transition: none; } :host([print]) .dso-document-panel {   block-size: auto;   box-shadow: none;   inline-size: 100%;   max-inline-size: none;   min-inline-size: 0;   position: static; } :host([print]) .dso-document-panel .content {   block-size: auto;   overflow-y: visible; } :host([print]) .sizing-buttons, :host([print]) .toggle-button {   display: none; }`;
 
 const resizeObserver = new ResizeObserver(debounce(([entry]) => {
     const shadowRoot = entry?.target.getRootNode();
@@ -215,9 +215,9 @@ const ViewerGrid = class {
     }
     render() {
         const tabs = viewerGridTabs.filter((tab) => tab !== "document" || this.documentPanelOpen);
-        return (h(Fragment, { key: 'a4a2d506d887502495e82994af7dc5fadb04c72d' }, h("slot", { key: '2cce5a91ca55e0e99b14113d84711f6b8ea64016', name: "top-bar" }), h("div", { key: '07712c49f0c2b374d9beb3423e63b1a22e3aa49f', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'e412fb5363c99096e2756890a987a47461de78bd', class: "dso-navbar" }, h("ul", { key: '5d6c77f44c72bc8a03e44d83bbdc227ff3d9e484', class: "dso-nav dso-nav-sub" }, tabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", "aria-current": this.activeTab === tab ? "page" : undefined, onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (h(MainPanel, { key: 'bc0bd828cf71d44f8c5112985ce60b899cf984d1', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.tabView ? false : this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? this.renderFilterPanel() : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && this.renderFilterPanel(), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (h("div", { key: 'aab029d2044d207bed52ef12d506257f659e349f', class: "map-area" }, h("div", { key: '242c712042871f3fcaee9b39259de06ffde3753a', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '1514f9691361db4a6c2a968ddca090686d90bf7f', name: "map" })), h("slot", { key: '56b24a21ebf1bda91aa285520a4e3643a28e45dc', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
+        return (h(Fragment, { key: '96c242cdde1a4bb41752f3d98ead62aad3790977' }, h("slot", { key: '95d49eebce481289dac6206f5b2249b4b6a37b17', name: "top-bar" }), h("div", { key: '630d2b18a05801b840210cd0965cab0ddfd2e42b', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '83f8a63abaddbf10e5ff6a28f9e53296c213c54c', class: "dso-navbar" }, h("ul", { key: '0323c650722fb070efff99cb9c2007acc8707e4d', class: "dso-nav dso-nav-sub" }, tabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", "aria-current": this.activeTab === tab ? "page" : undefined, onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (h(MainPanel, { key: '8e210d40820dff9f7eb641540fba03a0bb217125', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.tabView ? false : this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? this.renderFilterPanel() : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && this.renderFilterPanel(), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (h("div", { key: '02fd34a6f02f091f1469b06523ba30bb305995c6', class: "map-area" }, h("div", { key: '74127720fa459c20a276f3e9ff5601ead4272701', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '036b54fe0281d61bb87722ac928ed6070a29bd5d', name: "map" })), h("slot", { key: '9ed121e18508ecdb77b5cd00c37742b631e9b4c9', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
             (this.tabView && this.activeTab === "document" && this.documentPanelOpen) ||
-            this.print) && (h(DocumentPanel, { key: '9b6d0e936adb8f740a97d9470726b6732275434e', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e795a3cdb870b1f932925e875950523bfeae736b', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+            this.print) && (h(DocumentPanel, { key: '1bfef6321df9365a25e1d1dab9126cadea8df837', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'ce8e51f24a2c6a7a20de9648b1555d8edb8362d4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dsot-document-component-demo.entry.js

@@ -1715,7 +1715,7 @@ const DocumentComponentDemo = class {
             }
             return (h("dso-document-component", { annotated: this.isAnnotated(documentComponent), filtered: this.isOpen(documentComponent)
                     ? this.isFiltered(documentComponent)
-                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, headingLevel: 2, kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: (e) => this.handleAnnotationToggle(documentComponent, e.detail), 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, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, 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?.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), gereserveerd: documentComponent.gereserveerd, headingLevel: 2, kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: (e) => this.handleAnnotationToggle(documentComponent, e.detail), 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, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" }), h("dso-label", { slot: "meta", status: "warning", compact: true }, "gewijzigde locatie")))), this.showContent(documentComponent) && 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;
@@ -1852,7 +1852,7 @@ const DocumentComponentDemo = class {
     }
     render() {
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '325c3f0c6cae4feecaf9e01fe74fc602a653f137', class: "dso-document-components" }, h("div", { key: 'df6ff8a61e2fefc28b9dace9ea88fcc2b6f0009e', class: "dso-navbar" }, h("ul", { key: '6b44f5260a57c2a296068aa9d122c31e3d8d6502', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'fd300e2da9b2e29b46e29c3108e78f609e8b4e40', path: [this.document] })));
+        return (h("dso-responsive-element", { key: 'b79655f9c08bd2dd24761bb769cccb441ef11c01', class: "dso-document-components" }, h("div", { key: 'c40ddaad46f22defa626c174109128a346fe7b63', class: "dso-navbar" }, h("ul", { key: '844a9ebcb3693e00c5ce1b5da5cc989050fb90fa', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '46ee8e9d0e26b940323f951eb7ab746816054ce8', path: [this.document] })));
     }
     static get watchers() { return {
         "jsonFile": [{

package/dist/{bundle/p-xDSTG4OU.js → esm/i18n-DVFsbHoq.js}

@@ -297,6 +297,7 @@ class EventEmitter {
   }
 }
 
+const nonEmptyBundles = new WeakSet();
 class ResourceStore extends EventEmitter {
   constructor(data, options = {
     ns: ['translation'],
@@ -420,7 +421,13 @@ class ResourceStore extends EventEmitter {
   hasLanguageSomeTranslations(lng) {
     const data = this.getDataByLanguage(lng);
     const n = data && Object.keys(data) || [];
-    return !!n.find(v => data[v] && Object.keys(data[v]).length > 0);
+    return !!n.find(v => {
+      const bundle = data[v];
+      if (nonEmptyBundles.has(bundle)) return true;
+      if (!bundle || Object.keys(bundle).length === 0) return false;
+      if (typeof bundle === 'object') nonEmptyBundles.add(bundle);
+      return true;
+    });
   }
   toJSON() {
     return this.data;
@@ -1039,7 +1046,8 @@ class LanguageUtil {
       addCode(this.formatLanguageCode(code));
     }
     fallbackCodes.forEach(fc => {
-      if (!codes.includes(fc)) addCode(this.formatLanguageCode(fc));
+      const formattedFc = this.formatLanguageCode(fc);
+      if (!codes.includes(formattedFc)) addCode(formattedFc);
     });
     if (cacheKey !== null) {
       this.resolveHierarchyCache[cacheKey] = codes;
@@ -1191,7 +1199,7 @@ class Interpolator {
     };
     this.regexp = getOrResetRegExp(this.regexp, `${this.prefix}(.+?)${this.suffix}`);
     this.regexpUnescape = getOrResetRegExp(this.regexpUnescape, `${this.prefix}${this.unescapePrefix}(.+?)${this.unescapeSuffix}${this.suffix}`);
-    this.nestingRegexp = getOrResetRegExp(this.nestingRegexp, `${this.nestingPrefix}((?:[^()"']+|"[^"]*"|'[^']*'|\\((?:[^()]|"[^"]*"|'[^']*')*\\))*?)${this.nestingSuffix}`);
+    this.nestingRegexp = getOrResetRegExp(this.nestingRegexp, `${this.nestingPrefix}((?:[^()"']|"[^"]*"|'[^']*'|\\((?:[^()"']|"[^"]*"|'[^']*')*\\))*?)${this.nestingSuffix}`);
   }
   interpolate(str, data, lng, options) {
     let match;
@@ -1295,7 +1303,10 @@ class Interpolator {
       if (clonedOptions.defaultValue && clonedOptions.defaultValue.includes(this.prefix)) delete clonedOptions.defaultValue;
       return key;
     };
-    while (match = this.nestingRegexp.exec(str)) {
+    const nestingRegexp = new RegExp(this.nestingRegexp);
+    let out = '';
+    let lastEnd = 0;
+    while (match = nestingRegexp.exec(str)) {
       let formatters = [];
       clonedOptions = {
         ...options
@@ -1321,10 +1332,11 @@ class Interpolator {
           interpolationkey: match[1].trim()
         }), value.trim());
       }
-      str = str.replace(match[0], regexSafe(makeString(value)));
+      out += str.slice(lastEnd, match.index) + makeString(value);
+      lastEnd = nestingRegexp.lastIndex;
       this.regexp.lastIndex = 0;
     }
-    return str;
+    return lastEnd ? out + str.slice(lastEnd) : str;
   }
 }
 
@@ -2134,7 +2146,11 @@ class I18n extends EventEmitter {
     }
     if (this.hasResourceBundle(lng, ns)) return true;
     if (!this.services.backendConnector.backend || this.options.resources && !this.options.partialBundledLanguages) return true;
-    if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+    const {
+      languageUtils
+    } = this.services;
+    const loadLng = !options.lng ? lng : languageUtils.isSupportedCode(lng) && languageUtils.toResolveHierarchy(lng, false)[0];
+    if ((!loadLng || loadNotPending(loadLng, ns)) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
     return false;
   }
   loadNamespaces(ns, callback) {
@@ -2194,6 +2210,7 @@ class I18n extends EventEmitter {
     if (forkResourceStore) delete options.forkResourceStore;
     const mergedOptions = {
       ...this.options,
+      preload: false,
       ...options,
       ...{
         isClone: true

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"dso-icon_2\",[[1,\"dso-icon-button\",{\"icon\":[513],\"label\":[513],\"variant\":[513],\"tooltipPlacement\":[513,\"tooltip-placement\"],\"disabled\":[516],\"expanded\":[516],\"toggled\":[516],\"setFocus\":[64]}],[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"showBesluitversie\":[4,\"show-besluitversie\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[{\"jsonFileWatcher\":0}],\"openDefault\":[{\"openDefaultWatcher\":0}]}]]],[\"dso-accordion-section\",[[257,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"activatable\":[516],\"active\":[516],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-advanced-select\",[[17,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-annotation-activiteit\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-list-button\",[[257,\"dso-list-button\",{\"label\":[513],\"sublabel\":[513],\"count\":[514],\"min\":[520],\"max\":[520],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[513,\"subcontent-prefix\"]}]]],[\"dso-map-base-layers\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-legend-item\",[[257,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[513,\"disabled-message\"],\"activatable\":[516],\"active\":[516],\"_mode\":[513],\"showOptions\":[32]}]]],[\"dso-map-controls\",[[257,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},[[0,\"transitionend\",\"handleTransitionEnd\"]],{\"open\":[{\"watchOpen\":0}]}]]],[\"dso-project-item\",[[257,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-annotation-kaart\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest\",[[262,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32]},[[8,\"keydown\",\"handleSearchBarButtonKeydown\"],[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[{\"suggestionsWatcher\":0}]}]]],[\"dso-legend\",[[257,\"dso-legend\",{\"tabItems\":[16]}]]],[\"dso-survey-rating\",[[1,\"dso-survey-rating\"]]],[\"dso-dropdown-menu\",[[257,\"dso-dropdown-menu\",{\"checkable\":[6660],\"label\":[513],\"variant\":[513],\"open\":[32],\"_getState\":[64]},[[0,\"dsoClick\",\"dsoClickHandler\"]]]]],[\"dso-header\",[[257,\"dso-header\",{\"mainMenu\":[16],\"compact\":[1],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"visibleMenuItemsCount\":[32],\"dropdownOptionsOffset\":[32],\"open\":[32]},null,{\"mainMenu\":[{\"mainMenuChanged\":0}]}]]],[\"dso-legend-group\",[[257,\"dso-legend-group\",{\"mode\":[513]},null,{\"mode\":[{\"handleModeChange\":0}]}]]],[\"dso-mark-bar\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-onboarding-tip\",[[257,\"dso-onboarding-tip\",{\"placement\":[1],\"ready\":[32],\"popoverOpen\":[32]}]]],[\"dso-pagination\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-shopping-cart\",[[257,\"dso-shopping-cart\",{\"mode\":[513],\"toggleable\":[516]}]]],[\"dso-shopping-cart-item\",[[257,\"dso-shopping-cart-item\",{\"mode\":[513],\"warning\":[516],\"editable\":[516],\"removable\":[516]}]]],[\"dso-tree-view\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item\",[[257,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-banner\",[[257,\"dso-banner\",{\"status\":[513],\"compact\":[516],\"icon\":[516]}]]],[\"dso-card\",[[257,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-document-card\",[[257,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-dropdown-menu-item\",[[257,\"dso-dropdown-menu-item\",{\"type\":[513],\"href\":[513],\"checked\":[516],\"_dsoFocus\":[64]}]]],[\"dso-history-item\",[[257,\"dso-history-item\",{\"type\":[513],\"href\":[513],\"current\":[516]}]]],[\"dso-map-layer\",[[257,\"dso-map-layer\",{\"activatable\":[516],\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-layer-object\",[[257,\"dso-map-layer-object\",{\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-message\",[[257,\"dso-map-message\",{\"variant\":[513],\"hasActions\":[32],\"showMessage\":[32]}]]],[\"dso-plekinfo-card\",[[257,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-plekinfo-card-item\",[[257,\"dso-plekinfo-card-item\",{\"wijzigactie\":[513],\"hasSublabel\":[32],\"hasMeta\":[32]}]]],[\"dso-skiplink\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-tijdreis-banner\",[[257,\"dso-tijdreis-banner\"]]],[\"dso-accordion\",[[257,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list\",[[257,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-card-container\",[[257,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information\",[[257,\"dso-contact-information\"]]],[\"dso-cursor-tooltip\",[[257,\"dso-cursor-tooltip\"]]],[\"dso-date-picker\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[8],\"max\":[8]}]]],[\"dso-dropdown-menu-group\",[[257,\"dso-dropdown-menu-group\",{\"label\":[513]}]]],[\"dso-grid-column\",[[257,\"dso-grid-column\",{\"columns\":[513],\"overlay\":[516],\"overlayActive\":[32]},null,{\"overlay\":[{\"overlayWatcher\":0}]}]]],[\"dso-hero-image\",[[257,\"dso-hero-image\"]]],[\"dso-highlight-box\",[[257,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"green\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range\",[[1,\"dso-input-range\",{\"min\":[514],\"max\":[514],\"value\":[514],\"step\":[514],\"label\":[513],\"unit\":[513],\"description\":[513]}]]],[\"dso-logo\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-segmented-button\",[[1,\"dso-segmented-button\",{\"groupName\":[513,\"group-name\"],\"options\":[16],\"label\":[513],\"required\":[516],\"activeOption\":[16]}]]],[\"dso-tab\",[[257,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs\",[[257,\"dso-tabs\"]]],[\"dso-viewer-grid\",[[257,\"dso-viewer-grid\",{\"filterPanelTitle\":[513,\"filter-panel-title\"],\"filterPanelOpen\":[516,\"filter-panel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"print\":[516],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[{\"documentPanelOpenWatcher\":0}],\"filterPanelOpen\":[{\"filterPanelOpenWatcher\":0}],\"overlayOpen\":[{\"overlayOpenWatcher\":0}]}]]],[\"dso-button-group\",[[257,\"dso-button-group\",{\"direction\":[513]}]]],[\"dso-annotation-locatie_2\",[[257,\"dso-document-component\",{\"headingLevel\":[514,\"heading-level\"],\"kop\":[6145],\"inhoud\":[6145],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"badge\":[513],\"badgeStatus\":[513,\"badge-status\"],\"badgeTooltip\":[513,\"badge-tooltip\"],\"label\":[513],\"labelStatus\":[513,\"label-status\"],\"annotated\":[516],\"gereserveerd\":[6145],\"vervallen\":[6145],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[513,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2\",[[1,\"dso-attachments-counter\",{\"count\":[514]}],[257,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[{\"toggleOpen\":0}]}]]],[\"dso-progress-indicator\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element\",[[257,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-truncate\",[[257,\"dso-truncate\",{\"truncated\":[32]},[[4,\"keydown\",\"keyDownListener\"]]]]],[\"dso-scrollable\",[[257,\"dso-scrollable\",{\"_preventFocus\":[4,\"_prevent-focus\"],\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-modal\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"closable\":[4],\"ariaId\":[32],\"narrowView\":[32]}]]],[\"dso-info_3\",[[262,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"errormessage\":[1],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[{\"setIndeterminate\":0}]}],[257,\"dso-info\",{\"fixed\":[516],\"active\":[516]}],[257,\"dso-info-button\",{\"active\":[516],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32],\"setFocus\":[64]},[[6,\"focusin\",\"onDocumentFocusIn\"],[7,\"pointerdown\",\"onDocumentPointerDown\"]]]]],[\"dso-alert_7\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"urlResolver\":[16],\"begripResolver\":[16],\"annotated\":[516],\"state\":[32]},null,{\"content\":[{\"contentWatcher\":0}]}],[257,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[257,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[32],\"modalActive\":[32],\"placeholderHeight\":[32]}],[257,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[257,\"dso-ozon-content-toggletip\",{\"icon\":[513],\"active\":[32]},[[8,\"click\",\"handleWindowClick\"]]],[257,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[257,\"dso-badge\",{\"status\":[513],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32]}]]],[\"dso-label_3\",[[1,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[257,\"dso-label\",{\"compact\":[516],\"removable\":[516],\"status\":[513],\"truncate\":[516],\"removeHover\":[32],\"removeFocus\":[32],\"labelText\":[32]},null,{\"removable\":[{\"watchRemovable\":0}]}],[262,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"dso-icon\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"showBesluitversie\":[4,\"show-besluitversie\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[{\"jsonFileWatcher\":0}],\"openDefault\":[{\"openDefaultWatcher\":0}]}]]],[\"dso-accordion-section\",[[257,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"activatable\":[516],\"active\":[516],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-advanced-select\",[[17,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-list-button\",[[257,\"dso-list-button\",{\"label\":[513],\"sublabel\":[513],\"count\":[514],\"min\":[520],\"max\":[520],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[513,\"subcontent-prefix\"]}]]],[\"dso-map-base-layers\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-legend-item\",[[257,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[513,\"disabled-message\"],\"activatable\":[516],\"active\":[516],\"_mode\":[513],\"showOptions\":[32]}]]],[\"dso-map-controls\",[[257,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},[[0,\"transitionend\",\"handleTransitionEnd\"]],{\"open\":[{\"watchOpen\":0}]}]]],[\"dso-project-item\",[[257,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-annotation-kaart\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-legend\",[[257,\"dso-legend\",{\"tabItems\":[16]}]]],[\"dso-survey-rating\",[[1,\"dso-survey-rating\"]]],[\"dso-legend-group\",[[257,\"dso-legend-group\",{\"mode\":[513]},null,{\"mode\":[{\"handleModeChange\":0}]}]]],[\"dso-shopping-cart-item\",[[257,\"dso-shopping-cart-item\",{\"mode\":[513],\"warning\":[513],\"editable\":[516],\"removable\":[516]}]]],[\"dso-progress-indicator\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-autosuggest\",[[262,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32]},[[8,\"keydown\",\"handleSearchBarButtonKeydown\"],[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[{\"suggestionsWatcher\":0}]}]]],[\"dso-annotation-activiteit\",[[257,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"],\"hasMeta\":[32]}]]],[\"dso-annotation-gebiedsaanwijzing\",[[257,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"naam\":[1],\"hasMeta\":[32]}]]],[\"dso-annotation-omgevingsnormwaarde\",[[257,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1],\"hasMeta\":[32]}]]],[\"dso-dropdown-menu\",[[257,\"dso-dropdown-menu\",{\"checkable\":[6660],\"label\":[513],\"variant\":[513],\"open\":[32],\"_getState\":[64]},[[0,\"dsoClick\",\"dsoClickHandler\"]]]]],[\"dso-header\",[[257,\"dso-header\",{\"mainMenu\":[16],\"compact\":[1],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"visibleMenuItemsCount\":[32],\"dropdownOptionsOffset\":[32],\"open\":[32]},null,{\"mainMenu\":[{\"mainMenuChanged\":0}]}]]],[\"dso-mark-bar\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-onboarding-tip\",[[257,\"dso-onboarding-tip\",{\"placement\":[1],\"ready\":[32],\"popoverOpen\":[32]}]]],[\"dso-pagination\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item\",[[257,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-banner\",[[257,\"dso-banner\",{\"status\":[513],\"compact\":[516],\"icon\":[516]}]]],[\"dso-card\",[[257,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-document-card\",[[257,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-dropdown-menu-item\",[[257,\"dso-dropdown-menu-item\",{\"type\":[513],\"href\":[513],\"checked\":[516],\"_dsoFocus\":[64]}]]],[\"dso-history-item\",[[257,\"dso-history-item\",{\"type\":[513],\"href\":[513],\"current\":[516]}]]],[\"dso-map-layer\",[[257,\"dso-map-layer\",{\"activatable\":[516],\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-layer-object\",[[257,\"dso-map-layer-object\",{\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-message\",[[257,\"dso-map-message\",{\"variant\":[513],\"hasActions\":[32],\"showMessage\":[32]}]]],[\"dso-plekinfo-card\",[[257,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-plekinfo-card-item\",[[257,\"dso-plekinfo-card-item\",{\"wijzigactie\":[513],\"hasSublabel\":[32],\"hasMeta\":[32]}]]],[\"dso-skiplink\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-tijdreis-banner\",[[257,\"dso-tijdreis-banner\"]]],[\"dso-accordion\",[[257,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list\",[[257,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-card-container\",[[257,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information\",[[257,\"dso-contact-information\"]]],[\"dso-cursor-tooltip\",[[257,\"dso-cursor-tooltip\"]]],[\"dso-date-picker\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[8],\"max\":[8]}]]],[\"dso-dropdown-menu-group\",[[257,\"dso-dropdown-menu-group\",{\"label\":[513]}]]],[\"dso-grid-column\",[[257,\"dso-grid-column\",{\"columns\":[513],\"overlay\":[516],\"overlayActive\":[32]},null,{\"overlay\":[{\"overlayWatcher\":0}]}]]],[\"dso-hero-image\",[[257,\"dso-hero-image\"]]],[\"dso-highlight-box\",[[257,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"green\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range\",[[1,\"dso-input-range\",{\"min\":[514],\"max\":[514],\"value\":[514],\"step\":[514],\"label\":[513],\"unit\":[513],\"description\":[513]}]]],[\"dso-logo\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-segmented-button\",[[1,\"dso-segmented-button\",{\"groupName\":[513,\"group-name\"],\"options\":[16],\"label\":[513],\"required\":[516],\"activeOption\":[16]}]]],[\"dso-shopping-cart\",[[257,\"dso-shopping-cart\",{\"mode\":[513]}]]],[\"dso-tab\",[[257,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs\",[[257,\"dso-tabs\"]]],[\"dso-viewer-grid\",[[257,\"dso-viewer-grid\",{\"filterPanelTitle\":[513,\"filter-panel-title\"],\"filterPanelOpen\":[516,\"filter-panel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"print\":[516],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[{\"documentPanelOpenWatcher\":0}],\"filterPanelOpen\":[{\"filterPanelOpenWatcher\":0}],\"overlayOpen\":[{\"overlayOpenWatcher\":0}]}]]],[\"dso-button-group\",[[257,\"dso-button-group\",{\"direction\":[513]}]]],[\"dso-attachments-counter_2\",[[1,\"dso-attachments-counter\",{\"count\":[514]}],[257,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[{\"toggleOpen\":0}]}]]],[\"dso-responsive-element\",[[257,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-scrollable\",[[257,\"dso-scrollable\",{\"_preventFocus\":[4,\"_prevent-focus\"],\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-icon-button\",[[1,\"dso-icon-button\",{\"icon\":[513],\"label\":[513],\"variant\":[513],\"tooltipPlacement\":[513,\"tooltip-placement\"],\"disabled\":[516],\"expanded\":[516],\"controlsElement\":[16],\"describedByElement\":[16],\"toggled\":[516],\"setFocus\":[64]}]]],[\"dso-modal\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"closable\":[4],\"ariaId\":[32],\"narrowView\":[32]}]]],[\"dso-info_3\",[[262,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"errormessage\":[1],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[{\"setIndeterminate\":0}]}],[257,\"dso-info\",{\"fixed\":[516],\"active\":[516]}],[257,\"dso-info-button\",{\"active\":[516],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"controls\":[513],\"toggletipActive\":[32],\"hasToggletip\":[32],\"setFocus\":[64]},[[6,\"focusin\",\"onDocumentFocusIn\"],[7,\"pointerdown\",\"onDocumentPointerDown\"]]]]],[\"dso-label_2\",[[257,\"dso-label\",{\"compact\":[516],\"removable\":[516],\"status\":[513],\"truncate\":[516],\"removeHover\":[32],\"removeFocus\":[32],\"labelText\":[32]},null,{\"removable\":[{\"watchRemovable\":0}]}],[257,\"dso-truncate\",{\"truncated\":[32]},[[4,\"keydown\",\"keyDownListener\"]]]]],[\"dso-renvooi_2\",[[1,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[262,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]],[\"dso-alert_7\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"urlResolver\":[16],\"begripResolver\":[16],\"annotated\":[516],\"state\":[32],\"getElementByEId\":[64]},null,{\"content\":[{\"contentWatcher\":0}]}],[257,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[257,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[32],\"modalActive\":[32],\"placeholderHeight\":[32]}],[257,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[257,\"dso-ozon-content-toggletip\",{\"icon\":[513],\"active\":[32]},[[8,\"click\",\"handleWindowClick\"]]],[257,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[257,\"dso-badge\",{\"status\":[513],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32]}]]],[\"dso-annotation-locatie_2\",[[257,\"dso-document-component\",{\"headingLevel\":[514,\"heading-level\"],\"kop\":[6145],\"inhoud\":[6145],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"badge\":[513],\"badgeStatus\":[513,\"badge-status\"],\"badgeTooltip\":[513,\"badge-tooltip\"],\"label\":[513],\"labelStatus\":[513,\"label-status\"],\"annotated\":[516],\"gereserveerd\":[6145],\"vervallen\":[6145],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[513,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"mode\":[513],\"href\":[513],\"getElementByEId\":[64]}],[257,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"locatieNoemer\":[1,\"locatie-noemer\"],\"hasMeta\":[32]}]]]]"), options);
 };
 
 export { defineCustomElements };

package/dist/types/components/annotation/annotation-activiteit/annotation-activiteit.d.ts

@@ -1,6 +1,9 @@
 import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { RenvooiValue } from "../../renvooi/renvooi.interfaces";
 import { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "../annotation.interfaces";
+/**
+ * @slot meta - Een optioneel slot voor een `Label`, bijvoorbeeld om aan te geven dat de locatie van de annotatie gewijzigd is.
+ */
 export declare class AnnotationActiviteit implements ComponentInterface {
     /**
      * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.
@@ -10,10 +13,6 @@ export declare class AnnotationActiviteit implements ComponentInterface {
      * Een optionele boolean die aangeeft of de annotatie actief is.
      */
     active?: boolean;
-    /**
-     * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.
-     */
-    gewijzigdeLocatie?: boolean;
     /**
      * Een optionele event listener voor wijzigingen aan de status van de annotatie.
      */
@@ -35,7 +34,11 @@ export declare class AnnotationActiviteit implements ComponentInterface {
      */
     regelKwalificatieVoorzetsel?: string;
     private host;
+    hasMeta: boolean;
+    private metaSlot?;
     private watcher;
+    private updateMeta;
+    private setMetaSlot;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/annotation/annotation-gebiedsaanwijzing/annotation-gebiedsaanwijzing.d.ts

@@ -1,6 +1,9 @@
 import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { RenvooiValue } from "../../renvooi/renvooi.interfaces";
 import { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "../annotation.interfaces";
+/**
+ * @slot meta - Een optioneel slot voor een `Label`, bijvoorbeeld om aan te geven dat de locatie van de annotatie gewijzigd is.
+ */
 export declare class AnnotationGebiedsaanwijzing implements ComponentInterface {
     /**
      * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.
@@ -10,10 +13,6 @@ export declare class AnnotationGebiedsaanwijzing implements ComponentInterface {
      * Een optionele boolean die aangeeft of de annotatie actief is.
      */
     active?: boolean;
-    /**
-     * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.
-     */
-    gewijzigdeLocatie?: boolean;
     /**
      * Een optionele event listener voor wijzigingen aan de status van de annotatie.
      */
@@ -23,7 +22,11 @@ export declare class AnnotationGebiedsaanwijzing implements ComponentInterface {
      */
     naam?: RenvooiValue | string;
     private host;
+    hasMeta: boolean;
+    private metaSlot?;
     private watcher;
+    private updateMeta;
+    private setMetaSlot;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/annotation/annotation-locatie/annotation-locatie.d.ts

@@ -1,6 +1,9 @@
 import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { RenvooiValue } from "../../renvooi/renvooi.interfaces";
 import { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "../annotation.interfaces";
+/**
+ * @slot meta - Een optioneel slot voor een `Label`, bijvoorbeeld om aan te geven dat de locatie van de annotatie gewijzigd is.
+ */
 export declare class AnnotationLocatie implements ComponentInterface {
     /**
      * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.
@@ -10,10 +13,6 @@ export declare class AnnotationLocatie implements ComponentInterface {
      * Een optionele boolean die aangeeft of de annotatie actief is.
      */
     active?: boolean;
-    /**
-     * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.
-     */
-    gewijzigdeLocatie?: boolean;
     /**
      * Een optionele event listener voor wijzigingen aan de status van de annotatie.
      */
@@ -23,7 +22,11 @@ export declare class AnnotationLocatie implements ComponentInterface {
      */
     locatieNoemer?: RenvooiValue | string;
     private host;
+    hasMeta: boolean;
+    private metaSlot?;
     private watcher;
+    private updateMeta;
+    private setMetaSlot;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/annotation/annotation-omgevingsnormwaarde/annotation-omgevingsnormwaarde.d.ts

@@ -1,6 +1,9 @@
 import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { RenvooiValue } from "../../renvooi/renvooi.interfaces";
 import { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "../annotation.interfaces";
+/**
+ * @slot meta - Een optioneel slot voor een `Label`, bijvoorbeeld om aan te geven dat de locatie van de annotatie gewijzigd is.
+ */
 export declare class AnnotationOmgevingsnormwaarde implements ComponentInterface {
     /**
      * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.
@@ -10,10 +13,6 @@ export declare class AnnotationOmgevingsnormwaarde implements ComponentInterface
      * Een optionele boolean die aangeeft of de annotatie actief is.
      */
     active?: boolean;
-    /**
-     * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.
-     */
-    gewijzigdeLocatie?: boolean;
     /**
      * Een optionele event listener voor wijzigingen aan de status van de annotatie.
      */
@@ -35,7 +34,11 @@ export declare class AnnotationOmgevingsnormwaarde implements ComponentInterface
      */
     eenheid?: RenvooiValue | string;
     private host;
+    hasMeta: boolean;
+    private metaSlot?;
     private watcher;
+    private updateMeta;
+    private setMetaSlot;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/document-component/document-component.d.ts

@@ -156,6 +156,14 @@ export declare class DocumentComponent implements ComponentInterface {
     dsoMarkItemHighlight: EventEmitter<DocumentComponentMarkItemHighlightEvent>;
     private get wijzigactieLabel();
     private handleHeadingClick;
+    /**
+     * Returns the rendered element of the STOP element with the given `eId` in the Kop or Inhoud of this Document
+     * Component, or `undefined` when it is not rendered (e.g. when the Document Component is closed). Nested Document
+     * Components are not searched.
+     *
+     * @param eId The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`.
+     */
+    getElementByEId(eId: string): Promise<HTMLElement | undefined>;
     private handleOzonContentClick;
     private handleRecursiveToggleClick;
     private showBadge;

package/dist/types/components/icon-button/icon-button.d.ts

@@ -31,6 +31,16 @@ export declare class IconButton implements ComponentInterface {
      * Indicates whether the controlled element is expanded.
      */
     expanded?: boolean;
+    /**
+     * The element controlled by the button. Sets `ariaControlsElements` on the native button when supported. Intended
+     * for a wrapping component passing an element across a shadow boundary.
+     */
+    controlsElement?: HTMLElement;
+    /**
+     * The element describing the button. Sets `ariaDescribedByElements` on the native button when supported. Intended
+     * for a wrapping component passing an element across a shadow boundary.
+     */
+    describedByElement?: HTMLElement;
     /**
      * Whether the button is toggled.
      */
@@ -46,6 +56,7 @@ export declare class IconButton implements ComponentInterface {
     private handleShowTooltip;
     private handleHideTooltip;
     disconnectedCallback(): void;
+    componentDidRender(): void;
     private handleClick;
     render(): any;
 }

package/dist/types/components/info-button/info-button.d.ts

@@ -24,6 +24,12 @@ export declare class InfoButton implements ComponentInterface {
      * The placement of the Toggletip on click.
      */
     toggletipPlacement: TooltipPlacement;
+    /**
+     * The id of the element (e.g. `<dso-info>`) that is expanded or collapsed by this Info Button. The element must be
+     * in the same document or shadow root as the Info Button. When a toggletip is present, this property is ignored.
+     * Without a toggletip, `aria-expanded` is only set when `controls` is provided.
+     */
+    controls?: string;
     /**
      * Emitted when the user activates the Info Button.
      */
@@ -46,6 +52,7 @@ export declare class InfoButton implements ComponentInterface {
     private handleToggle;
     private keyDownHandler;
     private closeToggletip;
+    private getControlsElement;
     componentDidRender(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/types/components/ozon-content/functions/get-eid-from-node.function.d.ts

@@ -0,0 +1 @@
+export declare function getEIdFromNode(node: Node): string | undefined;

package/dist/types/components/ozon-content/ozon-content.d.ts

@@ -3,6 +3,7 @@ import { MarkTextMarkFunction } from "../../functional-components/mark-text/mark
 import { OzonContentNodeState } from "./ozon-content-node-state.interface";
 import { OzonContentBegripResolver, OzonContentClickEvent, OzonContentInputType, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./ozon-content.interfaces";
 export declare class OzonContent implements ComponentInterface {
+    host: HTMLDsoOzonContentElement;
     /**
      * The XML to be rendered.
      */
@@ -39,6 +40,12 @@ export declare class OzonContent implements ComponentInterface {
     dsoOzonContentMarkItemHighlight: EventEmitter<OzonContentMarkItemHighlightEvent>;
     contentWatcher(): void;
     state: OzonContentNodeState;
+    /**
+     * Returns the rendered element of the STOP element with the given `eId`, or `undefined` when it is not rendered.
+     *
+     * @param eId The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`.
+     */
+    getElementByEId(eId: string): Promise<HTMLElement | undefined>;
     private handleMarkItemHighlight;
     render(): JSX.Element;
 }

package/dist/types/components/plekinfo-card/plekinfo-card.d.ts

@@ -37,5 +37,6 @@ export declare class PlekinfoCard implements ComponentInterface {
     get symbolSlottedElement(): Element | null;
     get metaSlottedElement(): Element | null;
     get interaction(): Element | null;
+    get contentSlottedElement(): Element | null;
     render(): any;
 }

package/dist/types/components/selectable/selectable.d.ts

@@ -85,6 +85,7 @@ export declare class Selectable implements ComponentInterface {
     toggleInfo(active?: boolean): Promise<void>;
     private mutationObserver?;
     private fallbackIdentifier;
+    private infoIdentifier;
     private input;
     private handleOnChange;
     componentDidLoad(): void;

package/dist/types/components/shopping-cart/shopping-cart-item/shopping-cart-item.d.ts

@@ -1,7 +1,7 @@
 import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { ShoppingCartItemCloseEvent, ShoppingCartItemDeleteEvent, ShoppingCartItemEditEvent, ShoppingCartItemMode } from "./shopping-cart-item.interfaces";
 /**
- * @slot - In the `edit` mode it holds the form content. In the `view` mode it can hold nested Shopping Cart Items, which render as sub items.
+ * @slot - In the `edit` mode it holds the form content. In the `view` mode it can hold nested Shopping Cart Items, which render as sub items in a nested list; one level of nesting is supported.
  * @slot name - The name of the item. In the `edit` mode it is the title of the form; use a heading element (e.g. `<h4 slot="name">`) matching the heading hierarchy of the page. The text is also used in the labels of the edit and delete actions.
  * @slot info - An optional line of information shown below the name.
  */
@@ -13,9 +13,10 @@ export declare class ShoppingCartItem implements ComponentInterface {
      */
     mode: ShoppingCartItemMode;
     /**
-     * When set a warning icon is rendered before the name.
+     * The warning text. When set, a warning icon is rendered before the name and the text is available to assistive
+     * technology. Explain the meaning of the icon visually in the `warning` slot of `dso-shopping-cart`.
      */
-    warning: boolean;
+    warning?: string;
     /**
      * When set an edit (pencil) action is rendered.
      */
@@ -39,6 +40,7 @@ export declare class ShoppingCartItem implements ComponentInterface {
     connectedCallback(): void;
     disconnectedCallback(): void;
     get name(): string;
+    private get hasSubItems();
     private renderActions;
     render(): any;
 }