@dso-toolkit/core 36.3.0 → 38.1.0

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

@@ -13,7 +13,7 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel }) => (index.h("div",
     index.h("span", null, "Toepassen"),
     index.h("dso-icon", { icon: "chevron-right" }))));
 
-const viewerGridCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}h1,.h1,h2,.h2,h3,.h3{margin-bottom:16px;margin-top:24px}h1,.h1{line-height:1.25}h1{color:#275937;font-size:2rem;font-weight:700}h2,.h2{line-height:1.33}h2{color:#275937;font-size:1.5rem;font-weight:700}h3,.h3{line-height:1.2}h3{color:#275937;font-size:1.25rem;font-weight:600}h4,.h4,h5,.h5,h6,.h6{margin-bottom:16px;margin-top:12px}h4,.h4{line-height:1.5}h4{color:#275937;font-size:1rem;font-weight:600}h5,.h5{line-height:1.5}h5{color:#191919;font-size:1rem;font-weight:600}h6,.h6{line-height:1.5}*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .dso-map-panel{flex-basis:375px;min-width:0;max-width:375px}@media screen and (max-width: 375px){:host([small]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:0;transition:none}}:host([medium]) .dso-map-panel{flex-basis:624px;min-width:375px;max-width:624px}@media screen and (max-width: 624px){:host([medium]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:375px;transition:none}}:host([large]) .dso-map-panel{flex-basis:60%;min-width:768px;max-width:1024px}@media screen and (max-width: 768px){:host([large]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:768px;transition:none}}.shrink,.expand,.overlay-close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}.shrink:focus,.shrink:focus-visible,.expand:focus,.expand:focus-visible,.overlay-close-button:focus,.overlay-close-button:focus-visible{outline-offset:2px}.shrink:active,.expand:active,.overlay-close-button:active{outline:0}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{color:#afcf9d}.shrink:not([disabled]):hover,.expand:not([disabled]):hover,.overlay-close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}.shrink:not([disabled]):active,.expand:not([disabled]):active,.overlay-close-button:not([disabled]):active{color:#676cb0}.shrink.btn-align,.expand.btn-align,.overlay-close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{position:relative;top:-2px}.shrink.download::after,.expand.download::after,.overlay-close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.download[disabled]::after,.expand.download[disabled]::after,.overlay-close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.shrink.download:not([disabled]):hover::after,.shrink.download:not([disabled]):active::after,.expand.download:not([disabled]):hover::after,.expand.download:not([disabled]):active::after,.overlay-close-button.download:not([disabled]):hover::after,.overlay-close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.shrink.extern::after,.expand.extern::after,.overlay-close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.extern[disabled]::after,.expand.extern[disabled]::after,.overlay-close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.shrink.extern:not([disabled]):hover::after,.shrink.extern:not([disabled]):active::after,.expand.extern:not([disabled]):hover::after,.expand.extern:not([disabled]):active::after,.overlay-close-button.extern:not([disabled]):hover::after,.overlay-close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.shrink dso-icon+span:not(.sr-only),.shrink svg.di+span:not(.sr-only),.shrink span:not(.sr-only)+dso-icon,.shrink span:not(.sr-only)+svg.di,.expand dso-icon+span:not(.sr-only),.expand svg.di+span:not(.sr-only),.expand span:not(.sr-only)+dso-icon,.expand span:not(.sr-only)+svg.di,.overlay-close-button dso-icon+span:not(.sr-only),.overlay-close-button svg.di+span:not(.sr-only),.overlay-close-button span:not(.sr-only)+dso-icon,.overlay-close-button span:not(.sr-only)+svg.di{margin-left:8px}.shrink dso-icon,.shrink svg.di,.shrink span,.expand dso-icon,.expand svg.di,.expand span,.overlay-close-button dso-icon,.overlay-close-button svg.di,.overlay-close-button span{vertical-align:middle}.shrink:hover,.expand:hover,.overlay-close-button:hover{cursor:pointer}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{display:none}.overlay-close-button{position:absolute;top:8px;right:16px}.overlay-close-button .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-map-panel{background-color:#fff;box-shadow:2px 0 8px 0 rgba(0, 0, 0, 0.4);flex-shrink:0;flex-grow:0;padding-right:8px;position:relative;transition:flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;z-index:100}.dso-map-panel .dso-filterblok-address{font-weight:bold;margin:8px 0}.dso-map-panel .main{height:100%;overflow-y:scroll;padding:8px 16px}.sizing-buttons{left:calc(100% + 1px);overflow-x:hidden;padding:0 4px 4px 0;position:absolute;top:16px;transition:left 200ms ease-in;width:44px;z-index:-1}.sizing-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.4);flex:0 0 100%;height:40px;min-width:auto;width:40px}.sizing-buttons button:focus,.sizing-buttons button:focus-visible{outline-offset:2px}.sizing-buttons button:active{outline:0}.sizing-buttons button.extern::after,.sizing-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.sizing-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.sizing-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}.sizing-buttons button[disabled],.sizing-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.sizing-buttons button.btn-sm{line-height:16px}.sizing-buttons button.btn-sm dso-icon,.sizing-buttons button.btn-sm svg.di,.sizing-buttons button.btn-sm.extern::after,.sizing-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.sizing-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.sizing-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}.sizing-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.sizing-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.sizing-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.sizing-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.sizing-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sizing-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}.sizing-buttons button:hover dso-icon{color:#fff}.map{height:100%;width:100%;overflow:hidden}#filterpanel,.overlay{background-color:#fff;height:100%;overflow-y:auto;position:absolute;z-index:101}#filterpanel{box-shadow:2px 0 5px #666;padding:40px 16px 8px;left:0;max-width:896px;width:calc(100vw - 40px)}@media screen and (max-width: 768px){#filterpanel{width:100vw}#filterpanel::before{display:none !important}}#filterpanel::before{content:\"\";display:block;position:fixed;top:0;bottom:0;right:0;left:896px;background-color:rgba(0, 0, 0, 0.5)}@media screen and (max-width: 936px){#filterpanel::before{left:auto;width:40px}}.overlay{box-shadow:-2px 0 5px #666;padding:40px 16px 8px;right:0;width:624px}@media screen and (max-width: 624px){.overlay{width:100vw}}.overlay::before{content:\"\";display:block;position:fixed;top:0;bottom:0;left:0;right:624px;background-color:rgba(0, 0, 0, 0.5)}.filterpanel-buttons{text-align:right}.filterpanel-buttons .cancel-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .cancel-button:focus,.filterpanel-buttons .cancel-button:focus-visible{outline-offset:2px}.filterpanel-buttons .cancel-button:active{outline:0}.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.filterpanel-buttons .cancel-button:active{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .cancel-button[disabled],.filterpanel-buttons .cancel-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.filterpanel-buttons .cancel-button.btn-sm{line-height:16px}.filterpanel-buttons .cancel-button.btn-sm dso-icon,.filterpanel-buttons .cancel-button.btn-sm svg.di,.filterpanel-buttons .cancel-button.btn-sm.extern::after,.filterpanel-buttons .cancel-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button.download:hover::after{--dso-icon:var(--di-download-wit)}.filterpanel-buttons .cancel-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.filterpanel-buttons .cancel-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.filterpanel-buttons .cancel-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .cancel-button span+dso-icon,.filterpanel-buttons .cancel-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di,.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#39870c;border-color:#39870c;color:#fff;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .apply-button:focus,.filterpanel-buttons .apply-button:focus-visible{outline-offset:2px}.filterpanel-buttons .apply-button:active{outline:0}.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button:hover{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .apply-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.filterpanel-buttons .apply-button[disabled],.filterpanel-buttons .apply-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.filterpanel-buttons .apply-button.btn-sm{line-height:16px}.filterpanel-buttons .apply-button.btn-sm dso-icon,.filterpanel-buttons .apply-button.btn-sm svg.di,.filterpanel-buttons .apply-button.btn-sm.extern::after,.filterpanel-buttons .apply-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .apply-button span+dso-icon,.filterpanel-buttons .apply-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di,.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button+.apply-button{margin-left:16px}";
+const viewerGridCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}h1,.h1,h2,.h2,h3,.h3{margin-bottom:16px;margin-top:24px}h1,.h1{line-height:1.25}h1{color:#275937;font-size:2rem;font-weight:700}h2,.h2{line-height:1.33}h2{color:#275937;font-size:1.5rem;font-weight:700}h3,.h3{line-height:1.2}h3{color:#275937;font-size:1.25rem;font-weight:600}h4,.h4,h5,.h5,h6,.h6{margin-bottom:16px;margin-top:12px}h4,.h4{line-height:1.5}h4{color:#275937;font-size:1rem;font-weight:600}h5,.h5{line-height:1.5}h5{color:#191919;font-size:1rem;font-weight:600}h6,.h6{line-height:1.5}*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .dso-map-panel{flex-basis:375px;min-width:0;max-width:375px}@media screen and (max-width: 375px){:host([small]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:0;transition:none}}:host([medium]) .dso-map-panel{flex-basis:624px;min-width:375px;max-width:624px}@media screen and (max-width: 624px){:host([medium]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:375px;transition:none}}:host([large]) .dso-map-panel{flex-basis:60%;min-width:768px;max-width:1024px}@media screen and (max-width: 768px){:host([large]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:768px;transition:none}}.shrink,.expand,.overlay-close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}.shrink:focus,.shrink:focus-visible,.expand:focus,.expand:focus-visible,.overlay-close-button:focus,.overlay-close-button:focus-visible{outline-offset:2px}.shrink:active,.expand:active,.overlay-close-button:active{outline:0}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{color:#afcf9d}.shrink:not([disabled]):hover,.expand:not([disabled]):hover,.overlay-close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}.shrink:not([disabled]):active,.expand:not([disabled]):active,.overlay-close-button:not([disabled]):active{color:#676cb0}.shrink.btn-align,.expand.btn-align,.overlay-close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{position:relative;top:-2px}.shrink.download::after,.expand.download::after,.overlay-close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.shrink.download[disabled]::after,.expand.download[disabled]::after,.overlay-close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.shrink.download:not([disabled]):hover::after,.shrink.download:not([disabled]):active::after,.expand.download:not([disabled]):hover::after,.expand.download:not([disabled]):active::after,.overlay-close-button.download:not([disabled]):hover::after,.overlay-close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.shrink.extern::after,.expand.extern::after,.overlay-close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.shrink.extern[disabled]::after,.expand.extern[disabled]::after,.overlay-close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.shrink.extern:not([disabled]):hover::after,.shrink.extern:not([disabled]):active::after,.expand.extern:not([disabled]):hover::after,.expand.extern:not([disabled]):active::after,.overlay-close-button.extern:not([disabled]):hover::after,.overlay-close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.shrink dso-icon+span:not(.sr-only),.shrink svg.di+span:not(.sr-only),.shrink span:not(.sr-only)+dso-icon,.shrink span:not(.sr-only)+svg.di,.expand dso-icon+span:not(.sr-only),.expand svg.di+span:not(.sr-only),.expand span:not(.sr-only)+dso-icon,.expand span:not(.sr-only)+svg.di,.overlay-close-button dso-icon+span:not(.sr-only),.overlay-close-button svg.di+span:not(.sr-only),.overlay-close-button span:not(.sr-only)+dso-icon,.overlay-close-button span:not(.sr-only)+svg.di{margin-left:8px}.shrink dso-icon,.shrink svg.di,.shrink span,.expand dso-icon,.expand svg.di,.expand span,.overlay-close-button dso-icon,.overlay-close-button svg.di,.overlay-close-button span{vertical-align:middle}.shrink:hover,.expand:hover,.overlay-close-button:hover{cursor:pointer}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{display:none}.overlay-close-button{position:absolute;top:8px;right:16px}.overlay-close-button .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-map-panel{background-color:#fff;box-shadow:2px 0 8px 0 rgba(0, 0, 0, 0.4);flex-shrink:0;flex-grow:0;padding-right:8px;position:relative;transition:flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;z-index:100}.dso-map-panel .dso-filterblok-address{font-weight:bold;margin:8px 0}.dso-map-panel .main{height:100%;overflow-y:scroll;padding:8px 16px}.sizing-buttons{left:calc(100% + 1px);overflow-x:hidden;padding:0 4px 4px 0;position:absolute;top:16px;transition:left 200ms ease-in;width:44px;z-index:-1}.sizing-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.4);flex:0 0 100%;height:40px;min-width:auto;width:40px}.sizing-buttons button:focus,.sizing-buttons button:focus-visible{outline-offset:2px}.sizing-buttons button:active{outline:0}.sizing-buttons button.extern::after,.sizing-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.sizing-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.sizing-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}.sizing-buttons button[disabled],.sizing-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.sizing-buttons button.btn-sm{line-height:16px}.sizing-buttons button.btn-sm dso-icon,.sizing-buttons button.btn-sm svg.di,.sizing-buttons button.btn-sm.extern::after,.sizing-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.sizing-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.sizing-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}.sizing-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.sizing-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.sizing-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.sizing-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.sizing-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sizing-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}.sizing-buttons button:hover dso-icon{color:#fff}.map{height:100%;width:100%;overflow:hidden}#filterpanel,.overlay{background-color:#fff;height:100%;overflow-y:auto;position:absolute;z-index:101}#filterpanel{box-shadow:2px 0 5px #666;padding:40px 16px 8px;left:0;max-width:896px;width:calc(100vw - 40px)}@media screen and (max-width: 768px){#filterpanel{width:100vw}#filterpanel::before{display:none !important}}#filterpanel::before{content:\"\";display:block;position:fixed;top:0;bottom:0;right:0;left:896px;background-color:rgba(0, 0, 0, 0.5)}@media screen and (max-width: 936px){#filterpanel::before{left:auto;width:40px}}.overlay{box-shadow:-2px 0 5px #666;padding:40px 16px 8px;right:0;width:624px}@media screen and (max-width: 624px){.overlay{width:100vw}}.overlay::before{content:\"\";display:block;position:fixed;top:0;bottom:0;left:0;right:624px;background-color:rgba(0, 0, 0, 0.5)}.filterpanel-buttons{text-align:right}.filterpanel-buttons .cancel-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .cancel-button:focus,.filterpanel-buttons .cancel-button:focus-visible{outline-offset:2px}.filterpanel-buttons .cancel-button:active{outline:0}.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.filterpanel-buttons .cancel-button:active{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .cancel-button[disabled],.filterpanel-buttons .cancel-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.filterpanel-buttons .cancel-button.btn-sm{line-height:16px}.filterpanel-buttons .cancel-button.btn-sm dso-icon,.filterpanel-buttons .cancel-button.btn-sm svg.di,.filterpanel-buttons .cancel-button.btn-sm.extern::after,.filterpanel-buttons .cancel-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .cancel-button.download:hover::after{--dso-icon:var(--di-download-wit)}.filterpanel-buttons .cancel-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.filterpanel-buttons .cancel-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .cancel-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.filterpanel-buttons .cancel-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .cancel-button span+dso-icon,.filterpanel-buttons .cancel-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di,.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#39870c;border-color:#39870c;color:#fff;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .apply-button:focus,.filterpanel-buttons .apply-button:focus-visible{outline-offset:2px}.filterpanel-buttons .apply-button:active{outline:0}.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button:hover{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .apply-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.filterpanel-buttons .apply-button[disabled],.filterpanel-buttons .apply-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.filterpanel-buttons .apply-button.btn-sm{line-height:16px}.filterpanel-buttons .apply-button.btn-sm dso-icon,.filterpanel-buttons .apply-button.btn-sm svg.di,.filterpanel-buttons .apply-button.btn-sm.extern::after,.filterpanel-buttons .apply-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .apply-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .apply-button span+dso-icon,.filterpanel-buttons .apply-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di,.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button+.apply-button{margin-left:16px}";
 
 const TRANSITION_TIME = 200; // Keep in sync with dso-viewer-grid.variables.scss:$dso-viewer-grid-transition-time;
 let ViewerGrid = class {
@@ -25,7 +25,11 @@ let ViewerGrid = class {
     this.mainSizeChange = index.createEvent(this, "mainSizeChange", 7);
     this.filterpanelOpen = false;
     this.overlayOpen = false;
-    this.mainSize = "large";
+    /**
+     * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+     */
+    this.initialMainSize = "large";
+    this.mainSize = this.initialMainSize;
     this.filterpanelSlot = null;
     this.overlaySlot = null;
     this.shrinkMain = () => {

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[2,"dso-ozon-content",{"content":[1],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[2,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[516],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/collection/components/attachments-counter/attachments-counter.css

@@ -32,9 +32,9 @@
   background: var(--dso-icon, var(--di-paperclip-grijs)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
   content: "";
   display: inline-block;
 }

package/dist/collection/components/autosuggest/autosuggest.css

@@ -3,7 +3,8 @@
   position: relative;
 }
 
-ul {
+ul,
+.autosuggest-progress-box {
   background-clip: padding-box;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -18,10 +19,18 @@ ul {
   top: 100%;
   z-index: 200;
 }
+
+.autosuggest-progress-box {
+  padding: 12px 8px;
+}
+
+ul {
+  padding: 8px 0;
+}
 ul li {
   display: flex;
   justify-content: space-between;
-  padding: 4px 18px;
+  padding: 4px 16px;
 }
 
 li[aria-selected=true] {

package/dist/collection/components/autosuggest/autosuggest.js

@@ -12,6 +12,14 @@ export class Autosuggest {
      * the original object that was used to create the suggestion.
      */
     this.suggestions = [];
+    /**
+     * Shows progress indicator when fetching results.
+     */
+    this.loading = false;
+    /**
+     * To override progress indicator's default loading label.
+     */
+    this.loadingLabel = "Een moment geduld.";
     /**
      * Whether the previous suggestions will be presented when the input gets focus again.
      */
@@ -33,7 +41,7 @@ export class Autosuggest {
       }
     };
     this.onKeyDown = (event) => {
-      if (event.defaultPrevented) {
+      if (event.defaultPrevented || this.loading) {
         return;
       }
       switch (event.key) {
@@ -209,13 +217,16 @@ export class Autosuggest {
     const terms = this.input.value.split(' ').filter(t => t);
     return (h(Fragment, null,
       h("slot", null),
-      h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
-        ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value },
-          h("span", { class: "value" }, this.markTerms(suggestion.value, terms)),
-          suggestion.type
-            ? (h("span", { class: "type" }, suggestion.type))
-            : undefined)))
-        : undefined)));
+      this.loading
+        ? h("div", { class: "autosuggest-progress-box" },
+          h("dso-progress-indicator", { label: this.loadingLabel }))
+        : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
+          ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value },
+            h("span", { class: "value" }, this.markTerms(suggestion.value, terms)),
+            suggestion.type
+              ? (h("span", { class: "type" }, suggestion.type))
+              : undefined)))
+          : undefined)));
   }
   static get is() { return "dso-autosuggest"; }
   static get encapsulation() { return "scoped"; }
