@dso-toolkit/core 62.17.0 → 62.19.0

package/dist/dso-toolkit/{p-eb7275e9.entry.js → p-c3af1efc.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,h as t,F as o}from"./p-4592810d.js";import{c as e}from"./p-fbb226aa.js";import"./p-86133aa5.js";const r=":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  visibility: hidden;\n  width: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  height: 100%;\n  opacity: 0.4;\n  width: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  bottom: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  right: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border-right: 0;\n  border-top: 0;\n  border-radius: 0 0 0 8px;\n  height: 40px;\n  min-width: 40px;\n  padding: 0;\n  position: fixed;\n  right: 0;\n  width: 40px;\n  top: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon {\n  margin-left: 0;\n  margin-right: 0;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-left: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  transition: right 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    right: -320px;\n    width: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    right: -480px;\n    width: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    right: -640px;\n    width: 640px;\n  }\n}\n.iframe-container.open {\n  right: 0;\n}\n\niframe {\n  border: 0;\n  height: 100%;\n  width: 100%;\n}";const s=500;const i=class{constructor(t){n(this,t);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),s)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),s)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const t=document.querySelector("body");if(n==="open"){t===null||t===void 0?void 0:t.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{t===null||t===void 0?void 0:t.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,t;if(!this.panelWrapperElement){return}this.trap=e(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(t=this.closeButtonElement)!==null&&t!==void 0?t:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return t(o,null,t("button",{type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},t("dso-icon",{icon:"help"}),t("span",null,this.label)),t("div",{id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},t("div",{class:"dimscreen",onClick:this.closeClick}),t("div",{class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?t("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):t("div",null)),t("button",{type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};i.style=r;export{i as dso_helpcenter_panel};
-//# sourceMappingURL=p-eb7275e9.entry.js.map
+import{r as n,h as t,F as e}from"./p-701648d3.js";import{c as o}from"./p-808a98bc.js";import"./p-1dbcaeef.js";const r=":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  visibility: hidden;\n  width: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  height: 100%;\n  opacity: 0.4;\n  width: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  bottom: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  right: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border-right: 0;\n  border-top: 0;\n  border-radius: 0 0 0 8px;\n  height: 40px;\n  min-width: 40px;\n  padding: 0;\n  position: fixed;\n  right: 0;\n  width: 40px;\n  top: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon {\n  margin-left: 0;\n  margin-right: 0;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-left: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  transition: right 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    right: -320px;\n    width: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    right: -480px;\n    width: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    right: -640px;\n    width: 640px;\n  }\n}\n.iframe-container.open {\n  right: 0;\n}\n\niframe {\n  border: 0;\n  height: 100%;\n  width: 100%;\n}";const s=r;const i=500;const a=class{constructor(t){n(this,t);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),i)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),i)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const t=document.querySelector("body");if(n==="open"){t===null||t===void 0?void 0:t.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{t===null||t===void 0?void 0:t.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,t;if(!this.panelWrapperElement){return}this.trap=o(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(t=this.closeButtonElement)!==null&&t!==void 0?t:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return t(e,null,t("button",{key:"909aac6047227d77380de43410aca299969f3e50",type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},t("dso-icon",{key:"fea78709ac56d52e423b18b54c6f37410c89b532",icon:"help"}),t("span",{key:"5edd950d0d1c7f771087897073444d2b4e68d0e6"},this.label)),t("div",{key:"d9ae79d4fdc953de80861b47ff8039550422e4b4",id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},t("div",{key:"515ed4a463729f9c08ad4e99d2da43feb052edc5",class:"dimscreen",onClick:this.closeClick}),t("div",{key:"383abc297aa3b83dfad29a9977528a465b81b0ee",class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?t("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):t("div",null)),t("button",{key:"57d12c57f058f5a7ca9fa978b5f85a56e185899f",type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},t("dso-icon",{key:"a43d456f9669fe5841e5f1a52e1f2b0ff84cc5d2",icon:"times"}),t("span",{key:"87f50ebf9d194a0a8946d65c90251eda21f1af6a",class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};a.style=s;export{a as dso_helpcenter_panel};
+//# sourceMappingURL=p-c3af1efc.entry.js.map

package/dist/dso-toolkit/p-c3af1efc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["helpcenterPanelCss","DsoHelpcenterPanelStyle0","maxCssTransitionMilliseconds","HelpcenterPanel","this","iframeLoaded","openClick","visibility","slideState","setTimeout","isOpen","loadIframe","closeClick","watchUrl","url","iframeUrl","watchIsOpen","body","document","querySelector","style","setProperty","removeProperty","keyDownListener","event","key","createTrap","panelWrapperElement","trap","createFocusTrap","allowOutsideClick","tabbableOptions","getShadowRoot","setReturnFocus","_a","openButtonElement","initialFocus","_b","closeButtonElement","activate","componentDidRender","deactivate","render","h","Fragment","type","onClick","class","ref","element","icon","label","id","role","src","tabindex","onLoad"],"sources":["src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","src/components/helpcenter-panel/helpcenter-panel.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n  height: 100%;\r\n  left: 0;\r\n  position: fixed;\r\n  top: 0;\r\n  visibility: hidden;\r\n  width: 100%;\r\n\r\n  &.visible {\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  background-color: colors.$zwart;\r\n  height: 100%;\r\n  opacity: 0.4;\r\n  width: 100%;\r\n}\r\n\r\n.open-button {\r\n  @include button.primary($modifiers: false);\r\n\r\n  border: 0;\r\n  bottom: units.$u2;\r\n  font-family: typography.$font-family-base;\r\n  position: fixed;\r\n  right: units.$u2;\r\n  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.open {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.secondary($modifiers: false);\r\n\r\n  border-right: 0;\r\n  border-top: 0;\r\n  border-radius: 0 0 0 units.$u1;\r\n  height: units.$u5;\r\n  min-width: units.$u5;\r\n  padding: 0;\r\n  position: fixed;\r\n  right: 0;\r\n  width: units.$u5;\r\n  top: 0;\r\n\r\n  dso-icon {\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.close {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.iframe-container {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  border-left: 1px solid colors.$grijs-20;\r\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n  height: 100%;\r\n  position: absolute;\r\n  top: 0;\r\n  transition: right 0.5s;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    right: -320px;\r\n    width: 320px;\r\n  }\r\n\r\n  @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    right: -480px;\r\n    width: 480px;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    right: -640px;\r\n    width: 640px;\r\n  }\r\n\r\n  &.open {\r\n    right: 0;\r\n  }\r\n}\r\n\r\niframe {\r\n  border: 0;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n  tag: \"dso-helpcenter-panel\",\r\n  styleUrl: \"helpcenter-panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n  private iframeUrl?: string;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private panelWrapperElement?: HTMLDivElement;\r\n\r\n  private openButtonElement?: HTMLButtonElement;\r\n\r\n  private closeButtonElement?: HTMLButtonElement;\r\n\r\n  private iframeLoaded = false;\r\n\r\n  /**\r\n   * The label on the help button that activates the Helpcenter.\r\n   */\r\n  @Prop()\r\n  label = \"Hulp nodig\";\r\n\r\n  /**\r\n   * The URL that's loaded when the Helpcenter opens.\r\n   */\r\n  @Prop()\r\n  url!: string;\r\n\r\n  @State()\r\n  visibility: \"visible\" | \"hidden\" = \"hidden\";\r\n\r\n  @State()\r\n  isOpen: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  slideState: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  loadIframe = false;\r\n\r\n  @Watch(\"url\")\r\n  watchUrl(url: string) {\r\n    if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n      this.iframeUrl = url;\r\n    }\r\n  }\r\n\r\n  @Watch(\"isOpen\")\r\n  watchIsOpen(isOpen: \"open\" | \"close\") {\r\n    const body = document.querySelector(\"body\");\r\n\r\n    if (isOpen === \"open\") {\r\n      body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n      if (this.iframeUrl !== this.url) {\r\n        this.iframeUrl = this.url;\r\n      }\r\n    } else {\r\n      body?.style.removeProperty(\"overflow\");\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n      this.closeClick();\r\n    }\r\n  }\r\n\r\n  private createTrap() {\r\n    if (!this.panelWrapperElement) {\r\n      return;\r\n    }\r\n\r\n    this.trap = createFocusTrap(this.panelWrapperElement, {\r\n      allowOutsideClick: true,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      setReturnFocus: this.openButtonElement ?? false,\r\n      initialFocus: this.closeButtonElement ?? false,\r\n    }).activate();\r\n  }\r\n\r\n  private openClick = () => {\r\n    this.visibility = \"visible\";\r\n    this.slideState = \"open\";\r\n    setTimeout(() => {\r\n      this.isOpen = \"open\";\r\n    });\r\n    if (!this.loadIframe) {\r\n      setTimeout(() => {\r\n        this.loadIframe = true;\r\n      }, maxCssTransitionMilliseconds);\r\n    }\r\n  };\r\n\r\n  private closeClick = () => {\r\n    this.isOpen = \"close\";\r\n    this.slideState = \"close\";\r\n    setTimeout(() => {\r\n      this.visibility = \"hidden\";\r\n    }, maxCssTransitionMilliseconds);\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n      this.createTrap();\r\n    } else if (this.isOpen === \"close\" && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          onClick={this.openClick}\r\n          class={`open-button ${this.isOpen}`}\r\n          aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n          aria-haspopup=\"dialog\"\r\n          aria-controls=\"dso-panel-wrapper\"\r\n          ref={(element) => (this.openButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"help\"></dso-icon>\r\n          <span>{this.label}</span>\r\n        </button>\r\n        <div\r\n          id=\"dso-panel-wrapper\"\r\n          class={`wrapper ${this.visibility}`}\r\n          aria-label=\"helpcentrum\"\r\n          role=\"dialog\"\r\n          ref={(element) => (this.panelWrapperElement = element)}\r\n        >\r\n          <div class=\"dimscreen\" onClick={this.closeClick} />\r\n          <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n            {this.loadIframe ? (\r\n              <iframe\r\n                src={this.iframeUrl}\r\n                tabindex=\"0\"\r\n                onLoad={() => {\r\n                  this.createTrap();\r\n                  this.iframeLoaded = true;\r\n                }}\r\n              />\r\n            ) : (\r\n              <div />\r\n            )}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class={`close-button ${this.isOpen}`}\r\n            onClick={this.closeClick}\r\n            aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n            aria-controls=\"dso-panel-wrapper\"\r\n            ref={(element) => (this.closeButtonElement = element)}\r\n          >\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-c435f94d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as n,F as i,a as t}from"./p-701648d3.js";const o=":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";const a=o;const s=class{constructor(n){e(this,n);this.dsoChange=r(this,"dsoChange",3);this.min=undefined;this.max=undefined;this.value=undefined;this.step=undefined;this.label=undefined;this.unit="";this.description=undefined}render(){const e=this.min||0;const r=this.max||100;const t=this.step||1;return n(i,null,this.description&&n("span",{id:"description",hidden:true},this.description),n("span",{key:"c97016f839c1f65e0dfbb574ba6b7be542da517d",class:"counter min","aria-hidden":"true"},e,this.unit),n("input",{key:"171641fa35b0d5eae0e7d1d270cf63a61b7bb8da",type:"range",min:this.min,max:this.max,value:this.value,class:"input","aria-label":this.label,"aria-describedby":this.description?"description":undefined,onChange:n=>this.dsoChange.emit({originalEvent:n,value:n.target instanceof HTMLInputElement?parseInt(n.target.value,10):undefined,max:r,min:e,step:t})}),n("span",{key:"d34b5523ca5904d5b4d17ff6b62ced39e4ce5b50",class:"counter max","aria-hidden":"true"},r,this.unit))}get host(){return t(this)}};s.style=a;export{s as dso_input_range};
+//# sourceMappingURL=p-c435f94d.entry.js.map

package/dist/dso-toolkit/p-c435f94d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputRangeCss","DsoInputRangeStyle0","InputRange","render","min","this","max","step","h","Fragment","description","id","hidden","key","class","unit","type","value","label","undefined","onChange","event","dsoChange","emit","originalEvent","target","HTMLInputElement","parseInt"],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n\r\n  padding: 0.5rem;\r\n\r\n  inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n  flex-shrink: 0;\r\n\r\n  min-inline-size: 5ch;\r\n\r\n  &.min {\r\n    text-align: end;\r\n  }\r\n\r\n  &.max {\r\n    text-align: start;\r\n  }\r\n}\r\n\r\n.input {\r\n  flex-grow: 1;\r\n\r\n  appearance: none;\r\n\r\n  background-color: transparent;\r\n\r\n  cursor: pointer;\r\n\r\n  &::-webkit-slider-runnable-track {\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-webkit-slider-thumb {\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.55rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-radius: 50%;\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.5rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-color: transparent;\r\n    border-radius: 50%;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-input-range\",\r\n  styleUrl: \"input-range.scss\",\r\n  shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n  /**\r\n   * The minimum value of the range.\r\n   */\r\n  @Prop()\r\n  min?: number;\r\n\r\n  /**\r\n   * The maximum value of the range.\r\n   */\r\n  @Prop()\r\n  max?: number;\r\n\r\n  /**\r\n   * The value of the range.\r\n   */\r\n  @Prop()\r\n  value?: number;\r\n\r\n  /**\r\n   * The step to increment the value by.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  /**\r\n   * The label of the range.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The unit of the range.\r\n   */\r\n  @Prop()\r\n  unit: string = \"\";\r\n\r\n  /**\r\n   * The description of the range.\r\n   */\r\n  @Prop()\r\n  description?: string;\r\n\r\n  /**\r\n   * Emitted when the value has changed.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInputRangeElement;\r\n\r\n  render() {\r\n    const min = this.min || 0;\r\n    const max = this.max || 100;\r\n    const step = this.step || 1;\r\n\r\n    return (\r\n      <>\r\n        {this.description && (\r\n          <span id=\"description\" hidden>\r\n            {this.description}\r\n          </span>\r\n        )}\r\n        <span class=\"counter min\" aria-hidden=\"true\">\r\n          {min}\r\n          {this.unit}\r\n        </span>\r\n        <input\r\n          type=\"range\"\r\n          min={this.min}\r\n          max={this.max}\r\n          value={this.value}\r\n          class=\"input\"\r\n          aria-label={this.label}\r\n          aria-describedby={this.description ? \"description\" : undefined}\r\n          onChange={(event) =>\r\n            this.dsoChange.emit({\r\n              originalEvent: event,\r\n              value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n              max,\r\n              min,\r\n              step,\r\n            })\r\n          }\r\n        />\r\n        <span class=\"counter max\" aria-hidden=\"true\">\r\n          {max}\r\n          {this.unit}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"gEAAA,MAAMA,EAAgB,2nCACtB,MAAAC,EAAeD,E,MCOFE,EAAU,M,4KAmCN,G,2BAiBf,MAAAC,GACE,MAAMC,EAAMC,KAAKD,KAAO,EACxB,MAAME,EAAMD,KAAKC,KAAO,IACxB,MAAMC,EAAOF,KAAKE,MAAQ,EAE1B,OACEC,EAAAC,EAAA,KACGJ,KAAKK,aACJF,EAAA,QAAMG,GAAG,cAAcC,OAAM,MAC1BP,KAAKK,aAGVF,EAAA,QAAAK,IAAA,2CAAMC,MAAM,cAAa,cAAa,QACnCV,EACAC,KAAKU,MAERP,EAAA,SAAAK,IAAA,2CACEG,KAAK,QACLZ,IAAKC,KAAKD,IACVE,IAAKD,KAAKC,IACVW,MAAOZ,KAAKY,MACZH,MAAM,QAAO,aACDT,KAAKa,MAAK,mBACJb,KAAKK,YAAc,cAAgBS,UACrDC,SAAWC,GACThB,KAAKiB,UAAUC,KAAK,CAClBC,cAAeH,EACfJ,MAAOI,EAAMI,kBAAkBC,iBAAmBC,SAASN,EAAMI,OAAOR,MAAO,IAAME,UACrFb,MACAF,MACAG,WAINC,EAAA,QAAAK,IAAA,2CAAMC,MAAM,cAAa,cAAa,QACnCR,EACAD,KAAKU,M"}

package/dist/dso-toolkit/{p-6e9b961b.js → p-c8f6f8d9.js}

@@ -1,2 +1,2 @@
 function n({activeElement:e}=document){var r;if(!e){return null}if(e.shadowRoot){return(r=n(e.shadowRoot))!==null&&r!==void 0?r:e}return e}export{n as g};
-//# sourceMappingURL=p-6e9b961b.js.map
+//# sourceMappingURL=p-c8f6f8d9.js.map

package/dist/dso-toolkit/{p-67461818.entry.js → p-d6fa20f7.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as e}from"./p-4592810d.js";const o='*,*::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;position:relative}:host .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}:host(.divider) .dso-action-list-item::after{border-bottom:0.25rem dashed #6ca4d9;bottom:0;content:"";display:block;height:24px;position:absolute;left:calc(2rem + 16px + 16px + 8px - 8px);width:calc(100% - (2rem + 16px + 16px + 8px - 8px))}@media screen and (min-width: 480px){:host(.divider) .dso-action-list-item::after{left:calc(2rem + 16px + 16px + 8px);width:calc(100% - (2rem + 16px + 16px + 8px))}}h3{color:#275937;color:#275937;font-size:1.125rem;font-weight:600;margin-block-end:16px;margin-block-start:0;min-height:48px;padding-block-start:9px}@media screen and (min-width: 480px){h3{font-size:1.25rem}}.dso-action-list-item{display:grid;grid-template-columns:calc(2rem + 16px + 16px + 8px - 8px) 1fr}@media screen and (min-width: 480px){.dso-action-list-item{grid-template-columns:calc(2rem + 16px + 16px + 8px) 1fr}}.dso-action-list-item .dso-step-counter{position:unset}.dso-action-list-item .action-list-item-content{grid-column:2/2}dso-icon{height:48px;width:48px}';const s=class{constructor(i){t(this,i);this.step=undefined;this.itemTitle=undefined;this.flowLine=false;this.warning=false;this.divider=false}render(){return i(e,{class:{divider:this.divider,"flow-line":this.flowLine}},i("div",{class:"dso-action-list-item"},this.warning?i("dso-icon",{icon:"status-warning"}):i("div",{class:"dso-step-counter"},this.step),i("div",{class:"action-list-item-content"},this.itemTitle&&i("h3",null,this.itemTitle),i("slot",null))))}};s.style=o;export{s as dso_action_list_item};
-//# sourceMappingURL=p-67461818.entry.js.map
+import{r as t,h as e,H as i}from"./p-701648d3.js";const o='*,*::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;position:relative}:host .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}:host(.divider) .dso-action-list-item::after{border-bottom:0.25rem dashed #6ca4d9;bottom:0;content:"";display:block;height:24px;position:absolute;left:calc(2rem + 16px + 16px + 8px - 8px);width:calc(100% - (2rem + 16px + 16px + 8px - 8px))}@media screen and (min-width: 480px){:host(.divider) .dso-action-list-item::after{left:calc(2rem + 16px + 16px + 8px);width:calc(100% - (2rem + 16px + 16px + 8px))}}h3{color:#275937;color:#275937;font-size:1.125rem;font-weight:600;margin-block-end:16px;margin-block-start:0;min-height:48px;padding-block-start:9px}@media screen and (min-width: 480px){h3{font-size:1.25rem}}.dso-action-list-item{display:grid;grid-template-columns:calc(2rem + 16px + 16px + 8px - 8px) 1fr}@media screen and (min-width: 480px){.dso-action-list-item{grid-template-columns:calc(2rem + 16px + 16px + 8px) 1fr}}.dso-action-list-item .dso-step-counter{position:unset}.dso-action-list-item .action-list-item-content{grid-column:2/2}dso-icon{height:48px;width:48px}';const s=o;const d=class{constructor(e){t(this,e);this.step=undefined;this.itemTitle=undefined;this.flowLine=false;this.warning=false;this.divider=false}render(){return e(i,{key:"6001eb96200e375b5dfbee1967208ada369e7881",class:{divider:this.divider,"flow-line":this.flowLine}},e("div",{key:"76894291897f03dbcef8d0f453b46860ae6f1516",class:"dso-action-list-item"},this.warning?e("dso-icon",{icon:"status-warning"}):e("div",{class:"dso-step-counter"},this.step),e("div",{key:"4b36fe4e8ed574373ea8e40f5d67b2a206c08896",class:"action-list-item-content"},this.itemTitle&&e("h3",null,this.itemTitle),e("slot",{key:"5b80bfdc9281d12b19f8f6532dda740600b85ff8"}))))}};d.style=s;export{d as dso_action_list_item};
+//# sourceMappingURL=p-d6fa20f7.entry.js.map

package/dist/dso-toolkit/p-d6fa20f7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["actionListItemCss","DsoActionListItemStyle0","ActionListItem","render","h","Host","key","class","divider","this","flowLine","warning","icon","step","itemTitle"],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-vertical;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-bottom: 0.25rem dashed colors.$lichtblauw;\r\n      bottom: 0;\r\n      content: \"\";\r\n      display: block;\r\n      height: units.$u3;\r\n      position: absolute;\r\n      left: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      width: calc(100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin));\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        left: action-list-variables.$content-indent;\r\n        width: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  @include headings.base();\r\n  @include headings.h3();\r\n\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-height: units.$u6;\r\n  padding-block-start: 9px;\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin) 1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  height: units.$u6;\r\n  width: units.$u6;\r\n}\r\n","import { h, Component, ComponentInterface, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAoB,4zCAC1B,MAAAC,EAAeD,E,MCMFE,EAAc,M,oFAiBd,M,aAMD,M,aAMA,K,CAEV,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,QAASC,KAAKD,QACd,YAAaC,KAAKC,WAGpBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACRE,KAAKE,QAAUP,EAAA,YAAUQ,KAAK,mBAA+BR,EAAA,OAAKG,MAAM,oBAAoBE,KAAKI,MAClGT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACRE,KAAKK,WAAaV,EAAA,UAAKK,KAAKK,WAC7BV,EAAA,QAAAE,IAAA,+C"}

package/dist/dso-toolkit/p-d75e278f.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as n,F as e,a}from"./p-701648d3.js";import{i as o}from"./p-2d694112.js";const s=':host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:"";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}';const r=s;const l=class{constructor(n){i(this,n);this.dsoSelectPage=t(this,"dsoSelectPage",7);this.sizePositionsMap={small:7,medium:9,large:11};this.availablePositions=undefined;this.totalPages=undefined;this.currentPage=undefined;this.formatHref=i=>"#"+i}sizeChangeHandler(i){this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i.detail])}clickHandler(i,t){this.dsoSelectPage.emit({originalEvent:i,page:t,isModifiedEvent:o(i)})}componentDidLoad(){var i;(i=this.responsiveElement)===null||i===void 0?void 0:i.getSize().then((i=>this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i])))}render(){var i,t,a;if(!this.totalPages){return null}if(this.availablePositions===undefined){return n("dso-responsive-element",{ref:i=>this.responsiveElement=i})}const o=this.availablePositions;const s=(i=this.currentPage)!==null&&i!==void 0?i:0;const r=this.getPages(s,this.availablePositions,this.totalPages);return n("dso-responsive-element",{ref:i=>this.responsiveElement=i},n("ul",{class:"pagination"},n("li",{class:s<=1||s>this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1),"aria-label":"Vorige",onClick:i=>{var t;return s&&this.clickHandler(i,(t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1)}},n("dso-icon",{icon:"chevron-left"}))),r.map((i=>n(e,null,this.showEllipsisBeforeLast(r,i,o)&&n("li",null,n("span",null,"...")),n("li",{key:i,class:s===i?"active":undefined},s===i?n("span",{"aria-current":"page"},i):n("a",{href:this.formatHref(i),onClick:t=>this.clickHandler(t,i)},i)),this.showEllipsisAfterFirst(r,i,o)&&n("li",null,n("span",null,"..."))))),n("li",{class:s<1||s>=this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((a=r[r.indexOf(s)+1])!==null&&a!==void 0?a:this.totalPages),"aria-label":"Volgende",onClick:i=>{var t;return s&&this.totalPages&&this.clickHandler(i,(t=r[r.indexOf(s)+1])!==null&&t!==void 0?t:this.totalPages)}},n("dso-icon",{icon:"chevron-right"})))))}getAvailablePositions(i){if(i%2===0){return i-1}if(i<=3){return 3}return i}getPages(i,t,n){if(n+2<=t){return Array.from({length:n},((i,t)=>t+1))}if(t===3){return[i]}if(t===5){return[1,i,n]}return[1,...this.getPageRange(i,t,n),n]}getPageRange(i,t,n){const e=[];const a=Math.floor(t/2);if(i<=a){for(let i=2;i<=t-4;i++){e.push(i)}}if(i>=a&&i<=n-a){if(a===1){if(i>n-2){e.push(n-2)}e.push(i);if(i<3){e.push(3)}}if(a>1){const t=a-3;for(let o=Math.min(i-t,n-a);o<=Math.max(i+t,a);o++){if(o>2&&o<n-1){e.push(o)}}}}if(i>n-a){for(let i=n-(t-5);i<=n-1;i++){e.push(i)}}return e.filter(((i,t,n)=>n.indexOf(i)===t))}showEllipsisAfterFirst(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===0&&e>n-2&&!i.some((i=>i===2))&&n>=7}showEllipsisBeforeLast(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===i.length-1&&e>n-2&&!i.some((i=>i===e-1))&&n>=7}get host(){return a(this)}};l.style=r;export{l as dso_pagination};
+//# sourceMappingURL=p-d75e278f.entry.js.map

package/dist/dso-toolkit/p-d75e278f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["paginationCss","DsoPaginationStyle0","Pagination","this","sizePositionsMap","small","medium","large","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","undefined","h","ref","element","currentPage","pages","getPages","class","href","formatHref","_b","indexOf","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","_c","sizePositions","Array","from","length","_value","i","getPageRange","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","Error","some","p"],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n  @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n  visibility: hidden;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <ul class=\"pagination\">\r\n          <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              aria-label=\"Vorige\"\r\n              onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n            >\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </a>\r\n          </li>\r\n          {pages.map((page) => (\r\n            <>\r\n              {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                <li>\r\n                  <span>...</span>\r\n                </li>\r\n              )}\r\n\r\n              <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                {currentPage === page ? (\r\n                  <span aria-current=\"page\">{page}</span>\r\n                ) : (\r\n                  <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                    {page}\r\n                  </a>\r\n                )}\r\n              </li>\r\n\r\n              {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                <li>\r\n                  <span>...</span>\r\n                </li>\r\n              )}\r\n            </>\r\n          ))}\r\n          <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n              aria-label=\"Volgende\"\r\n              onClick={(e) =>\r\n                currentPage &&\r\n                this.totalPages &&\r\n                this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n              }\r\n            >\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    if (totalPages + 2 <= availablePositions) {\r\n      // + 2 voor de vorige en volgende knop\r\n      return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n    }\r\n\r\n    if (availablePositions === 3) {\r\n      return [currentPage];\r\n    }\r\n\r\n    if (availablePositions === 5) {\r\n      return [1, currentPage, totalPages];\r\n    }\r\n\r\n    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-db0796f2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as s,a as i}from"./p-701648d3.js";import{t as o}from"./p-1dbcaeef.js";import{h as n,c as r}from"./p-202d2cdf.js";import{g as a}from"./p-c8f6f8d9.js";import{v as h}from"./p-14616bce.js";const f=":host(:focus){outline:none}:host{display:inline-block}";const d=f;const c=class{constructor(e){t(this,e);this.focusOutListener=t=>{if(this.open&&(!(t.relatedTarget instanceof HTMLElement)||!this.tabbables(true).includes(t.relatedTarget))){this.open=false}};this.escape=()=>{this.button.focus();this.open=false};this.open=false;this.dropdownAlign="left";this.dropdownOptionsOffset=2;this.checkable=false;this.boundary=undefined;this.placement=undefined;this.strategy="auto"}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start")})}watchOptionsOffset(){var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.host;const e=this.boundary||document;while(t&&t.parentNode!==e){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement)){throw new ReferenceError("Mandatory toggle button not found")}return t}tabbables(t){const e=o(this.host);return t?e:e.filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu");this.button.setAttribute("aria-expanded","false");if(!this.button.id){this.button.id=h()}const t=this.host.querySelector(".dso-dropdown-options");if(!t){throw new ReferenceError("Dropdown options not found")}t.setAttribute("role","menu");t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const e of Array.from(t.getElementsByTagName("li"))){e.setAttribute("role","none")}}if(this.popper){return}const e=this.host.querySelector(".dso-dropdown-options");if(!(e instanceof HTMLElement)){throw new Error("dropdown options element is not instanceof HTMLElement")}this.popper=r(this.button,e,{placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start"),modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:this.boundary!==undefined}]})}componentDidRender(){var t;this.setStrategy();if(this.open){(t=this.popper)===null||t===void 0?void 0:t.update()}for(const t of Array.from(this.host.getElementsByTagName("li"))){for(const e of o(t)){e.setAttribute("role",this.checkable?"menuitemradio":"menuitem");if(this.checkable){e.setAttribute("aria-checked",t.classList.contains("dso-checked").toString())}}}this.button.setAttribute("aria-expanded",this.open?"true":"false")}onClick(t){const e=t.composedPath();if(this.isToggleButtonEvent(e)){this.open=!this.open}else if(this.open&&this.isMenuItemEvent(e)){this.open=false}}isToggleButtonEvent(t){return t.includes(this.button)}isMenuItemEvent(t){return t.includes(this.host)&&!this.isToggleButtonEvent(t)}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy()}keyDownListener(t){if(t.defaultPrevented||!this.open){return}switch(t.key){case"Tab":if(t.shiftKey){this.tabInPopup(this.tabbables(true),-1)}else{this.tabInPopup(this.tabbables(true),1)}break;case"ArrowDown":this.tabInPopup(this.tabbables(false),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(false),-1);break;case"Escape":this.escape();break;case" ":if(t.target instanceof HTMLElement){t.target.click()}break;default:return}t.preventDefault()}tabInPopup(t,e){var s;const i=t.findIndex((t=>t===a()));let o=i+e;if(o>=t.length){o=0}else if(o<0){o=t.length-1}(s=t[o])===null||s===void 0?void 0:s.focus()}render(){return e(s,{key:"8511a4953a043ad97ce78a54e3cad085af2fbbf9",onFocusout:this.focusOutListener},e("slot",{key:"47ad6e2194994af7b3ea7b85f4069f0fac342d7c",name:"toggle"}),e("div",{key:"6398693835335f206a6eaba54bcf318ce097d306",hidden:!this.open},e("slot",{key:"1c6f158faeaf1666505c7251b94e657d72d8129d"})))}get host(){return i(this)}static get watchers(){return{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};c.style=d;export{c as dso_dropdown_menu};
+//# sourceMappingURL=p-db0796f2.entry.js.map

package/dist/dso-toolkit/p-db0796f2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownMenuCss","DsoDropdownMenuStyle0","DropdownMenu","this","focusOutListener","event","open","relatedTarget","HTMLElement","tabbables","includes","escape","button","focus","watchPosition","popper","setOptions","placement","dropdownAlign","watchOptionsOffset","_a","modifiers","name","options","offset","dropdownOptionsOffset","watchStrategy","setStrategy","strategy","element","host","boundary","document","parentNode","ShadowRoot","parentElement","hasOverflow","querySelector","HTMLButtonElement","ReferenceError","withButton","tabbable","filter","componentDidLoad","setAttribute","id","uuidv4","ul","Array","from","getElementsByTagName","li","dropdownOptionsElement","Error","createPopper","enabled","undefined","componentDidRender","update","tab","checkable","classList","contains","toString","onClick","composedPath","isToggleButtonEvent","isMenuItemEvent","disconnectedCallback","destroy","keyDownListener","defaultPrevented","key","shiftKey","tabInPopup","target","click","preventDefault","direction","currentIndex","findIndex","e","getActiveElement","nextIndex","length","render","h","Host","onFocusout","hidden"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = tabbable(this.host);\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n    }\r\n\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of tabbable(li)) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.open = !this.open;\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.popper?.destroy();\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.open = false;\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-e1255160.js

@@ -0,0 +1,2 @@
+const o=()=>{};export{o as g};
+//# sourceMappingURL=p-e1255160.js.map

package/dist/dso-toolkit/p-e1255160.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["globalScripts"],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"mappings":"AAAY,MAACA,EAAgB,c"}

