npm - @dso-toolkit/core - Versions diffs - 93.0.1 → 95.0.0 - Mend

@dso-toolkit/core 93.0.1 → 95.0.0

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

Files changed (489) hide show

package/dist/components/dso-list-button.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as t,createEvent as e,forceUpdate as s,h as r,Fragment as i,transformTag as n}from"@stencil/core/internal/client";import{c as a}from"./clsx.js";import{d}from"./icon.js";import{d as l}from"./icon-button.js";import{d as c}from"./info.js";import{d as b}from"./info-button.js";import{d as u}from"./scrollable.js";import{d as p}from"./selectable.js";const f=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoCountChange=e(this,"dsoCountChange",7),this.dsoSelectedChange=e(this,"dsoSelectedChange",7),this.checked=!1,this.disabled=!1}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{characterData:!0,childList:!0,subtree:!0,attributes:!0})}componentDidRender(){this.subcontentSlot?.hasAttribute("aria-hidden")\|\|this.subcontentSlot?.setAttribute("aria-hidden","true")}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}stepValue(o,t){if("number"==typeof this.count){const e="increment"===t?this.count+1:this.count-1;if(!this.isNewCountValid(e))return;this.dsoCountChange.emit({originalEvent:o,count:e})}}handleSelectClick(o){o.preventDefault(),void 0===this.count?this.dsoSelectedChange.emit({originalEvent:o,checked:!this.checked}):this.dsoCountChange.emit({originalEvent:o,count:this.count>0?0:1})}isNewCountValid(o){return!(void 0!==this.min&&void 0!==this.max&&(o<Number(this.min)\|\|o>Number(this.max)))}render(){const o=this.checked\|\|void 0!==this.count&&this.count>0;return r("div",{key:"f8c10a35f9202e5f1b0e7b29be5b8ebafcf53feb",class:a(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"acc95aadd9360e3a72d58316caa119fa30379c89",class:a(["dso-list-button",{"dso-selected":o,"dso-single-count":1===this.count}]),onClick:o=>this.handleSelectClick(o)},r("dso-selectable",{key:"f9ddf12178e9896894f7f2608627804c333ab458",type:"checkbox",value:"list-button",name:"naam",checked:o,disabled:this.disabled},r("span",{key:"772e1607879fcd083e6c3469edfd8f893ef65844"},this.label,this.sublabel&&r("span",{key:"b029eae80587537ecd13149d9a8199b1088735a9",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"753d6a8e63992815e0b29284ed708adca05e1f08",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"a11b280cd827b5e76eff630405808d246c61d247",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"256ed575700b44752460a25e7ff7936e20e69709",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"e81fae2349e3134ab020041dd9b408c5074e099f",class:"subcontent"},r("slot",{key:"b28dd741b40e6e2e1de2f1598d7c4d7e210c142f",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"05fb5356dcb5d20750d0f1aa4d2750fda9c341c8",class:"dso-input-number"},this.count>1&&r(i,{key:"82ba66426f78c55b9ebe72062f8fb6beeb6cd25f"},r("dso-icon-button",{key:"03bbb15acef53111a7ba43436c7041e8520d099b",label:"Aantal verlagen",variant:"tertiary",icon:"minus-circle-outline",disabled:this.count===Number(this.min)\|\|this.disabled,onDsoClick:o=>this.stepValue(o,"decrement")}),r("span",{key:"bfd568ac61c101a7a01bc23cace73f8aa249e284",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),r("dso-icon-button",{key:"d819d6cd666832565ba38b11678943f3841cc8b7",label:"Aantal verhogen",variant:"tertiary",icon:"plus-circle-outline",disabled:this.count===Number(this.max)\|\|this.disabled,onDsoClick:o=>this.stepValue(o,"increment")})))}get host(){return this}static get style(){return", ::after, ::before { box-sizing: border-box; } :host { display: block; } .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); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: start; user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: start; user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-tertiary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .dso-tertiary { border: 0; line-height: 1; padding: 0; background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { cursor: pointer; } .dso-input-number { align-items: center; display: flex; } .dso-input-number .dso-input-step-counter { text-align: center; inline-size: 1.5rem; font-size: 14px; } .dso-button-group { display: flex; flex-direction: row; } .dso-button-group.dso-disabled > { background-color: #fff; border-color: #e5e5e5; color: #666; pointer-events: none; } .dso-button-group > * { border-radius: 0; } .dso-button-group > :first-child { border-radius: 4px 0 0 4px; } .dso-button-group > :not(:first-child) { border-inline-start-style: none !important; } .dso-button-group > :last-child { border-radius: 0 4px 4px 0; } .dso-button-group > :only-child { border-radius: 4px; } .dso-button-group > .dso-input-number { border-style: solid; border-width: 1px; flex-wrap: nowrap; padding-block: 0; padding-inline: 16px; background-color: #fff; border-color: #ccc; color: #191919; } @media screen and (max-width: 767px) { .dso-button-group > .dso-input-number { justify-content: center; } } .dso-button-group > :hover + .dso-input-number, .dso-button-group > :focus + .dso-input-number { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-button-group > .dso-selected + .dso-input-number { box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c; background-color: #fff; border-color: #39870c; color: #191919; } .dso-button-group > :active + .dso-input-number, .dso-button-group > :active + .dso-input-number:hover, .dso-button-group > .active + .dso-input-number, .dso-button-group > .active + .dso-input-number:hover { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-button-group > .disabled + .dso-input-number, .dso-button-group > .disabled + .dso-input-number:hover, .dso-button-group > [disabled] + .dso-input-number, .dso-button-group > *[disabled] + .dso-input-number:hover { opacity: 1; background-color: #fff; border-color: #ccc; color: #666; } .dso-button-group .dso-list-button { padding-inline-end: 15px; } .dso-list-button { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: start; user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-list-button:focus, .dso-list-button:focus-visible { outline-offset: 2px; } .dso-list-button:active { outline: 0; } .dso-list-button { background-color: #fff; border-color: #ccc; color: #191919; border-radius: 4px; border-width: 1px; border-style: solid; font-weight: 600; padding-block: 15px; padding-inline: 15px 47px; position: relative; text-align: start; white-space: normal; inline-size: 100%; cursor: pointer; } .dso-list-button:hover, .dso-list-button:focus { background-color: #fff; border-color: #39870c; color: #191919; } .dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover { background-color: #fff; border-color: #ccc; color: #666; opacity: 1; } .dso-list-button dso-selectable:not(:last-child) { margin-block-end: 0; } .dso-list-button .dso-selectable-container label { font-weight: 700; } .dso-list-button.dso-selected { border-color: #39870c; border-width: 1px; box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c; } @media screen and (min-width: 768px) { .dso-list-button.dso-selected.dso-single-count { border-inline-end: 0; box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset; } } .dso-list-button label { cursor: inherit; } .dso-list-button > span { display: block; } .dso-list-button .dso-sublabel, .dso-list-button .subcontent { font-weight: 400; inline-size: 100%; padding-inline-start: 32px; } .dso-list-button dso-icon { block-size: 24px; color: #39870c; inset-block-start: 15px; inset-inline-end: 15px; inline-size: 24px; break-before: page; position: absolute; } @media screen and (max-width: 767px) { .dso-list-button.dso-selected.dso-single-count::after { inline-size: 0; } }"}},[257,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],subcontentPrefix:[1,"subcontent-prefix"]}]),h=f,g=function(){"undefined"!=typeof customElements&&["dso-list-button","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((o=>{switch(o){case"dso-list-button":customElements.get(n(o))\|\|customElements.define(n(o),f);break;case"dso-icon":customElements.get(n(o))\|\|d();break;case"dso-icon-button":customElements.get(n(o))\|\|l();break;case"dso-info":customElements.get(n(o))\|\|c();break;case"dso-info-button":customElements.get(n(o))\|\|b();break;case"dso-scrollable":customElements.get(n(o))\|\|u();break;case"dso-selectable":customElements.get(n(o))\|\|p()}}))};export{h as DsoListButton,g as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as o,createEvent as e,forceUpdate as s,h as r,Fragment as i,transformTag as n}from"@stencil/core/internal/client";import{c as a}from"./clsx.js";import{d}from"./icon.js";import{d as l}from"./icon-button.js";import{d as c}from"./info.js";import{d as b}from"./info-button.js";import{d as u}from"./scrollable.js";import{d as p}from"./selectable.js";const f=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dsoCountChange=e(this,"dsoCountChange",7),this.dsoSelectedChange=e(this,"dsoSelectedChange",7),this.checked=!1,this.disabled=!1}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{characterData:!0,childList:!0,subtree:!0,attributes:!0})}componentDidRender(){this.subcontentSlot?.hasAttribute("aria-hidden")\|\|this.subcontentSlot?.setAttribute("aria-hidden","true")}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}stepValue(t,o){if("number"==typeof this.count){const e="increment"===o?this.count+1:this.count-1;if(!this.isNewCountValid(e))return;this.dsoCountChange.emit({originalEvent:t,count:e})}}handleSelectClick(t){t.preventDefault(),void 0===this.count?this.dsoSelectedChange.emit({originalEvent:t,checked:!this.checked}):this.dsoCountChange.emit({originalEvent:t,count:this.count>0?0:1})}isNewCountValid(t){return!(void 0!==this.min&&void 0!==this.max&&(t<Number(this.min)\|\|t>Number(this.max)))}render(){const t=this.checked\|\|void 0!==this.count&&this.count>0;return r("div",{key:"b40ad36bcae88fd3a24af536577c54f719dd726c",class:a(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"40dcae84cc39892cc622d5ff6cd11eab081bcc1d",class:a(["dso-list-button",{"dso-selected":t,"dso-single-count":1===this.count}]),onClick:t=>this.handleSelectClick(t)},r("dso-selectable",{key:"cffca295491fb902d476d78184ae81ee76e16180",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled},r("span",{key:"4ec09a173e8392e526acbead245fbcb7603885ff"},this.label,this.sublabel&&r("span",{key:"2aae89b6b5f4ae0cb3a36bb0a200bf7f90832bb8",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"f6eb83bbfa910e0efb83444308718e0d9d69b130",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"2668759703c2673b759e56270a0fdd4ae33b7af6",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"73e322f19f7c95b10c8436c346b4cdabff331941",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"dabdc528ecceb84b133f8f2e7ad49d92ebe50957",class:"subcontent"},r("slot",{key:"db2307e499b084f766c6e59530654895856f7087",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"67af4d0d0e30c0683501ab7dead8e6e6445dac8d",class:"dso-input-number"},this.count>1&&r(i,{key:"e7c26bd345a1fb6ec1202d317f07c42ebc1c1e4c"},r("dso-icon-button",{key:"c3143d4ee0586a589be2110ac6d41989e77f10e6",label:"Aantal verlagen",variant:"tertiary",icon:"minus-circle-outline",disabled:this.count===Number(this.min)\|\|this.disabled,onDsoClick:t=>this.stepValue(t,"decrement")}),r("span",{key:"6258f043e6715023fb95efd5812c153bfcf60810",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),r("dso-icon-button",{key:"b308ddab2232669159dd46cea1a5b157c92c399b",label:"Aantal verhogen",variant:"tertiary",icon:"plus-circle-outline",disabled:this.count===Number(this.max)\|\|this.disabled,onDsoClick:t=>this.stepValue(t,"increment")})))}get host(){return this}static get style(){return", ::after, ::before { box-sizing: border-box; } :host { display: block; } .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); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-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(--_dt-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(--_dt-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dt-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(--_dt-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(--_dt-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(--_dt-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 dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-tertiary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dt-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: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { cursor: pointer; } .dso-input-number { align-items: center; display: flex; } .dso-input-number .dso-input-step-counter { text-align: center; inline-size: 1.5rem; font-size: 14px; } .dso-button-group { display: flex; flex-direction: row; } .dso-button-group.dso-disabled > { background-color: #fff; border-color: #e5e5e5; color: #666; pointer-events: none; } .dso-button-group > * { border-radius: 0; } .dso-button-group > :first-child { border-radius: 4px 0 0 4px; } .dso-button-group > :not(:first-child) { border-inline-start-style: none !important; } .dso-button-group > :last-child { border-radius: 0 4px 4px 0; } .dso-button-group > :only-child { border-radius: 4px; } .dso-button-group > .dso-input-number { border-style: solid; border-width: 1px; flex-wrap: nowrap; padding-block: 0; padding-inline: 16px; background-color: #fff; border-color: #ccc; color: #191919; } @media screen and (max-width: 767px) { .dso-button-group > .dso-input-number { justify-content: center; } } .dso-button-group > :hover + .dso-input-number, .dso-button-group > :focus + .dso-input-number { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-button-group > .dso-selected + .dso-input-number { box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c; background-color: #fff; border-color: #39870c; color: #191919; } .dso-button-group > :active + .dso-input-number, .dso-button-group > :active + .dso-input-number:hover, .dso-button-group > .active + .dso-input-number, .dso-button-group > .active + .dso-input-number:hover { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-button-group > .disabled + .dso-input-number, .dso-button-group > .disabled + .dso-input-number:hover, .dso-button-group > [disabled] + .dso-input-number, .dso-button-group > *[disabled] + .dso-input-number:hover { opacity: 1; background-color: #fff; border-color: #ccc; color: #666; } .dso-button-group .dso-list-button { padding-inline-end: 15px; } .dso-list-button { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-list-button:focus, .dso-list-button:focus-visible { outline-offset: 2px; } .dso-list-button:active { outline: 0; } .dso-list-button { background-color: #fff; border-color: #ccc; color: #191919; border-radius: 4px; border-width: 1px; border-style: solid; font-weight: 600; padding-block: 15px; padding-inline: 15px 47px; position: relative; text-align: start; white-space: normal; inline-size: 100%; cursor: pointer; } .dso-list-button:hover, .dso-list-button:focus { background-color: #fff; border-color: #39870c; color: #191919; } .dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover { background-color: #fff; border-color: #ccc; color: #666; opacity: 1; } .dso-list-button dso-selectable:not(:last-child) { margin-block-end: 0; } .dso-list-button .dso-selectable-container label { font-weight: 700; } .dso-list-button.dso-selected { border-color: #39870c; border-width: 1px; box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c; } @media screen and (min-width: 768px) { .dso-list-button.dso-selected.dso-single-count { border-inline-end: 0; box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset; } } .dso-list-button label { cursor: inherit; } .dso-list-button > span { display: block; } .dso-list-button .dso-sublabel, .dso-list-button .subcontent { font-weight: 400; inline-size: 100%; padding-inline-start: 32px; } .dso-list-button dso-icon { block-size: 24px; color: #39870c; inset-block-start: 15px; inset-inline-end: 15px; inline-size: 24px; break-before: page; position: absolute; } @media screen and (max-width: 767px) { .dso-list-button.dso-selected.dso-single-count::after { inline-size: 0; } }"}},[257,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],subcontentPrefix:[1,"subcontent-prefix"]}]),h=f,g=function(){"undefined"!=typeof customElements&&["dso-list-button","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((t=>{switch(t){case"dso-list-button":customElements.get(n(t))\|\|customElements.define(n(t),f);break;case"dso-icon":customElements.get(n(t))\|\|d();break;case"dso-icon-button":customElements.get(n(t))\|\|l();break;case"dso-info":customElements.get(n(t))\|\|c();break;case"dso-info-button":customElements.get(n(t))\|\|b();break;case"dso-scrollable":customElements.get(n(t))\|\|u();break;case"dso-selectable":customElements.get(n(t))\|\|p()}}))};export{h as DsoListButton,g as defineCustomElement}

package/dist/components/dso-logo.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as l,createEvent as e,h as r,Fragment as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./is-modified-event.js";const s=({name:o})=>{const l=o.split("\|");return r(t,null,r("svg",{fill:"none",viewBox:"0 0 48 48",height:"100%",class:"logo-target"},r("path",{class:"outer",d:"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z"}),r("path",{class:"middle",d:"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z"}),r("path",{class:"inner",d:"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z"})),r("div",{class:"logo-wordmark"},r("span",{class:"logo-wordmark-omgevings"},l[0]),2===l.length&&r("span",{class:"logo-wordmark-loket"},l[1])))},n=o(class extends l{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoLogoClick=e(this,"dsoLogoClick",7),this.dsoLabelClick=e(this,"dsoLabelClick",7),this.name="Omgevings\|loket",this.handleLogoClick=o=>{this.dsoLogoClick.emit({originalEvent:o,url:this.logoUrl,isModifiedEvent:i(o)})},this.handleLabelClick=o=>{this.dsoLabelClick.emit({originalEvent:o,url:this.labelUrl,isModifiedEvent:i(o)})}}render(){return r(t,null,this.logoUrl?r("a",{class:"logo-url",href:this.logoUrl,onClick:this.handleLogoClick},r(s,{name:this.name})):r(s,{name:this.name}),this.label&&(this.labelUrl?r("a",{class:"logo-label-url",href:this.labelUrl,onClick:this.handleLabelClick},r("span",{class:"logo-label"},this.label)):r("span",{class:"logo-label"},this.label)),this.ribbon&&r("div",{key:"~~561d1fd30265bcc499211397ee0a33b7e55cedd7~~",class:"logo-ribbon"},this.ribbon))}static get style(){return':host{block-size:var(--_dso-logo-block-size, 3rem);display:grid;grid-template-areas:"target wordmark label";grid-template-columns:repeat(3, max-content);grid-template-rows:100%;gap:16px;font-size:1.5rem;font-weight:500;align-items:center;container-type:size;container-name:logo}:host .logo-url,:host .logo-label-url{display:flex;align-items:center;gap:16px;text-decoration:none}:host .logo-url:hover,:host .logo-url:focus-visible,:host .logo-url:active,:host .logo-label-url:hover,:host .logo-label-url:focus-visible,:host .logo-label-url:active{text-decoration:underline}:host .logo-url,:host .logo-url:hover,:host .logo-url:focus,:host .logo-url:visited,:host .logo-label-url,:host .logo-label-url:hover,:host .logo-label-url:focus,:host .logo-label-url:visited{color:#275937}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])){grid-template-areas:"targetwordmark label"}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-url,:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-ribbon{grid-area:targetwordmark}.logo-label-url{grid-area:label}.logo-target{grid-area:target;max-block-size:48px;max-inline-size:48px;inline-size:100%;display:block;aspect-ratio:1/1}.logo-wordmark{grid-area:wordmark}@container logo (max-height: 47px){.logo-wordmark,.logo-label{font-size:50cqb;line-height:1}}.logo-wordmark-omgevings{color:#39870c}.logo-wordmark-loket{color:#275937}.logo-label{grid-area:label;color:#275937;margin-inline-start:1rem}.logo-ribbon{grid-area:wordmark;place-self:start end;display:flex;place-items:center;background-color:#8b4a6a;border-radius:3px;transform:rotate(3deg);padding-block:0;padding-inline:8px;font-size:0.75rem;font-weight:normal;text-transform:uppercase;color:#fff}@container logo (max-height: 47px){.logo-ribbon{block-size:28cqb;font-size:25cqb}}.inner{fill:#e17000}.middle{fill:#275937}.outer{fill:#80bc00}@media screen and (max-width: 767px){:host([label]){grid-template-areas:"target label";grid-template-columns:max-content minmax(130px, max-content)}:host([label]) .logo-wordmark{display:none}:host([label]) .logo-ribbon{grid-area:label}:host([label]) .logo-label{margin-inline-start:0;text-wrap:balance;overflow-wrap:normal}:host([logo-url][ribbon]) .logo-label-url+.logo-ribbon{grid-area:label}}@media screen and (max-width: 480px){.logo-ribbon{transform:rotate(3deg) translateY(-7px)}}'}},[1,"dso-logo",{name:[513],logoUrl:[513,"logo-url"],label:[513],labelUrl:[513,"label-url"],ribbon:[513]}]),g=n,d=function(){"undefined"!=typeof customElements&&["dso-logo"].forEach((o=>{"dso-logo"===o&&(customElements.get(a(o))\|\|customElements.define(a(o),n))}))};export{g as DsoLogo,d as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as l,createEvent as e,h as r,Fragment as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./is-modified-event.js";const s=({name:o})=>{const l=o.split("\|");return r(t,null,r("svg",{fill:"none",viewBox:"0 0 48 48",height:"100%",class:"logo-target"},r("path",{class:"outer",d:"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z"}),r("path",{class:"middle",d:"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z"}),r("path",{class:"inner",d:"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z"})),r("div",{class:"logo-wordmark"},r("span",{class:"logo-wordmark-omgevings"},l[0]),2===l.length&&r("span",{class:"logo-wordmark-loket"},l[1])))},n=o(class extends l{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoLogoClick=e(this,"dsoLogoClick",7),this.dsoLabelClick=e(this,"dsoLabelClick",7),this.name="Omgevings\|loket",this.handleLogoClick=o=>{this.dsoLogoClick.emit({originalEvent:o,url:this.logoUrl,isModifiedEvent:i(o)})},this.handleLabelClick=o=>{this.dsoLabelClick.emit({originalEvent:o,url:this.labelUrl,isModifiedEvent:i(o)})}}render(){return r(t,null,this.logoUrl?r("a",{class:"logo-url",href:this.logoUrl,onClick:this.handleLogoClick},r(s,{name:this.name})):r(s,{name:this.name}),this.label&&(this.labelUrl?r("a",{class:"logo-label-url",href:this.labelUrl,onClick:this.handleLabelClick},r("span",{class:"logo-label"},this.label)):r("span",{class:"logo-label"},this.label)),this.ribbon&&r("div",{key:"b920fbaf2bd4a7b11ab4c63020f1675b514223be",class:"logo-ribbon"},this.ribbon))}static get style(){return':host{block-size:var(--_dso-logo-block-size, 3rem);display:grid;grid-template-areas:"target wordmark label";grid-template-columns:repeat(3, max-content);grid-template-rows:100%;gap:16px;font-size:1.5rem;font-weight:500;align-items:center;container-type:size;container-name:logo}:host .logo-url,:host .logo-label-url{display:flex;align-items:center;gap:16px;text-decoration:none}:host .logo-url:hover,:host .logo-url:focus-visible,:host .logo-url:active,:host .logo-label-url:hover,:host .logo-label-url:focus-visible,:host .logo-label-url:active{text-decoration:underline}:host .logo-url,:host .logo-url:hover,:host .logo-url:focus,:host .logo-url:visited,:host .logo-label-url,:host .logo-label-url:hover,:host .logo-label-url:focus,:host .logo-label-url:visited{color:#275937}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])){grid-template-areas:"targetwordmark label"}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-url,:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-ribbon{grid-area:targetwordmark}.logo-label-url{grid-area:label}.logo-target{grid-area:target;max-block-size:48px;max-inline-size:48px;inline-size:100%;display:block;aspect-ratio:1/1}.logo-wordmark{grid-area:wordmark}@container logo (max-height: 47px){.logo-wordmark,.logo-label{font-size:50cqb;line-height:1}}.logo-wordmark-omgevings{color:#39870c}.logo-wordmark-loket{color:#275937}.logo-label{grid-area:label;color:#275937;margin-inline-start:1rem}.logo-ribbon{grid-area:wordmark;place-self:start end;display:flex;place-items:center;background-color:#8b4a6a;border-radius:3px;transform:rotate(3deg);padding-block:0;padding-inline:8px;font-size:0.75rem;font-weight:normal;text-transform:uppercase;color:#fff}@container logo (max-height: 47px){.logo-ribbon{block-size:28cqb;font-size:25cqb}}.inner{fill:#e17000}.middle{fill:#275937}.outer{fill:#80bc00}@media screen and (max-width: 767px){:host([label]){grid-template-areas:"target label";grid-template-columns:max-content minmax(130px, max-content)}:host([label]) .logo-wordmark{display:none}:host([label]) .logo-ribbon{grid-area:label}:host([label]) .logo-label{margin-inline-start:0;text-wrap:balance;overflow-wrap:normal}:host([logo-url][ribbon]) .logo-label-url+.logo-ribbon{grid-area:label}}@media screen and (max-width: 480px){.logo-ribbon{transform:rotate(3deg) translateY(-7px)}}'}},[1,"dso-logo",{name:[513],logoUrl:[513,"logo-url"],label:[513],labelUrl:[513,"label-url"],ribbon:[513]}]),g=n,b=function(){"undefined"!=typeof customElements&&["dso-logo"].forEach((o=>{"dso-logo"===o&&(customElements.get(a(o))\|\|customElements.define(a(o),n))}))};export{g as DsoLogo,b as defineCustomElement}

package/dist/components/dso-map-base-layers.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as s,createEvent as o,h as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./i18n.js";import{d as n}from"./icon.js";import{d as r}from"./icon-button.js";import{d as l}from"./info.js";import{d}from"./info-button.js";import{d as c}from"./scrollable.js";import{d as b}from"./selectable.js";import{v as m}from"./v4.js";const f={en:{"dso-map-base-layers":{background:"Background"}},nl:{"dso-map-base-layers":{background:"Achtergrond"}}},h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoBaseLayerChange=o(this,"dsoBaseLayerChange",7),this.selectableRefs={},this.group=m(),this.text=i((()=>this.host),f)}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>!e.disabled&&!0===this.previousBaselayers?.find((s=>s.id===e.id))?.disabled)).forEach((e=>{this.selectableRefs[e.id]?.toggleInfo(!1)})),this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs)delete this.selectableRefs[e];return t("fieldset",{key:"~~022b7253e4b5fb5b179b52082ca857f533244f17~~",class:"form-group dso-radios"},t("legend",{key:"~~2444a8ba321e2d65d239eebf3c06a6303131e3c8~~",class:"sr-only"},"Achtergrond"),t("div",{key:"~~18f4c8fb0aa8499a22f31903b02dc3dbe1a2fb8f~~",class:"dso-label-container"},t("span",{key:"~~6f8a3a3f0a57b6a5247427be055a47954b161926~~",class:"control-label","aria-hidden":"true"},this.text("background"))),t("div",{key:"~~9a92474df7633fb9c1ca46afaf72a3d1b0b1c409~~",class:"dso-field-container"},this.baseLayers.map((e=>t("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?t("p",{slot:"info"},e.info):null)))))}get host(){return this}static get style(){return":host{display:block},::after,*::before{box-sizing:border-box}.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)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}"}},[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]),p=h,u=function(){"undefined"!=typeof customElements&&["dso-map-base-layers","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((e=>{switch(e){case"dso-map-base-layers":customElements.get(a(e))\|\|customElements.define(a(e),h);break;case"dso-icon":customElements.get(a(e))\|\|n();break;case"dso-icon-button":customElements.get(a(e))\|\|r();break;case"dso-info":customElements.get(a(e))\|\|l();break;case"dso-info-button":customElements.get(a(e))\|\|d();break;case"dso-scrollable":customElements.get(a(e))\|\|c();break;case"dso-selectable":customElements.get(a(e))\|\|b()}}))};export{p as DsoMapBaseLayers,u as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as s,createEvent as o,h as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./i18n.js";import{d as n}from"./icon.js";import{d as r}from"./icon-button.js";import{d as c}from"./info.js";import{d}from"./info-button.js";import{d as l}from"./scrollable.js";import{d as b}from"./selectable.js";import{v as m}from"./v4.js";const f={en:{"dso-map-base-layers":{background:"Background"}},nl:{"dso-map-base-layers":{background:"Achtergrond"}}},h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoBaseLayerChange=o(this,"dsoBaseLayerChange",7),this.selectableRefs={},this.group=m(),this.text=i((()=>this.host),f)}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>!e.disabled&&!0===this.previousBaselayers?.find((s=>s.id===e.id))?.disabled)).forEach((e=>{this.selectableRefs[e.id]?.toggleInfo(!1)})),this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs)delete this.selectableRefs[e];return t("fieldset",{key:"6a8793ee9ec686ffacf7925c46a3e890b3d43d00",class:"form-group dso-radios"},t("legend",{key:"bd71c0cf69155d07feac2d08293a7df74f4060af",class:"sr-only"},"Achtergrond"),t("div",{key:"c1029e36e0da4ef8b8cc991e6d93ce5921ca48a3",class:"dso-label-container"},t("span",{key:"852f466aab28ed062c3b44bf9085e7a1e9e61333",class:"control-label","aria-hidden":"true"},this.text("background"))),t("div",{key:"a8ca16ac5869b90017dbb524c342f4b7d5f73a77",class:"dso-field-container"},this.baseLayers.map((e=>t("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?t("p",{slot:"info"},e.info):null)))))}get host(){return this}static get style(){return":host{display:block},::after,*::before{box-sizing:border-box}.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)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}"}},[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]),p=h,u=function(){"undefined"!=typeof customElements&&["dso-map-base-layers","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((e=>{switch(e){case"dso-map-base-layers":customElements.get(a(e))\|\|customElements.define(a(e),h);break;case"dso-icon":customElements.get(a(e))\|\|n();break;case"dso-icon-button":customElements.get(a(e))\|\|r();break;case"dso-info":customElements.get(a(e))\|\|c();break;case"dso-info-button":customElements.get(a(e))\|\|d();break;case"dso-scrollable":customElements.get(a(e))\|\|l();break;case"dso-selectable":customElements.get(a(e))\|\|b()}}))};export{p as DsoMapBaseLayers,u as defineCustomElement}

package/dist/components/dso-map-controls.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as a,Fragment as s,transformTag as t}from"@stencil/core/internal/client";import{i as n}from"./i18n.js";import{d}from"./button-group.js";import{d as i}from"./icon.js";import{d as l}from"./icon-button.js";import{d as c}from"./scrollable.js";const b={en:{"dso-map-controls":{title:"Map layers",layersButton:"Map layers",zoomIn:"Zoom in",zoomOut:"Zoom out",hidePanel:"Hide panel {{title}}"}},nl:{"dso-map-controls":{title:"Kaartlagen",layersButton:"Kaartlagen",zoomIn:"Zoom in",zoomOut:"Zoom uit",hidePanel:"Verberg paneel {{title}}"}}};var p,m,f,y=function(o,e,r,a){if("a"===r&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?o!==e\|\|!a:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?a:"a"===r?a.call(o):a?a.value:e.get(o)},g=function(o,e,r,a,s){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?o!==e\|\|!s:!e.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===a?s.call(o,r):s?s.value=r:e.set(o,r),r};const u=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoZoomIn=r(this,"dsoZoomIn",7),this.dsoZoomOut=r(this,"dsoZoomOut",7),this.dsoToggle=r(this,"dsoToggle",7),this.open=!1,this.hideContent=!this.open,this.text=n((()=>this.host),b),p.set(this,void 0),m.set(this,void 0),f.set(this,void 0)}watchOpen(o){o?(this.hideContent=!1,setTimeout((()=>y(this,p,"f")?.focus()),300)):setTimeout((()=>{this.hideContent=!0,y(this,m,"f")?.checkVisibility()&&y(this,m,"f")?.focus(),y(this,f,"f")?.checkVisibility()&&y(this,f,"f").focus()}),300)}async toggleVisibility(o){this.open=!this.open,this.dsoToggle.emit({originalEvent:o,open:this.open})}render(){return a(s,{key:"2bebd2222111ce004a78e4473c49c6d09cf7f267"},a("dso-icon-button",{key:"f8f6de437d8e15c345345b7a0a302f9166c299d4",label:this.text("layersButton"),icon:"layers",variant:"map",tooltipPlacement:"left",class:"toggle-visibility-icon-button",onDsoClick:o=>this.toggleVisibility(o.detail.originalEvent),ref:o=>g(this,f,o,"f")}),a("button",{key:"4457eb4c932e2d6919525447e9f5d6cad1abe521",type:"button",class:"dso-map toggle-visibility-button",onClick:o=>this.toggleVisibility(o),ref:o=>g(this,m,o,"f")},a("dso-icon",{key:"1640c879686c95693e0522817859e4c8e642b641",icon:"layers"}),a("span",{key:"c49a7a52d2d3562c7d9ee67d48dac2669715176d"},this.text("layersButton"))),a("dso-button-group",{key:"d05e004ee7ae78a3c02370870f5ab00b19cf3ef0",class:"zoom-buttons",direction:"column"},a("dso-icon-button",{key:"8a030706ac01afe34385953bb1a02461cdf2e513",label:this.text("zoomIn"),icon:"plus",variant:"map",tooltipPlacement:"left",onDsoClick:o=>this.dsoZoomIn.emit(o.detail.originalEvent),disabled:"in"===this.disableZoom\|\|"both"===this.disableZoom}),a("dso-icon-button",{key:"7fd890339f36d4690333523649efe8421f78d015",label:this.text("zoomOut"),icon:"minus",variant:"map",tooltipPlacement:"left",onDsoClick:o=>this.dsoZoomOut.emit(o.detail.originalEvent),disabled:"out"===this.disableZoom\|\|"both"===this.disableZoom})),a("section",{key:"2b61af90c3f4090afffc545426dd8b48e8682061",hidden:this.hideContent},a("header",{key:"6c4da47e33b300a3be9a0e434ddd0c5e4bcb9dab"},a("h2",{key:"17792e55718095fbdd7cbc779ee94eaf4130281c"},this.text("title")),a("dso-icon-button",{key:"9684c711170e6c8c0c943e039fc35884c9488f6d",class:"close-button",label:this.text("hidePanel",{title:this.text("title")}),icon:"cross",variant:"tertiary",onDsoClick:o=>this.toggleVisibility(o.detail.originalEvent),ref:o=>g(this,p,o,"f")})),a("dso-scrollable",{key:"be627b200abc10af23b69530e7fef14c31dd9768"},a("div",{key:"3e134625aeeee3be860156342f0554f6d6650731",class:"content"},a("slot",{key:"7fecb6a54112d1f58b101f00c0304c2b7b3f1599"})))))}get host(){return this}static get watchers(){return{open:[{watchOpen:0}]}}static get style(){return"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; } a.dso-primary, button.dso-primary, label.dso-primary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: start; user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-primary:focus, a.dso-primary:focus-visible, button.dso-primary:focus, button.dso-primary:focus-visible, label.dso-primary:focus, label.dso-primary:focus-visible { outline-offset: 2px; } a.dso-primary:active, button.dso-primary:active, label.dso-primary:active { outline: 0; } a.dso-primary.extern::after, a.dso-primary.download::after, button.dso-primary.extern::after, button.dso-primary.download::after, label.dso-primary.extern::after, label.dso-primary.download::after { content: \"\"; display: inline-block; } a.dso-primary, button.dso-primary, label.dso-primary { background-color: var(--_dso-button-primary-background-color, #39870c); border-color: var(--_dso-button-primary-border-color, #39870c); color: var(--_dso-button-primary-color, #fff); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; padding-block: 11px; padding-inline: 15px; } a.dso-primary:hover, button.dso-primary:hover, label.dso-primary:hover { background-color: var(--_dso-button-primary-hover-background-color, #275937); border-color: var(--_dso-button-primary-hover-border-color, #275937); color: var(--_dso-button-primary-hover-color, #fff); } a.dso-primary:active, button.dso-primary:active, label.dso-primary:active { background-color: var(--_dso-button-primary-active-background-color, #173521); border-color: var(--_dso-button-primary-active-border-color, #173521); color: var(--_dso-button-primary-active-color, #fff); } a.dso-primary[disabled], a.dso-primary[disabled]:hover, button.dso-primary[disabled], button.dso-primary[disabled]:hover, label.dso-primary[disabled], label.dso-primary[disabled]:hover { background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d); border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d); color: var(--_dso-button-primary-disabled-color, #fff); } a.dso-primary.dso-small, button.dso-primary.dso-small, label.dso-primary.dso-small { line-height: 1rem; } a.dso-primary.dso-small dso-icon, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before, button.dso-primary.dso-small dso-icon, button.dso-primary.dso-small.extern::after, button.dso-primary.dso-small.download::after, button.dso-primary.dso-small.dso-spinner::before, label.dso-primary.dso-small dso-icon, label.dso-primary.dso-small.extern::after, label.dso-primary.dso-small.download::after, label.dso-primary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-primary.dso-small.dso-spinner-left::before, button.dso-primary.dso-small.dso-spinner-left::before, label.dso-primary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-primary.dso-small.dso-spinner-right::after, button.dso-primary.dso-small.dso-spinner-right::after, label.dso-primary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-primary.dso-extra-small, button.dso-primary.dso-extra-small, label.dso-primary.dso-extra-small { line-height: 1rem; } a.dso-primary.dso-extra-small dso-icon, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before, button.dso-primary.dso-extra-small dso-icon, button.dso-primary.dso-extra-small.extern::after, button.dso-primary.dso-extra-small.download::after, button.dso-primary.dso-extra-small.dso-spinner::before, label.dso-primary.dso-extra-small dso-icon, label.dso-primary.dso-extra-small.extern::after, label.dso-primary.dso-extra-small.download::after, label.dso-primary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-primary.dso-extra-small.dso-spinner-left::before, button.dso-primary.dso-extra-small.dso-spinner-left::before, label.dso-primary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-primary.dso-extra-small.dso-spinner-right::after, button.dso-primary.dso-extra-small.dso-spinner-right::after, label.dso-primary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-primary.dso-extra-small, button.dso-primary.dso-extra-small, label.dso-primary.dso-extra-small { padding-block: 9px; } a.dso-primary dso-icon:has(+ span:not(.sr-only)), button.dso-primary dso-icon:has(+ span:not(.sr-only)), label.dso-primary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } a.dso-primary span:not(.sr-only) + dso-icon, button.dso-primary span:not(.sr-only) + dso-icon, label.dso-primary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } a.dso-primary dso-icon + span:not(.sr-only), button.dso-primary dso-icon + span:not(.sr-only), label.dso-primary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled], button.dso-primary.dso-spinner-left[disabled], button.dso-primary.dso-spinner-right[disabled], label.dso-primary.dso-spinner-left[disabled], label.dso-primary.dso-spinner-right[disabled] { background-color: #39870c; border-color: #39870c; color: #fff; } a.dso-primary.dso-spinner-left::before, button.dso-primary.dso-spinner-left::before, label.dso-primary.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: %23fff; 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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-primary.dso-spinner-right::after, button.dso-primary.dso-spinner-right::after, label.dso-primary.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: %23fff; 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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-primary.download::after, button.dso-primary.download::after, label.dso-primary.download::after { background: url(\"./di.svg#download-wit\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-primary.extern::after, button.dso-primary.extern::after, label.dso-primary.extern::after { background: url(\"./di.svg#external-link-wit\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-secondary, button.dso-secondary, label.dso-secondary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: start; user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-secondary:focus, a.dso-secondary:focus-visible, button.dso-secondary:focus, button.dso-secondary:focus-visible, label.dso-secondary:focus, label.dso-secondary:focus-visible { outline-offset: 2px; } a.dso-secondary:active, button.dso-secondary:active, label.dso-secondary:active { outline: 0; } a.dso-secondary.extern::after, a.dso-secondary.download::after, button.dso-secondary.extern::after, button.dso-secondary.download::after, label.dso-secondary.extern::after, label.dso-secondary.download::after { content: \"\"; display: inline-block; } a.dso-secondary, button.dso-secondary, label.dso-secondary { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; padding-block: 11px; padding-inline: 15px; } a.dso-secondary:hover, button.dso-secondary:hover, label.dso-secondary:hover { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); } a.dso-secondary:active, button.dso-secondary:active, label.dso-secondary:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); } a.dso-secondary[disabled], a.dso-secondary[disabled]:hover, button.dso-secondary[disabled], button.dso-secondary[disabled]:hover, label.dso-secondary[disabled], label.dso-secondary[disabled]:hover { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); } a.dso-secondary.dso-small, button.dso-secondary.dso-small, label.dso-secondary.dso-small { line-height: 1rem; } a.dso-secondary.dso-small dso-icon, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before, button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before, label.dso-secondary.dso-small dso-icon, label.dso-secondary.dso-small.extern::after, label.dso-secondary.dso-small.download::after, label.dso-secondary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-secondary.dso-small.dso-spinner-left::before, button.dso-secondary.dso-small.dso-spinner-left::before, label.dso-secondary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-small.dso-spinner-right::after, button.dso-secondary.dso-small.dso-spinner-right::after, label.dso-secondary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-extra-small, button.dso-secondary.dso-extra-small, label.dso-secondary.dso-extra-small { line-height: 1rem; } a.dso-secondary.dso-extra-small dso-icon, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before, button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before, label.dso-secondary.dso-extra-small dso-icon, label.dso-secondary.dso-extra-small.extern::after, label.dso-secondary.dso-extra-small.download::after, label.dso-secondary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-secondary.dso-extra-small.dso-spinner-left::before, button.dso-secondary.dso-extra-small.dso-spinner-left::before, label.dso-secondary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-extra-small.dso-spinner-right::after, button.dso-secondary.dso-extra-small.dso-spinner-right::after, label.dso-secondary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-extra-small, button.dso-secondary.dso-extra-small, label.dso-secondary.dso-extra-small { padding-block: 9px; } a.dso-secondary dso-icon:has(+ span:not(.sr-only)), button.dso-secondary dso-icon:has(+ span:not(.sr-only)), label.dso-secondary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } a.dso-secondary span:not(.sr-only) + dso-icon, button.dso-secondary span:not(.sr-only) + dso-icon, label.dso-secondary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } a.dso-secondary dso-icon + span:not(.sr-only), button.dso-secondary dso-icon + span:not(.sr-only), label.dso-secondary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled], button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled], label.dso-secondary.dso-spinner-left[disabled], label.dso-secondary.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } a.dso-secondary.dso-spinner-left::before, button.dso-secondary.dso-spinner-left::before, label.dso-secondary.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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-secondary.dso-spinner-left:not([disabled]):hover::before, button.dso-secondary.dso-spinner-left:not([disabled]):hover::before, label.dso-secondary.dso-spinner-left:not([disabled]):hover::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: %23fff; 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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-spinner-right::after, button.dso-secondary.dso-spinner-right::after, label.dso-secondary.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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-secondary.dso-spinner-right:not([disabled]):hover::after, button.dso-secondary.dso-spinner-right:not([disabled]):hover::after, label.dso-secondary.dso-spinner-right:not([disabled]):hover::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: %23fff; 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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after { block-size: 16px; inline-size: 16px; } a.dso-secondary.download::after, button.dso-secondary.download::after, label.dso-secondary.download::after { background: url(\"./di.svg#download\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-secondary.download:hover::after, button.dso-secondary.download:hover::after, label.dso-secondary.download:hover::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\")); } a.dso-secondary.download[disabled]::after, button.dso-secondary.download[disabled]::after, label.dso-secondary.download[disabled]::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\")); } a.dso-secondary.extern::after, button.dso-secondary.extern::after, label.dso-secondary.extern::after { background: url(\"./di.svg#external-link\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-secondary.extern:hover::after, button.dso-secondary.extern:hover::after, label.dso-secondary.extern:hover::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\")); } a.dso-secondary.extern[disabled]::after, button.dso-secondary.extern[disabled]::after, label.dso-secondary.extern[disabled]::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\")); } a.dso-tertiary, button.dso-tertiary, label.dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: start; user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-tertiary:focus, a.dso-tertiary:focus-visible, button.dso-tertiary:focus, button.dso-tertiary:focus-visible, label.dso-tertiary:focus, label.dso-tertiary:focus-visible { outline-offset: 2px; } a.dso-tertiary:active, button.dso-tertiary:active, label.dso-tertiary:active { outline: 0; } a.dso-tertiary.extern::after, a.dso-tertiary.download::after, button.dso-tertiary.extern::after, button.dso-tertiary.download::after, label.dso-tertiary.extern::after, label.dso-tertiary.download::after { content: \"\"; display: inline-block; } a.dso-tertiary, button.dso-tertiary, label.dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: start; user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-tertiary:focus, a.dso-tertiary:focus-visible, button.dso-tertiary:focus, button.dso-tertiary:focus-visible, label.dso-tertiary:focus, label.dso-tertiary:focus-visible { outline-offset: 2px; } a.dso-tertiary:active, button.dso-tertiary:active, label.dso-tertiary:active { outline: 0; } a.dso-tertiary.extern::after, a.dso-tertiary.download::after, button.dso-tertiary.extern::after, button.dso-tertiary.download::after, label.dso-tertiary.extern::after, label.dso-tertiary.download::after { content: \"\"; display: inline-block; } a.dso-tertiary, button.dso-tertiary, label.dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; padding-block: 11px; padding-inline: 15px; } a.dso-tertiary:hover, button.dso-tertiary:hover, label.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); } a.dso-tertiary:active, button.dso-tertiary:active, label.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); } a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover, button.dso-tertiary[disabled], button.dso-tertiary[disabled]:hover, label.dso-tertiary[disabled], label.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); } a.dso-tertiary.dso-small, button.dso-tertiary.dso-small, label.dso-tertiary.dso-small { line-height: 1rem; } a.dso-tertiary.dso-small dso-icon, a.dso-tertiary.dso-small.extern::after, a.dso-tertiary.dso-small.download::after, a.dso-tertiary.dso-small.dso-spinner::before, button.dso-tertiary.dso-small dso-icon, button.dso-tertiary.dso-small.extern::after, button.dso-tertiary.dso-small.download::after, button.dso-tertiary.dso-small.dso-spinner::before, label.dso-tertiary.dso-small dso-icon, label.dso-tertiary.dso-small.extern::after, label.dso-tertiary.dso-small.download::after, label.dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-tertiary.dso-small.dso-spinner-left::before, button.dso-tertiary.dso-small.dso-spinner-left::before, label.dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-tertiary.dso-small.dso-spinner-right::after, button.dso-tertiary.dso-small.dso-spinner-right::after, label.dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-tertiary.dso-extra-small, button.dso-tertiary.dso-extra-small, label.dso-tertiary.dso-extra-small { line-height: 1rem; } a.dso-tertiary.dso-extra-small dso-icon, a.dso-tertiary.dso-extra-small.extern::after, a.dso-tertiary.dso-extra-small.download::after, a.dso-tertiary.dso-extra-small.dso-spinner::before, button.dso-tertiary.dso-extra-small dso-icon, button.dso-tertiary.dso-extra-small.extern::after, button.dso-tertiary.dso-extra-small.download::after, button.dso-tertiary.dso-extra-small.dso-spinner::before, label.dso-tertiary.dso-extra-small dso-icon, label.dso-tertiary.dso-extra-small.extern::after, label.dso-tertiary.dso-extra-small.download::after, label.dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-tertiary.dso-extra-small.dso-spinner-left::before, button.dso-tertiary.dso-extra-small.dso-spinner-left::before, label.dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-tertiary.dso-extra-small.dso-spinner-right::after, button.dso-tertiary.dso-extra-small.dso-spinner-right::after, label.dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-tertiary.dso-extra-small, button.dso-tertiary.dso-extra-small, label.dso-tertiary.dso-extra-small { padding-block: 9px; } a.dso-tertiary dso-icon:has(+ span:not(.sr-only)), button.dso-tertiary dso-icon:has(+ span:not(.sr-only)), label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } a.dso-tertiary span:not(.sr-only) + dso-icon, button.dso-tertiary span:not(.sr-only) + dso-icon, label.dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } a.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary dso-icon + span:not(.sr-only), label.dso-tertiary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } a.dso-tertiary, button.dso-tertiary, label.dso-tertiary { border: 0; line-height: 1; padding: 0; background-color: transparent; } a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right, button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right, label.dso-tertiary[disabled].dso-spinner-left, label.dso-tertiary[disabled].dso-spinner-right { color: #39870c; } a.dso-tertiary:not([disabled]):hover, button.dso-tertiary:not([disabled]):hover, label.dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } a.dso-tertiary.dso-align, button.dso-tertiary.dso-align, label.dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } a.dso-tertiary.dso-truncate, button.dso-tertiary.dso-truncate, label.dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.dso-tertiary.dso-spinner-left::before, button.dso-tertiary.dso-spinner-left::before, label.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; } a.dso-tertiary.dso-spinner-right::after, button.dso-tertiary.dso-spinner-right::after, label.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; } a.dso-tertiary dso-icon + span:not(.sr-only), a.dso-tertiary span:not(.sr-only) + dso-icon, button.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon, label.dso-tertiary dso-icon + span:not(.sr-only), label.dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right], button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right], label.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), label.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } a.dso-tertiary dso-icon, a.dso-tertiary span, button.dso-tertiary dso-icon, button.dso-tertiary span, label.dso-tertiary dso-icon, label.dso-tertiary span { vertical-align: middle; } a.dso-tertiary.extern::after, a.dso-tertiary.download::after, button.dso-tertiary.extern::after, button.dso-tertiary.download::after, label.dso-tertiary.extern::after, label.dso-tertiary.download::after { position: relative; inset-block-start: -2px; } a.dso-tertiary.download::after, button.dso-tertiary.download::after, label.dso-tertiary.download::after { background: url(\"./di.svg#download\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-tertiary.download[disabled]::after, button.dso-tertiary.download[disabled]::after, label.dso-tertiary.download[disabled]::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\")); } a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after, button.dso-tertiary.download:not([disabled]):hover::after, button.dso-tertiary.download:not([disabled]):active::after, label.dso-tertiary.download:not([disabled]):hover::after, label.dso-tertiary.download:not([disabled]):active::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\")); } a.dso-tertiary.extern::after, button.dso-tertiary.extern::after, label.dso-tertiary.extern::after { background: url(\"./di.svg#external-link\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-tertiary.extern[disabled]::after, button.dso-tertiary.extern[disabled]::after, label.dso-tertiary.extern[disabled]::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\")); } a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after, button.dso-tertiary.extern:not([disabled]):hover::after, button.dso-tertiary.extern:not([disabled]):active::after, label.dso-tertiary.extern:not([disabled]):hover::after, label.dso-tertiary.extern:not([disabled]):active::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\")); } a.dso-map, button.dso-map, label.dso-map { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: start; user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-map:focus, a.dso-map:focus-visible, button.dso-map:focus, button.dso-map:focus-visible, label.dso-map:focus, label.dso-map:focus-visible { outline-offset: 2px; } a.dso-map:active, button.dso-map:active, label.dso-map:active { outline: 0; } a.dso-map, button.dso-map, label.dso-map { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; padding-block: 11px; padding-inline: 15px; } a.dso-map:hover, button.dso-map:hover, label.dso-map:hover { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); } a.dso-map:active, button.dso-map:active, label.dso-map:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); } a.dso-map[disabled], a.dso-map[disabled]:hover, button.dso-map[disabled], button.dso-map[disabled]:hover, label.dso-map[disabled], label.dso-map[disabled]:hover { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); } a.dso-map.dso-small, button.dso-map.dso-small, label.dso-map.dso-small { line-height: 1rem; } a.dso-map.dso-small dso-icon, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before, button.dso-map.dso-small dso-icon, button.dso-map.dso-small.extern::after, button.dso-map.dso-small.download::after, button.dso-map.dso-small.dso-spinner::before, label.dso-map.dso-small dso-icon, label.dso-map.dso-small.extern::after, label.dso-map.dso-small.download::after, label.dso-map.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-map.dso-small.dso-spinner-left::before, button.dso-map.dso-small.dso-spinner-left::before, label.dso-map.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-map.dso-small.dso-spinner-right::after, button.dso-map.dso-small.dso-spinner-right::after, label.dso-map.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-map.dso-extra-small, button.dso-map.dso-extra-small, label.dso-map.dso-extra-small { line-height: 1rem; } a.dso-map.dso-extra-small dso-icon, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before, button.dso-map.dso-extra-small dso-icon, button.dso-map.dso-extra-small.extern::after, button.dso-map.dso-extra-small.download::after, button.dso-map.dso-extra-small.dso-spinner::before, label.dso-map.dso-extra-small dso-icon, label.dso-map.dso-extra-small.extern::after, label.dso-map.dso-extra-small.download::after, label.dso-map.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-map.dso-extra-small.dso-spinner-left::before, button.dso-map.dso-extra-small.dso-spinner-left::before, label.dso-map.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-map.dso-extra-small.dso-spinner-right::after, button.dso-map.dso-extra-small.dso-spinner-right::after, label.dso-map.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-map.dso-extra-small, button.dso-map.dso-extra-small, label.dso-map.dso-extra-small { padding-block: 9px; } a.dso-map dso-icon:has(+ span:not(.sr-only)), button.dso-map dso-icon:has(+ span:not(.sr-only)), label.dso-map dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } a.dso-map span:not(.sr-only) + dso-icon, button.dso-map span:not(.sr-only) + dso-icon, label.dso-map span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } a.dso-map dso-icon + span:not(.sr-only), button.dso-map dso-icon + span:not(.sr-only), label.dso-map dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } a.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled], button.dso-map.dso-spinner-left[disabled], button.dso-map.dso-spinner-right[disabled], label.dso-map.dso-spinner-left[disabled], label.dso-map.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } a.dso-map.dso-spinner-left::before, button.dso-map.dso-spinner-left::before, label.dso-map.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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-map.dso-spinner-left:not([disabled]):hover::before, button.dso-map.dso-spinner-left:not([disabled]):hover::before, label.dso-map.dso-spinner-left:not([disabled]):hover::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: %23fff; 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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, button.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before { block-size: 16px; inline-size: 16px; } a.dso-map.dso-spinner-right::after, button.dso-map.dso-spinner-right::after, label.dso-map.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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-map.dso-spinner-right:not([disabled]):hover::after, button.dso-map.dso-spinner-right:not([disabled]):hover::after, label.dso-map.dso-spinner-right:not([disabled]):hover::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: %23fff; 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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, button.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, label.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after { block-size: 16px; inline-size: 16px; } a.dso-map, button.dso-map, label.dso-map { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); border: 0; font-weight: 600; margin-inline-end: 16px; padding-block: 8px; padding-inline: 16px; white-space: nowrap; } a.dso-map:focus, a.dso-map:focus-visible, button.dso-map:focus, button.dso-map:focus-visible, label.dso-map:focus, label.dso-map:focus-visible { outline-offset: -1px; } a.dso-map:has(span.sr-only):has(dso-icon), button.dso-map:has(span.sr-only):has(dso-icon), label.dso-map:has(span.sr-only):has(dso-icon) { padding: 8px; min-inline-size: auto; block-size: 40px; inline-size: 40px; } a.dso-primary, a.dso-primary:hover, a.dso-primary:visited, a.dso-primary:focus-visible { color: #fff; text-decoration: none; } a.dso-secondary { text-decoration: none; } a.dso-secondary, a.dso-secondary:visited { color: #39870c; } a.dso-secondary:hover, a.dso-secondary:focus-visible { color: #275937; text-decoration: none; } a.dso-tertiary { text-decoration: none; } a.dso-tertiary, a.dso-tertiary:visited { color: #39870c; } .dso-primary + .dso-primary, .dso-primary + .dso-secondary, .dso-primary + .dso-tertiary, .dso-secondary + .dso-primary, .dso-secondary + .dso-secondary, .dso-secondary + .dso-tertiary, .dso-tertiary + .dso-primary, .dso-tertiary + .dso-secondary, .dso-tertiary + .dso-tertiary { margin-inline-start: 16px; } :host { background-color: #fff; border: 1px solid #ccc; inset-block-end: 0; display: block; font-family: Asap, sans-serif; position: absolute; inset-block-start: 0; inset-inline-start: 100%; transition: transform 300ms ease; inline-size: 300px; } , ::after, *::before { box-sizing: border-box; } :host([open]) { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); transform: translateX(-100%); } :host([open]) .toggle-visibility-button, :host([open]) .toggle-visibility-icon-button { display: none; } :host([open]) .zoom-buttons { inset-block-start: 16px; } .toggle-visibility-icon-button { display: none; } .toggle-visibility-button { position: absolute; inset-inline-end: calc(100% + 56px); inset-block-start: 16px; } .zoom-buttons { position: absolute; inset-inline-end: calc(100% + 16px); inset-block-start: 16px; } .close-button { padding: 0; position: absolute; inset-inline-end: 16px; inset-block-start: 16px; } section:not([hidden]) { display: flex; flex-direction: column; block-size: 100%; } header, .content { padding: 16px; } header { border-block-end: 1px solid #ccc; flex-grow: 0; position: relative; } header h2 { color: #275937; font-family: \"Asap\", sans-serif; line-height: 1; margin: 0; } @media screen and (max-width: 767px) { button.toggle-visibility-button { display: none; } .toggle-visibility-icon-button { display: inline-block; position: absolute; inset-block-start: 16px; inset-inline-end: calc(100% + 16px); } .zoom-buttons { inset-block-start: 72px; } }"}},[257,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]},void 0,{open:[{watchOpen:0}]}]);p=new WeakMap,m=new WeakMap,f=new WeakMap;const h=u,x=function(){"undefined"!=typeof customElements&&["dso-map-controls","dso-button-group","dso-icon","dso-icon-button","dso-scrollable"].forEach((o=>{switch(o){case"dso-map-controls":customElements.get(t(o))\|\|customElements.define(t(o),u);break;case"dso-button-group":customElements.get(t(o))\|\|d();break;case"dso-icon":customElements.get(t(o))\|\|i();break;case"dso-icon-button":customElements.get(t(o))\|\|l();break;case"dso-scrollable":customElements.get(t(o))\|\|c()}}))};export{h as DsoMapControls,x as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as e,createEvent as a,h as r,Fragment as t,transformTag as s}from"@stencil/core/internal/client";import{i as n}from"./i18n.js";import{d}from"./button-group.js";import{d as i}from"./icon.js";import{d as l}from"./icon-button.js";import{d as c}from"./scrollable.js";const b={en:{"dso-map-controls":{title:"Map layers",layersButton:"Map layers",zoomIn:"Zoom in",zoomOut:"Zoom out",hidePanel:"Hide panel {{title}}"}},nl:{"dso-map-controls":{title:"Kaartlagen",layersButton:"Kaartlagen",zoomIn:"Zoom in",zoomOut:"Zoom uit",hidePanel:"Verberg paneel {{title}}"}}};var p,f,m,y=function(o,e,a,r){if("a"===a&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?o!==e\|\|!r:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===a?r:"a"===a?r.call(o):r?r.value:e.get(o)},u=function(o,e,a,r,t){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!t)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?o!==e\|\|!t:!e.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?t.call(o,a):t?t.value=a:e.set(o,a),a};const g=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoZoomIn=a(this,"dsoZoomIn",7),this.dsoZoomOut=a(this,"dsoZoomOut",7),this.dsoToggle=a(this,"dsoToggle",7),this.open=!1,this.hideContent=!this.open,this.text=n((()=>this.host),b),p.set(this,void 0),f.set(this,void 0),m.set(this,void 0)}watchOpen(o){o?(this.hideContent=!1,setTimeout((()=>y(this,p,"f")?.focus()),300)):setTimeout((()=>{this.hideContent=!0,y(this,f,"f")?.checkVisibility()&&y(this,f,"f")?.focus(),y(this,m,"f")?.checkVisibility()&&y(this,m,"f").focus()}),300)}async toggleVisibility(o){this.open=!this.open,this.dsoToggle.emit({originalEvent:o,open:this.open})}render(){return r(t,{key:"411b9b7b5d2e6f41230fd8a3f731899a335c9e9f"},r("dso-icon-button",{key:"f3b9115f95630c8992a8f34fbbe65ae4cc1b201f",label:this.text("layersButton"),icon:"layers",variant:"map",tooltipPlacement:"left",class:"toggle-visibility-icon-button",onDsoClick:o=>this.toggleVisibility(o.detail.originalEvent),ref:o=>u(this,m,o,"f")}),r("button",{key:"cf2abe1623ed0323fe27566703a22abe8aac5b7c",type:"button",class:"dso-map toggle-visibility-button",onClick:o=>this.toggleVisibility(o),ref:o=>u(this,f,o,"f")},r("dso-icon",{key:"1617d4064c446c9e9d9b0a437b22b69a358d8a8d",icon:"layers"}),r("span",{key:"b3c28ae6b7a5cf63bc094df593fad526125e16e0"},this.text("layersButton"))),r("dso-button-group",{key:"634b00997c867d6bd25142c460ef433193b34807",class:"zoom-buttons",direction:"column"},r("dso-icon-button",{key:"f2cf801742a48e7bb8bdbed05c934081e8a7a512",label:this.text("zoomIn"),icon:"plus",variant:"map",tooltipPlacement:"left",onDsoClick:o=>this.dsoZoomIn.emit(o.detail.originalEvent),disabled:"in"===this.disableZoom\|\|"both"===this.disableZoom}),r("dso-icon-button",{key:"d3c140cc554cd5943812ab318d53230bf96a4775",label:this.text("zoomOut"),icon:"minus",variant:"map",tooltipPlacement:"left",onDsoClick:o=>this.dsoZoomOut.emit(o.detail.originalEvent),disabled:"out"===this.disableZoom\|\|"both"===this.disableZoom})),r("section",{key:"e91b093e161b8ef2d060bf93982526d4c803eefc",hidden:this.hideContent},r("header",{key:"bcd1b3bf72dfd87f4d05b16926c1119523397b74"},r("h2",{key:"8e32a0a23e780e341f5bcf449273e6be7531f798"},this.text("title")),r("dso-icon-button",{key:"f0eba0ad8332136f29684a8f5d382b885441a899",class:"close-button",label:this.text("hidePanel",{title:this.text("title")}),icon:"cross",variant:"tertiary",onDsoClick:o=>this.toggleVisibility(o.detail.originalEvent),ref:o=>u(this,p,o,"f")})),r("dso-scrollable",{key:"cb103d3c9d987bf9f16cdc62ff3924e202b6a47f"},r("div",{key:"f8d1e9a6c98913df5b352bec957b7ff910635b12",class:"content"},r("slot",{key:"5ca27d90e9346104307f981647db01353444c24b"})))))}get host(){return this}static get watchers(){return{open:[{watchOpen:0}]}}static get style(){return"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; } a.dso-primary, button.dso-primary, label.dso-primary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-primary:focus, a.dso-primary:focus-visible, button.dso-primary:focus, button.dso-primary:focus-visible, label.dso-primary:focus, label.dso-primary:focus-visible { outline-offset: 2px; } a.dso-primary:active, button.dso-primary:active, label.dso-primary:active { outline: 0; } a.dso-primary.extern::after, a.dso-primary.download::after, button.dso-primary.extern::after, button.dso-primary.download::after, label.dso-primary.extern::after, label.dso-primary.download::after { content: \"\"; display: inline-block; } a.dso-primary, button.dso-primary, label.dso-primary { background-color: var(--_dso-button-primary-background-color, #39870c); border-color: var(--_dso-button-primary-border-color, #39870c); color: var(--_dso-button-primary-color, #fff); float: var(--_dt-button-float-primary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dt-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } a.dso-primary:hover, button.dso-primary:hover, label.dso-primary:hover { background-color: var(--_dso-button-primary-hover-background-color, #275937); border-color: var(--_dso-button-primary-hover-border-color, #275937); color: var(--_dso-button-primary-hover-color, #fff); float: var(--_dt-button-float-primary, none); } a.dso-primary:active, button.dso-primary:active, label.dso-primary:active { background-color: var(--_dso-button-primary-active-background-color, #173521); border-color: var(--_dso-button-primary-active-border-color, #173521); color: var(--_dso-button-primary-active-color, #fff); float: var(--_dt-button-float-primary, none); } a.dso-primary[disabled], a.dso-primary[disabled]:hover, button.dso-primary[disabled], button.dso-primary[disabled]:hover, label.dso-primary[disabled], label.dso-primary[disabled]:hover { background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d); border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d); color: var(--_dso-button-primary-disabled-color, #fff); float: var(--_dt-button-float-primary, none); } a.dso-primary.dso-small, button.dso-primary.dso-small, label.dso-primary.dso-small { line-height: 1rem; } a.dso-primary.dso-small dso-icon, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before, button.dso-primary.dso-small dso-icon, button.dso-primary.dso-small.extern::after, button.dso-primary.dso-small.download::after, button.dso-primary.dso-small.dso-spinner::before, label.dso-primary.dso-small dso-icon, label.dso-primary.dso-small.extern::after, label.dso-primary.dso-small.download::after, label.dso-primary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-primary.dso-small.dso-spinner-left::before, button.dso-primary.dso-small.dso-spinner-left::before, label.dso-primary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-primary.dso-small.dso-spinner-right::after, button.dso-primary.dso-small.dso-spinner-right::after, label.dso-primary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-primary.dso-extra-small, button.dso-primary.dso-extra-small, label.dso-primary.dso-extra-small { line-height: 1rem; } a.dso-primary.dso-extra-small dso-icon, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before, button.dso-primary.dso-extra-small dso-icon, button.dso-primary.dso-extra-small.extern::after, button.dso-primary.dso-extra-small.download::after, button.dso-primary.dso-extra-small.dso-spinner::before, label.dso-primary.dso-extra-small dso-icon, label.dso-primary.dso-extra-small.extern::after, label.dso-primary.dso-extra-small.download::after, label.dso-primary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-primary.dso-extra-small.dso-spinner-left::before, button.dso-primary.dso-extra-small.dso-spinner-left::before, label.dso-primary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-primary.dso-extra-small.dso-spinner-right::after, button.dso-primary.dso-extra-small.dso-spinner-right::after, label.dso-primary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-primary.dso-extra-small, button.dso-primary.dso-extra-small, label.dso-primary.dso-extra-small { padding-block: 9px; } a.dso-primary dso-icon:has(+ span:not(.sr-only)), button.dso-primary dso-icon:has(+ span:not(.sr-only)), label.dso-primary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } a.dso-primary span:not(.sr-only) + dso-icon, button.dso-primary span:not(.sr-only) + dso-icon, label.dso-primary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } a.dso-primary dso-icon + span:not(.sr-only), button.dso-primary dso-icon + span:not(.sr-only), label.dso-primary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled], button.dso-primary.dso-spinner-left[disabled], button.dso-primary.dso-spinner-right[disabled], label.dso-primary.dso-spinner-left[disabled], label.dso-primary.dso-spinner-right[disabled] { background-color: #39870c; border-color: #39870c; color: #fff; } a.dso-primary.dso-spinner-left::before, button.dso-primary.dso-spinner-left::before, label.dso-primary.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: %23fff; 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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-primary.dso-spinner-right::after, button.dso-primary.dso-spinner-right::after, label.dso-primary.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: %23fff; 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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-primary.download::after, button.dso-primary.download::after, label.dso-primary.download::after { background: url(\"./di.svg#download-wit\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-primary.extern::after, button.dso-primary.extern::after, label.dso-primary.extern::after { background: url(\"./di.svg#external-link-wit\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-secondary, button.dso-secondary, label.dso-secondary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-secondary:focus, a.dso-secondary:focus-visible, button.dso-secondary:focus, button.dso-secondary:focus-visible, label.dso-secondary:focus, label.dso-secondary:focus-visible { outline-offset: 2px; } a.dso-secondary:active, button.dso-secondary:active, label.dso-secondary:active { outline: 0; } a.dso-secondary.extern::after, a.dso-secondary.download::after, button.dso-secondary.extern::after, button.dso-secondary.download::after, label.dso-secondary.extern::after, label.dso-secondary.download::after { content: \"\"; display: inline-block; } a.dso-secondary, button.dso-secondary, label.dso-secondary { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); float: var(--_dt-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dt-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } a.dso-secondary:hover, button.dso-secondary:hover, label.dso-secondary:hover { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); float: var(--_dt-button-float-secondary, none); } a.dso-secondary:active, button.dso-secondary:active, label.dso-secondary:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); float: var(--_dt-button-float-secondary, none); } a.dso-secondary[disabled], a.dso-secondary[disabled]:hover, button.dso-secondary[disabled], button.dso-secondary[disabled]:hover, label.dso-secondary[disabled], label.dso-secondary[disabled]:hover { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); float: var(--_dt-button-float-secondary, none); } a.dso-secondary.dso-small, button.dso-secondary.dso-small, label.dso-secondary.dso-small { line-height: 1rem; } a.dso-secondary.dso-small dso-icon, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before, button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before, label.dso-secondary.dso-small dso-icon, label.dso-secondary.dso-small.extern::after, label.dso-secondary.dso-small.download::after, label.dso-secondary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-secondary.dso-small.dso-spinner-left::before, button.dso-secondary.dso-small.dso-spinner-left::before, label.dso-secondary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-small.dso-spinner-right::after, button.dso-secondary.dso-small.dso-spinner-right::after, label.dso-secondary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-extra-small, button.dso-secondary.dso-extra-small, label.dso-secondary.dso-extra-small { line-height: 1rem; } a.dso-secondary.dso-extra-small dso-icon, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before, button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before, label.dso-secondary.dso-extra-small dso-icon, label.dso-secondary.dso-extra-small.extern::after, label.dso-secondary.dso-extra-small.download::after, label.dso-secondary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-secondary.dso-extra-small.dso-spinner-left::before, button.dso-secondary.dso-extra-small.dso-spinner-left::before, label.dso-secondary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-extra-small.dso-spinner-right::after, button.dso-secondary.dso-extra-small.dso-spinner-right::after, label.dso-secondary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-extra-small, button.dso-secondary.dso-extra-small, label.dso-secondary.dso-extra-small { padding-block: 9px; } a.dso-secondary dso-icon:has(+ span:not(.sr-only)), button.dso-secondary dso-icon:has(+ span:not(.sr-only)), label.dso-secondary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } a.dso-secondary span:not(.sr-only) + dso-icon, button.dso-secondary span:not(.sr-only) + dso-icon, label.dso-secondary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } a.dso-secondary dso-icon + span:not(.sr-only), button.dso-secondary dso-icon + span:not(.sr-only), label.dso-secondary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled], button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled], label.dso-secondary.dso-spinner-left[disabled], label.dso-secondary.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } a.dso-secondary.dso-spinner-left::before, button.dso-secondary.dso-spinner-left::before, label.dso-secondary.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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-secondary.dso-spinner-left:not([disabled]):hover::before, button.dso-secondary.dso-spinner-left:not([disabled]):hover::before, label.dso-secondary.dso-spinner-left:not([disabled]):hover::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: %23fff; 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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before { block-size: 16px; inline-size: 16px; } a.dso-secondary.dso-spinner-right::after, button.dso-secondary.dso-spinner-right::after, label.dso-secondary.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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-secondary.dso-spinner-right:not([disabled]):hover::after, button.dso-secondary.dso-spinner-right:not([disabled]):hover::after, label.dso-secondary.dso-spinner-right:not([disabled]):hover::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: %23fff; 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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after { block-size: 16px; inline-size: 16px; } a.dso-secondary.download::after, button.dso-secondary.download::after, label.dso-secondary.download::after { background: url(\"./di.svg#download\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-secondary.download:hover::after, button.dso-secondary.download:hover::after, label.dso-secondary.download:hover::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\")); } a.dso-secondary.download[disabled]::after, button.dso-secondary.download[disabled]::after, label.dso-secondary.download[disabled]::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\")); } a.dso-secondary.extern::after, button.dso-secondary.extern::after, label.dso-secondary.extern::after { background: url(\"./di.svg#external-link\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-secondary.extern:hover::after, button.dso-secondary.extern:hover::after, label.dso-secondary.extern:hover::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\")); } a.dso-secondary.extern[disabled]::after, button.dso-secondary.extern[disabled]::after, label.dso-secondary.extern[disabled]::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\")); } a.dso-tertiary, button.dso-tertiary, label.dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-tertiary:focus, a.dso-tertiary:focus-visible, button.dso-tertiary:focus, button.dso-tertiary:focus-visible, label.dso-tertiary:focus, label.dso-tertiary:focus-visible { outline-offset: 2px; } a.dso-tertiary:active, button.dso-tertiary:active, label.dso-tertiary:active { outline: 0; } a.dso-tertiary.extern::after, a.dso-tertiary.download::after, button.dso-tertiary.extern::after, button.dso-tertiary.download::after, label.dso-tertiary.extern::after, label.dso-tertiary.download::after { content: \"\"; display: inline-block; } a.dso-tertiary, button.dso-tertiary, label.dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-tertiary:focus, a.dso-tertiary:focus-visible, button.dso-tertiary:focus, button.dso-tertiary:focus-visible, label.dso-tertiary:focus, label.dso-tertiary:focus-visible { outline-offset: 2px; } a.dso-tertiary:active, button.dso-tertiary:active, label.dso-tertiary:active { outline: 0; } a.dso-tertiary.extern::after, a.dso-tertiary.download::after, button.dso-tertiary.extern::after, button.dso-tertiary.download::after, label.dso-tertiary.extern::after, label.dso-tertiary.download::after { content: \"\"; display: inline-block; } a.dso-tertiary, button.dso-tertiary, label.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(--_dt-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dt-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } a.dso-tertiary:hover, button.dso-tertiary:hover, label.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(--_dt-button-float-tertiary, none); } a.dso-tertiary:active, button.dso-tertiary:active, label.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(--_dt-button-float-tertiary, none); } a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover, button.dso-tertiary[disabled], button.dso-tertiary[disabled]:hover, label.dso-tertiary[disabled], label.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(--_dt-button-float-tertiary, none); } a.dso-tertiary.dso-small, button.dso-tertiary.dso-small, label.dso-tertiary.dso-small { line-height: 1rem; } a.dso-tertiary.dso-small dso-icon, a.dso-tertiary.dso-small.extern::after, a.dso-tertiary.dso-small.download::after, a.dso-tertiary.dso-small.dso-spinner::before, button.dso-tertiary.dso-small dso-icon, button.dso-tertiary.dso-small.extern::after, button.dso-tertiary.dso-small.download::after, button.dso-tertiary.dso-small.dso-spinner::before, label.dso-tertiary.dso-small dso-icon, label.dso-tertiary.dso-small.extern::after, label.dso-tertiary.dso-small.download::after, label.dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-tertiary.dso-small.dso-spinner-left::before, button.dso-tertiary.dso-small.dso-spinner-left::before, label.dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-tertiary.dso-small.dso-spinner-right::after, button.dso-tertiary.dso-small.dso-spinner-right::after, label.dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-tertiary.dso-extra-small, button.dso-tertiary.dso-extra-small, label.dso-tertiary.dso-extra-small { line-height: 1rem; } a.dso-tertiary.dso-extra-small dso-icon, a.dso-tertiary.dso-extra-small.extern::after, a.dso-tertiary.dso-extra-small.download::after, a.dso-tertiary.dso-extra-small.dso-spinner::before, button.dso-tertiary.dso-extra-small dso-icon, button.dso-tertiary.dso-extra-small.extern::after, button.dso-tertiary.dso-extra-small.download::after, button.dso-tertiary.dso-extra-small.dso-spinner::before, label.dso-tertiary.dso-extra-small dso-icon, label.dso-tertiary.dso-extra-small.extern::after, label.dso-tertiary.dso-extra-small.download::after, label.dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-tertiary.dso-extra-small.dso-spinner-left::before, button.dso-tertiary.dso-extra-small.dso-spinner-left::before, label.dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-tertiary.dso-extra-small.dso-spinner-right::after, button.dso-tertiary.dso-extra-small.dso-spinner-right::after, label.dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-tertiary.dso-extra-small, button.dso-tertiary.dso-extra-small, label.dso-tertiary.dso-extra-small { padding-block: 9px; } a.dso-tertiary dso-icon:has(+ span:not(.sr-only)), button.dso-tertiary dso-icon:has(+ span:not(.sr-only)), label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } a.dso-tertiary span:not(.sr-only) + dso-icon, button.dso-tertiary span:not(.sr-only) + dso-icon, label.dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } a.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary dso-icon + span:not(.sr-only), label.dso-tertiary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } a.dso-tertiary, button.dso-tertiary, label.dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dt-button-padding-block-tertiary, 0); background-color: transparent; } a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right, button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right, label.dso-tertiary[disabled].dso-spinner-left, label.dso-tertiary[disabled].dso-spinner-right { color: #39870c; } a.dso-tertiary:not([disabled]):hover, button.dso-tertiary:not([disabled]):hover, label.dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } a.dso-tertiary.dso-align, button.dso-tertiary.dso-align, label.dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } a.dso-tertiary.dso-truncate, button.dso-tertiary.dso-truncate, label.dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.dso-tertiary.dso-spinner-left::before, button.dso-tertiary.dso-spinner-left::before, label.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; } a.dso-tertiary.dso-spinner-right::after, button.dso-tertiary.dso-spinner-right::after, label.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; } a.dso-tertiary dso-icon + span:not(.sr-only), a.dso-tertiary span:not(.sr-only) + dso-icon, button.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon, label.dso-tertiary dso-icon + span:not(.sr-only), label.dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right], button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right], label.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), label.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } a.dso-tertiary dso-icon, a.dso-tertiary span, button.dso-tertiary dso-icon, button.dso-tertiary span, label.dso-tertiary dso-icon, label.dso-tertiary span { vertical-align: middle; } a.dso-tertiary.extern::after, a.dso-tertiary.download::after, button.dso-tertiary.extern::after, button.dso-tertiary.download::after, label.dso-tertiary.extern::after, label.dso-tertiary.download::after { position: relative; inset-block-start: -2px; } a.dso-tertiary.download::after, button.dso-tertiary.download::after, label.dso-tertiary.download::after { background: url(\"./di.svg#download\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-tertiary.download[disabled]::after, button.dso-tertiary.download[disabled]::after, label.dso-tertiary.download[disabled]::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\")); } a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after, button.dso-tertiary.download:not([disabled]):hover::after, button.dso-tertiary.download:not([disabled]):active::after, label.dso-tertiary.download:not([disabled]):hover::after, label.dso-tertiary.download:not([disabled]):active::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\")); } a.dso-tertiary.extern::after, button.dso-tertiary.extern::after, label.dso-tertiary.extern::after { background: url(\"./di.svg#external-link\") no-repeat center; background-size: cover; block-size: 24px; vertical-align: top; inline-size: 24px; } a.dso-tertiary.extern[disabled]::after, button.dso-tertiary.extern[disabled]::after, label.dso-tertiary.extern[disabled]::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\")); } a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after, button.dso-tertiary.extern:not([disabled]):hover::after, button.dso-tertiary.extern:not([disabled]):active::after, label.dso-tertiary.extern:not([disabled]):hover::after, label.dso-tertiary.extern:not([disabled]):active::after { background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\")); } a.dso-map, button.dso-map, label.dso-map { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } a.dso-map:focus, a.dso-map:focus-visible, button.dso-map:focus, button.dso-map:focus-visible, label.dso-map:focus, label.dso-map:focus-visible { outline-offset: 2px; } a.dso-map:active, button.dso-map:active, label.dso-map:active { outline: 0; } a.dso-map, button.dso-map, label.dso-map { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); float: var(--_dt-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dt-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } a.dso-map:hover, button.dso-map:hover, label.dso-map:hover { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); float: var(--_dt-button-float-secondary, none); } a.dso-map:active, button.dso-map:active, label.dso-map:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); float: var(--_dt-button-float-secondary, none); } a.dso-map[disabled], a.dso-map[disabled]:hover, button.dso-map[disabled], button.dso-map[disabled]:hover, label.dso-map[disabled], label.dso-map[disabled]:hover { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); float: var(--_dt-button-float-secondary, none); } a.dso-map.dso-small, button.dso-map.dso-small, label.dso-map.dso-small { line-height: 1rem; } a.dso-map.dso-small dso-icon, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before, button.dso-map.dso-small dso-icon, button.dso-map.dso-small.extern::after, button.dso-map.dso-small.download::after, button.dso-map.dso-small.dso-spinner::before, label.dso-map.dso-small dso-icon, label.dso-map.dso-small.extern::after, label.dso-map.dso-small.download::after, label.dso-map.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-map.dso-small.dso-spinner-left::before, button.dso-map.dso-small.dso-spinner-left::before, label.dso-map.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-map.dso-small.dso-spinner-right::after, button.dso-map.dso-small.dso-spinner-right::after, label.dso-map.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-map.dso-extra-small, button.dso-map.dso-extra-small, label.dso-map.dso-extra-small { line-height: 1rem; } a.dso-map.dso-extra-small dso-icon, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before, button.dso-map.dso-extra-small dso-icon, button.dso-map.dso-extra-small.extern::after, button.dso-map.dso-extra-small.download::after, button.dso-map.dso-extra-small.dso-spinner::before, label.dso-map.dso-extra-small dso-icon, label.dso-map.dso-extra-small.extern::after, label.dso-map.dso-extra-small.download::after, label.dso-map.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } a.dso-map.dso-extra-small.dso-spinner-left::before, button.dso-map.dso-extra-small.dso-spinner-left::before, label.dso-map.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } a.dso-map.dso-extra-small.dso-spinner-right::after, button.dso-map.dso-extra-small.dso-spinner-right::after, label.dso-map.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } a.dso-map.dso-extra-small, button.dso-map.dso-extra-small, label.dso-map.dso-extra-small { padding-block: 9px; } a.dso-map dso-icon:has(+ span:not(.sr-only)), button.dso-map dso-icon:has(+ span:not(.sr-only)), label.dso-map dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } a.dso-map span:not(.sr-only) + dso-icon, button.dso-map span:not(.sr-only) + dso-icon, label.dso-map span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } a.dso-map dso-icon + span:not(.sr-only), button.dso-map dso-icon + span:not(.sr-only), label.dso-map dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } a.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled], button.dso-map.dso-spinner-left[disabled], button.dso-map.dso-spinner-right[disabled], label.dso-map.dso-spinner-left[disabled], label.dso-map.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } a.dso-map.dso-spinner-left::before, button.dso-map.dso-spinner-left::before, label.dso-map.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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-map.dso-spinner-left:not([disabled]):hover::before, button.dso-map.dso-spinner-left:not([disabled]):hover::before, label.dso-map.dso-spinner-left:not([disabled]):hover::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: %23fff; 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: top; inline-size: 24px; margin-inline-end: 8px; } a.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, button.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before { block-size: 16px; inline-size: 16px; } a.dso-map.dso-spinner-right::after, button.dso-map.dso-spinner-right::after, label.dso-map.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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-map.dso-spinner-right:not([disabled]):hover::after, button.dso-map.dso-spinner-right:not([disabled]):hover::after, label.dso-map.dso-spinner-right:not([disabled]):hover::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: %23fff; 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: top; inline-size: 24px; margin-inline-start: 8px; } a.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, button.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, label.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after { block-size: 16px; inline-size: 16px; } a.dso-map, button.dso-map, label.dso-map { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); border: 0; font-weight: 600; margin-inline-end: 16px; padding-block: 8px; padding-inline: 16px; white-space: nowrap; } a.dso-map:focus, a.dso-map:focus-visible, button.dso-map:focus, button.dso-map:focus-visible, label.dso-map:focus, label.dso-map:focus-visible { outline-offset: -1px; } a.dso-map:has(span.sr-only):has(dso-icon), button.dso-map:has(span.sr-only):has(dso-icon), label.dso-map:has(span.sr-only):has(dso-icon) { padding: 8px; min-inline-size: auto; block-size: 40px; inline-size: 40px; } a.dso-primary, a.dso-primary:hover, a.dso-primary:visited, a.dso-primary:focus-visible { color: #fff; text-decoration: none; } a.dso-secondary { text-decoration: none; } a.dso-secondary, a.dso-secondary:visited { color: #39870c; } a.dso-secondary:hover, a.dso-secondary:focus-visible { color: #275937; text-decoration: none; } a.dso-tertiary { text-decoration: none; } a.dso-tertiary, a.dso-tertiary:visited { color: #39870c; } .dso-primary + .dso-primary, .dso-primary + .dso-secondary, .dso-primary + .dso-tertiary, .dso-secondary + .dso-primary, .dso-secondary + .dso-secondary, .dso-secondary + .dso-tertiary, .dso-tertiary + .dso-primary, .dso-tertiary + .dso-secondary, .dso-tertiary + .dso-tertiary { margin-block-start: var(--_dt-button-after-button-margin-block-start, 0); margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px); } :host { background-color: #fff; border: 1px solid #ccc; inset-block-end: 0; display: block; font-family: Asap, sans-serif; position: absolute; inset-block-start: 0; inset-inline-start: 100%; transition: transform 300ms ease; inline-size: 300px; } , ::after, *::before { box-sizing: border-box; } :host([open]) { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); transform: translateX(-100%); } :host([open]) .toggle-visibility-button, :host([open]) .toggle-visibility-icon-button { display: none; } :host([open]) .zoom-buttons { inset-block-start: 16px; } .toggle-visibility-icon-button { display: none; } .toggle-visibility-button { position: absolute; inset-inline-end: calc(100% + 56px); inset-block-start: 16px; } .zoom-buttons { position: absolute; inset-inline-end: calc(100% + 16px); inset-block-start: 16px; } .close-button { padding: 0; position: absolute; inset-inline-end: 16px; inset-block-start: 16px; } section:not([hidden]) { display: flex; flex-direction: column; block-size: 100%; } header, .content { padding: 16px; } header { border-block-end: 1px solid #ccc; flex-grow: 0; position: relative; } header h2 { color: #275937; font-family: \"Asap\", sans-serif; line-height: 1; margin: 0; } @media screen and (max-width: 767px) { button.toggle-visibility-button { display: none; } .toggle-visibility-icon-button { display: inline-block; position: absolute; inset-block-start: 16px; inset-inline-end: calc(100% + 16px); } .zoom-buttons { inset-block-start: 72px; } }"}},[257,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]},void 0,{open:[{watchOpen:0}]}]);p=new WeakMap,f=new WeakMap,m=new WeakMap;const h=g,x=function(){"undefined"!=typeof customElements&&["dso-map-controls","dso-button-group","dso-icon","dso-icon-button","dso-scrollable"].forEach((o=>{switch(o){case"dso-map-controls":customElements.get(s(o))\|\|customElements.define(s(o),g);break;case"dso-button-group":customElements.get(s(o))\|\|d();break;case"dso-icon":customElements.get(s(o))\|\|i();break;case"dso-icon-button":customElements.get(s(o))\|\|l();break;case"dso-scrollable":customElements.get(s(o))\|\|c()}}))};export{h as DsoMapControls,x as defineCustomElement}