@@ -246,6 +257,42 @@ export class Autosuggest {
       },
       "defaultValue": "[]"
     },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Shows progress indicator when fetching results."
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loadingLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "To override progress indicator's default loading label."
+      },
+      "attribute": "loading-label",
+      "reflect": false,
+      "defaultValue": "\"Een moment geduld.\""
+    },
     "suggestOnFocus": {
       "type": "boolean",
       "mutable": false,

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

@@ -1,5 +1,6 @@
 import { html } from 'lit-html';
-export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus }, children) {
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel }, children) {
   return html `
     <dso-autosuggest
       .suggestions=${suggestions}
@@ -7,6 +8,8 @@ export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch,
       @dsoChange=${onChange}
       @dsoSearch=${onSearch}
       ?suggest-on-focus=${suggestOnFocus}
+      ?loading=${loading}
+      loading-label=${ifDefined(loadingLabel)}
     >
       ${children}
     </dso-autosuggest>

package/dist/collection/components/badge/badge.css

@@ -47,4 +47,9 @@
 .dso-badge.badge-danger {
   background-color: #ce3f51;
   color: #fff;
+}
+.dso-badge.badge-outline {
+  background-color: #fff;
+  border: 1px solid #191919;
+  color: #191919;
 }

package/dist/collection/components/badge/badge.js

@@ -3,9 +3,6 @@ import clsx from 'clsx';
 export class Badge {
   render() {
     return (h("span", { class: clsx('dso-badge', { [`badge-${this.status}`]: this.status }) },
-      h("span", { class: "sr-only" },
-        this.status ? Badge.statusMap.get(this.status) : 'Badge',
-        ": "),
       h("slot", null)));
   }
   static get is() { return "dso-badge"; }
@@ -21,8 +18,8 @@ export class Badge {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'primary' | 'success' | 'info' | 'warning' | 'danger'",
-        "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
+        "original": "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'outline'",
+        "resolved": "\"danger\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
         "references": {}
       },
       "required": false,
@@ -36,9 +33,3 @@ export class Badge {
     }
   }; }
 }
-Badge.statusMap = new Map([
-  ['success', 'Gelukt'],
-  ['info', 'Opmerking'],
-  ['warning', 'Waarschuwing'],
-  ['danger', 'Fout']
-]);

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Watch, Element, Fragment } from "@stencil/core";
+import { Component, h, Prop, Element, Host } from "@stencil/core";
 import { tabbable } from "tabbable";
 import { v4 as uuidv4 } from "uuid";
 export class DropdownMenu {
@@ -60,14 +60,6 @@ export class DropdownMenu {
   get tabbables() {
     return tabbable(this.host).filter((e) => e !== this.button);
   }
-  openWatch(open) {
-    if (open) {
-      this.openPopup();
-    }
-    else {
-      this.closePopup();
-    }
-  }
   connectedCallback() {
     this.button.setAttribute("aria-haspopup", "menu");
     this.button.setAttribute("aria-expanded", "false");
@@ -89,9 +81,6 @@ export class DropdownMenu {
         li.setAttribute("role", "none");
       }
     }
-    if (this.open) {
-      this.openPopup();
-    }
   }
   componentDidRender() {
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
@@ -105,20 +94,17 @@ export class DropdownMenu {
         }
       }
     }
-  }
-  openPopup() {
-    this.host.setAttribute("tabindex", "-1");
-    this.host.addEventListener("keydown", this.keyDownListener);
-    this.host.addEventListener("focusout", this.focusOutListener);
-    this.button.setAttribute("aria-expanded", "true");
-    this.tabbables.forEach((tabbable) => tabbable.addEventListener("click", this.escape));
-  }
-  closePopup() {
     this.host.removeEventListener("keydown", this.keyDownListener);
-    this.host.removeEventListener("focusout", this.focusOutListener);
-    this.button.setAttribute("aria-expanded", "false");
-    this.host.removeAttribute("tabindex");
-    this.tabbables.forEach((tabbable) => tabbable.removeEventListener("click", this.escape));
+    this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
+    if (this.open) {
+      this.host.addEventListener("keydown", this.keyDownListener);
+    }
+    this.tabbables.forEach((tabbable) => {
+      tabbable.removeEventListener("click", this.escape);
+      if (this.open) {
+        tabbable.addEventListener("click", this.escape);
+      }
+    });
   }
   getActiveElement(root = document) {
     const activeEl = root.activeElement;
@@ -145,7 +131,7 @@ export class DropdownMenu {
     tabs[nextIndex].focus();
   }
   render() {
-    return (h(Fragment, null,
+    return (h(Host, { onFocusout: this.focusOutListener, tabindex: this.open ? "-1" : undefined },
       h("slot", { name: "toggle" }),
       h("div", { hidden: !this.open },
         h("slot", null))));
@@ -215,8 +201,4 @@ export class DropdownMenu {
     }
   }; }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "openWatch"
-    }]; }
 }

package/dist/collection/components/header/header.css

@@ -103,18 +103,18 @@ dso-dropdown-menu > .btn-primary::after {
   background: var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 dso-dropdown-menu > .dso-secondary::after,
 dso-dropdown-menu > .btn-default::after {
   background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 dso-dropdown-menu > .dso-secondary:hover::after,
 dso-dropdown-menu > .btn-default:hover::after {
@@ -125,9 +125,9 @@ dso-dropdown-menu > .btn-link::after {
   background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
   position: relative;
   top: -2px;
 }

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -67,6 +67,7 @@
   font-family: Asap, sans-serif;
   position: fixed;
   right: 16px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
 .open-button:focus, .open-button:focus-visible {
   outline-offset: 2px;
@@ -123,17 +124,17 @@
   background: var(--dso-icon, var(--di-download-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .open-button.extern::after {
   background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .open-button dso-icon,
 .open-button svg.di {
@@ -223,9 +224,9 @@
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close-button.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -237,9 +238,9 @@
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close-button.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);
@@ -261,9 +262,9 @@
   background: var(--dso-icon, var(--di-times)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
   content: "";
   display: inline-block;
   position: absolute;
@@ -278,9 +279,9 @@
   background: var(--dso-icon, var(--di-times-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close-button.close {
   display: none;

package/dist/collection/components/helpcenter-panel/helpcenter-panel.js

@@ -29,13 +29,13 @@ export class HelpcenterPanel {
   }
   render() {
     return (h(Fragment, null,
-      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}` },
+      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": "false", "aria-haspopup": "dialog" },
         h("dso-icon", { icon: "help" }),
         h("span", null, this.label)),
       h("div", { class: `wrapper ${this.visibility}` },
-        h("div", { class: "dimscreen" }),
-        h("div", { class: `iframe-container ${this.slideState}` }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)),
-        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick },
+        h("div", { class: "dimscreen", onClick: this.closeClick }),
+        h("div", { class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)),
+        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": "true" },
           h("span", { class: "sr-only" }, "sluiten")))));
   }
   static get is() { return "dso-helpcenter-panel"; }

package/dist/collection/components/highlight-box/highlight-box.css

@@ -28,7 +28,7 @@
   background-color: #f2f2f2;
   margin-top: 16px;
   padding: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 .dso-highlight-box.dso-white {
   background-color: #fff;
@@ -52,7 +52,7 @@
   position: relative;
 }
 .dso-highlight-box .dso-step-counter {
-  background-color: #39870c;
+  background-color: #275937;
   border: 8px solid #79b929;
   border-radius: 50%;
   box-sizing: content-box;
@@ -66,4 +66,7 @@
   text-align: center;
   top: -24px;
   width: 32px;
+}
+.dso-highlight-box dso-icon {
+  vertical-align: text-top;
 }

package/dist/collection/components/icon/icon.css

@@ -1,8 +1,8 @@
 :host {
   display: inline-block;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 
 *,

package/dist/collection/components/image-overlay/image-overlay.css

@@ -97,9 +97,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .open.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -111,9 +111,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .open.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);
@@ -227,9 +227,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -241,9 +241,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);

package/dist/collection/components/info/info.css

@@ -37,9 +37,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-times-grijs90)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
   content: "";
   display: inline-block;
 }