package/dist/dso-toolkit/p-e1f82103.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,a as s}from"./p-701648d3.js";function o(e){if(!e){return}const t=e.split("-");if(t.length===3&&typeof t[0]==="string"&&typeof t[1]==="string"&&typeof t[2]==="string"){const[e,i,s]=t;const o=e.padStart(2,"0");const d=i.padStart(2,"0");const n=s.padStart(4,"0");return[n,d,o].join("-")}return e}function d(e){if(!e){return""}const t=e.getDate().toString(10).padStart(2,"0");const i=(e.getMonth()+1).toString(10).padStart(2,"0");const s=e.getFullYear().toString(10).padStart(4,"0");return[t,i,s].join("-")}const n=".sc-dso-date-picker-h{display:block}[invalid].sc-dso-date-picker-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker{border-color:#ce3f51}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__input.sc-dso-date-picker::-webkit-calendar-picker-indicator{position:relative;inset-inline-end:-8px;font-size:1.75rem;filter:invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%)}";const a=n;const r=class{constructor(i){e(this,i);this.dsoDateChange=t(this,"dsoDateChange",7);this.dsoBlur=t(this,"dsoBlur",7);this.dsoKeyUp=t(this,"dsoKeyUp",7);this.dsoKeyDown=t(this,"dsoKeyDown",7);this.dsoFocus=t(this,"dsoFocus",7);this.handleBlur=e=>{e.stopPropagation();const{target:t}=e;if(!(t instanceof HTMLInputElement)){return}const{validity:i}=t;const{value:s,valueAsDate:o}=this.dateValues(t);const d=this.validityToError(i);const n={component:"dso-date-picker",originalEvent:e,validity:i,value:s,valueAsDate:o,error:d};this.dsoBlur.emit(n)};this.handleFocus=e=>{e.stopPropagation();this.dsoFocus.emit({originalEvent:e,component:"dso-date-picker"})};this.handleKeyUp=e=>{e.stopPropagation();this.dsoKeyUp.emit({component:"dso-date-picker",originalEvent:e})};this.handleKeyDown=e=>{e.stopPropagation();this.dsoKeyDown.emit({component:"dso-date-picker",originalEvent:e})};this.handleInputChange=e=>{const t=e.target;if(!(t instanceof HTMLInputElement)){return}const{validity:i}=t;const{value:s,valueAsDate:o}=this.dateValues(t);const d=this.validityToError(i);const n={component:"dso-date-picker",originalEvent:e,validity:i,value:s,valueAsDate:o,error:d};this.dsoDateChange.emit(n)};this.name="dso-date";this.identifier=undefined;this.disabled=false;this.required=false;this.invalid=undefined;this.describedBy=undefined;this.dsoAutofocus=false;this.value="";this.min=undefined;this.max=undefined}dateValues(e){const{valueAsDate:t,validity:i}=e;return{value:d(t),valueAsDate:!i.rangeOverflow&&!i.rangeUnderflow&&t||undefined}}validityToError(e){if(e.valueMissing){return"required"}if(e.rangeUnderflow){return"min-range"}if(e.rangeOverflow){return"max-range"}if(!e.valid){return"invalid"}return undefined}render(){var e;return i("input",{key:"ecb068ea47b65537bcc588275a661a8b76ca12c8",type:"date",id:this.identifier,class:"dso-date__input",value:o(this.value),name:this.name,min:o(this.min),max:o(this.max),disabled:this.disabled||undefined,required:this.required||undefined,"aria-autocomplete":"none","aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":this.describedBy,autoComplete:"off",autofocus:this.dsoAutofocus||undefined,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyUp:this.handleKeyUp,onKeyDown:this.handleKeyDown,onChange:this.handleInputChange})}get element(){return s(this)}};r.style=a;export{r as dso_date_picker};
+//# sourceMappingURL=p-e1f82103.entry.js.map