package/dist/components/dso-map-layer-object.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as t,Host as i,transformTag as a}from"@stencil/core/internal/client";import{W as s}from"./wrap-wijzigactie.functional-component.js";import{d}from"./slide-toggle.js";const c=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=r(this,"dsoActiveChange",7),this.dsoMouseEnter=r(this,"dsoMouseEnter",7),this.dsoMouseLeave=r(this,"dsoMouseLeave",7),this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:o})}}render(){return t(i,{key:"~~5e43b21016086382a183304e8ff6e8331bb8f369~~",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},t(s,{key:"~~90a46f2b5683cc195dfc19a3a2d6b271b64d1476~~",wijzigactie:this.wijzigactie},t("div",{key:"~~687ead499bcca5e92182b7adec0d47ed06854395~~",class:"map-layer-object"},t("div",{key:"~~2c77550f48d61b70ac33ea0959efb4e0ed1817a1~~"},t("slot",{key:"~~a8b600409b0a59a0f6ca0b64a37905df1d5a58dd~~",name:"symbol"})),t("div",{key:"~~77d474fe22ee43457a980982159dfab342c6b0f3~~",class:"map-layer-object-heading"},t("slot",{key:"~~0d5400e2402051d62b32cb24f835ce6fe83c0fa6~~"}),t("slot",{key:"~~2f7658aad660af52fd9ab042d50c147d0b1bebeb~~",name:"label"})),t("div",{key:"~~c23c0b8f09c8ea965f04744f7e919f15ba752a28~~",class:"slide-toggle-container"},t("dso-slide-toggle",{key:"~~7a55368d56bf2e11525b818678ac620342e83b15~~",accessibleLabel:"Toon op kaart",checked:this.active,onDsoActiveChange:this.handleActiveChange})))))}static get style(){return',::after,*::before{box-sizing:border-box}:host{display:block}:host ins,:host del{display:contents;text-decoration:none}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host([wijzigactie=voegtoe]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--~~_dso~~-ozon-content-toggletip-color:#000}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host([wijzigactie=verwijder]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--~~_dso~~-ozon-content-toggletip-color:#000}.map-layer-object{display:flex;justify-content:space-between;align-items:center;padding:2px;min-block-size:28px}.map-layer-object ::slotted([slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:24px;margin-block-start:0;margin-inline-end:8px;inline-size:27.6923076923px;overflow:hidden;position:relative}.map-layer-object-heading{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.map-layer-object .slide-toggle-container{display:flex;align-items:center;margin-inline-start:auto}.map-layer-object .slide-toggle-container dso-slide-toggle{display:flex;padding-block:0}'}},[257,"dso-map-layer-object",{active:[516],wijzigactie:[513]}]),l=c,n=function(){"undefined"!=typeof customElements&&["dso-map-layer-object","dso-slide-toggle"].forEach((o=>{switch(o){case"dso-map-layer-object":customElements.get(a(o))\|\|customElements.define(a(o),c);break;case"dso-slide-toggle":customElements.get(a(o))\|\|d()}}))};export{l as DsoMapLayerObject,n as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as t,Host as i,transformTag as a}from"@stencil/core/internal/client";import{W as d}from"./wrap-wijzigactie.functional-component.js";import{d as s}from"./slide-toggle.js";const c=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=r(this,"dsoActiveChange",7),this.dsoMouseEnter=r(this,"dsoMouseEnter",7),this.dsoMouseLeave=r(this,"dsoMouseLeave",7),this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:o})}}render(){return t(i,{key:"d3ae97e4927468933df545d3a96ba6e718e1e1ad",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},t(d,{key:"cd07ad344870b3094da446c7e4c0edd427e3d6ce",wijzigactie:this.wijzigactie},t("div",{key:"3072d3e742d38c6595cea979d9a1ddaa1d6d3e88",class:"map-layer-object"},t("div",{key:"c13e0ce235ecbb060ed54ce5341204abf0138e3d"},t("slot",{key:"df2c3fcbe76e66fb7f6b14c98f10081459a78578",name:"symbol"})),t("div",{key:"8c0bbd546f0e32de4027df6a5d952ddc7d4ce824",class:"map-layer-object-heading"},t("slot",{key:"e03b7b7d7d2d8ff5f5c0119927ec4b86caaa30b9"}),t("slot",{key:"18b2530ff6b7cb64444ca411543c931fa19e0ed9",name:"label"})),t("div",{key:"f072928ac1d7c21ceec10862770162d68a0ed99c",class:"slide-toggle-container"},t("dso-slide-toggle",{key:"2fa80350abcf2c8e843df84a009b82dd8cd28d34",accessibleLabel:"Toon op kaart",checked:this.active,onDsoActiveChange:this.handleActiveChange})))))}static get style(){return',::after,*::before{box-sizing:border-box}:host{display:block}:host ins,:host del{display:contents;text-decoration:none}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host([wijzigactie=voegtoe]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dt-ozon-content-toggletip-color:#000}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host([wijzigactie=verwijder]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dt-ozon-content-toggletip-color:#000}.map-layer-object{display:flex;justify-content:space-between;align-items:center;padding:2px;min-block-size:28px}.map-layer-object ::slotted([slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:24px;margin-block-start:0;margin-inline-end:8px;inline-size:27.6923076923px;overflow:hidden;position:relative}.map-layer-object-heading{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.map-layer-object .slide-toggle-container{display:flex;align-items:center;margin-inline-start:auto}.map-layer-object .slide-toggle-container dso-slide-toggle{display:flex;padding-block:0}'}},[257,"dso-map-layer-object",{active:[516],wijzigactie:[513]}]),l=c,n=function(){"undefined"!=typeof customElements&&["dso-map-layer-object","dso-slide-toggle"].forEach((o=>{switch(o){case"dso-map-layer-object":customElements.get(a(o))\|\|customElements.define(a(o),c);break;case"dso-slide-toggle":customElements.get(a(o))\|\|s()}}))};export{l as DsoMapLayerObject,n as defineCustomElement}

