npm - @dso-toolkit/core - Versions diffs - 98.0.0 → 99.1.0 - Mend

@dso-toolkit/core 98.0.0 → 99.1.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 (529) 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:"3767d756451aedf5eaaf113b95ba04238c6353cf",class:a(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"2ef6ab47084da267f668b0f289a4f871ad2bd405",class:a(["dso-list-button",{"dso-selected":o,"dso-single-count":1===this.count}]),onClick:o=>this.handleSelectClick(o)},r("dso-selectable",{key:"cc90deb99e436cb5aec6e2b79c78b6d2638c2979",type:"checkbox",value:"list-button",name:"naam",checked:o,disabled:this.disabled},r("span",{key:"4eec507a94903ca0249936c59b777771a8034a92"},this.label,this.sublabel&&r("span",{key:"86885f43f4bbcd654825cc3f46d36cc9c8bff357",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"c7be4fd31d75018f4061914ca56b41a59455a7b2",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"6457cfeb3f53d3daed1a86824374bab62813e9c4",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"5e4aeb2f045d09442ed387545dc0fb72f07ac29b",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"9811009b6f9e11f59da85ba668c35fdc8b661858",class:"subcontent"},r("slot",{key:"8c98a84903bc805ddf536ad79fc21660a8abfa97",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"57459fb89a637ce7a922affb719b5aedcb1ea748",class:"dso-input-number"},this.count>1&&r(i,{key:"c4ba523b59a02519e378c455fa49eb35e6c1e2ef"},r("dso-icon-button",{key:"ae17b78aaaf1eb616ac645854d98a9024997a38a",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:"d0dbcbb567cb8686b83c5c489167ff715af595b6",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),r("dso-icon-button",{key:"02aec04db0d2944919ec41e4cfa87b2b7b0cbd97",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: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); float: var(--_dso-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dso-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 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(--_dso-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((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 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:"442edba27a99b9d35c98e98d41962e94d0b8e054",class:a(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"77c14a46db6fb4c5c35095a8f10a28339aedffa7",class:a(["dso-list-button",{"dso-selected":o,"dso-single-count":1===this.count}]),onClick:o=>this.handleSelectClick(o)},r("dso-selectable",{key:"5fb0f6d371f23008bfd162f40b96949c9e710d23",type:"checkbox",value:"list-button",name:"naam",checked:o,disabled:this.disabled},r("span",{key:"866575af2f598d1795bad098778153ccd84f8ff2"},this.label,this.sublabel&&r("span",{key:"35ec4dda7f219b166472ec5bb261c5be73ce0b63",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"9cf84fe5826746df38d8178a6740a680a4ef4cbd",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"83175e372d04d1a455dbad1e434f33e541f2f52a",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"999f3bca2e71d984efdf8082dc5c28bfd6aceef4",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"a69216cae841406387873c7558e52f11be674663",class:"subcontent"},r("slot",{key:"c7bdb35d41feaaf5684b9f90dda3d87716e58af9",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"7921e61e0a6c5f471603c7ce9cae81cd0d8b8356",class:"dso-input-number"},this.count>1&&r(i,{key:"bee2a17e37f9cdfb341c5c7a3ad497519d58c9bc"},r("dso-icon-button",{key:"75fffae9c8f3eb1a5ac63fa9f351dedefbeaf600",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:"b7f6582d5f81f3979423246cbddbb4e5ff1e4842",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),r("dso-icon-button",{key:"3a889058c9710ba9839e4b686e6494e4a3cbdf92",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: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); float: var(--_dso-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dso-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 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: 0.875rem; } .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(--_dso-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((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}

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:"~~b81409f6ea3f163348751237ba42a7e83f35b1e5~~",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}
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:"29bfc8cd84b58cb4212e83458128be6fd0a76996",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}from"./info.js";import{d as l}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:"~~31f28b8aac3b85899716c3d73739b8b048cce5c2~~",class:"form-group dso-radios"},t("legend",{key:"~~079f815943c707a94f8d2b969d3c34df168434b6~~",class:"sr-only"},"Achtergrond"),t("div",{key:"~~7a1d09b517fb8194a6b99ca732b6f7c1a42b2030~~",class:"dso-label-container"},t("span",{key:"~~b9308d0b67acbf8eeb31d61ada07ef78f6e76dbf~~",class:"control-label","aria-hidden":"true"},this.text("background"))),t("div",{key:"~~bd1f76d18a167732fe91f11e32c912aca525047f~~",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))\|\|d();break;case"dso-info-button":customElements.get(a(e))\|\|l();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}from"./info.js";import{d as l}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:"4844cb7dc1f22b46db47516b2482c67673eb70f7",class:"form-group dso-radios"},t("legend",{key:"b0acfbdfe97f083ed88bfdc12a3e5da85f71e7c7",class:"sr-only"},"Achtergrond"),t("div",{key:"6cf325954514f6279761f99ade9f6297fd0f2931",class:"dso-label-container"},t("span",{key:"924198ae3890df319ce186a44b44d59640b21d1e",class:"control-label","aria-hidden":"true"},this.text("background"))),t("div",{key:"fc609656c7c56a80d192ad7f68048a63b238777c",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))\|\|d();break;case"dso-info-button":customElements.get(a(e))\|\|l();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}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as e,createEvent as a,h as r,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,f,m,y,u,g,h,x=function(o,e,a,r,s){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!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"===r?s.call(o,a):s?s.value=a:e.set(o,a),a},v=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)};const k=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),y.set(this,void 0),u.set(this,void 0),g.set(this,"map-layers-panel"),h.set(this,"map-layers-title"),this.handlePanelKeyDown=o=>{"Escape"===o.key&&this.open&&(o.stopPropagation(),this.toggleVisibility(o))}}handleTransitionEnd(o){o.target===this.host&&"transform"===o.propertyName&&this.applyPostTransitionState()}watchOpen(o){this.clearPostTransitionTimeout(),this.hideContent=!1,x(this,y,window.setTimeout((()=>this.applyPostTransitionState()),350),"f")}async toggleVisibility(o){this.toggleVisibilityInternal(o)}toggleVisibilityInternal(o,e){!this.open&&e&&x(this,u,e,"f"),this.open=!this.open,this.dsoToggle.emit({originalEvent:o,open:this.open})}clearPostTransitionTimeout(){v(this,y,"f")&&(clearTimeout(v(this,y,"f")),x(this,y,void 0,"f"))}applyPostTransitionState(){this.clearPostTransitionTimeout(),this.open?v(this,m,"f")?.setFocus():(this.hideContent=!0,v(this,u,"f")===v(this,f,"f")?v(this,f,"f")?.setFocus():v(this,p,"f")?.focus())}disconnectedCallback(){this.clearPostTransitionTimeout()}render(){return r(s,{key:"05bdbea9b2dcccd5ff7c00ff86ab0380574e2984"},r("dso-icon-button",{key:"361d8c005de987d1951bb99578dceb43187d2c20",label:this.text("layersButton"),icon:"layers",variant:"map","aria-controls":v(this,g,"f"),"aria-expanded":this.open,tooltipPlacement:"left",class:"toggle-visibility-icon-button",onDsoClick:o=>this.toggleVisibilityInternal(o.detail.originalEvent,v(this,f,"f")),ref:o=>x(this,f,o,"f")}),r("button",{key:"814479558442016a5cf1fa65055f3bf7db67ca3a",type:"button",class:"dso-map toggle-visibility-button","aria-controls":v(this,g,"f"),"aria-expanded":this.open,onClick:o=>this.toggleVisibilityInternal(o,v(this,p,"f")),ref:o=>x(this,p,o,"f")},r("dso-icon",{key:"46e2c2d3ad0b1cd5fd76c7261b551d0792efd974",icon:"layers"}),r("span",{key:"6025452c96fbc3b986cc0068876b67fbafa68fb3"},this.text("layersButton"))),r("dso-button-group",{key:"95782cc53b0f58a5d59dc4b7871117e8806daac2",class:"zoom-buttons",direction:"column"},r("dso-icon-button",{key:"14febf43d64f07c9b8357205a08a080a19767a01",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:"46b17b414efe3f709ec64adf7728b36134a06b0d",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:"f435793c27bc67b6dfb705021b0d65b24bd7c973",id:v(this,g,"f"),hidden:this.hideContent,role:"region",onKeyDown:this.handlePanelKeyDown,"aria-labelledby":v(this,g,"f")},r("header",{key:"d2e12685e311d8bd6b950d5d3867869701e83220"},r("h2",{key:"fd7627224e1902c291c1228a12eb7ce46bca009f",id:v(this,h,"f"),tabIndex:-1},this.text("title")),r("dso-icon-button",{key:"431c3aee798a1ecebd517c11134ee94d35191db4",class:"close-button",label:this.text("hidePanel",{title:this.text("title")}),icon:"cross",variant:"tertiary",onDsoClick:o=>this.toggleVisibility(o.detail.originalEvent),ref:o=>x(this,m,o,"f")})),r("dso-scrollable",{key:"6e5cb3aaaa368095eea4bcecb2aad38bee0b1e64"},r("div",{key:"9dcbc527e104c6b5b959bcb545588422bbc0cab3",class:"content"},r("slot",{key:"b171683c04337836a024ff8020f64e9f1dc0a723"})))))}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(--_dso-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(--_dso-button-float-primary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-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(--_dso-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(--_dso-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(--_dso-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(--_dso-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(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-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(--_dso-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(--_dso-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(--_dso-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(--_dso-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(--_dso-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(--_dso-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } 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(--_dso-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(--_dso-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(--_dso-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, button.dso-tertiary, label.dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dso-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(--_dso-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(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-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(--_dso-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(--_dso-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(--_dso-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(--_dso-button-after-button-margin-block-start, 0); margin-inline-start: var(--_dso-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]},[[0,"transitionend","handleTransitionEnd"]],{open:[{watchOpen:0}]}]);p=new WeakMap,f=new WeakMap,m=new WeakMap,y=new WeakMap,u=new WeakMap,g=new WeakMap,h=new WeakMap;const w=k,B=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),k);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{w as DsoMapControls,B as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as e,createEvent as a,h as r,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,f,m,y,u,g,h,x=function(o,e,a,r,s){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!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"===r?s.call(o,a):s?s.value=a:e.set(o,a),a},v=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)};const k=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),y.set(this,void 0),u.set(this,void 0),g.set(this,"map-layers-panel"),h.set(this,"map-layers-title"),this.handlePanelKeyDown=o=>{"Escape"===o.key&&this.open&&(o.stopPropagation(),this.toggleVisibility(o))}}handleTransitionEnd(o){o.target===this.host&&"transform"===o.propertyName&&this.applyPostTransitionState()}watchOpen(o){this.clearPostTransitionTimeout(),this.hideContent=!1,x(this,y,window.setTimeout((()=>this.applyPostTransitionState()),350),"f")}async toggleVisibility(o){this.toggleVisibilityInternal(o)}toggleVisibilityInternal(o,e){!this.open&&e&&x(this,u,e,"f"),this.open=!this.open,this.dsoToggle.emit({originalEvent:o,open:this.open})}clearPostTransitionTimeout(){v(this,y,"f")&&(clearTimeout(v(this,y,"f")),x(this,y,void 0,"f"))}applyPostTransitionState(){this.clearPostTransitionTimeout(),this.open?v(this,m,"f")?.setFocus():(this.hideContent=!0,v(this,u,"f")===v(this,f,"f")?v(this,f,"f")?.setFocus():v(this,p,"f")?.focus())}disconnectedCallback(){this.clearPostTransitionTimeout()}render(){return r(s,{key:"b5613c0128da6dc889d909f0c8b923e581c72589"},r("dso-icon-button",{key:"444f1e007a61b852699d40965117c6f083eb416b",label:this.text("layersButton"),icon:"layers",variant:"map","aria-controls":v(this,g,"f"),"aria-expanded":this.open,tooltipPlacement:"left",class:"toggle-visibility-icon-button",onDsoClick:o=>this.toggleVisibilityInternal(o.detail.originalEvent,v(this,f,"f")),ref:o=>x(this,f,o,"f")}),r("button",{key:"50c496a3d31f767ed324341d9d7f83cafa6a9246",type:"button",class:"dso-map toggle-visibility-button","aria-controls":v(this,g,"f"),"aria-expanded":this.open,onClick:o=>this.toggleVisibilityInternal(o,v(this,p,"f")),ref:o=>x(this,p,o,"f")},r("dso-icon",{key:"912209fd160ae1e979e15bef3f0a020f5b232e5b",icon:"layers"}),r("span",{key:"79b628ca8331bef70b8c15576176895583edd8bb"},this.text("layersButton"))),r("dso-button-group",{key:"c690b9a34bef0d7a68bf38b22abd1707d9dc157b",class:"zoom-buttons",direction:"column"},r("dso-icon-button",{key:"23a699de08abec023e14fee7aaa82d88f29d26ed",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:"2b428ed044a22b08618c885ca96bc02efc3725a6",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:"92f97c6adc3e466ce3c8dfbcbf29e27a2e52c4c2",id:v(this,g,"f"),hidden:this.hideContent,role:"region",onKeyDown:this.handlePanelKeyDown,"aria-labelledby":v(this,g,"f")},r("header",{key:"405d312a529d19a98dd00696d92c077db17ac19f"},r("h2",{key:"30c65729ec16d6cee9c164a6bd5b575e512110a7",id:v(this,h,"f"),tabIndex:-1},this.text("title")),r("dso-icon-button",{key:"00e944ddbf73a462704c048d740bbae2ccbf0aff",class:"close-button",label:this.text("hidePanel",{title:this.text("title")}),icon:"cross",variant:"tertiary",onDsoClick:o=>this.toggleVisibility(o.detail.originalEvent),ref:o=>x(this,m,o,"f")})),r("dso-scrollable",{key:"4caa8628d4af029f69f887b4434365c6cd9a5fd0"},r("div",{key:"71f4998c5f3a8ac61bf13141648b699ead6eebec",class:"content"},r("slot",{key:"7d2e87c33d999cb0f05594c7d2114896e991da4d"})))))}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(--_dso-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(--_dso-button-float-primary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-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(--_dso-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(--_dso-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(--_dso-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-image: var(--_dso-di-download-wit); background-repeat: no-repeat; background-position: center; background-size: cover; block-size: 24px; inline-size: 24px; vertical-align: top; } a.dso-primary.extern::after, button.dso-primary.extern::after, label.dso-primary.extern::after { background-image: var(--_dso-di-external-link-wit); background-repeat: no-repeat; background-position: center; background-size: cover; block-size: 24px; inline-size: 24px; vertical-align: top; } 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(--_dso-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(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-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(--_dso-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(--_dso-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(--_dso-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-image: var(--_dso-di-download-grasgroen); background-repeat: no-repeat; background-position: center; background-size: cover; block-size: 24px; inline-size: 24px; vertical-align: top; } a.dso-secondary.download:hover::after, button.dso-secondary.download:hover::after, label.dso-secondary.download:hover::after { background-image: var(--_dso-di-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-download-grasgroen-40); } a.dso-secondary.extern::after, button.dso-secondary.extern::after, label.dso-secondary.extern::after { background-image: var(--_dso-di-external-link-grasgroen); background-repeat: no-repeat; background-position: center; background-size: cover; block-size: 24px; inline-size: 24px; vertical-align: top; } a.dso-secondary.extern:hover::after, button.dso-secondary.extern:hover::after, label.dso-secondary.extern:hover::after { background-image: var(--_dso-di-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-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(--_dso-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(--_dso-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(--_dso-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } 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(--_dso-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(--_dso-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(--_dso-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, button.dso-tertiary, label.dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dso-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-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-grasgroen)); background-repeat: no-repeat; background-position: center; background-size: cover; block-size: 24px; inline-size: 24px; vertical-align: top; } a.dso-tertiary.download[disabled]::after, button.dso-tertiary.download[disabled]::after, label.dso-tertiary.download[disabled]::after { background-image: var(--_dso-di-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-button-tertiary-download-icon, var(--_dso-di-download-bosgroen)); } a.dso-tertiary.extern::after, button.dso-tertiary.extern::after, label.dso-tertiary.extern::after { background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-grasgroen)); background-repeat: no-repeat; background-position: center; background-size: cover; block-size: 24px; inline-size: 24px; vertical-align: top; } a.dso-tertiary.extern[disabled]::after, button.dso-tertiary.extern[disabled]::after, label.dso-tertiary.extern[disabled]::after { background-image: var(--_dso-di-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-button-tertiary-external-link-icon, var(--_dso-di-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(--_dso-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(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-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(--_dso-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(--_dso-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(--_dso-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 { text-decoration: none; } a.dso-tertiary { text-decoration: none; } a.dso-tertiary, a.dso-tertiary:visited { color: var(--_dso-button-tertiary-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(--_dso-button-after-button-margin-block-start, 0); margin-inline-start: var(--_dso-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]},[[0,"transitionend","handleTransitionEnd"]],{open:[{watchOpen:0}]}]);p=new WeakMap,f=new WeakMap,m=new WeakMap,y=new WeakMap,u=new WeakMap,g=new WeakMap,h=new WeakMap;const w=k,B=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),k);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{w as DsoMapControls,B 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 c}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.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:"~~f5a2e342a98088445823c30b95c86ca0e333cd0b~~",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},t(c,{key:"~~a861ee396a4929c267482d4c4604339a93e74fe9~~",wijzigactie:this.wijzigactie},t("div",{key:"~~51d0e67727e44e04263d9ee47b1ee389207c3032~~",class:"map-layer-object"},t("div",{key:"~~e14df6cd0cec56ce2ddf4dd8f6404a1902aab49a~~"},t("slot",{key:"~~00b9b3eebdb7b17cbd6b22223b6de95a18b400eb~~",name:"symbol"})),t("div",{key:"~~f8447072b47bcf1ebfcc4892aea2a6595be3f594~~",class:"map-layer-object-heading"},t("slot",{key:"~~e7772cbc1181a3930f9cf064c8819f7cce691a25~~"}),t("slot",{key:"~~8b68f4120bc01727d36e19caaf90b8671e25f79e~~",name:"label"})),t("div",{key:"~~435201d75ccce8a8d7ac850045fcf9c7ce786692~~",class:"slide-toggle-container"},t("dso-slide-toggle",{key:"~~b213f8154ddffe927e163c54af14535224d979af~~",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(:not(:last-child)){margin-block-end:8px}: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-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_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-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_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;align-items:flex-start;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:1;flex-wrap:wrap;align-items:center;gap:4px;min-inline-size:0}.map-layer-object .slide-toggle-container{display:flex;align-items:center}.map-layer-object .slide-toggle-container dso-slide-toggle{display:flex;padding-block:0}'}},[257,"dso-map-layer-object",{active:[516],wijzigactie:[513]}]),n=s,l=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),s);break;case"dso-slide-toggle":customElements.get(a(o))\|\|d()}}))};export{n as DsoMapLayerObject,l as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as t,createEvent as e,h as r,Host as c,transformTag as d}from"@stencil/core/internal/client";import{W as i}from"./wrap-wijzigactie.functional-component.js";import{d as n}from"./slide-toggle.js";const a=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=e(this,"dsoActiveChange",7),this.dsoMouseEnter=e(this,"dsoMouseEnter",7),this.dsoMouseLeave=e(this,"dsoMouseLeave",7),this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:o})}}render(){return r(c,{key:"4a130bd1a1101dcad1e43c85e726bc4762cc2d16",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},r(i,{key:"8bde3a870b9f63b69b4a8b285ae8c44f4f517d75",wijzigactie:this.wijzigactie},r("div",{key:"af2e838d91f3fd8fd849b42d560a59f95bc24e5c",class:"map-layer-object"},r("div",{key:"28e9e187fae2a6048b21e11156907ca0aa537ea8"},r("slot",{key:"2fb126fd291605cdc6a09d5ca0d009fc80900b74",name:"symbol"})),r("div",{key:"d087db42616613e59a3e2a41b494927104e8fa78",class:"map-layer-object-heading"},r("slot",{key:"398ad1c5b2439277433426823ca657937a1fd6c7"}),r("slot",{key:"a9574ab95912476198ae33632ba162eeacd55826",name:"label"})),r("div",{key:"3dc1f9f6367333ad6153ddbc6bcb7727dc24ddd0",class:"slide-toggle-container"},r("dso-slide-toggle",{key:"5e7c704d4ba3723bc8468924666e56b057b95c24",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(:not(:last-child)){margin-block-end:8px}: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;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_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;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_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;align-items:flex-start;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:1;flex-wrap:wrap;align-items:center;gap:4px;min-inline-size:0}.map-layer-object .slide-toggle-container{display:flex;align-items:center}.map-layer-object .slide-toggle-container dso-slide-toggle{display:flex;padding-block:0}"}},[257,"dso-map-layer-object",{active:[516],wijzigactie:[513]}]),l=a,s=function(){"undefined"!=typeof customElements&&["dso-map-layer-object","dso-slide-toggle"].forEach((o=>{switch(o){case"dso-map-layer-object":customElements.get(d(o))\|\|customElements.define(d(o),a);break;case"dso-slide-toggle":customElements.get(d(o))\|\|n()}}))};export{l as DsoMapLayerObject,s 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 c=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:"~~50268b0f52068513fd1138340d073d2f1339b274~~",wijzigactie:this.wijzigactie},t("div",{key:"~~9abd55f509683df24750512d57da2a7ad906b025~~",class:"map-layer"},t("div",{key:"~~a25a3d6942c1256bcb3bcae29ad6572e2a385cfa~~",class:"map-layer-heading"},t("slot",{key:"~~c67c52e26d47b2be50dc91788c3d1d316871c850~~",name:"name"}),t("slot",{key:"~~79432404a4d33ca1f215abca2dbb37149dd97830~~",name:"label"})),this.activatable&&t("div",{key:"~~3084c6c2ca826d2dda2130d5d4bb3fef64812396~~",class:"slide-toggle-container"},t("dso-slide-toggle",{key:"~~2eb7b48e330d75811f054873f4c5b2297fb1197f~~",accessibleLabel:"Toon op kaart",checked:this.active,onDsoActiveChange:this.handleActiveChange}))),t("slot",{key:"~~f3c1a8a734cec0980e17c4f3a208038318ecea74~~"}))}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-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_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-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_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]}]),s=c,n=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),c);break;case"dso-slide-toggle":customElements.get(i(o))\|\|d()}}))};export{s as DsoMapLayer,n as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as t,createEvent as e,h as r,transformTag as d}from"@stencil/core/internal/client";import{W as n}from"./wrap-wijzigactie.functional-component.js";import{d as i}from"./slide-toggle.js";const c=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=e(this,"dsoActiveChange",7),this.activatable=!1,this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:o})}}render(){return r(n,{key:"5bfdcbb4e726f7a48f846bc26fd8364252c5099f",wijzigactie:this.wijzigactie},r("div",{key:"291fb7fb2fcd0b1d44203a0dfb6bafaab9588e9f",class:"map-layer"},r("div",{key:"d08241709d892e3f77770a071fe9e9abe633610c",class:"map-layer-heading"},r("slot",{key:"373fb22886af662822fcc8576103060037da6d6a",name:"name"}),r("slot",{key:"b9157528d8d5503b93782a5e2c868e120ade98d0",name:"label"})),this.activatable&&r("div",{key:"76864f4729567483fc8a321fa17ae87b8bf2576f",class:"slide-toggle-container"},r("dso-slide-toggle",{key:"ea81c871f370e53e07e9e93f2f491e7d4f2d8a17",accessibleLabel:"Toon op kaart",checked:this.active,onDsoActiveChange:this.handleActiveChange}))),r("slot",{key:"e27fe106577b51607e9cd347f2a70101063be38a"}))}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;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_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;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_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]}]),a=c,l=function(){"undefined"!=typeof customElements&&["dso-map-layer","dso-slide-toggle"].forEach((o=>{switch(o){case"dso-map-layer":customElements.get(d(o))\|\|customElements.define(d(o),c);break;case"dso-slide-toggle":customElements.get(d(o))\|\|i()}}))};export{a 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 t}from"@stencil/core/internal/client";import{d as a}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:"~~ae066acf649ffe93fc0839dc2f9f811e6485fe6a~~",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:"~~8a2ddb6e690d4a34a855221d1bb0b9737093d470~~",class:"map-message-body"},o&&e("dso-icon",{key:"~~3b6ed0f7c89fbe0a3b7f0d998ca14ded7490ebc0~~",class:"map-message-icon",icon:o,"aria-hidden":"true"}),e("span",{key:"~~3d3cdd67adf2ffeabea5320bc3e0b43e37c49815~~",class:"map-message-text"},e("slot",{key:"~~721cdfef7970a0b4a4823a47449b18c4eb382a57~~",name:"message"}))),e("slot",{key:"~~63c256ac3d948543229fdc861d8d9f82965d3205~~",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-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_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(t(o))\|\|customElements.define(t(o),n);break;case"dso-icon":customElements.get(t(o))\|\|a()}}))};export{d as DsoMapMessage,c as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as r,h as t,transformTag as e}from"@stencil/core/internal/client";import{d as a}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 t("div",{key:"98874d9384751a63909661881b47e45c48064460",class:{"map-message-content":!0,"has-icon":void 0!==o,"has-actions":this.hasActions},role:"error"===this.variant?"alert":"status","aria-atomic":"true"},t("div",{key:"879de5f62a08c908c2cb6e023a1cc054534abfbc",class:"map-message-body"},o&&t("dso-icon",{key:"bddfe00fecdfa60884a456dd5193273a26b8f863",class:"map-message-icon",icon:o,"aria-hidden":"true"}),t("span",{key:"4eaab42391ac5d6f69f15e88e4226b34c132cf15",class:"map-message-text"},t("slot",{key:"e13b1386423352f0f4e60da14ad9454eeef9ffbf",name:"message"}))),t("slot",{key:"34ad7d7cc731b348d64cfb425728377c44888bef",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;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-wit);--_dso-link-extern-icon:var(--_dso-di-external-link-wit);--_dso-link-phone-icon:var(--_dso-di-call-wit);--_dso-link-mail-icon:var(--_dso-di-mail-outline-wit);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-wit);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-tertiary-download-icon:var(--_dso-di-download-wit);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-wit);--_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]}]),c=n,d=function(){"undefined"!=typeof customElements&&["dso-map-message","dso-icon"].forEach((o=>{switch(o){case"dso-map-message":customElements.get(e(o))\|\|customElements.define(e(o),n);break;case"dso-icon":customElements.get(e(o))\|\|a()}}))};export{c as DsoMapMessage,d 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 m}from"./selectable.js";import{v as b}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=b(),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:"~~acd67baa06c1be2d7fae6921a8dd5de92ff61c52~~",class:"form-group dso-checkboxes"},t("legend",{key:"~~6ce17bbb48ef15af4f0276202fa59c9d61283d18~~",class:"sr-only"},"Kaartlagen"),t("div",{key:"~~c3504acd7eddc8d2697220f309040d195f557b04~~",class:"dso-label-container"},t("span",{key:"~~8ae532250b6e156488f5e075db6f48c0f662dca8~~",class:"control-label","aria-hidden":"true"},this.text("title"))),t("div",{key:"~~ecac77905589e3eaf997dea37e63b10ff582fc2b~~",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))\|\|m()}}))};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 c}from"./info.js";import{d as r}from"./info-button.js";import{d}from"./scrollable.js";import{d as m}from"./selectable.js";import{v as b}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=b(),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:"0a39e720ffb64020c4945522c9cf73c2ac34654d",class:"form-group dso-checkboxes"},t("legend",{key:"2897cece9bec007a875eec269ed789583d75d5c9",class:"sr-only"},"Kaartlagen"),t("div",{key:"5c08fc7d22478ddf09c4d4b655fbd7d8adc05967",class:"dso-label-container"},t("span",{key:"9020955add0be098ba539f897133ce75c4369dab",class:"control-label","aria-hidden":"true"},this.text("title"))),t("div",{key:"1d46b41897948867eed4b95f2feb81f7bee548e7",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))\|\|c();break;case"dso-info-button":customElements.get(i(e))\|\|r();break;case"dso-scrollable":customElements.get(i(e))\|\|d();break;case"dso-selectable":customElements.get(i(e))\|\|m()}}))};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 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:"~~9c96b955f02eb00d3791811d3add922fd3aefc03~~",class:"dso-mark-bar"},t("div",{key:"~~8dcde94d1b4f0acb5b91ce09354aaf11214627c1~~",class:"dso-mark-bar-input"},t("input",{key:"~~b283f660e45f54009720d383a2fd40a295ebef07~~",type:"text",id:"search-input",value:this.value,onInput:this.handleInput,onKeyDown:this.handleKeyDown,placeholder:" ",ref:e=>this.inputElement=e}),t("label",{key:"~~ad5ba2c4f461834456c25f127f66fc89a4386ba8~~",htmlFor:"search-input"},t("dso-icon",{key:"~~8e795ec94b869ead2a0ccabe7cc2dbfec62cd57c~~",class:"dso-search-icon",icon:"search"}),t("span",{key:"~~f9deaecaf01d88e1bcb470b1dcc629ed808e0fcc~~",class:"label-text"},this.label)),t("dso-icon-button",{key:"~~5be26ffcc5868c98ad723f9489741c7f25500073~~",icon:"cross",variant:"tertiary",label:"Zoekopdracht legen",onDsoClick:e=>this.handleClear(e.detail.originalEvent)})),t("div",{key:"~~31d5f290c23b7e7dbb9aacb0e895d3832bf8d7e5~~",class:"dso-button-container"},t("span",{key:"~~14bc4372fd205910486f3b46435f87e82455014f~~",class:"divider"}),t("dso-icon-button",{key:"~~ffa2b803d116ee33244ecc1a6350e0b84bcbd2fc~~",icon:"chevron-up",variant:"tertiary",label:`Vorig zoekresultaat ${e-1}/${o}`,onDsoClick:e=>this.handlePrevious(e.detail.originalEvent),disabled:e<=1}),t("span",{key:"~~b306c04e74f1c808b9b4b57f65e94faf6f4d3828~~",role:"status"},e,"/",o),t("dso-icon-button",{key:"~~803288a8a611bb5d46a2cdea22806712c8500370~~",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,c=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,c 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:"e14eec6ad6de8fa15819ab39fb1830eb49a55b38",class:"dso-mark-bar"},t("div",{key:"e1d4c20bc0b5d73596ce9daa35eb271e1b812498",class:"dso-mark-bar-input"},t("input",{key:"349d818a4be946b75177c7652de4de810e1ada46",type:"text",id:"search-input",value:this.value,onInput:this.handleInput,onKeyDown:this.handleKeyDown,placeholder:" ",ref:e=>this.inputElement=e}),t("label",{key:"c62c0fe8c75261d764cc9d82942f38b040dd4db6",htmlFor:"search-input"},t("dso-icon",{key:"4baa4aa80cf1f28cc244883b39c1302e99930ae3",class:"dso-search-icon",icon:"search"}),t("span",{key:"888e55f0beb7a0c7aa7d75ccd81b21d0894d315f",class:"label-text"},this.label)),t("dso-icon-button",{key:"29a349369cce850b7383262722e1912901d8c2e4",icon:"cross",variant:"tertiary",label:"Zoekopdracht legen",onDsoClick:e=>this.handleClear(e.detail.originalEvent)})),t("div",{key:"af99215c7547c8c56941775b94d6491e2ff322a2",class:"dso-button-container"},t("span",{key:"7f9a71a536f903628d9108d1df3a5086efa0ec47",class:"divider"}),t("dso-icon-button",{key:"9319ba0b23ae0a15c195cb4e9f787528e0fbb706",icon:"chevron-up",variant:"tertiary",label:`Vorig zoekresultaat ${e-1}/${o}`,onDsoClick:e=>this.handlePrevious(e.detail.originalEvent),disabled:e<=1}),t("span",{key:"f2b4107a4f482406348532a94a61d23b21f8a29a",role:"status"},e,"/",o),t("dso-icon-button",{key:"70b698aeedf87fbd9ffa1fe4a8143703a99fbd63",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}