package/dist/dso-toolkit/p-e1f82103.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["parseToValueFormat","value","matches","split","length","d","m","y","dd","padStart","mm","yyyy","join","parseToDutchFormat","date","getDate","toString","getMonth","getFullYear","datePickerCss","DsoDatePickerStyle0","DsoDatePicker","this","handleBlur","e","stopPropagation","target","HTMLInputElement","validity","valueAsDate","dateValues","error","validityToError","event","component","originalEvent","dsoBlur","emit","handleFocus","dsoFocus","handleKeyUp","dsoKeyUp","handleKeyDown","dsoKeyDown","handleInputChange","dsoDateChange","rangeOverflow","rangeUnderflow","undefined","valueMissing","valid","render","h","key","type","id","identifier","class","name","min","max","disabled","required","_a","invalid","describedBy","autoComplete","autofocus","dsoAutofocus","onBlur","onFocus","onKeyUp","onKeyDown","onChange"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\"\r\n  ) {\r\n    const [d, m, y] = matches;\r\n\r\n    const dd = d.padStart(2, \"0\");\r\n    const mm = m.padStart(2, \"0\");\r\n    const yyyy = y.padStart(4, \"0\");\r\n\r\n    return [yyyy, mm, dd].join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n  return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n  display: block;\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    .dso-date__input {\r\n      border-color: colors.$danger-color;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n\r\n  &::-webkit-calendar-picker-indicator {\r\n    position: relative;\r\n    inset-inline-end: -8px;\r\n\r\n    font-size: 1.75rem;\r\n\r\n    filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-e968c726.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as e,H as i,a as o}from"./p-701648d3.js";const a=":host{display:block}";const r=a;const l=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];const h=class{constructor(e){s(this,e);this.dsoSizeChange=t(this,"dsoSizeChange",7);this.observer=new ResizeObserver((([s])=>{var t,e;if(!s){throw new Error("No entry found")}const i=(e=(t=l.find((t=>s.contentRect.width>=t.width)))===null||t===void 0?void 0:t.alias)!==null&&e!==void 0?e:l[0].alias;this.sizeAlias=i;this.dsoSizeChange.emit(i)}));this.sizeAlias=l[0].alias;this.sizeWidth=0}async getSize(){return this.sizeAlias}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return e(i,{key:"10ef04775c70765e6b39b1000167fe6484b629bc",small:this.sizeAlias==="small",medium:this.sizeAlias==="medium",large:this.sizeAlias==="large"},e("slot",{key:"d85e9ec79a4cec3ddcfb4b1b601d2241281c6c09"}))}get host(){return o(this)}};h.style=r;export{h as dso_responsive_element};
+//# sourceMappingURL=p-e968c726.entry.js.map

package/dist/dso-toolkit/p-e968c726.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["responsiveElementCss","DsoResponsiveElementStyle0","elementSizes","width","alias","ResponsiveElement","this","observer","ResizeObserver","entry","Error","size","_b","_a","find","s","contentRect","sizeAlias","dsoSizeChange","emit","getSize","componentWillLoad","observe","host","disconnectedCallback","unobserve","render","h","Host","key","small","medium","large"],"sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Method, State } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"gEAAA,MAAMA,EAAuB,uBAC7B,MAAAC,EAAeD,ECGf,MAAME,EAAwD,CAC5D,CACEC,MAAO,IACPC,MAAO,SAET,CACED,MAAO,IACPC,MAAO,UAET,CACED,MAAO,EACPC,MAAO,U,MASEC,EAAiB,M,sEAqBpBC,KAAAC,SAAW,IAAIC,gBAAe,EAAEC,M,QACtC,IAAKA,EAAO,CACV,MAAM,IAAIC,MAAM,iB,CAGlB,MAAMC,GAAOC,GAAAC,EAAAX,EAAaY,MAAMC,GAAMN,EAAMO,YAAYb,OAASY,EAAEZ,WAAM,MAAAU,SAAA,SAAAA,EAAET,SAAK,MAAAQ,SAAA,EAAAA,EAAIV,EAAa,GAAGE,MAEpGE,KAAKW,UAAYN,EACjBL,KAAKY,cAAcC,KAAKR,EAAK,I,eA3BIT,EAAa,GAAGE,M,eAGvC,C,CAYZ,aAAMgB,GACJ,OAAOd,KAAKW,S,CAiBd,iBAAAI,GACEf,KAAKC,SAASe,QAAQhB,KAAKiB,K,CAG7B,oBAAAC,GACElB,KAAKC,SAASkB,UAAUnB,KAAKiB,K,CAG/B,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOxB,KAAKW,YAAc,QAASc,OAAQzB,KAAKW,YAAc,SAAUe,MAAO1B,KAAKW,YAAc,SACtGU,EAAA,QAAAE,IAAA,6C"}

package/dist/dso-toolkit/p-f3f23018.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as o,H as t,a as i}from"./p-701648d3.js";const s="*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}:host{margin-top:16px;padding:16px;margin-bottom:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset);display:block;container-type:inline-size;position:relative;z-index:1}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}";const n=s;const r=class{constructor(o){e(this,o);this.yellow=undefined;this.border=undefined;this.white=undefined;this.dropShadow=undefined;this.step=undefined}render(){var e;const i=this.step||!!this.element.querySelector("[slot=icon]");return o(t,{key:"480fc37af102e5ab8e004bcd03a33a70c723259d","has-counter":i},i&&o("div",{class:"dso-step-counter"},(e=this.step)!==null&&e!==void 0?e:o("slot",{name:"icon"})),o("slot",{key:"a1f3e79a13ab81e11c7cbfae41318d21e811566c"}))}get element(){return i(this)}};r.style=n;export{r as dso_highlight_box};
+//# sourceMappingURL=p-f3f23018.entry.js.map