package/dist/components/dso-map-layer.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as t,transformTag as i}from"@stencil/core/internal/client";import{W as a}from"./wrap-wijzigactie.functional-component.js";import{d}from"./slide-toggle.js";const s=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=r(this,"dsoActiveChange",7),this.activatable=!1,this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:o})}}render(){return t(a,{key:"~~1888e355a80fef9de95b3dc4b009cf81f57dc85f~~",wijzigactie:this.wijzigactie},t("div",{key:"~~10359e02b7c768648cf228be389912ff124de2e1~~",class:"map-layer"},t("div",{key:"~~ea2d69b38b0769ba445b5858c825cf8161b1cb61~~",class:"map-layer-heading"},t("slot",{key:"~~8edb08c850e54d74173e5aa9b47124b4a19946c4~~",name:"name"}),t("slot",{key:"~~f559211fde9f1af6dda210d7e05fc1337716a562~~",name:"label"})),this.activatable&&t("div",{key:"~~884a1bfc55ae09eb434a7f663515ad3831fc9cdb~~",class:"slide-toggle-container"},t("dso-slide-toggle",{key:"~~2f85c2edd3b89ca15f323b881c6e780d6231bddc~~",accessibleLabel:"Toon op kaart",checked:this.active,onDsoActiveChange:this.handleActiveChange}))),t("slot",{key:"~~06fa74f16bc861262bcad8285e0432926178c075~~"}))}static get style(){return',::after,*::before{box-sizing:border-box}:host{display:block;padding:6px}:host ins,:host del{display:contents;text-decoration:none}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host([wijzigactie=voegtoe]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--~~_dso~~-ozon-content-toggletip-color:#000}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host([wijzigactie=verwijder]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--~~_dso~~-ozon-content-toggletip-color:#000}.map-layer{display:flex;justify-content:space-between;min-block-size:32px}.map-layer-heading{display:flex;flex-wrap:wrap;align-items:center;margin-block-end:8px}.map-layer-heading ::slotted([slot=name]){font-weight:600;line-height:1.375em;margin-inline-end:4px}.map-layer .slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}'}},[257,"dso-map-layer",{activatable:[516],active:[516],wijzigactie:[513]}]),c=s,l=function(){"undefined"!=typeof customElements&&["dso-map-layer","dso-slide-toggle"].forEach((o=>{switch(o){case"dso-map-layer":customElements.get(i(o))\|\|customElements.define(i(o),s);break;case"dso-slide-toggle":customElements.get(i(o))\|\|d()}}))};export{c as DsoMapLayer,l as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as t,transformTag as i}from"@stencil/core/internal/client";import{W as a}from"./wrap-wijzigactie.functional-component.js";import{d}from"./slide-toggle.js";const s=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=r(this,"dsoActiveChange",7),this.activatable=!1,this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:o})}}render(){return t(a,{key:"da8857b71f2e5546c35a9449393a6696d7fe888e",wijzigactie:this.wijzigactie},t("div",{key:"5a65e6afedfa0b591a6bbb57d41831ddf4a7188b",class:"map-layer"},t("div",{key:"6f552eab820bab4848a80e86c879b6fbf34e06ef",class:"map-layer-heading"},t("slot",{key:"7b4480d6d6876e6b7e0ee6d712333307b1a37aa7",name:"name"}),t("slot",{key:"7ce6dfc406b9e0a3bcbefccdc6b94cda1e8bb300",name:"label"})),this.activatable&&t("div",{key:"d800d425deb67f31d12f461310a1fe8e8fc57025",class:"slide-toggle-container"},t("dso-slide-toggle",{key:"a854995e89971a6e8c6201afe98d0973d1093ef2",accessibleLabel:"Toon op kaart",checked:this.active,onDsoActiveChange:this.handleActiveChange}))),t("slot",{key:"edcc28c7ee97bb62db8a2b869c044fc00fd94703"}))}static get style(){return',::after,*::before{box-sizing:border-box}:host{display:block;padding:6px}:host ins,:host del{display:contents;text-decoration:none}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host([wijzigactie=voegtoe]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dt-ozon-content-toggletip-color:#000}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host([wijzigactie=verwijder]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dt-ozon-content-toggletip-color:#000}.map-layer{display:flex;justify-content:space-between;min-block-size:32px}.map-layer-heading{display:flex;flex-wrap:wrap;align-items:center;margin-block-end:8px}.map-layer-heading ::slotted([slot=name]){font-weight:600;line-height:1.375em;margin-inline-end:4px}.map-layer .slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}'}},[257,"dso-map-layer",{activatable:[516],active:[516],wijzigactie:[513]}]),c=s,l=function(){"undefined"!=typeof customElements&&["dso-map-layer","dso-slide-toggle"].forEach((o=>{switch(o){case"dso-map-layer":customElements.get(i(o))\|\|customElements.define(i(o),s);break;case"dso-slide-toggle":customElements.get(i(o))\|\|d()}}))};export{c as DsoMapLayer,l as defineCustomElement}