package/dist/dso-toolkit/p-f3f23018.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["highlightBoxCss","DsoHighlightBoxStyle0","HighlightBox","render","hasCounter","this","step","element","querySelector","h","Host","key","class","_a","name"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, h, Prop, Element, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAkB,mrBACxB,MAAAC,EAAeD,E,MCMFE,EAAY,M,wIAkCvB,MAAAC,G,MACE,MAAMC,EAAaC,KAAKC,QAAUD,KAAKE,QAAQC,cAAc,eAE7D,OACEC,EAACC,EAAI,CAAAC,IAAA,yDAAcP,GAChBA,GAAcK,EAAA,OAAKG,MAAM,qBAAoBC,EAAAR,KAAKC,QAAI,MAAAO,SAAA,EAAAA,EAAIJ,EAAA,QAAMK,KAAK,UACtEL,EAAA,QAAAE,IAAA,6C"}

package/dist/dso-toolkit/p-ffdcb2e4.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as a}from"./p-701648d3.js";const t="*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;width:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;height: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;width: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{width:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{bottom:8px;height:2.5rem;left:0;right:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;top: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;width:2.5rem;height:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-left:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;height:2.5rem;padding:8px;position:absolute;right:0;text-align:center;top:0;width:2.5rem}.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 button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c}.dso-button-container button:disabled{color:#ccc}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";const i=t;const n=class{constructor(a){e(this,a);this.dsoInput=o(this,"dsoInput",3);this.dsoNext=o(this,"dsoNext",3);this.dsoPrevious=o(this,"dsoPrevious",3);this.dsoClear=o(this,"dsoClear",3);this.handleInput=e=>{if(!(e.target instanceof HTMLInputElement)){return}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=>{if(e.key==="Enter"){this.handleNext(e)}};this.value=undefined;this.label="Zoeken in document";this.current=undefined;this.totalCount=undefined}async dsoFocus(e={}){var o,a;(o=this.inputElement)===null||o===void 0?void 0:o.focus();if(e.select){(a=this.inputElement)===null||a===void 0?void 0:a.select()}}render(){const e=this.current||0;const o=this.totalCount||0;return a("div",{key:"efdf7f83749340df8019025992167f5d85c3b345",class:"dso-mark-bar"},a("div",{key:"0e80bcb1859584ba0ef3a77f7c1e1154886433d6",class:"dso-mark-bar-input"},a("input",{key:"fa7112771eec26a46b6b3723b1fead205d364835",type:"text",id:"search-input",value:this.value,onInput:this.handleInput,onKeyDown:this.handleKeyDown,placeholder:" ",ref:e=>this.inputElement=e}),a("label",{key:"91e2661d9926d1a022c199c6441f38bc51b297a9",htmlFor:"search-input"},a("dso-icon",{key:"25d5ae45bacae6454510187fec58a4b6168bd037",class:"dso-search-icon",icon:"search"}),a("span",{key:"d8591b4f24d9fa1f37d95b83c0d40859cb8bf4db",class:"label-text"},this.label)),a("button",{key:"b2cff0ce11313010ec20e16f972216901efb0c8a",type:"button",onClick:this.handleClear},a("dso-icon",{key:"9599e5ff9225d9549c2138a788665d232c77991b",icon:"times"}),a("span",{key:"4b0aeef7c3196f8cd8d1bfa815fdc68e26fbd2c8",class:"sr-only"},"Zoekopdracht legen"))),a("div",{key:"901be078c668f6386095df22efcd4d1760516e30",class:"dso-button-container"},a("span",{key:"22616246e5c1e69caecc69ec5c13290fc4699835",class:"divider"}),a("button",{key:"b8acc81707e87213fc77ca3858179ae46c939160",type:"button",onClick:this.handlePrevious,disabled:e<=1},a("dso-icon",{key:"ae6eebabf4bcd7454c81f131e13649b85f0d8a24",icon:"chevron-up",class:"hydrated"}),a("span",{key:"4d437f856a43918075e110c99381705855eba8a2",class:"sr-only"},"Vorig zoekresultaat")),a("span",{key:"c60458ada935126bd1908fb5b3adc616d3a86bde"},e,"/",o),a("button",{key:"212d6d2b04bf1023a6c3ce68e11e68e06e03149d",type:"button",onClick:this.handleNext,disabled:e>=o},a("dso-icon",{key:"50dc0c18de000a9b128f70815425267bd7bfad4d",icon:"chevron-down",class:"hydrated"}),a("span",{key:"ae6835ce1e8b52d5a65e79f5711b51a4fbe08821",class:"sr-only"},"Volgend zoekresultaat"))))}};n.style=i;export{n as dso_mark_bar};
+//# sourceMappingURL=p-ffdcb2e4.entry.js.map

package/dist/dso-toolkit/p-ffdcb2e4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["markBarCss","DsoMarkBarStyle0","MarkBar","this","handleInput","e","target","HTMLInputElement","dsoInput","emit","originalEvent","value","handleNext","dsoNext","handlePrevious","dsoPrevious","handleClear","dsoClear","handleKeyDown","key","dsoFocus","options","_a","inputElement","focus","select","_b","render","current","totalCount","h","class","type","id","onInput","onKeyDown","placeholder","ref","element","htmlFor","icon","label","onClick","disabled"],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n$height: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n  display: flex;\r\n  flex-grow: 1;\r\n\r\n  .dso-mark-bar-input {\r\n    display: flex;\r\n    position: relative;\r\n    width: 100%;\r\n\r\n    input {\r\n      background-color: transparent;\r\n      background-image: none;\r\n      border: 1px solid form-control.$focus-border-color;\r\n      border-radius: 4px;\r\n      border-width: 1px;\r\n      box-shadow: none;\r\n      display: block;\r\n      font-size: typography.$root-font-size-base;\r\n      height: $height;\r\n      line-height: $height;\r\n      padding-inline: $height;\r\n      padding-block: 6px;\r\n      transition:\r\n        border-color ease-in-out 0.15s,\r\n        box-shadow ease-in-out 0.15s;\r\n      width: 100%;\r\n      border-start-end-radius: 0;\r\n      border-end-end-radius: 0;\r\n      border-inline-end: 0;\r\n\r\n      &:focus {\r\n        border-color: form-control.$focus-border-color;\r\n        box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n        outline: 0;\r\n      }\r\n\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n\r\n      &:not(:placeholder-shown) + label {\r\n        width: $height;\r\n        padding-inline-end: units.$u1;\r\n\r\n        .label-text {\r\n          @include utilities.sr-only();\r\n        }\r\n      }\r\n    }\r\n\r\n    label {\r\n      bottom: units.$u1;\r\n      height: $height;\r\n      left: 0;\r\n      right: units.$u5;\r\n      padding-block: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n      cursor: text;\r\n      position: absolute;\r\n      top: 0;\r\n      overflow: hidden;\r\n      /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior */\r\n      white-space: nowrap;\r\n      text-overflow: ellipsis;\r\n      /* stylelint-enable-next-line declaration-property-value-disallowed-list */\r\n\r\n      dso-icon {\r\n        color: colors.$grasgroen;\r\n        cursor: default;\r\n        margin: -8px;\r\n        padding: 8px;\r\n        width: $height;\r\n        height: $height;\r\n      }\r\n\r\n      .label-text {\r\n        margin-left: units.$u1;\r\n        color: colors.$grijs-60;\r\n      }\r\n    }\r\n\r\n    button {\r\n      background-color: transparent;\r\n      border: 0;\r\n      box-shadow: none;\r\n      color: colors.$grasgroen;\r\n      font-size: 0;\r\n      height: $height;\r\n      padding: units.$u1;\r\n      position: absolute;\r\n      right: 0;\r\n      text-align: center;\r\n      top: 0;\r\n      width: $height;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-button-container {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: units.$u1;\r\n  flex-shrink: 0;\r\n\r\n  padding-inline: units.$u1;\r\n\r\n  border: 1px solid colors.$bosgroen;\r\n  border-inline-start: 0;\r\n  border-start-end-radius: scaffolding.$border-radius-base;\r\n  border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n  button {\r\n    appearance: none;\r\n    padding: 0;\r\n    border: 0;\r\n    background-color: transparent;\r\n    color: colors.$grasgroen;\r\n\r\n    &:disabled {\r\n      color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  .divider {\r\n    position: absolute;\r\n    inset-inline-start: 0;\r\n    inset-block-start: units.$u1;\r\n    inset-block-end: units.$u1;\r\n\r\n    inline-size: 1px;\r\n\r\n    background-color: colors.$grijs-20;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n  MarkBarInputEvent,\r\n  MarkBarClearEvent,\r\n  MarkBarPaginationEvent,\r\n  MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAa,q0EACnB,MAAAC,EAAeD,E,MCYFE,EAAO,M,yKA+DVC,KAAAC,YAAeC,IACrB,KAAMA,EAAEC,kBAAkBC,kBAAmB,CAC3C,M,CAGFJ,KAAKK,SAASC,KAAK,CACjBC,cAAeL,EACfM,MAAON,EAAEC,OAAOK,OAChB,EAGIR,KAAAS,WAAcP,IACpBF,KAAKU,QAAQJ,KAAK,CAAEC,cAAeL,GAAI,EAGjCF,KAAAW,eAAkBT,IACxBF,KAAKY,YAAYN,KAAK,CAAEC,cAAeL,GAAI,EAGrCF,KAAAa,YAAeX,IACrBF,KAAKc,SAASR,KAAK,CAAEC,cAAeL,GAAI,EAGlCF,KAAAe,cAAiBb,IACvB,GAAIA,EAAEc,MAAQ,QAAS,CACrBhB,KAAKS,WAAWP,E,mCA7EZ,qB,iDAkBR,cAAMe,CAASC,EAA+B,I,SAC5CC,EAAAnB,KAAKoB,gBAAY,MAAAD,SAAA,SAAAA,EAAEE,QAEnB,GAAIH,EAAQI,OAAQ,EAClBC,EAAAvB,KAAKoB,gBAAY,MAAAG,SAAA,SAAAA,EAAED,Q,EA2DvB,MAAAE,GACE,MAAMC,EAAUzB,KAAKyB,SAAW,EAChC,MAAMC,EAAa1B,KAAK0B,YAAc,EAEtC,OACEC,EAAA,OAAAX,IAAA,2CAAKY,MAAM,gBACTD,EAAA,OAAAX,IAAA,2CAAKY,MAAM,sBACTD,EAAA,SAAAX,IAAA,2CACEa,KAAK,OACLC,GAAG,eACHtB,MAAOR,KAAKQ,MACZuB,QAAS/B,KAAKC,YACd+B,UAAWhC,KAAKe,cAChBkB,YAAY,IACZC,IAAMC,GAAanC,KAAKoB,aAAee,IAEzCR,EAAA,SAAAX,IAAA,2CAAOoB,QAAQ,gBACbT,EAAA,YAAAX,IAAA,2CAAUY,MAAM,kBAAkBS,KAAK,WACvCV,EAAA,QAAAX,IAAA,2CAAMY,MAAM,cAAc5B,KAAKsC,QAEjCX,EAAA,UAAAX,IAAA,2CAAQa,KAAK,SAASU,QAASvC,KAAKa,aAClCc,EAAA,YAAAX,IAAA,2CAAUqB,KAAK,UACfV,EAAA,QAAAX,IAAA,2CAAMY,MAAM,WAAS,wBAGzBD,EAAA,OAAAX,IAAA,2CAAKY,MAAM,wBACTD,EAAA,QAAAX,IAAA,2CAAMY,MAAM,YACZD,EAAA,UAAAX,IAAA,2CAAQa,KAAK,SAASU,QAASvC,KAAKW,eAAgB6B,SAAUf,GAAW,GACvEE,EAAA,YAAAX,IAAA,2CAAUqB,KAAK,aAAaT,MAAM,aAClCD,EAAA,QAAAX,IAAA,2CAAMY,MAAM,WAAS,wBAEvBD,EAAA,QAAAX,IAAA,4CACGS,EAAO,IAAGC,GAEbC,EAAA,UAAAX,IAAA,2CAAQa,KAAK,SAASU,QAASvC,KAAKS,WAAY+B,SAAUf,GAAWC,GACnEC,EAAA,YAAAX,IAAA,2CAAUqB,KAAK,eAAeT,MAAM,aACpCD,EAAA,QAAAX,IAAA,2CAAMY,MAAM,WAAS,2B"}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,5 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };
+
+//# sourceMappingURL=app-globals-0f993ce5.js.map

package/dist/esm/app-globals-0f993ce5.js.map

@@ -0,0 +1 @@
+{"file":"app-globals-0f993ce5.js","mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}

package/dist/esm/clsx-297c1ffe.js

@@ -0,0 +1,5 @@
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+export { clsx as c };
+
+//# sourceMappingURL=clsx-297c1ffe.js.map

package/dist/esm/clsx-297c1ffe.js.map

@@ -0,0 +1 @@
+{"file":"clsx-297c1ffe.js","mappings":"AAAA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAQ,SAAS,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;;;;","names":[],"sources":["../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"version":3}

package/dist/esm/create-identifier-d61d46af.js

@@ -0,0 +1,17 @@
+/**
+ * Form random hash
+ */
+function chr4() {
+    return Math.random().toString(16).slice(-4);
+}
+/**
+ * Create random identifier with a prefix
+ * @param prefix
+ */
+function createIdentifier(prefix) {
+    return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
+}
+
+export { createIdentifier as c };
+
+//# sourceMappingURL=create-identifier-d61d46af.js.map

package/dist/esm/{create-identifier-479a4699.js.map → create-identifier-d61d46af.js.map}

@@ -1 +1 @@
-{"file":"create-identifier-479a4699.js","mappings":"AAAA;;;SAGgB,IAAI;EAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;;SAIgB,gBAAgB,CAAC,MAAc;EAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG;;;;","names":[],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n"],"version":3}
+{"file":"create-identifier-d61d46af.js","mappings":"AAAA;;;SAGgB,IAAI;IAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;;SAIgB,gBAAgB,CAAC,MAAc;IAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG;;;;","names":[],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n"],"version":3}