package/dist/components/dso-map-message.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as r,h as e,transformTag as a}from"@stencil/core/internal/client";import{d as t}from"./icon.js";const s={success:"status-success",error:"status-error"},n=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.hasActions=!1,this.handleActionsSlotChange=o=>{const r=o.target;r instanceof HTMLSlotElement&&(this.hasActions=r.assignedElements().length>0)}}render(){const o=this.variant?s[this.variant]:void 0;return e("div",{key:"~~f61bb20b1cb29cd29cd848a1ce23a469628a70f1~~",class:{"map-message-content":!0,"has-icon":void 0!==o,"has-actions":this.hasActions},role:"error"===this.variant?"alert":"status","aria-atomic":"true"},e("div",{key:"~~6bb520bafce05b3d30ccf74d051b56f13e0deded~~",class:"map-message-body"},o&&e("dso-icon",{key:"~~562d40cfd80902b3420bca2f73a395562ed6bd53~~",class:"map-message-icon",icon:o,"aria-hidden":"true"}),e("span",{key:"~~a11113a808c8ad7c77568e086288cfd24530adf3~~",class:"map-message-text"},e("slot",{key:"~~322dec4055e69936249f05862f4cb63da4da1277~~",name:"message"}))),e("slot",{key:"~~b2e023741280c36794784e4aa86c029c981db4cf~~",name:"actions",onSlotchange:this.handleActionsSlotChange}))}static get style(){return',::after,::before{box-sizing:border-box}:host{display:block}.map-message-content{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.map-message-content a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.map-message-content a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.map-message-content a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.map-message-content a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}.map-message-content{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:rgba(0, 0, 0, 0.8);color:#fff;padding-inline:24px;padding-block:16px;inline-size:fit-content;max-inline-size:100%;overflow-wrap:break-word}.map-message-content.has-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-inline-start:calc(24px + 8px + 16px);padding-inline-end:16px}.map-message-content .map-message-body{position:relative}.map-message-content .map-message-body .map-message-icon{position:absolute;inset-inline-start:calc((24px + 8px) -1);inset-block-start:0}.map-message-content slot[name=actions]{display:flex;flex-wrap:wrap;gap:16px}::slotted(button){margin-inline-start:0 !important}'}},[257,"dso-map-message",{variant:[513],hasActions:[32]}]),d=n,c=function(){"undefined"!=typeof customElements&&["dso-map-message","dso-icon"].forEach((o=>{switch(o){case"dso-map-message":customElements.get(a(o))\|\|customElements.define(a(o),n);break;case"dso-icon":customElements.get(a(o))\|\|t()}}))};export{d as DsoMapMessage,c as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as e,h as r,transformTag as a}from"@stencil/core/internal/client";import{d as t}from"./icon.js";const s={success:"status-success",error:"status-error"},n=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.hasActions=!1,this.handleActionsSlotChange=o=>{const e=o.target;e instanceof HTMLSlotElement&&(this.hasActions=e.assignedElements().length>0)}}render(){const o=this.variant?s[this.variant]:void 0;return r("div",{key:"4cb55bf66c8b792e49a4464005b513871823e255",class:{"map-message-content":!0,"has-icon":void 0!==o,"has-actions":this.hasActions},role:"error"===this.variant?"alert":"status","aria-atomic":"true"},r("div",{key:"bef35edb27a8006736f6c86be8e5f4182e8d5c15",class:"map-message-body"},o&&r("dso-icon",{key:"392f466099016711116080a7f17a2cdbfa252f12",class:"map-message-icon",icon:o,"aria-hidden":"true"}),r("span",{key:"20ad46a9b1ffaf10ebe3eabb029d43f7d6d9f9f4",class:"map-message-text"},r("slot",{key:"2639f290f94618fb0af88e46488f3fdac1328775",name:"message"}))),r("slot",{key:"6b65e022ba2bf0d536654fe2cd8030c8143186e7",name:"actions",onSlotchange:this.handleActionsSlotChange}))}static get style(){return',::after,::before{box-sizing:border-box}:host{display:block}.map-message-content{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.map-message-content a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.map-message-content a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.map-message-content a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.map-message-content a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}.map-message-content{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:rgba(0, 0, 0, 0.8);color:#fff;padding-inline:24px;padding-block:16px;inline-size:fit-content;max-inline-size:100%;overflow-wrap:break-word}.map-message-content.has-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-inline-start:calc(24px + 8px + 16px);padding-inline-end:16px}.map-message-content .map-message-body{position:relative}.map-message-content .map-message-body .map-message-icon{position:absolute;inset-inline-start:calc((24px + 8px) -1);inset-block-start:0}.map-message-content slot[name=actions]{display:flex;flex-wrap:wrap;gap:16px}::slotted(button){margin-inline-start:0 !important}'}},[257,"dso-map-message",{variant:[513],hasActions:[32]}]),d=n,i=function(){"undefined"!=typeof customElements&&["dso-map-message","dso-icon"].forEach((o=>{switch(o){case"dso-map-message":customElements.get(a(o))\|\|customElements.define(a(o),n);break;case"dso-icon":customElements.get(a(o))\|\|t()}}))};export{d as DsoMapMessage,i as defineCustomElement}

package/dist/components/dso-map-overlays.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as s,createEvent as o,h as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./i18n.js";import{d as n}from"./icon.js";import{d as l}from"./icon-button.js";import{d as r}from"./info.js";import{d as c}from"./info-button.js";import{d}from"./scrollable.js";import{d as b}from"./selectable.js";import{v as m}from"./v4.js";const f={en:{"dso-map-overlays":{title:"Maplayers"}},nl:{"dso-map-overlays":{title:"Kaartlagen"}}},h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoToggleOverlay=o(this,"dsoToggleOverlay",7),this.selectableRefs={},this.group=m(),this.text=i((()=>this.host),f)}overlayChangeHandler(e,s){const{checked:o}=s.detail;this.dsoToggleOverlay.emit({overlay:e,checked:o})}componentDidRender(){this.overlays.filter((e=>!e.disabled&&!0===this.previousOverlays?.find((s=>s.id===e.id))?.disabled)).forEach((e=>{this.selectableRefs[e.id]?.toggleInfo(!1)})),this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs)delete this.selectableRefs[e];return t("fieldset",{key:"~~2092eeaf0e10ac4d8836e097895570e1457a4c3a~~",class:"form-group dso-checkboxes"},t("legend",{key:"~~fdb0cec1cd8deee591c8b83b87902009f1817bda~~",class:"sr-only"},"Kaartlagen"),t("div",{key:"~~d96f4e9495957dff19ce17bc26948a97b2a1e524~~",class:"dso-label-container"},t("span",{key:"~~2ee2223b049367caab7713e011e9d7a0fec50b8a~~",class:"control-label","aria-hidden":"true"},this.text("title"))),t("div",{key:"~~8649873d384127bfb109459a8b523bc6a480a199~~",class:"dso-field-container"},this.overlays.map((e=>t("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?t("p",{slot:"info"},e.info):null)))))}get host(){return this}static get style(){return":host{display:block},::after,*::before{box-sizing:border-box}.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)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}"}},[1,"dso-map-overlays",{group:[1],overlays:[16]}]),p=h,u=function(){"undefined"!=typeof customElements&&["dso-map-overlays","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((e=>{switch(e){case"dso-map-overlays":customElements.get(a(e))\|\|customElements.define(a(e),h);break;case"dso-icon":customElements.get(a(e))\|\|n();break;case"dso-icon-button":customElements.get(a(e))\|\|l();break;case"dso-info":customElements.get(a(e))\|\|r();break;case"dso-info-button":customElements.get(a(e))\|\|c();break;case"dso-scrollable":customElements.get(a(e))\|\|d();break;case"dso-selectable":customElements.get(a(e))\|\|b()}}))};export{p as DsoMapOverlays,u as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as s,createEvent as o,h as t,transformTag as i}from"@stencil/core/internal/client";import{i as a}from"./i18n.js";import{d as n}from"./icon.js";import{d as l}from"./icon-button.js";import{d as r}from"./info.js";import{d as c}from"./info-button.js";import{d}from"./scrollable.js";import{d as b}from"./selectable.js";import{v as m}from"./v4.js";const f={en:{"dso-map-overlays":{title:"Maplayers"}},nl:{"dso-map-overlays":{title:"Kaartlagen"}}},h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoToggleOverlay=o(this,"dsoToggleOverlay",7),this.selectableRefs={},this.group=m(),this.text=a((()=>this.host),f)}overlayChangeHandler(e,s){const{checked:o}=s.detail;this.dsoToggleOverlay.emit({overlay:e,checked:o})}componentDidRender(){this.overlays.filter((e=>!e.disabled&&!0===this.previousOverlays?.find((s=>s.id===e.id))?.disabled)).forEach((e=>{this.selectableRefs[e.id]?.toggleInfo(!1)})),this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs)delete this.selectableRefs[e];return t("fieldset",{key:"930f973dafb8b329b93ead220ee828cc91a0235a",class:"form-group dso-checkboxes"},t("legend",{key:"f3dbb07e4e45417db260fc490e8012cc2ee5444d",class:"sr-only"},"Kaartlagen"),t("div",{key:"e12f2026648cbd6341b0954c1754a3563ac63126",class:"dso-label-container"},t("span",{key:"3cf899c2f82901d691eed720b538e60f305c6d15",class:"control-label","aria-hidden":"true"},this.text("title"))),t("div",{key:"1a951fbb61b586aa6314ea62e3ed25d8b84809ed",class:"dso-field-container"},this.overlays.map((e=>t("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?t("p",{slot:"info"},e.info):null)))))}get host(){return this}static get style(){return":host{display:block},::after,*::before{box-sizing:border-box}.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)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}"}},[1,"dso-map-overlays",{group:[1],overlays:[16]}]),p=h,u=function(){"undefined"!=typeof customElements&&["dso-map-overlays","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((e=>{switch(e){case"dso-map-overlays":customElements.get(i(e))\|\|customElements.define(i(e),h);break;case"dso-icon":customElements.get(i(e))\|\|n();break;case"dso-icon-button":customElements.get(i(e))\|\|l();break;case"dso-info":customElements.get(i(e))\|\|r();break;case"dso-info-button":customElements.get(i(e))\|\|c();break;case"dso-scrollable":customElements.get(i(e))\|\|d();break;case"dso-selectable":customElements.get(i(e))\|\|b()}}))};export{p as DsoMapOverlays,u as defineCustomElement}

package/dist/components/dso-mark-bar.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as o,createEvent as i,h as n,transformTag as t}from"@stencil/core/internal/client";import{d as s}from"./icon.js";import{d as a}from"./icon-button.js";const r=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoInput=i(this,"dsoInput",3),this.dsoNext=i(this,"dsoNext",3),this.dsoPrevious=i(this,"dsoPrevious",3),this.dsoClear=i(this,"dsoClear",3),this.label="Zoeken in document",this.handleInput=e=>{e.target instanceof HTMLInputElement&&this.dsoInput.emit({originalEvent:e,value:e.target.value})},this.handleNext=e=>{this.dsoNext.emit({originalEvent:e})},this.handlePrevious=e=>{this.dsoPrevious.emit({originalEvent:e})},this.handleClear=e=>{this.dsoClear.emit({originalEvent:e})},this.handleKeyDown=e=>{"Enter"===e.key&&this.handleNext(e)}}async dsoFocus(e={}){this.inputElement?.focus(),e.select&&this.inputElement?.select()}render(){const e=this.current\|\|0,o=this.totalCount\|\|0;return n("div",{key:"~~d09aa94ffd06188445f96c64a4a3719d37949d3e~~",class:"dso-mark-bar"},n("div",{key:"~~d89230751206bd78aeacf8c56c8c171ab55a7096~~",class:"dso-mark-bar-input"},n("input",{key:"~~dab47647c66731e7b669e1768508c2d994e33778~~",type:"text",id:"search-input",value:this.value,onInput:this.handleInput,onKeyDown:this.handleKeyDown,placeholder:" ",ref:e=>this.inputElement=e}),n("label",{key:"~~b43e1efa704876deb197853f2f8dbba146597a88~~",htmlFor:"search-input"},n("dso-icon",{key:"~~c6617679b5d34671e068c766a0236b5cdc12c893~~",class:"dso-search-icon",icon:"search"}),n("span",{key:"~~51381737c0a3a999ddc47ae60050a032ed1051e6~~",class:"label-text"},this.label)),n("dso-icon-button",{key:"~~acdb087e9a2e3482ddf9b799b5143b79e1601500~~",icon:"cross",variant:"tertiary",label:"Zoekopdracht legen",onDsoClick:e=>this.handleClear(e.detail.originalEvent)})),n("div",{key:"~~85addfb20a5c2f40ee7a62dcbde354f407472b1c~~",class:"dso-button-container"},n("span",{key:"~~7f572933ce9d4085c5648fe923b122f5462b6706~~",class:"divider"}),n("dso-icon-button",{key:"~~022a07592d02e6b015915129d2c333a8a976ffa4~~",icon:"chevron-up",variant:"tertiary",label:"Vorig zoekresultaat",onDsoClick:e=>this.handlePrevious(e.detail.originalEvent),disabled:e<=1}),n("span",{key:"~~12dad58f34bcde382a978617a53b3d89aac5994e~~"},e,"/",o),n("dso-icon-button",{key:"~~d03ec5b8cefa4bec0f00ef59d94003a1fc0faddb~~",icon:"chevron-down",variant:"tertiary",label:"Volgend zoekresultaat",onDsoClick:e=>this.handleNext(e.detail.originalEvent),disabled:e>=o})))}static get style(){return",::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.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)}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container dso-icon-button{--dso-icon-button-tertiary-border:0;cursor:pointer}.dso-button-container dso-icon-button:disabled{color:#ccc;cursor:default}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}"}},[1,"dso-mark-bar",{value:[1],label:[1],current:[2],totalCount:[2,"total-count"],dsoFocus:[64]}]),d=r,l=function(){"undefined"!=typeof customElements&&["dso-mark-bar","dso-icon","dso-icon-button"].forEach((e=>{switch(e){case"dso-mark-bar":customElements.get(t(e))\|\|customElements.define(t(e),r);break;case"dso-icon":customElements.get(t(e))\|\|s();break;case"dso-icon-button":customElements.get(t(e))\|\|a()}}))};export{d as DsoMarkBar,l as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as o,createEvent as i,h as t,transformTag as n}from"@stencil/core/internal/client";import{d as s}from"./icon.js";import{d as a}from"./icon-button.js";const r=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoInput=i(this,"dsoInput",3),this.dsoNext=i(this,"dsoNext",3),this.dsoPrevious=i(this,"dsoPrevious",3),this.dsoClear=i(this,"dsoClear",3),this.label="Zoeken in document",this.handleInput=e=>{e.target instanceof HTMLInputElement&&this.dsoInput.emit({originalEvent:e,value:e.target.value})},this.handleNext=e=>{this.dsoNext.emit({originalEvent:e})},this.handlePrevious=e=>{this.dsoPrevious.emit({originalEvent:e})},this.handleClear=e=>{this.dsoClear.emit({originalEvent:e})},this.handleKeyDown=e=>{"Enter"===e.key&&this.handleNext(e)}}async dsoFocus(e={}){this.inputElement?.focus(),e.select&&this.inputElement?.select()}render(){const e=this.current\|\|0,o=this.totalCount\|\|0;return t("div",{key:"ff07927d93ae0d068fa8121fa69c1585f2a0114b",class:"dso-mark-bar"},t("div",{key:"44a0d245a2b41b8273beb93e4a4305cdd2d7b6bc",class:"dso-mark-bar-input"},t("input",{key:"2177523b24bfa60d47d1ebe47c85cf05308dfa8f",type:"text",id:"search-input",value:this.value,onInput:this.handleInput,onKeyDown:this.handleKeyDown,placeholder:" ",ref:e=>this.inputElement=e}),t("label",{key:"39b70427cae09819a161581234ddfb1515742c42",htmlFor:"search-input"},t("dso-icon",{key:"d8968f09af42566e3f02b5f5043f93e38e317792",class:"dso-search-icon",icon:"search"}),t("span",{key:"9b275ee67a4f774e6e21cf5d58c45409c97970a9",class:"label-text"},this.label)),t("dso-icon-button",{key:"fb9d18b0f479cb7ddd1acadfbb8b7df46665d625",icon:"cross",variant:"tertiary",label:"Zoekopdracht legen",onDsoClick:e=>this.handleClear(e.detail.originalEvent)})),t("div",{key:"e952339d0dcbac32c76c3167202ef17f5744e331",class:"dso-button-container"},t("span",{key:"e447ef9716b9cd3560bb406654ac5a6c7536aaee",class:"divider"}),t("dso-icon-button",{key:"2a628dc6844f53f2c788c77225b7e9c8b4405ef1",icon:"chevron-up",variant:"tertiary",label:`Vorig zoekresultaat ${e-1}/${o}`,onDsoClick:e=>this.handlePrevious(e.detail.originalEvent),disabled:e<=1}),t("span",{key:"6a2a9bb6601ed528836f18a92643d5c226e021e6",role:"status"},e,"/",o),t("dso-icon-button",{key:"ef03f237fedff5486a2c3b17052664c49620bf2d",icon:"chevron-down",variant:"tertiary",label:`Volgend zoekresultaat ${e+1}/${o}`,onDsoClick:e=>this.handleNext(e.detail.originalEvent),disabled:e>=o})))}static get style(){return",::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.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)}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container dso-icon-button{--dso-icon-button-tertiary-border:0;cursor:pointer}.dso-button-container dso-icon-button:disabled{color:#ccc;cursor:default}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}"}},[1,"dso-mark-bar",{value:[1],label:[1],current:[2],totalCount:[2,"total-count"],dsoFocus:[64]}]),d=r,l=function(){"undefined"!=typeof customElements&&["dso-mark-bar","dso-icon","dso-icon-button"].forEach((e=>{switch(e){case"dso-mark-bar":customElements.get(n(e))\|\|customElements.define(n(e),r);break;case"dso-icon":customElements.get(n(e))\|\|s();break;case"dso-icon-button":customElements.get(n(e))\|\|a()}}))};export{d as DsoMarkBar,l as defineCustomElement}

package/dist/components/dso-modal.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{~~proxyCustomElement~~ as o,~~HTMLElement as~~ d~~,createEvent~~ as s~~,h as l,transformTag as i~~}from"~~@stencil/core/internal/client";import{g as a}from"~~./~~get-active-element~~.js";~~import{i as e}from"./i18n.js";import{d as t}from"./icon.js";import{d as r}from"./icon-button.js";import{d as n}from"./scrollable.js";import{v as c}from"./v4.js";~~const m=~~{en:{"dso-modal":{close:"Close",dialog:"Dialog"}},nl:{"dso-modal":{close:"Sluiten",dialog:"Dialoog"}}},b=~~o~~(class extends d{constructor(o){super(),!1!==o&&this.__registerHost()~~,~~this.__attachShadow(),this.dsoClose~~=s(this,"dsoClose",7),this.ariaId=c(),this.dialogRole="dialog",this.returnFocus=void 0,this.closable=!1,this.text=e((()=>this.host),m),this.blockEscapeKey=o=>{"Escape"===o.key&&(o.preventDefault(),this.closable&&this.dsoClose.emit({originalEvent:o}))}}get hasFooter(){return null!==this.host.querySelector("[slot='footer']")}componentDidLoad(){if(this.htmlDialogElement?.isConnected){const o=a();o instanceof d&&(this.returnFocusElement=o),this.htmlDialogElement.showModal()}}disconnectedCallback(){this.htmlDialogElement?.close(),!1!==this.returnFocus&&(this.returnFocus??this.returnFocusElement)?.focus()}handleDialogClick(o){this.closable&&o.target===this.htmlDialogElement&&this.dsoClose.emit({originalEvent:o})}render(){return l("dialog",{key:"3f82d0319743f333024c6e9924c08d48f85b738b",class:"dso-modal",role:this.dialogRole??void 0,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onClick:o=>this.handleDialogClick(o),onKeyDown:o=>this.blockEscapeKey(o)},l("div",{key:"d94bad5e57a1b0c0a84e1bf5e27570df1ec00f20",class:"dso-dialog",role:"document"},this.modalTitle?l("div",{class:"dso-header"},l("h2",{id:this.ariaId},this.modalTitle),this.closable&&l("dso-icon-button",{id:"close-modal",icon:"cross",variant:"tertiary",label:this.text("close"),onDsoClick:o=>this.dsoClose.emit({originalEvent:o})})):l("span",{class:"sr-only",id:this.ariaId},this.text("dialog")),l("dso-scrollable",{key:"954818bf78e2f2db6dd46232730fff39f9e73815"},l("div",{key:"5bc44af3ae7e08e92c7508d1c2989316e58079a5",class:"dso-body",tabIndex:0},l("slot",{key:"53ee09a3318fe5775d9f87d027818d6d4af2a13c",name:"body"}))),this.hasFooter&&l("div",{key:"21fd34229ad80c81071db82dc2fe97650fec545d",class:"dso-footer"},l("slot",{key:"77af70dbc6c274bd194bb0cfcac3563a8664d248",name:"footer"}))))}get host(){return this}static get style(){return"@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}},::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink: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)}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}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-modal .dso-header dso-icon-button{position:absolute;inset-block-start:22px;inset-inline-end:17px}"}},[257,"dso-modal",{fullscreen:[516],modalTitle:[1,"modal-title"],dialogRole:[1,"dialog-role"],returnFocus:[4,"return-focus"],closable:[4],ariaId:[32]}]),g=b,p=function(){"undefined"!=typeof customElements&&["dso-modal","dso-icon","dso-icon-button","dso-scrollable"].forEach((o=>{switch(o){case"dso-modal":customElements.get(i(o))\|\|customElements.define(i(o),b);break;case"dso-icon":customElements.get(i(o))\|\|t();break;case"dso-icon-button":customElements.get(i(o))\|\|r();break;case"dso-scrollable":customElements.get(i(o))\|\|n()}}))};export{g as DsoModal,p as defineCustomElement}
1	+ import{M as o,d as s}from"./modal.js";const a=o,m=s;export{a as DsoModal,m as defineCustomElement}