@dso-toolkit/core 100.2.0 → 100.3.1

package/dist/components/dso-header.js

@@ -1 +1 @@
-import{h as o,proxyCustomElement as i,HTMLElement as n,createEvent as e,forceUpdate as t,Host as s,Fragment as r,transformTag as d}from"@stencil/core/internal/client";import{a,c as l,o as h,f as u,d as p}from"./floating-ui.dom.js";import{c}from"./clsx.js";import{t as m}from"./index.esm.js";import{g as b}from"./get-active-element.js";import{i as f}from"./i18n.js";import{i as v}from"./is-modified-event.js";import{d as g}from"./icon.js";import{d as w}from"./scrollable.js";import{v as x}from"./v4.js";const k={en:{"dso-header":{menu:"Menu",login:"Log in",logout:"Log out",help:"Help",overflowMenu:"More"}},nl:{"dso-header":{menu:"Menu",login:"Inloggen",logout:"Uitloggen",help:"Help",overflowMenu:"Meer",userHome:"Mijn Omgevingsloket"}}},y=({item:i,onClick:n,key:e,ref:t})=>o("li",{class:c({"dso-active":i.active}),key:e,ref:t},o("a",{href:i.url,"aria-current":i.active?"page":void 0,onClick:n},i.label)),C=i(class extends n{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoHeaderClick=e(this,"dsoHeaderClick",7),this.mainMenu=[],this.compact="auto",this.authStatus="none",this.showHelp=!1,this.userHomeActive=!1,this.visibleMenuItemsCount=void 0,this.dropdownOptionsOffset=0,this.open=!1,this.escape=()=>{this.dropdownButtonElement?.focus(),this.toggleOptions()},this.keyDownHandler=o=>{if(!o.defaultPrevented&&this.open){switch(o.key){case"Tab":this.tabInPopup(this.tabbables(!0),o.shiftKey?-1:1);break;case"ArrowDown":this.tabInPopup(this.tabbables(!1),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(!1),-1);break;case"Escape":this.escape();break;case" ":o.target instanceof n&&o.target.click();break;default:return}o.preventDefault()}},this.resetVisibleMenuItems=()=>{this.visibleMenuItemsCount=void 0},this.clickHandler=(o,i,n)=>{this.toggleOptions(!1),this.dsoHeaderClick.emit({originalEvent:o,isModifiedEvent:v(o),type:i,menuItem:n?.menuItem,url:n?.url??n?.menuItem?.url})},this.menuItemElementRefs=[],this.text=f((()=>this.host),k),this.flushResize=()=>{this.resizeFrameId=void 0,this.host.isConnected&&(this.resetVisibleMenuItems(),this.toggleOptions(!1),this.dropdownOptionsOffset=0,t(this.host))},this.scheduleResize=()=>{void 0===this.resizeFrameId&&(this.resizeFrameId=requestAnimationFrame(this.flushResize))},this.resizeObserver=new ResizeObserver((()=>{this.scheduleResize()})),this.focusOutListener=o=>{!this.open||o.relatedTarget instanceof n&&this.tabbables(!0).includes(o.relatedTarget)||this.toggleOptions(!1)}}mainMenuChanged(){this.resetVisibleMenuItems()}tabInPopup(o,i){let n=o.findIndex((o=>o===b()))+i;n>=o.length?n=0:n<0&&(n=o.length-1),o[n]?.focus()}get isCompact(){return"always"===this.compact||window.innerWidth<992}calculateOverflowMenuItemCount(o){const i=o.offsetWidth,n=this.menuItemElementRefs[this.menuItemElementRefs.length-1],e=this.userHomeMenuItemElementRef??n,t=this.dropdownMenuItemElementRef;if(!e||!t||!n)return this.menuItemElementRefs.length;const s=t.offsetLeft+t.offsetWidth-(n.offsetLeft+n.offsetWidth);if(e.offsetLeft+e.offsetWidth-s<=i)return this.menuItemElementRefs.length;const r=i-s-(this.userHomeMenuItemElementRef?this.userHomeMenuItemElementRef.offsetLeft+this.userHomeMenuItemElementRef.offsetWidth-(t.offsetLeft+t.offsetWidth):0),d=this.menuItemElementRefs.findIndex((o=>o&&o.offsetLeft+o.offsetWidth>r));return d<0?this.menuItemElementRefs.length:d}calculateDropdownOptionsOffset(){return this.dropdownElement?this.host.clientHeight-(this.dropdownElement?.getBoundingClientRect().bottom-this.host.getBoundingClientRect().top):0}get visibleMainMenuItems(){return"number"==typeof this.visibleMenuItemsCount?this.mainMenu.slice(0,this.visibleMenuItemsCount):this.mainMenu}get hiddenMainMenuItems(){return"number"==typeof this.visibleMenuItemsCount?this.mainMenu.slice(this.visibleMenuItemsCount):[]}connectedCallback(){this.resizeObserver.observe(this.host)}disconnectedCallback(){this.resizeObserver.disconnect(),void 0!==this.resizeFrameId&&(cancelAnimationFrame(this.resizeFrameId),this.resizeFrameId=void 0),this.toggleOptions(!1)}componentDidRender(){if(this.host.isConnected&&(this.isCompact&&this.dropdownElement&&(this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()),void 0===this.visibleMenuItemsCount&&this.navElement&&(this.visibleMenuItemsCount=this.calculateOverflowMenuItemCount(this.navElement)),this.open&&this.popoverElement&&!this.cleanUp&&this.dropdownButtonElement)){const o=this.popoverElement;let i=!0;const n=(i,n)=>{if(o.isConnected){if(this.pendingPopoverConstraints){const i=o.querySelector(".dropdown-menu-options")??o;Object.assign(i.style,{maxHeight:this.pendingPopoverConstraints.availableHeight+"px",maxInlineSize:this.pendingPopoverConstraints.availableWidth+"px"})}Object.assign(o.style,{left:i+"px",top:n+"px"})}},e=a(this.dropdownButtonElement,o,(()=>{this.dropdownButtonElement&&l(this.dropdownButtonElement,o,{strategy:"fixed",middleware:[h(this.dropdownOptionsOffset),u({padding:this.dropdownOptionsOffset}),p({apply:({availableHeight:o,availableWidth:i})=>{this.pendingPopoverConstraints={availableWidth:i,availableHeight:o}}})],placement:this.isCompact?"bottom-end":"bottom-start"}).then((({x:o,y:e})=>{if(i)return i=!1,void n(o,e);void 0!==this.popoverFrameId&&cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=requestAnimationFrame((()=>{this.popoverFrameId=void 0,n(o,e)}))}))}));this.cleanUp=()=>{void 0!==this.popoverFrameId&&(cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=void 0),e()}}}render(){return o(s,{key:"931dc1762425cf848f2cc1570a5b32334e7475b4","is-compact":this.isCompact},o("div",{key:"64ace8bce4093b7de3480da9ddf815a608cbcba0",class:"dso-header"},o("div",{key:"48d423ba2cc9597823df24ddf5b17f4a68d7e551",class:"logo-container"},o("slot",{key:"2e3a9ceb11a5996543285f3638c2dd07f5108ca4",name:"logo"})),this.isCompact?this.renderCompact():this.renderNormal()))}tabbables(o){const i=this.dropdownElement?m(this.dropdownElement):[];return o?i:i.filter((o=>o!==this.dropdownButtonElement))}toggleOptions(o){this.open=o??!this.open,this.popoverElement?.isConnected&&this.popoverElement?.togglePopover(this.open),!this.open&&this.cleanUp&&(this.cleanUp(),this.cleanUp=void 0)}renderCompact(){return(this.mainMenu.length>0||this.userHomeUrl||"none"!==this.authStatus)&&o("div",{class:"dropdown"},o("div",{class:"dropdown-menu",onFocusout:this.focusOutListener,ref:o=>this.dropdownElement=o},o("button",{id:x(),type:"button",onClick:()=>this.toggleOptions(),ref:o=>this.dropdownButtonElement=o,"aria-haspopup":"menu","aria-expanded":this.open?"true":"false"},o("span",null,this.text("menu")),o("dso-icon",{icon:"chevron-down"})),o("div",{popover:"manual",ref:o=>this.popoverElement=o},o("dso-scrollable",{class:"dropdown-menu-options",role:"menu","aria-labelledby":this.dropdownButtonElement?.id,onKeyDown:this.keyDownHandler},o("ul",{role:"group"},this.mainMenu.map((i=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label}))),this.userHomeUrl&&o("li",{role:"menuitem"},o("a",{href:this.userHomeUrl,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},this.text("userHome"))),this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},o("a",{href:this.userProfileUrl,onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName,o("span",{class:"profile-label"}," - Mijn profiel"))),"loggedOut"===this.authStatus&&o("li",{role:"menuitem"},this.loginUrl?o("a",{href:this.loginUrl,onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},this.logoutUrl?o("a",{href:this.logoutUrl,onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("li",{role:"menuitem"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})):o("button",{type:"button",class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"}))))))))}renderNormal(){return this.menuItemElementRefs=[],o(r,null,o("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&o("div",{class:"profile"},o("a",{href:this.userProfileUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName)),"loggedOut"===this.authStatus&&o("div",{class:"login"},this.loginUrl?o("a",{href:this.loginUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),"loggedIn"===this.authStatus&&o("div",{class:"logout"},this.logoutUrl?o("a",{href:this.logoutUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("div",{class:"help"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})))),(this.mainMenu.length>0||this.userHomeUrl)&&o("nav",{class:"dso-navbar"},o("ul",{class:c("dso-nav","dso-nav-main",{ready:void 0!==this.visibleMenuItemsCount}),ref:o=>this.navElement=o},this.visibleMainMenuItems.map(((i,n)=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label,ref:o=>this.menuItemElementRefs[n]=o}))),(void 0===this.visibleMenuItemsCount||this.hiddenMainMenuItems.length>0)&&o("li",{"aria-hidden":void 0===this.visibleMenuItemsCount,ref:o=>this.dropdownMenuItemElementRef=o,class:"dropdown-menu-item"},o("div",{class:"dropdown-menu",onFocusout:this.focusOutListener,ref:o=>this.dropdownElement=o},o("button",{id:x(),type:"button",onClick:()=>this.toggleOptions(),ref:o=>this.dropdownButtonElement=o,"aria-haspopup":"menu","aria-expanded":this.open?"true":"false"},o("span",null,this.text("overflowMenu")),o("dso-icon",{icon:"chevron-down",class:"main-menu-item-icon"})),o("div",{popover:"manual",ref:o=>this.popoverElement=o},o("div",{class:"dropdown-menu-options",role:"menu","aria-labelledby":this.dropdownButtonElement?.id,onKeyDown:this.keyDownHandler},o("ul",null,this.hiddenMainMenuItems.map((i=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label})))))))),this.userHomeUrl&&o("li",{class:c("menu-user-home",{"dso-active":this.userHomeActive}),ref:o=>this.userHomeMenuItemElementRef=o},o("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":void 0,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},o("dso-icon",{icon:"user-outline",class:"main-menu-item-icon"}),this.text("userHome"))))))}get host(){return this}static get watchers(){return{mainMenu:[{mainMenuChanged:0}]}}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) .dropdown-menu .dropdown-menu-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) .dropdown-menu .dropdown-menu-options{inline-size:375px}div[popover]{margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset;inline-size:max-content}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}.dropdown-menu button{align-items:center;background-color:transparent;border:0;color:#39870c;display:flex;font-family:Asap, sans-serif;font-size:1rem;font-weight:600;line-height:normal;letter-spacing:inherit;position:relative}.dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0;inset-block-start:50%;transform:translateY(-50%)}.dropdown-menu button:hover,.dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}.dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}.dropdown-menu .dropdown-menu-options{box-sizing:border-box;background-clip:padding-box;background-color:#fff;border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-inline:0;z-index:220}.dropdown-menu .dropdown-menu-options ul{margin:0;padding:0;list-style:none}.dropdown-menu .dropdown-menu-options ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}.dropdown-menu .dropdown-menu-options ul li{list-style:none}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li a:active,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:active{text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{clear:both;color:#275937;display:block;font-size:1.25rem;font-weight:400;line-height:1.5;padding:16px;text-decoration:none;white-space:nowrap}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:focus-visible{background-color:#39870c;color:#fff}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:hover:visited,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:hover:visited{color:#275937}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li button:hover{background-color:#fff;text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a:visited,.dropdown-menu .dropdown-menu-options ul li button:visited{color:#fff}.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus):not(:focus-visible),.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus):not(:focus-visible){color:#275937}.dropdown-menu .dropdown-menu-options ul li.dso-active a{font-weight:600}.dropdown-menu .dropdown-menu-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown .dropdown-menu{position:static}.dropdown .dropdown-menu .dropdown-menu-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main .dropdown-menu .dropdown-menu-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main .dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main .dropdown-menu button:hover,.dso-nav.dso-nav-main .dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main .dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}"}},[257,"dso-header",{mainMenu:[16],compact:[1],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],showHelp:[4,"show-help"],helpUrl:[1,"help-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],userHomeActive:[4,"user-home-active"],visibleMenuItemsCount:[32],dropdownOptionsOffset:[32],open:[32]},void 0,{mainMenu:[{mainMenuChanged:0}]}]),M=C,z=function(){"undefined"!=typeof customElements&&["dso-header","dso-icon","dso-scrollable"].forEach((o=>{switch(o){case"dso-header":customElements.get(d(o))||customElements.define(d(o),C);break;case"dso-icon":customElements.get(d(o))||g();break;case"dso-scrollable":customElements.get(d(o))||w()}}))};export{M as DsoHeader,z as defineCustomElement}
+import{h as o,proxyCustomElement as i,HTMLElement as e,createEvent as n,forceUpdate as t,Host as s,Fragment as r,transformTag as d}from"@stencil/core/internal/client";import{a,c as l,o as h,f as u,d as p}from"./floating-ui.dom.js";import{c}from"./clsx.js";import{t as m}from"./index.esm.js";import{g as b}from"./get-active-element.js";import{i as f}from"./i18n.js";import{i as v}from"./is-modified-event.js";import{d as g}from"./icon.js";import{d as w}from"./scrollable.js";import{v as x}from"./v4.js";const k={en:{"dso-header":{menu:"Menu",login:"Log in",logout:"Log out",help:"Help",overflowMenu:"More"}},nl:{"dso-header":{menu:"Menu",login:"Inloggen",logout:"Uitloggen",help:"Help",overflowMenu:"Meer",userHome:"Mijn Omgevingsloket"}}},y=({item:i,onClick:e,key:n,ref:t})=>o("li",{class:c({"dso-active":i.active}),key:n,ref:t},o("a",{href:i.url,"aria-current":i.active?"page":void 0,onClick:e},i.label)),C=i(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoHeaderClick=n(this,"dsoHeaderClick",7),this.mainMenu=[],this.compact="auto",this.authStatus="none",this.showHelp=!1,this.userHomeActive=!1,this.visibleMenuItemsCount=void 0,this.dropdownOptionsOffset=0,this.open=!1,this.escape=()=>{this.dropdownButtonElement?.focus(),this.toggleOptions()},this.keyDownHandler=o=>{if(!o.defaultPrevented&&this.open){switch(o.key){case"Tab":this.tabInPopup(this.tabbables(!0),o.shiftKey?-1:1);break;case"ArrowDown":this.tabInPopup(this.tabbables(!1),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(!1),-1);break;case"Escape":this.escape();break;case" ":o.target instanceof e&&o.target.click();break;default:return}o.preventDefault()}},this.resetVisibleMenuItems=()=>{this.visibleMenuItemsCount=void 0},this.clickHandler=(o,i,e)=>{this.toggleOptions(!1),this.dsoHeaderClick.emit({originalEvent:o,isModifiedEvent:v(o),type:i,menuItem:e?.menuItem,url:e?.url??e?.menuItem?.url})},this.menuItemElementRefs=[],this.text=f((()=>this.host),k),this.flushResize=()=>{this.resizeFrameId=void 0,this.host.isConnected&&(this.resetVisibleMenuItems(),this.toggleOptions(!1),this.dropdownOptionsOffset=0,t(this.host))},this.scheduleResize=()=>{void 0===this.resizeFrameId&&(this.resizeFrameId=requestAnimationFrame(this.flushResize))},this.resizeObserver=new ResizeObserver((()=>{this.scheduleResize()})),this.focusOutListener=o=>{!this.open||o.relatedTarget instanceof e&&this.tabbables(!0).includes(o.relatedTarget)||this.toggleOptions(!1)}}mainMenuChanged(){this.resetVisibleMenuItems()}tabInPopup(o,i){let e=o.findIndex((o=>o===b()))+i;e>=o.length?e=0:e<0&&(e=o.length-1),o[e]?.focus()}get isCompact(){return"always"===this.compact||window.innerWidth<992}calculateOverflowMenuItemCount(o){const i=o.offsetWidth,e=this.menuItemElementRefs[this.menuItemElementRefs.length-1],n=this.userHomeMenuItemElementRef??e,t=this.dropdownMenuItemElementRef;if(!n||!t||!e)return this.menuItemElementRefs.length;const s=t.offsetLeft+t.offsetWidth-(e.offsetLeft+e.offsetWidth);if(n.offsetLeft+n.offsetWidth-s<=i)return this.menuItemElementRefs.length;const r=i-s-(this.userHomeMenuItemElementRef?this.userHomeMenuItemElementRef.offsetLeft+this.userHomeMenuItemElementRef.offsetWidth-(t.offsetLeft+t.offsetWidth):0),d=this.menuItemElementRefs.findIndex((o=>o&&o.offsetLeft+o.offsetWidth>r));return d<0?this.menuItemElementRefs.length:d}calculateDropdownOptionsOffset(){return this.dropdownElement?this.host.clientHeight-(this.dropdownElement?.getBoundingClientRect().bottom-this.host.getBoundingClientRect().top):0}get visibleMainMenuItems(){return"number"==typeof this.visibleMenuItemsCount?this.mainMenu.slice(0,this.visibleMenuItemsCount):this.mainMenu}get hiddenMainMenuItems(){return"number"==typeof this.visibleMenuItemsCount?this.mainMenu.slice(this.visibleMenuItemsCount):[]}connectedCallback(){this.resizeObserver.observe(this.host)}disconnectedCallback(){this.resizeObserver.disconnect(),void 0!==this.resizeFrameId&&(cancelAnimationFrame(this.resizeFrameId),this.resizeFrameId=void 0),this.toggleOptions(!1)}componentDidRender(){if(this.host.isConnected&&(this.isCompact&&this.dropdownElement&&(this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()),void 0===this.visibleMenuItemsCount&&this.navElement&&(this.visibleMenuItemsCount=this.calculateOverflowMenuItemCount(this.navElement)),this.open&&this.popoverElement&&!this.cleanUp&&this.dropdownButtonElement)){const o=this.popoverElement;let i=!0;const e=(i,e)=>{if(o.isConnected){if(this.pendingPopoverConstraints){const i=o.querySelector(".dropdown-menu-options")??o;Object.assign(i.style,{maxHeight:this.pendingPopoverConstraints.availableHeight+"px",maxInlineSize:this.pendingPopoverConstraints.availableWidth+"px"})}Object.assign(o.style,{left:i+"px",top:e+"px"})}},n=a(this.dropdownButtonElement,o,(()=>{this.dropdownButtonElement&&l(this.dropdownButtonElement,o,{strategy:"fixed",middleware:[h(this.dropdownOptionsOffset),u({padding:this.dropdownOptionsOffset}),p({apply:({availableHeight:o,availableWidth:i})=>{this.pendingPopoverConstraints={availableWidth:i,availableHeight:o}}})],placement:this.isCompact?"bottom-end":"bottom-start"}).then((({x:o,y:n})=>{if(i)return i=!1,void e(o,n);void 0!==this.popoverFrameId&&cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=requestAnimationFrame((()=>{this.popoverFrameId=void 0,e(o,n)}))}))}));this.cleanUp=()=>{void 0!==this.popoverFrameId&&(cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=void 0),n()}}}render(){return o(s,{key:"70ed6e8dc9a02875dd773c205af3549b324dfb8e","is-compact":this.isCompact},o("div",{key:"ab3f94264421bca5caec2ae59f5b40f6934a440e",class:"dso-header"},o("div",{key:"f092ce977dcd3acd0d9620af8506cb138ee1f0a7",class:"logo-container"},o("slot",{key:"898f5c094fd6dd18ec4e843a240c31081e2a9253",name:"logo"})),this.isCompact?this.renderCompact():this.renderNormal()))}tabbables(o){const i=this.dropdownElement?m(this.dropdownElement):[];return o?i:i.filter((o=>o!==this.dropdownButtonElement))}toggleOptions(o){this.open=o??!this.open,this.popoverElement?.isConnected&&this.popoverElement?.togglePopover(this.open),!this.open&&this.cleanUp&&(this.cleanUp(),this.cleanUp=void 0)}renderCompact(){return(this.mainMenu.length>0||this.userHomeUrl||"none"!==this.authStatus)&&o("div",{class:"dropdown"},o("div",{class:"dropdown-menu",onFocusout:this.focusOutListener,ref:o=>this.dropdownElement=o},o("button",{id:x(),type:"button",onClick:()=>this.toggleOptions(),ref:o=>this.dropdownButtonElement=o,"aria-haspopup":"menu","aria-expanded":this.open?"true":"false"},o("span",null,this.text("menu")),o("dso-icon",{icon:"chevron-down"})),o("div",{popover:"manual",ref:o=>this.popoverElement=o},o("dso-scrollable",{class:"dropdown-menu-options",role:"menu","aria-labelledby":this.dropdownButtonElement?.id,onKeyDown:this.keyDownHandler},o("ul",{role:"group"},this.mainMenu.map((i=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label}))),this.userHomeUrl&&o("li",{role:"menuitem"},o("a",{href:this.userHomeUrl,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},this.text("userHome"))),this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},o("a",{href:this.userProfileUrl,onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName,o("span",{class:"profile-label"}," - Mijn profiel"))),"loggedOut"===this.authStatus&&o("li",{role:"menuitem"},this.loginUrl?o("a",{href:this.loginUrl,onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},this.logoutUrl?o("a",{href:this.logoutUrl,onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("li",{role:"menuitem"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})):o("button",{type:"button",class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"}))))))))}renderNormal(){return this.menuItemElementRefs=[],o(r,null,o("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&o("div",{class:"profile"},o("a",{href:this.userProfileUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName)),"loggedOut"===this.authStatus&&o("div",{class:"login"},this.loginUrl?o("a",{href:this.loginUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),"loggedIn"===this.authStatus&&o("div",{class:"logout"},this.logoutUrl?o("a",{href:this.logoutUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("div",{class:"help"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})))),(this.mainMenu.length>0||this.userHomeUrl)&&o("nav",{class:"dso-navbar"},o("ul",{class:c("dso-nav","dso-nav-main",{ready:void 0!==this.visibleMenuItemsCount}),ref:o=>this.navElement=o},this.visibleMainMenuItems.map(((i,e)=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label,ref:o=>this.menuItemElementRefs[e]=o}))),(void 0===this.visibleMenuItemsCount||this.hiddenMainMenuItems.length>0)&&o("li",{"aria-hidden":void 0===this.visibleMenuItemsCount,ref:o=>this.dropdownMenuItemElementRef=o,class:"dropdown-menu-item"},o("div",{class:"dropdown-menu",onFocusout:this.focusOutListener,ref:o=>this.dropdownElement=o},o("button",{id:x(),type:"button",onClick:()=>this.toggleOptions(),ref:o=>this.dropdownButtonElement=o,"aria-haspopup":"menu","aria-expanded":this.open?"true":"false"},o("span",null,this.text("overflowMenu")),o("dso-icon",{icon:"chevron-down",class:"main-menu-item-icon"})),o("div",{popover:"manual",ref:o=>this.popoverElement=o},o("div",{class:"dropdown-menu-options",role:"menu","aria-labelledby":this.dropdownButtonElement?.id,onKeyDown:this.keyDownHandler},o("ul",null,this.hiddenMainMenuItems.map((i=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label})))))))),this.userHomeUrl&&o("li",{class:c("menu-user-home",{"dso-active":this.userHomeActive}),ref:o=>this.userHomeMenuItemElementRef=o},o("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":void 0,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},o("dso-icon",{icon:"user-outline",class:"main-menu-item-icon"}),this.text("userHome"))))))}get host(){return this}static get watchers(){return{mainMenu:[{mainMenuChanged:0}]}}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) .dropdown-menu .dropdown-menu-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) .dropdown-menu .dropdown-menu-options{inline-size:375px}div[popover]{margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset;inline-size:max-content}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}.dropdown-menu button{align-items:center;background-color:transparent;border:0;color:#39870c;display:flex;font-family:Asap, sans-serif;font-size:1rem;font-weight:600;line-height:normal;letter-spacing:inherit;position:relative}.dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0;inset-block-start:50%;transform:translateY(-50%)}.dropdown-menu button:hover,.dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}.dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}.dropdown-menu .dropdown-menu-options{box-sizing:border-box;background-clip:padding-box;background-color:#fff;border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-inline:0;z-index:220;--_dso-scrollable-block-size:auto}.dropdown-menu .dropdown-menu-options ul{margin:0;padding:0;list-style:none}.dropdown-menu .dropdown-menu-options ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}.dropdown-menu .dropdown-menu-options ul li{list-style:none}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li a:active,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:active{text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{clear:both;color:#275937;display:block;font-size:1.25rem;font-weight:400;line-height:1.5;padding:16px;text-decoration:none;white-space:nowrap}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:focus-visible{background-color:#39870c;color:#fff}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:hover:visited,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:hover:visited{color:#275937}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li button:hover{background-color:#fff;text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a:visited,.dropdown-menu .dropdown-menu-options ul li button:visited{color:#fff}.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus):not(:focus-visible),.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus):not(:focus-visible){color:#275937}.dropdown-menu .dropdown-menu-options ul li.dso-active a{font-weight:600}.dropdown-menu .dropdown-menu-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown .dropdown-menu{position:static}.dropdown .dropdown-menu .dropdown-menu-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main .dropdown-menu .dropdown-menu-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main .dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main .dropdown-menu button:hover,.dso-nav.dso-nav-main .dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main .dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}"}},[257,"dso-header",{mainMenu:[16],compact:[1],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],showHelp:[4,"show-help"],helpUrl:[1,"help-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],userHomeActive:[4,"user-home-active"],visibleMenuItemsCount:[32],dropdownOptionsOffset:[32],open:[32]},void 0,{mainMenu:[{mainMenuChanged:0}]}]),z=C,M=function(){"undefined"!=typeof customElements&&["dso-header","dso-icon","dso-scrollable"].forEach((o=>{switch(o){case"dso-header":customElements.get(d(o))||customElements.define(d(o),C);break;case"dso-icon":customElements.get(d(o))||g();break;case"dso-scrollable":customElements.get(d(o))||w()}}))};export{z as DsoHeader,M as defineCustomElement}

package/dist/components/dso-hero-image.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,h as n,Host as o,transformTag as a}from"@stencil/core/internal/client";const c=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(o,{key:"7c30ba2c5660bc9b428949f4f6764e08fba8d8c8"},n("slot",{key:"eb65537dce2c8422fc2c609632aaa9770831297e",name:"image"}),n("div",{key:"5faa577dc81d1d959dd8645f6c20187088aa5605",class:"hero-image-container"},n("slot",{key:"8dfe7c0a62775948e9f4d92333200dc77a3ca573"})))}static get style(){return":host{--dso-hero-image-background-color:#ebf3e6;margin-inline-start:calc(50% - 50vw);margin-inline-end:calc(50% - 50vw);padding-inline-start:calc(50vw - 50% - 16px);padding-inline-end:calc(50vw - 50% - 16px);display:block;position:relative;overflow:hidden;background-color:var(--dso-hero-image-background-color)}@media only screen and (min-width: 768px){:host{min-block-size:352px}}::slotted([slot=image]){display:block;inline-size:100%;min-block-size:calc(16.6666666667vw + 1dvi);background-color:var(--dso-hero-image-background-color);background-repeat:no-repeat;background-size:cover;background-position:center}@media only screen and (min-width: 768px){::slotted([slot=image]){position:absolute;inset:0;min-block-size:unset}}.hero-image-container{position:relative;z-index:1;box-sizing:border-box;inline-size:100%;padding-inline:16px;padding-block-end:16px;margin-block-start:16px}@media (min-width: 768px){.hero-image-container{margin-block-start:40px}}@media (min-width: 992px){.hero-image-container{max-inline-size:992px;margin-block-start:40px}}@media (min-width: 992px){.hero-image-container ::slotted(*){display:block;inline-size:clamp(0px, 38vw, 545px)}}"}},[257,"dso-hero-image"]),t=c,r=function(){"undefined"!=typeof customElements&&["dso-hero-image"].forEach((e=>{"dso-hero-image"===e&&(customElements.get(a(e))||customElements.define(a(e),c))}))};export{t as DsoHeroImage,r as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,h as n,Host as o,transformTag as a}from"@stencil/core/internal/client";const t=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(o,{key:"58986f7f8ff51ad08e4a6cecfc8b69b7f534ce59"},n("slot",{key:"3de9aa7aeb53413ddc4bf442a8e20227a8f94710",name:"image"}),n("div",{key:"16a40d270ae8eebd3213222a20672c6213302d97",class:"hero-image-container"},n("slot",{key:"8a6817e250897a98ad525a1ca5f5775e04814ef3"})))}static get style(){return":host{--dso-hero-image-background-color:#ebf3e6;margin-inline-start:calc(50% - 50vw);margin-inline-end:calc(50% - 50vw);padding-inline-start:calc(50vw - 50% - 16px);padding-inline-end:calc(50vw - 50% - 16px);display:block;position:relative;overflow:hidden;background-color:var(--dso-hero-image-background-color)}@media only screen and (min-width: 768px){:host{min-block-size:352px}}::slotted([slot=image]){display:block;inline-size:100%;min-block-size:calc(16.6666666667vw + 1dvi);background-color:var(--dso-hero-image-background-color);background-repeat:no-repeat;background-size:cover;background-position:center}@media only screen and (min-width: 768px){::slotted([slot=image]){position:absolute;inset:0;min-block-size:unset}}.hero-image-container{position:relative;z-index:1;box-sizing:border-box;inline-size:100%;padding-inline:16px;padding-block-end:16px;margin-block-start:16px}@media (min-width: 768px){.hero-image-container{margin-block-start:40px}}@media (min-width: 992px){.hero-image-container{max-inline-size:992px;margin-block-start:40px}}@media (min-width: 992px){.hero-image-container ::slotted(*){display:block;inline-size:clamp(0px, 38vw, 545px)}}"}},[257,"dso-hero-image"]),r=t,c=function(){"undefined"!=typeof customElements&&["dso-hero-image"].forEach((e=>{"dso-hero-image"===e&&(customElements.get(a(e))||customElements.define(a(e),t))}))};export{r as DsoHeroImage,c as defineCustomElement}

package/dist/components/dso-highlight-box.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as r,h as t,Host as e,transformTag as n}from"@stencil/core/internal/client";const i=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow()}render(){const o=this.step||!!this.element.querySelector("[slot=icon]");return t(e,{key:"3f403b11a77983f350a586d3e399d9d643a5f811","has-counter":o},o&&t("div",{key:"bdc42b95c78bbec4af466b4a84ecb4b02f561e23",class:"dso-step-counter","aria-hidden":"true"},this.step??t("slot",{key:"ee8165e3d3d9208294531fdfe9dbd42a455e6509",name:"icon"})),t("slot",{key:"d3279de601388485b296e13c1415b179f69b0591"}))}get element(){return this}static get style(){return"*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;inset-inline-start:16px;position:absolute;inset-block-start:-1.5rem;block-size:2rem;inline-size:2rem;color:#fff;font-size:1.25rem;font-weight:500;line-height:2rem;text-align:center}:host{display:block;container-type:inline-size;position:relative;z-index:1;margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--_dso-highlight-box-block-size, unset);min-block-size:var(--_dso-highlight-box-min-block-size, unset);--_dso-link-list-margin-block-end:0;--_dso-rich-content-margin-block-start:0}:host([has-counter]){block-size:var(--_dso-highlight-box-counter-block-size, unset);margin-block-start:48px;padding-block-start:2.5rem;position:relative}:host(:not([has-counter])){block-size:var(--_dso-highlight-box-nocounter-block-size, unset)}:host(:not([white],[yellow],[border],[green])){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host([grey]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host([white]){--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}:host([yellow]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919}:host([green]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#ebf3e6;color:#191919}:host([drop-shadow]){box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}:host([border]){border:1px solid #ccc;padding:15px}:host([border]:not([grey],[yellow])){--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}::slotted([slot=icon]){margin-block-start:0.25rem}::slotted(img.dso-highlight-box-banner){--_dso-image-margin-inline:-16px -16px;--_dso-image-margin-block:-16px 8px;aspect-ratio:2.38/1;object-fit:cover;inline-size:calc(100% + 32px);max-inline-size:unset !important}@container (min-width: 360px) and (max-width: 470px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3/1}}@container (min-width: 471px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3.5/1}}::slotted(:last-child){margin-block-end:0 !important}"}},[257,"dso-highlight-box",{yellow:[516],border:[516],white:[516],green:[516],dropShadow:[516,"drop-shadow"],step:[514]}]),d=i,c=function(){"undefined"!=typeof customElements&&["dso-highlight-box"].forEach((o=>{"dso-highlight-box"===o&&(customElements.get(n(o))||customElements.define(n(o),i))}))};export{d as DsoHighlightBox,c as defineCustomElement}
+import{proxyCustomElement as o,HTMLElement as r,h as t,Host as e,transformTag as n}from"@stencil/core/internal/client";const i=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow()}render(){const o=this.step||!!this.element.querySelector("[slot=icon]");return t(e,{key:"a31042efc0e6676e06f08765d05320c2debe0b87","has-counter":o},o&&t("div",{key:"ae5f42277bd801d07ac66467c652e211c8e8fe14",class:"dso-step-counter","aria-hidden":"true"},this.step??t("slot",{key:"7d8424c37b64775e83f34eb3f2165e8965c428bd",name:"icon"})),t("slot",{key:"22edb75de8bb54565157a80a7be1ab82b7b12773"}))}get element(){return this}static get style(){return"*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;inset-inline-start:16px;position:absolute;inset-block-start:-1.5rem;block-size:2rem;inline-size:2rem;color:#fff;font-size:1.25rem;font-weight:500;line-height:2rem;text-align:center}:host{display:block;container-type:inline-size;position:relative;z-index:1;margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--_dso-highlight-box-block-size, unset);min-block-size:var(--_dso-highlight-box-min-block-size, unset);--_dso-link-list-margin-block-end:0;--_dso-rich-content-margin-block-start:0}:host([has-counter]){block-size:var(--_dso-highlight-box-counter-block-size, unset);margin-block-start:48px;padding-block-start:2.5rem;position:relative}:host(:not([has-counter])){block-size:var(--_dso-highlight-box-nocounter-block-size, unset)}:host(:not([white],[yellow],[border],[green])){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host([grey]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host([white]){--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}:host([yellow]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919}:host([green]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#ebf3e6;color:#191919}:host([drop-shadow]){box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}:host([border]){border:1px solid #ccc;padding:15px}:host([border]:not([grey],[yellow])){--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}::slotted([slot=icon]){margin-block-start:0.25rem}::slotted(img.dso-highlight-box-banner){--_dso-image-margin-inline:-16px -16px;--_dso-image-margin-block:-16px 8px;aspect-ratio:2.38/1;object-fit:cover;inline-size:calc(100% + 32px);max-inline-size:unset !important}@container (min-width: 360px) and (max-width: 470px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3/1}}@container (min-width: 471px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3.5/1}}::slotted(:last-child){margin-block-end:0 !important}"}},[257,"dso-highlight-box",{yellow:[516],border:[516],white:[516],green:[516],dropShadow:[516,"drop-shadow"],step:[514]}]),d=i,c=function(){"undefined"!=typeof customElements&&["dso-highlight-box"].forEach((o=>{"dso-highlight-box"===o&&(customElements.get(n(o))||customElements.define(n(o),i))}))};export{d as DsoHighlightBox,c as defineCustomElement}

package/dist/components/dso-history-item.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as s,h as a,transformTag as o}from"@stencil/core/internal/client";import{i as n}from"./is-modified-event.js";import{d as r}from"./icon.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoClick=i(this,"dsoClick",3),this.typeIcons={ontwerp:"document-pencil","in-werking":"document","tijdelijk-regelingdeel":"document","tijdelijk-regelingdeel-besluit":"hammer",waarschuwing:"status-warning-red-solid",besluit:"hammer"}}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{attributes:!0,childList:!0})}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}clickEventHandler(e){if(e.target instanceof t&&this.href)return this.dsoClick.emit({originalEvent:e,isModifiedEvent:n(e)})}get titleSlottedElement(){return this.host.querySelector("[slot='title']")}get explanationSlottedElement(){return this.host.querySelector("[slot='explanation']")}get warningSlottedElement(){return this.host.querySelector("[slot='warning']")}render(){return a("div",{key:"27087f663a39e6d805adf7b1da3db2adadcbf5c9",class:"history-item"},a("div",{key:"90417592ddc3cecec81c670f53f071ef51d7436f",class:"history-item-date"},a("slot",{key:"71955c1a77d41683298e863c631c04d5ced10fd7",name:"date"})),a("div",{key:"4e2c0ad8a72e8671296a57e8dad61c94398ed396",class:"history-item-content"},a("div",{key:"2cd2d65d3f889000f5e5e5dde35bd776d13569e7",class:"history-item-status-message"},a("dso-icon",{key:"3f83e54705b31eb22610a16b83587429764c2def",icon:this.typeIcons[this.type],"aria-hidden":"true"}),a("slot",{key:"13516e1f9c14db2fbb81baca7a49b170a5a1ce65",name:"status"})),null!==this.titleSlottedElement&&this.href&&a("div",{key:"82c28d0d8d6861e0bac768d2d14cc2a7e7c78e95",class:"history-item-title"},a("a",{key:"80be42478cc05c5cfdb612b3327d8051a346abf0",href:this.href,class:"title-anchor",onClick:e=>this.clickEventHandler(e),"aria-current":this.current?"true":void 0},a("span",{key:"975753beb272fcd210663794f89c8fa9c3cedc2c",class:"history-item-title-content"},a("slot",{key:"6e78a3a9978eb2a1b5fd2abc7effd7dd9f7c4c5e",name:"title"})),"⁠",a("dso-icon",{key:"d034fdef92aa0495c74e6644f8a602b0bc54e259",icon:"chevron-right","aria-hidden":"true"}))),null!==this.explanationSlottedElement&&a("div",{key:"a5455e11a0fb58a041bc30bff77704eba37e6c8a",class:"history-item-explanation"},a("slot",{key:"659996d3818b763b18210a606733ceb807c4e4b5",name:"explanation"})),null!==this.warningSlottedElement&&a("div",{key:"1f42a56c4cf5b1fb27ded1aa188c87da126524b1",class:"history-item-warning"},a("dso-icon",{key:"4999d4d30e3173a888483fa203ff430c66c96ada",icon:"status-warning-red-solid",role:"img","aria-label":"Waarschuwing"}),a("slot",{key:"ffbdf71422a2d6745655fdab1b02cb3dc24b51a0",name:"warning"}))))}get host(){return this}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.history-item{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px;padding-inline:8px}:host(:not([type=waarschuwing])) .history-item:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([current]:not([type=waarschuwing])) .history-item{background-color:#e5e5e5}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=tijdelijk-regelingdeel-besluit]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.history-item-title{white-space:nowrap}.history-item-title .title-anchor{color:#275937;font-weight:600;text-decoration:none}.history-item-title .title-anchor:hover{text-decoration:underline}.history-item-title .title-anchor:visited{color:#275937}.history-item-title .history-item-title-content{white-space:normal}.history-item-title dso-icon{margin-inline-start:4px}"}},[257,"dso-history-item",{type:[513],href:[513],current:[516]}]),d=c,l=function(){"undefined"!=typeof customElements&&["dso-history-item","dso-icon"].forEach((e=>{switch(e){case"dso-history-item":customElements.get(o(e))||customElements.define(o(e),c);break;case"dso-icon":customElements.get(o(e))||r()}}))};export{d as DsoHistoryItem,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as s,h as o,transformTag as a}from"@stencil/core/internal/client";import{i as n}from"./is-modified-event.js";import{d as r}from"./icon.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoClick=i(this,"dsoClick",3),this.typeIcons={ontwerp:"document-pencil","in-werking":"document","tijdelijk-regelingdeel":"document","tijdelijk-regelingdeel-besluit":"hammer",waarschuwing:"status-warning-red-solid",besluit:"hammer"}}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{attributes:!0,childList:!0})}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}clickEventHandler(e){if(e.target instanceof t&&this.href)return this.dsoClick.emit({originalEvent:e,isModifiedEvent:n(e)})}get titleSlottedElement(){return this.host.querySelector("[slot='title']")}get explanationSlottedElement(){return this.host.querySelector("[slot='explanation']")}get warningSlottedElement(){return this.host.querySelector("[slot='warning']")}render(){return o("div",{key:"0ddccba216f32216a5ce222cc11b003bacdb28af",class:"history-item"},o("div",{key:"b8e3e1c7acc1dfdded03f8829d75362d82bf4920",class:"history-item-date"},o("slot",{key:"a02d02b411a8827bead6be05cbd4fd6ab22feeb4",name:"date"})),o("div",{key:"e83882c2988f87d822126947f6b954682496d6bc",class:"history-item-content"},o("div",{key:"4409043a85b9ef30d21a64c2119fd6dab0e320a7",class:"history-item-status-message"},o("dso-icon",{key:"e5096c926aec70dee1471f1cfa01d6a8bb050200",icon:this.typeIcons[this.type],"aria-hidden":"true"}),o("slot",{key:"a7c923bd536c1b02676df779216186f4a49856d7",name:"status"})),null!==this.titleSlottedElement&&this.href&&o("div",{key:"2db028e5addc28fbd82210129719f86363395c4b",class:"history-item-title"},o("a",{key:"871157e769f9dc0a2af5809e60ca3292ad847f65",href:this.href,class:"title-anchor",onClick:e=>this.clickEventHandler(e),"aria-current":this.current?"true":void 0},o("span",{key:"90bac7607cbe8a838c8f9086c825591e34d7fd35",class:"history-item-title-content"},o("slot",{key:"0c4e9921ace20c57e55d2fbc14019b173624209e",name:"title"})),"⁠",o("dso-icon",{key:"d3b03e7226a6b0e8dce037a0a390367028490a77",icon:"chevron-right","aria-hidden":"true"}))),null!==this.explanationSlottedElement&&o("div",{key:"ce9f3ced38791d38fb8778cd548fa8d969c0f959",class:"history-item-explanation"},o("slot",{key:"80156b40b6367688076c34684ac726e3904edae3",name:"explanation"})),null!==this.warningSlottedElement&&o("div",{key:"13f461a66e60fed780b3611289b70efe9bc21bc5",class:"history-item-warning"},o("dso-icon",{key:"750ed3861b34c53fd0bdcf407da4bd8e566d9d92",icon:"status-warning-red-solid",role:"img","aria-label":"Waarschuwing"}),o("slot",{key:"50377ddabb3c9f22f70c182e44a520cac18397c6",name:"warning"}))))}get host(){return this}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.history-item{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px;padding-inline:8px}:host(:not([type=waarschuwing])) .history-item:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([current]:not([type=waarschuwing])) .history-item{background-color:#e5e5e5}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=tijdelijk-regelingdeel-besluit]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.history-item-title{white-space:nowrap}.history-item-title .title-anchor{color:#275937;font-weight:600;text-decoration:none}.history-item-title .title-anchor:hover{text-decoration:underline}.history-item-title .title-anchor:visited{color:#275937}.history-item-title .history-item-title-content{white-space:normal}.history-item-title dso-icon{margin-inline-start:4px}"}},[257,"dso-history-item",{type:[513],href:[513],current:[516]}]),d=c,l=function(){"undefined"!=typeof customElements&&["dso-history-item","dso-icon"].forEach((e=>{switch(e){case"dso-history-item":customElements.get(a(e))||customElements.define(a(e),c);break;case"dso-icon":customElements.get(a(e))||r()}}))};export{d as DsoHistoryItem,l as defineCustomElement}

package/dist/components/dso-input-range.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as r,createEvent as n,h as i,Fragment as t,transformTag as o}from"@stencil/core/internal/client";const a=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoChange=n(this,"dsoChange",3),this.unit=""}render(){const e=this.min||0,r=this.max||100,n=this.step||1;return i(t,null,this.description&&i("span",{key:"b1e37746f98e5cc20eaa63cd41b36b31278c5ebd",id:"description",hidden:!0},this.description),i("span",{key:"4a2887664a746f9ad1178ae5a91d3898e7f59efb",class:"counter","aria-hidden":"true"},e,this.unit),i("input",{key:"37507f728c4128b9945c8f9856de45be70db10c9",type:"range",min:e,max:r,step:n,value:this.value,class:"input","aria-label":this.label,"aria-describedby":this.description?"description":void 0,onChange:i=>this.dsoChange.emit({originalEvent:i,value:i.target instanceof HTMLInputElement?parseInt(i.target.value,10):void 0,max:r,min:e,step:n})}),i("span",{key:"feb885d773d0884f1f9d5c0ae07ff8b5488614c4",class:"counter","aria-hidden":"true"},r,this.unit))}get host(){return this}static get style(){return":host{display:flex;align-items:center;gap:0.625rem;padding-block:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:20px}.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-radius:50%;border-color:transparent}.input::-moz-range-thumb:hover{background-color:#275937}"}},[1,"dso-input-range",{min:[514],max:[514],value:[514],step:[514],label:[513],unit:[513],description:[513]}]),s=a,c=function(){"undefined"!=typeof customElements&&["dso-input-range"].forEach((e=>{"dso-input-range"===e&&(customElements.get(o(e))||customElements.define(o(e),a))}))};export{s as DsoInputRange,c as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as r,createEvent as n,h as i,Fragment as t,transformTag as o}from"@stencil/core/internal/client";const a=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoChange=n(this,"dsoChange",3),this.unit=""}render(){const e=this.min||0,r=this.max||100,n=this.step||1;return i(t,null,this.description&&i("span",{key:"c9c1c2a01f8d800d9cb861f6ef4b7073af1185e3",id:"description",hidden:!0},this.description),i("span",{key:"c10d10a730b924332e28bcd873ba9d0f7b3b28be",class:"counter","aria-hidden":"true"},e,this.unit),i("input",{key:"484f8c4a80bc4d46b8ce29a5bf8d543a7afc4748",type:"range",min:e,max:r,step:n,value:this.value,class:"input","aria-label":this.label,"aria-describedby":this.description?"description":void 0,onChange:i=>this.dsoChange.emit({originalEvent:i,value:i.target instanceof HTMLInputElement?parseInt(i.target.value,10):void 0,max:r,min:e,step:n})}),i("span",{key:"eab4c183cb6434e4bfe2e6cefdcd806baf6d6065",class:"counter","aria-hidden":"true"},r,this.unit))}get host(){return this}static get style(){return":host{display:flex;align-items:center;gap:0.625rem;padding-block:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:20px}.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-radius:50%;border-color:transparent}.input::-moz-range-thumb:hover{background-color:#275937}"}},[1,"dso-input-range",{min:[514],max:[514],value:[514],step:[514],label:[513],unit:[513],description:[513]}]),s=a,c=function(){"undefined"!=typeof customElements&&["dso-input-range"].forEach((e=>{"dso-input-range"===e&&(customElements.get(o(e))||customElements.define(o(e),a))}))};export{s as DsoInputRange,c as defineCustomElement}

package/dist/components/dso-legend-group.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as o,Host as s,transformTag as n}from"@stencil/core/internal/client";import{i as d}from"./i18n.js";import{d as a}from"./icon.js";import{d as r}from"./icon-button.js";const c={en:{"dso-legend-group":{edit:"Edit layers",view:"Leave editmode"}},nl:{"dso-legend-group":{edit:"Kaartlagen bewerken",view:"Bewerken verlaten"}}},l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoLegendGroupModeChange=i(this,"dsoLegendGroupModeChange",3),this.text=d((()=>this.host),c),this.toggleMode=e=>{this.dsoLegendGroupModeChange.emit({originalEvent:e.detail.originalEvent,next:"view"===this.mode?"edit":"view"})}}handleModeChange(){if(this.mode){const e=this.mode;this.legendItems.forEach((t=>{t._mode=e}))}}get legendItems(){return Array.from(this.host.querySelectorAll("dso-legend-item"))}connectedCallback(){this.mutationObserver=new MutationObserver((()=>{this.handleModeChange()})),this.mutationObserver.observe(this.host,{childList:!0}),this.handleModeChange()}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}render(){return o(s,{key:"28df01827602cfe94f1655495d3cc0b8ba5b66a0"},o("div",{key:"c684bb3db12b429c6986daa5ce23c92c46453d76",class:"legend-group-header"},o("slot",{key:"ea31dc722b197532052b816c542c67a6492a9022",name:"heading"}),this.mode&&o("dso-icon-button",{key:"6daa2c00dc4a87b44ef1a430147b2b04661bdb4d",expanded:"edit"===this.mode,label:this.text("view"===this.mode?"edit":"view"),icon:"view"===this.mode?"pencil":"check",variant:"tertiary",onDsoClick:this.toggleMode})),"edit"===this.mode&&o("slot",{key:"480a98979e3a91fa8e26664f48e47c384d24dea5",name:"options"}),o("slot",{key:"c135fa34e1db7950f21d333202291c35e9e2918e"}))}get host(){return this}static get watchers(){return{mode:[{handleModeChange:0}]}}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.legend-group-header{position:relative}.legend-group-header ::slotted(h3){margin-block:8px !important;padding-block:4px !important}.legend-group-header dso-icon-button{position:absolute;inset-block-start:0;inset-inline-end:0}"}},[257,"dso-legend-group",{mode:[513]},void 0,{mode:[{handleModeChange:0}]}]),h=l,b=function(){"undefined"!=typeof customElements&&["dso-legend-group","dso-icon","dso-icon-button"].forEach((e=>{switch(e){case"dso-legend-group":customElements.get(n(e))||customElements.define(n(e),l);break;case"dso-icon":customElements.get(n(e))||a();break;case"dso-icon-button":customElements.get(n(e))||r()}}))};export{h as DsoLegendGroup,b as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as o,Host as s,transformTag as n}from"@stencil/core/internal/client";import{i as d}from"./i18n.js";import{d as a}from"./icon.js";import{d as r}from"./icon-button.js";const c={en:{"dso-legend-group":{edit:"Edit layers",view:"Leave editmode"}},nl:{"dso-legend-group":{edit:"Kaartlagen bewerken",view:"Bewerken verlaten"}}},l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoLegendGroupModeChange=i(this,"dsoLegendGroupModeChange",3),this.text=d((()=>this.host),c),this.toggleMode=e=>{this.dsoLegendGroupModeChange.emit({originalEvent:e.detail.originalEvent,next:"view"===this.mode?"edit":"view"})}}handleModeChange(){if(this.mode){const e=this.mode;this.legendItems.forEach((t=>{t._mode=e}))}}get legendItems(){return Array.from(this.host.querySelectorAll("dso-legend-item"))}connectedCallback(){this.mutationObserver=new MutationObserver((()=>{this.handleModeChange()})),this.mutationObserver.observe(this.host,{childList:!0}),this.handleModeChange()}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}render(){return o(s,{key:"c9125b2e136179fa1d19e5e541cd2d2d9011d901"},o("div",{key:"18669cee48503532997b985e5e54963118555e90",class:"legend-group-header"},o("slot",{key:"617156b48af75016f2330a300f7d4a32934f5348",name:"heading"}),this.mode&&o("dso-icon-button",{key:"f2a7054c3b21a139c67a0eede344f4d0882906e7",expanded:"edit"===this.mode,label:this.text("view"===this.mode?"edit":"view"),icon:"view"===this.mode?"pencil":"check",variant:"tertiary",onDsoClick:this.toggleMode})),"edit"===this.mode&&o("slot",{key:"1e7537386e19d69e26227cfa8db90d169dae2abd",name:"options"}),o("slot",{key:"1e1b580e859dfcbedfcb02e4f495ad130bf79188"}))}get host(){return this}static get watchers(){return{mode:[{handleModeChange:0}]}}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.legend-group-header{position:relative}.legend-group-header ::slotted(h3){margin-block:8px !important;padding-block:4px !important}.legend-group-header dso-icon-button{position:absolute;inset-block-start:0;inset-inline-end:0}"}},[257,"dso-legend-group",{mode:[513]},void 0,{mode:[{handleModeChange:0}]}]),h=l,g=function(){"undefined"!=typeof customElements&&["dso-legend-group","dso-icon","dso-icon-button"].forEach((e=>{switch(e){case"dso-legend-group":customElements.get(n(e))||customElements.define(n(e),l);break;case"dso-icon":customElements.get(n(e))||a();break;case"dso-icon-button":customElements.get(n(e))||r()}}))};export{h as DsoLegendGroup,g as defineCustomElement}

package/dist/components/dso-legend-item.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as s,h as o,Fragment as a,Host as n,transformTag as l}from"@stencil/core/internal/client";import{c as d}from"./clsx.js";import{i as r}from"./i18n.js";import{d as c}from"./icon.js";import{d as b}from"./icon-button.js";import{d as h}from"./info-button.js";import{d as m}from"./scrollable.js";import{d as g}from"./slide-toggle.js";const p={en:{"dso-legend-item":{delete:"Remove layer",disabledInfo:"More info",options:"Edit layer",optionsAvailable:"Edit layer button is now available",optionsUnavailable:"Edit layer button is now disabled",makeActive:"Make {{label}} active",makeActiveDefault:"Make active"}},nl:{"dso-legend-item":{delete:"Kaartlaag verwijderen",disabledInfo:"Meer informatie",options:"Kaartlaag bewerken",optionsAvailable:"De knop Kaartlaag bewerken is nu beschikbaar",optionsUnavailable:"De knop Kaartlaag bewerken is nu uitgeschakeld",makeActive:"Maak {{label}} actief",makeActiveDefault:"Maak actief"}}},f=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=i(this,"dsoActiveChange",7),this.dsoDelete=i(this,"dsoDelete",3),this.dsoMouseEnter=i(this,"dsoMouseEnter",7),this.dsoMouseLeave=i(this,"dsoMouseLeave",7),this.disabled=!1,this._mode="view",this.showOptions=!1,this.text=r((()=>this.host),p)}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{attributes:!0,childList:!0,subtree:!0})}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get optionsSlottedElement(){return this.host.querySelector("[slot='options']")}renderEditMode(){return o("dso-icon-button",{label:this.text("delete"),icon:"trash",variant:"tertiary",id:"delete-button",onDsoClick:e=>this.dsoDelete.emit({originalEvent:e.detail.originalEvent})})}renderViewMode(e,t){return this.activatable?[o("dso-slide-toggle",{accessibleLabel:t,checked:this.active,disabled:this.disabled,onDsoActiveChange:e=>this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:e})}),e&&o(a,null,o("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.text(this.active?"optionsAvailable":"optionsUnavailable")),o("dso-icon-button",{disabled:!this.active||this.disabled,expanded:this.showOptions,label:this.text("options"),icon:"more-horizontal",variant:"tertiary",toggled:this.showOptions,id:"options-button",onDsoClick:()=>this.showOptions=!this.showOptions}))]:[]}renderRightContent(e,t){return"edit"===this._mode?this.renderEditMode():this.renderViewMode(e,t)}render(){const e=null!==this.symbolSlottedElement,t=null!==this.optionsSlottedElement,i=this.host.querySelector("span[slot='label']"),s=i?.textContent?this.text("makeActive",{label:i.textContent.toLowerCase()}):this.text("makeActiveDefault");return o(n,{key:"9b7ed34c8ea72c3a2e642650059fb156ba0ad440",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},o("div",{key:"a847b2cd9edd37023c37af28229dbc113cc950d7",class:d("legend-item",{"legend-item-symbol":e})},e&&o("div",{key:"660ddd73308757372228776a5637d48ee67ef4a2"},o("slot",{key:"15732d9a4a15e82315714b227e284df36e499457",name:"symbol"})),o("div",{key:"38610147aa7d439409bfd92abce6ba2afb73ff9d"},o("slot",{key:"1f6f49979470f5867023d402581743e9fb97837c",name:"label"})),this.disabled&&this.disabledMessage&&o("dso-info-button",{key:"d4b64ba6f58c69f0178529be0fdf6b9f8209ea7c",label:this.text("disabledInfo"),toggletipPlacement:"bottom"},o("div",{key:"d98d584d44fce4ca7b18ee4cd1a0d4fd68ed82ca",slot:"toggletip"},this.disabledMessage)),o("div",{key:"4b693c3cc699db0cce0ca43a35d1db165e8fe013",class:"legend-item-right-content"},this.renderRightContent(t,s))),t&&o("div",{key:"1d1c00a99077c4fb13c51d46c602fbdd735ba411",hidden:this.disabled||!this.showOptions,class:"options"},o("slot",{key:"097b5874ec1fbfc19a65e857e45697bd8c738f1d",name:"options"})))}get host(){return this}static get style(){return":host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item-right-content{margin-inline-start:auto;display:flex}.legend-item-right-content dso-slide-toggle{line-height:1;padding-block-start:0 !important}.legend-item-right-content dso-icon-button{margin-inline-start:4px}"}},[257,"dso-legend-item",{disabled:[516],disabledMessage:[513,"disabled-message"],activatable:[516],active:[516],_mode:[513],showOptions:[32]}]),u=f,k=function(){"undefined"!=typeof customElements&&["dso-legend-item","dso-icon","dso-icon-button","dso-info-button","dso-scrollable","dso-slide-toggle"].forEach((e=>{switch(e){case"dso-legend-item":customElements.get(l(e))||customElements.define(l(e),f);break;case"dso-icon":customElements.get(l(e))||c();break;case"dso-icon-button":customElements.get(l(e))||b();break;case"dso-info-button":customElements.get(l(e))||h();break;case"dso-scrollable":customElements.get(l(e))||m();break;case"dso-slide-toggle":customElements.get(l(e))||g()}}))};export{u as DsoLegendItem,k as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as s,h as o,Fragment as a,Host as n,transformTag as l}from"@stencil/core/internal/client";import{c as d}from"./clsx.js";import{i as r}from"./i18n.js";import{d as c}from"./icon.js";import{d as b}from"./icon-button.js";import{d as h}from"./info-button.js";import{d as m}from"./scrollable.js";import{d as f}from"./slide-toggle.js";const g={en:{"dso-legend-item":{delete:"Remove layer",disabledInfo:"More info",options:"Edit layer",optionsAvailable:"Edit layer button is now available",optionsUnavailable:"Edit layer button is now disabled",makeActive:"Make {{label}} active",makeActiveDefault:"Make active"}},nl:{"dso-legend-item":{delete:"Kaartlaag verwijderen",disabledInfo:"Meer informatie",options:"Kaartlaag bewerken",optionsAvailable:"De knop Kaartlaag bewerken is nu beschikbaar",optionsUnavailable:"De knop Kaartlaag bewerken is nu uitgeschakeld",makeActive:"Maak {{label}} actief",makeActiveDefault:"Maak actief"}}},p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=i(this,"dsoActiveChange",7),this.dsoDelete=i(this,"dsoDelete",3),this.dsoMouseEnter=i(this,"dsoMouseEnter",7),this.dsoMouseLeave=i(this,"dsoMouseLeave",7),this.disabled=!1,this._mode="view",this.showOptions=!1,this.text=r((()=>this.host),g)}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{attributes:!0,childList:!0,subtree:!0})}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get optionsSlottedElement(){return this.host.querySelector("[slot='options']")}renderEditMode(){return o("dso-icon-button",{label:this.text("delete"),icon:"trash",variant:"tertiary",id:"delete-button",onDsoClick:e=>this.dsoDelete.emit({originalEvent:e.detail.originalEvent})})}renderViewMode(e,t){return this.activatable?[o("dso-slide-toggle",{accessibleLabel:t,checked:this.active,disabled:this.disabled,onDsoActiveChange:e=>this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:e})}),e&&o(a,null,o("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.text(this.active?"optionsAvailable":"optionsUnavailable")),o("dso-icon-button",{disabled:!this.active||this.disabled,expanded:this.showOptions,label:this.text("options"),icon:"more-horizontal",variant:"tertiary",toggled:this.showOptions,id:"options-button",onDsoClick:()=>this.showOptions=!this.showOptions}))]:[]}renderRightContent(e,t){return"edit"===this._mode?this.renderEditMode():this.renderViewMode(e,t)}render(){const e=null!==this.symbolSlottedElement,t=null!==this.optionsSlottedElement,i=this.host.querySelector("span[slot='label']"),s=i?.textContent?this.text("makeActive",{label:i.textContent.toLowerCase()}):this.text("makeActiveDefault");return o(n,{key:"9910f7c632dd64364f05e11e80ad9393ff293891",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},o("div",{key:"adbc079c35c38cc3d95f8fb22b13df88bf323ff2",class:d("legend-item",{"legend-item-symbol":e})},e&&o("div",{key:"d63506083cd82503562e2d979c8995607493b692"},o("slot",{key:"93df0bf546e4d84aa559df34f5bf8c55320ec85c",name:"symbol"})),o("div",{key:"97383d43dd1463c3c6009922e022ecfd876afb9a"},o("slot",{key:"3b7930871f1b72a069707b67e43d647e94f6558f",name:"label"})),this.disabled&&this.disabledMessage&&o("dso-info-button",{key:"c27822a26fa9fdace3a5b80dbed2d8cb3b9d3b0e",label:this.text("disabledInfo"),toggletipPlacement:"bottom"},o("div",{key:"8a52854c3cd28c122fefa8dac0d8b3bbc647a3b2",slot:"toggletip"},this.disabledMessage)),o("div",{key:"3ef205f555ea2d9f9f798225fb32b4273e8fca1b",class:"legend-item-right-content"},this.renderRightContent(t,s))),t&&o("div",{key:"af5340c5818b6c4cead0af10d8bbd93ad56f5738",hidden:this.disabled||!this.showOptions,class:"options"},o("slot",{key:"3aae70d66af91143ef385b00aa353414b86da5ab",name:"options"})))}get host(){return this}static get style(){return":host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item-right-content{margin-inline-start:auto;display:flex}.legend-item-right-content dso-slide-toggle{line-height:1;padding-block-start:0 !important}.legend-item-right-content dso-icon-button{margin-inline-start:4px}"}},[257,"dso-legend-item",{disabled:[516],disabledMessage:[513,"disabled-message"],activatable:[516],active:[516],_mode:[513],showOptions:[32]}]),u=p,k=function(){"undefined"!=typeof customElements&&["dso-legend-item","dso-icon","dso-icon-button","dso-info-button","dso-scrollable","dso-slide-toggle"].forEach((e=>{switch(e){case"dso-legend-item":customElements.get(l(e))||customElements.define(l(e),p);break;case"dso-icon":customElements.get(l(e))||c();break;case"dso-icon-button":customElements.get(l(e))||b();break;case"dso-info-button":customElements.get(l(e))||h();break;case"dso-scrollable":customElements.get(l(e))||m();break;case"dso-slide-toggle":customElements.get(l(e))||f()}}))};export{u as DsoLegendItem,k as defineCustomElement}

package/dist/components/dso-legend.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as o,Host as i,transformTag as n}from"@stencil/core/internal/client";import{c as a}from"./clsx.js";import{i as r}from"./i18n.js";import{i as d}from"./is-modified-event.js";import{d as c}from"./icon.js";import{d as l}from"./icon-button.js";import{d as b}from"./scrollable.js";const h={en:{"dso-legend":{closeLegend:"Close legend"}},nl:{"dso-legend":{closeLegend:"Sluit legenda"}}},p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoContentSwitch=s(this,"dsoContentSwitch",7),this.dsoClose=s(this,"dsoClose",7),this.tabItems=[],this.text=r((()=>this.host),h),this.keyUpHandler=e=>{if(e.target instanceof t)switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}},this.clickHandler=e=>{const t=this.tabs.findIndex((t=>t===e.currentTarget)),s=this.tabItems[t];s&&!s.active&&this.dsoContentSwitch.emit({originalEvent:e,isModifiedEvent:d(e)})}}get tabs(){return Array.from(this.host.shadowRoot.querySelectorAll('[role="tab"]'))}get firstTab(){return this.tabs[0]}get lastTab(){return this.tabs[this.tabs.length-1]}moveFocusToTab(e){e?.focus()}moveFocusToPreviousTab(e){const t=this.tabs.findIndex((t=>t===e));this.moveFocusToTab(this.tabs[t-1]??this.lastTab)}moveFocusToNextTab(e){const t=this.tabs.findIndex((t=>t===e));this.moveFocusToTab(this.tabs[t+1]??this.firstTab)}render(){return o(i,{key:"b43c88fc0df9707a79ed8874fc4841cc4eb38575"},o("div",{key:"5e34bfd53975616ab7af672b7a9a5cae3a7ac370",class:"topbar"},o("div",{key:"d750d4682f0c303bb7dae3d4946feddd816445d0",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},this.tabItems.map((e=>o("button",{class:a("tab",{active:e.active}),role:"tab","aria-selected":e.active?"true":"false",...e.active?{}:{tabIndex:-1},onClick:this.clickHandler},e.label)))),o("dso-icon-button",{key:"160e6006ba87ad67debcaeb77450c1b0fbcd70ae",icon:"cross",variant:"tertiary",label:this.text("closeLegend"),class:"close-button",onDsoClick:e=>this.dsoClose.emit({originalEvent:e.detail.originalEvent})})),o("dso-scrollable",{key:"8032c7a4d34e4909f815ca52bdf46515b682e3eb",class:"content"},o("div",{key:"2fb5ab230b72aa73aa3b42dfe88fc8a01eac4885",role:"tabpanel",tabIndex:0},o("slot",{key:"45408018533a684dd2e924c75044bef3cb62907e"}))))}get host(){return this}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;letter-spacing:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host ::slotted(dso-legend-group:last-child){margin-block-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dso-scrollable-container-border-end-start-radius:4px;--_dso-scrollable-container-border-end-end-radius:4px;--_dso-scrollable-container-padding-inline:16px;max-block-size:var(--_dso-legend-content-max-block-size, 52vh);border-end-start-radius:4px;border-end-end-radius:4px}"}},[257,"dso-legend",{tabItems:[16]}]),f=p,u=function(){"undefined"!=typeof customElements&&["dso-legend","dso-icon","dso-icon-button","dso-scrollable"].forEach((e=>{switch(e){case"dso-legend":customElements.get(n(e))||customElements.define(n(e),p);break;case"dso-icon":customElements.get(n(e))||c();break;case"dso-icon-button":customElements.get(n(e))||l();break;case"dso-scrollable":customElements.get(n(e))||b()}}))};export{f as DsoLegend,u as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as o,Host as i,transformTag as n}from"@stencil/core/internal/client";import{c as r}from"./clsx.js";import{i as a}from"./i18n.js";import{i as d}from"./is-modified-event.js";import{d as c}from"./icon.js";import{d as l}from"./icon-button.js";import{d as b}from"./scrollable.js";const h={en:{"dso-legend":{closeLegend:"Close legend"}},nl:{"dso-legend":{closeLegend:"Sluit legenda"}}},p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoContentSwitch=s(this,"dsoContentSwitch",7),this.dsoClose=s(this,"dsoClose",7),this.tabItems=[],this.text=a((()=>this.host),h),this.keyUpHandler=e=>{if(e.target instanceof t)switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}},this.clickHandler=e=>{const t=this.tabs.findIndex((t=>t===e.currentTarget)),s=this.tabItems[t];s&&!s.active&&this.dsoContentSwitch.emit({originalEvent:e,isModifiedEvent:d(e)})}}get tabs(){return Array.from(this.host.shadowRoot.querySelectorAll('[role="tab"]'))}get firstTab(){return this.tabs[0]}get lastTab(){return this.tabs[this.tabs.length-1]}moveFocusToTab(e){e?.focus()}moveFocusToPreviousTab(e){const t=this.tabs.findIndex((t=>t===e));this.moveFocusToTab(this.tabs[t-1]??this.lastTab)}moveFocusToNextTab(e){const t=this.tabs.findIndex((t=>t===e));this.moveFocusToTab(this.tabs[t+1]??this.firstTab)}render(){return o(i,{key:"6a19193a2882506d8ed6c2678fc5fb7d50e306d3"},o("div",{key:"377d9462efb4a215fb59c3a71ad992ff75053a43",class:"topbar"},o("div",{key:"efc1f5cf56372d7a542268cb76bdee32315ba203",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},this.tabItems.map((e=>o("button",{class:r("tab",{active:e.active}),role:"tab","aria-selected":e.active?"true":"false",...e.active?{}:{tabIndex:-1},onClick:this.clickHandler},e.label)))),o("dso-icon-button",{key:"c6344cb53732dc7c8e2147fa5164b23b9908e2c5",icon:"cross",variant:"tertiary",label:this.text("closeLegend"),class:"close-button",onDsoClick:e=>this.dsoClose.emit({originalEvent:e.detail.originalEvent})})),o("dso-scrollable",{key:"10a5928f03f917e015bfed1cdbbdc3cd4b741a75",class:"content"},o("div",{key:"57341e45e63cf1fa5105fc88dcbcd27c639c0e06",role:"tabpanel",tabIndex:0},o("slot",{key:"0215d38bdde6a07b4142649656658a1bd4710dc6"}))))}get host(){return this}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;letter-spacing:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host ::slotted(dso-legend-group:last-child){margin-block-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dso-scrollable-container-border-end-start-radius:4px;--_dso-scrollable-container-border-end-end-radius:4px;--_dso-scrollable-container-padding-inline:16px;max-block-size:var(--_dso-legend-content-max-block-size, 52vh);border-end-start-radius:4px;border-end-end-radius:4px}"}},[257,"dso-legend",{tabItems:[16]}]),f=p,u=function(){"undefined"!=typeof customElements&&["dso-legend","dso-icon","dso-icon-button","dso-scrollable"].forEach((e=>{switch(e){case"dso-legend":customElements.get(n(e))||customElements.define(n(e),p);break;case"dso-icon":customElements.get(n(e))||c();break;case"dso-icon-button":customElements.get(n(e))||l();break;case"dso-scrollable":customElements.get(n(e))||b()}}))};export{f as DsoLegend,u as defineCustomElement}

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

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as o,createEvent as e,forceUpdate as s,h as r,Fragment as i,transformTag as n}from"@stencil/core/internal/client";import{c as a}from"./clsx.js";import{d}from"./icon.js";import{d as l}from"./icon-button.js";import{d as c}from"./info.js";import{d as b}from"./info-button.js";import{d as u}from"./scrollable.js";import{d as p}from"./selectable.js";const f=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dsoCountChange=e(this,"dsoCountChange",7),this.dsoSelectedChange=e(this,"dsoSelectedChange",7),this.focusIncrementButtonAfterRender=!1,this.checked=!1,this.disabled=!1}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{characterData:!0,childList:!0,subtree:!0,attributes:!0})}componentDidRender(){this.subcontentSlot?.hasAttribute("aria-hidden")||this.subcontentSlot?.setAttribute("aria-hidden","true"),this.focusIncrementButtonAfterRender&&(this.focusIncrementButtonAfterRender=!1,this.incrementButton?.setFocus())}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}stepValue(t,o){if("number"==typeof this.count){const e="increment"===o?this.count+1:this.count-1;if(!this.isNewCountValid(e))return;"decrement"===o&&1===e&&(this.focusIncrementButtonAfterRender=!0),this.dsoCountChange.emit({originalEvent:t,count:e})}}handleSelectClick(t){t.preventDefault(),void 0===this.count?this.dsoSelectedChange.emit({originalEvent:t,checked:!this.checked}):this.dsoCountChange.emit({originalEvent:t,count:this.count>0?0:1})}isNewCountValid(t){return!(void 0!==this.min&&void 0!==this.max&&(t<Number(this.min)||t>Number(this.max)))}render(){const t=this.checked||void 0!==this.count&&this.count>0;return r("div",{key:"a456e0620bc42f18b185b4c1a9439c1fe3cf1aef",class:a(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"867c31ff683477c95e0df5fda982f2aa56c117cd",class:a(["dso-list-button",{"dso-selected":t,"dso-single-count":1===this.count}]),onClick:t=>this.handleSelectClick(t)},r("dso-selectable",{key:"c012d5bb80973a01a91803c7685c3150c5a926d7",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled},r("span",{key:"102e32c6fb04eeca284ca3fe3131f067e2b0343d"},this.label,this.sublabel&&r("span",{key:"3dad120610012113d7562483bf61b478ce9205de",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"6990b9666c6c0be81e50e8ae432f0e38e985efe0",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"446fae472320465f3d77d0ada41a8822a088343d",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"67e2ffbe64b147dc15432402860305abc52f514c",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"63aa66e9d77121906a47ac021a10941c8d5d4a9d",class:"subcontent"},r("slot",{key:"3db8cef36ee03f1927f99d971687ad17b8a9f088",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"a3cf60e804d2b5efcfaf560c0622a5c97c8d215e",class:"dso-input-number"},this.count>1&&r(i,{key:"2bc46a1d646e1059b520206d2ebff380950ff5f7"},r("dso-icon-button",{key:"e4bb575cf7b73752cf4c423c094461e25330f9d9",label:"Aantal verlagen",variant:"tertiary",icon:"minus-circle-outline",disabled:this.count===Number(this.min)||this.disabled,onDsoClick:t=>this.stepValue(t,"decrement")}),r("span",{key:"494eabda18b6936977ffe1152924bfa542fe5f03",class:"dso-input-step-counter","aria-hidden":"true"},this.count)),r("span",{key:"f4f9497a23dc31b528a8c848e34699ffc2ddd7f9",class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.count),r("dso-icon-button",{key:"2a034e31a9048fcd929915a11052d3f89af8cb13",ref:t=>this.incrementButton=t,label:"Aantal verhogen",variant:"tertiary",icon:"plus-circle-outline",disabled:this.count===Number(this.max)||this.disabled,onDsoClick:t=>this.stepValue(t,"increment")})))}get host(){return this}static get style(){return"*, *::after, *::before {   box-sizing: border-box; }  :host {   display: block; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary {   background-color: var(--_dso-button-tertiary-background-color, );   border-color: var(--_dso-button-tertiary-border-color, );   color: var(--_dso-button-tertiary-color, #39870c);   float: var(--_dso-button-float-tertiary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: auto;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } .dso-tertiary:hover {   background-color: var(--_dso-button-tertiary-hover-background-color, );   border-color: var(--_dso-button-tertiary-hover-border-color, );   color: var(--_dso-button-tertiary-hover-color, #275937);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary:active {   background-color: var(--_dso-button-tertiary-active-background-color, );   border-color: var(--_dso-button-tertiary-active-border-color, );   color: var(--_dso-button-tertiary-active-color, #173521);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {   background-color: var(--_dso-button-tertiary-disabled-background-color, );   border-color: var(--_dso-button-tertiary-disabled-border-color, );   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary.dso-small {   line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small {   line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small {   padding-block: 9px; } .dso-tertiary {   border: 0;   line-height: 1;   padding-inline: 0;   padding-block: var(--_dso-button-padding-block-tertiary, 0);   background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } .dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } .dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } .dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } .dso-tertiary.dso-spinner-left::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: middle;   inline-size: 24px;   margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: middle;   inline-size: 24px;   margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 4px; } .dso-tertiary dso-icon, .dso-tertiary span {   vertical-align: middle; } .dso-tertiary {   cursor: pointer; }  .dso-input-number {   align-items: center;   display: flex; } .dso-input-number .dso-input-step-counter {   text-align: center;   inline-size: 1.5rem;   font-size: 0.875rem; }  .dso-button-group {   display: flex;   flex-direction: row; } .dso-button-group.dso-disabled > * {   background-color: #fff;   border-color: #e5e5e5;   color: #666;   pointer-events: none; } .dso-button-group > * {   border-radius: 0; } .dso-button-group > *:first-child {   border-radius: 4px 0 0 4px; } .dso-button-group > *:not(:first-child) {   border-inline-start-style: none !important; } .dso-button-group > *:last-child {   border-radius: 0 4px 4px 0; } .dso-button-group > *:only-child {   border-radius: 4px; } .dso-button-group > .dso-input-number {   border-style: solid;   border-width: 1px;   flex-wrap: nowrap;   padding-block: 0;   padding-inline: 16px;   background-color: #fff;   border-color: #ccc;   color: #191919; } @media screen and (max-width: 767px) {   .dso-button-group > .dso-input-number {     justify-content: center;   } } .dso-button-group > *:hover + .dso-input-number, .dso-button-group > *:focus + .dso-input-number {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-button-group > *.dso-selected + .dso-input-number {   box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;   background-color: #fff;   border-color: #39870c;   color: #191919; } .dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover, .dso-button-group > *.active + .dso-input-number, .dso-button-group > *.active + .dso-input-number:hover {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover, .dso-button-group > *[disabled] + .dso-input-number, .dso-button-group > *[disabled] + .dso-input-number:hover {   opacity: 1;   background-color: #fff;   border-color: #ccc;   color: #666; } .dso-button-group .dso-list-button {   padding-inline-end: 15px; }  .dso-list-button {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-list-button:focus, .dso-list-button:focus-visible {   outline-offset: 2px; } .dso-list-button:active {   outline: 0; } .dso-list-button {   background-color: #fff;   border-color: #ccc;   color: #191919;   border-radius: 4px;   border-width: 1px;   border-style: solid;   font-weight: 600;   padding-block: 15px;   padding-inline: 15px 47px;   position: relative;   text-align: start;   white-space: normal;   inline-size: 100%;   cursor: pointer; } .dso-list-button:hover, .dso-list-button:focus {   background-color: #fff;   border-color: #39870c;   color: #191919; } .dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {   background-color: #fff;   border-color: #ccc;   color: #666;   opacity: 1; } .dso-list-button dso-selectable:not(:last-child) {   margin-block-end: 0; } .dso-list-button .dso-selectable-container label {   font-weight: 700; } .dso-list-button.dso-selected {   border-color: #39870c;   border-width: 1px;   box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c; } @media screen and (min-width: 768px) {   .dso-list-button.dso-selected.dso-single-count {     border-inline-end: 0;     box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;   } } .dso-list-button label {   cursor: inherit; } .dso-list-button > span {   display: block; } .dso-list-button .dso-sublabel, .dso-list-button .subcontent {   font-weight: 400;   inline-size: 100%;   padding-inline-start: 32px; } .dso-list-button dso-icon {   block-size: 24px;   color: #39870c;   inset-block-start: 15px;   inset-inline-end: 15px;   inline-size: 24px;   break-before: page;   position: absolute; } @media screen and (max-width: 767px) {   .dso-list-button.dso-selected.dso-single-count::after {     inline-size: 0;   } }"}},[257,"dso-list-button",{label:[513],sublabel:[513],count:[514],min:[520],max:[520],checked:[516],disabled:[516],subcontentPrefix:[513,"subcontent-prefix"]}]),h=f,g=function(){"undefined"!=typeof customElements&&["dso-list-button","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((t=>{switch(t){case"dso-list-button":customElements.get(n(t))||customElements.define(n(t),f);break;case"dso-icon":customElements.get(n(t))||d();break;case"dso-icon-button":customElements.get(n(t))||l();break;case"dso-info":customElements.get(n(t))||c();break;case"dso-info-button":customElements.get(n(t))||b();break;case"dso-scrollable":customElements.get(n(t))||u();break;case"dso-selectable":customElements.get(n(t))||p()}}))};export{h as DsoListButton,g as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as o,createEvent as e,forceUpdate as s,h as r,Fragment as i,transformTag as n}from"@stencil/core/internal/client";import{c as d}from"./clsx.js";import{d as a}from"./icon.js";import{d as l}from"./icon-button.js";import{d as c}from"./info.js";import{d as b}from"./info-button.js";import{d as u}from"./scrollable.js";import{d as p}from"./selectable.js";const f=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dsoCountChange=e(this,"dsoCountChange",7),this.dsoSelectedChange=e(this,"dsoSelectedChange",7),this.focusIncrementButtonAfterRender=!1,this.checked=!1,this.disabled=!1}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{characterData:!0,childList:!0,subtree:!0,attributes:!0})}componentDidRender(){this.subcontentSlot?.hasAttribute("aria-hidden")||this.subcontentSlot?.setAttribute("aria-hidden","true"),this.focusIncrementButtonAfterRender&&(this.focusIncrementButtonAfterRender=!1,this.incrementButton?.setFocus())}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}stepValue(t,o){if("number"==typeof this.count){const e="increment"===o?this.count+1:this.count-1;if(!this.isNewCountValid(e))return;"decrement"===o&&1===e&&(this.focusIncrementButtonAfterRender=!0),this.dsoCountChange.emit({originalEvent:t,count:e})}}handleSelectClick(t){t.preventDefault(),void 0===this.count?this.dsoSelectedChange.emit({originalEvent:t,checked:!this.checked}):this.dsoCountChange.emit({originalEvent:t,count:this.count>0?0:1})}isNewCountValid(t){return!(void 0!==this.min&&void 0!==this.max&&(t<Number(this.min)||t>Number(this.max)))}render(){const t=this.checked||void 0!==this.count&&this.count>0;return r("div",{key:"427ff9cd8cc7dc0c569a2f394ccf2d45563b21e8",class:d(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"d088de067e202fa3e9e07b7efa0f12e3bbcd6623",class:d(["dso-list-button",{"dso-selected":t,"dso-single-count":1===this.count}]),onClick:t=>this.handleSelectClick(t)},r("dso-selectable",{key:"d81f506ad4d2825e11fb02b58d53084db34e805d",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled},r("span",{key:"3d4add309ed7f30664055d68fbd82d0ada7209c3"},this.label,this.sublabel&&r("span",{key:"8ea2cee6ec78f2dac9f82c0ac68d63325e333172",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"c108019419d8392734c72881c9e12f7ab939eeac",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"e92bdb531740986a4740c40273b7e59d87a2f14c",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"f6829e8e7cfa5ad117bea1c4d43fd57723f9f126",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"50ac21ae4c209ffebc2dcdd6bdf38fd77540b2f2",class:"subcontent"},r("slot",{key:"8cf1fda0a7d5c20d719ffcf926e468617c13005e",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"dd5a7569abfeae4fc70882f7bdd1eb26f6c124fe",class:"dso-input-number"},this.count>1&&r(i,{key:"5579dffd39aae5d6a66c8c9f98231d1b80756d20"},r("dso-icon-button",{key:"4544a7074baabc5b220eca4b25b7f730e6107d3f",label:"Aantal verlagen",variant:"tertiary",icon:"minus-circle-outline",disabled:this.count===Number(this.min)||this.disabled,onDsoClick:t=>this.stepValue(t,"decrement")}),r("span",{key:"3676a56084254d00110d4c9983204b5d66752a33",class:"dso-input-step-counter","aria-hidden":"true"},this.count)),r("span",{key:"c2f47bb502b61a6d50de0078a2e13c53f158ba51",class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.count),r("dso-icon-button",{key:"2933caf8dfa55d54519aac55574e3ec5422cbf00",ref:t=>this.incrementButton=t,label:"Aantal verhogen",variant:"tertiary",icon:"plus-circle-outline",disabled:this.count===Number(this.max)||this.disabled,onDsoClick:t=>this.stepValue(t,"increment")})))}get host(){return this}static get style(){return"*, *::after, *::before {   box-sizing: border-box; }  :host {   display: block; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary {   background-color: var(--_dso-button-tertiary-background-color, );   border-color: var(--_dso-button-tertiary-border-color, );   color: var(--_dso-button-tertiary-color, #39870c);   float: var(--_dso-button-float-tertiary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: auto;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } .dso-tertiary:hover {   background-color: var(--_dso-button-tertiary-hover-background-color, );   border-color: var(--_dso-button-tertiary-hover-border-color, );   color: var(--_dso-button-tertiary-hover-color, #275937);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary:active {   background-color: var(--_dso-button-tertiary-active-background-color, );   border-color: var(--_dso-button-tertiary-active-border-color, );   color: var(--_dso-button-tertiary-active-color, #173521);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {   background-color: var(--_dso-button-tertiary-disabled-background-color, );   border-color: var(--_dso-button-tertiary-disabled-border-color, );   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);   float: var(--_dso-button-float-tertiary, none); } .dso-tertiary.dso-small {   line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small {   line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small {   padding-block: 9px; } .dso-tertiary {   border: 0;   line-height: 1;   padding-inline: 0;   padding-block: var(--_dso-button-padding-block-tertiary, 0);   background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } .dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } .dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } .dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } .dso-tertiary.dso-spinner-left::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: middle;   inline-size: 24px;   margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: middle;   inline-size: 24px;   margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 4px; } .dso-tertiary dso-icon, .dso-tertiary span {   vertical-align: middle; } .dso-tertiary {   cursor: pointer; }  .dso-input-number {   align-items: center;   display: flex; } .dso-input-number .dso-input-step-counter {   text-align: center;   inline-size: 1.5rem;   font-size: 0.875rem; }  .dso-button-group {   display: flex;   flex-direction: row; } .dso-button-group.dso-disabled > * {   background-color: #fff;   border-color: #e5e5e5;   color: #666;   pointer-events: none; } .dso-button-group > * {   border-radius: 0; } .dso-button-group > *:first-child {   border-radius: 4px 0 0 4px; } .dso-button-group > *:not(:first-child) {   border-inline-start-style: none !important; } .dso-button-group > *:last-child {   border-radius: 0 4px 4px 0; } .dso-button-group > *:only-child {   border-radius: 4px; } .dso-button-group > .dso-input-number {   border-style: solid;   border-width: 1px;   flex-wrap: nowrap;   padding-block: 0;   padding-inline: 16px;   background-color: #fff;   border-color: #ccc;   color: #191919; } @media screen and (max-width: 767px) {   .dso-button-group > .dso-input-number {     justify-content: center;   } } .dso-button-group > *:hover + .dso-input-number, .dso-button-group > *:focus + .dso-input-number {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-button-group > *.dso-selected + .dso-input-number {   box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;   background-color: #fff;   border-color: #39870c;   color: #191919; } .dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover, .dso-button-group > *.active + .dso-input-number, .dso-button-group > *.active + .dso-input-number:hover {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover, .dso-button-group > *[disabled] + .dso-input-number, .dso-button-group > *[disabled] + .dso-input-number:hover {   opacity: 1;   background-color: #fff;   border-color: #ccc;   color: #666; } .dso-button-group .dso-list-button {   padding-inline-end: 15px; }  .dso-list-button {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-list-button:focus, .dso-list-button:focus-visible {   outline-offset: 2px; } .dso-list-button:active {   outline: 0; } .dso-list-button {   background-color: #fff;   border-color: #ccc;   color: #191919;   border-radius: 4px;   border-width: 1px;   border-style: solid;   font-weight: 600;   padding-block: 15px;   padding-inline: 15px 47px;   position: relative;   text-align: start;   white-space: normal;   inline-size: 100%;   cursor: pointer; } .dso-list-button:hover, .dso-list-button:focus {   background-color: #fff;   border-color: #39870c;   color: #191919; } .dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {   background-color: #fff;   border-color: #ccc;   color: #666;   opacity: 1; } .dso-list-button dso-selectable:not(:last-child) {   margin-block-end: 0; } .dso-list-button .dso-selectable-container label {   font-weight: 700; } .dso-list-button.dso-selected {   border-color: #39870c;   border-width: 1px;   box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c; } @media screen and (min-width: 768px) {   .dso-list-button.dso-selected.dso-single-count {     border-inline-end: 0;     box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;   } } .dso-list-button label {   cursor: inherit; } .dso-list-button > span {   display: block; } .dso-list-button .dso-sublabel, .dso-list-button .subcontent {   font-weight: 400;   inline-size: 100%;   padding-inline-start: 32px; } .dso-list-button dso-icon {   block-size: 24px;   color: #39870c;   inset-block-start: 15px;   inset-inline-end: 15px;   inline-size: 24px;   break-before: page;   position: absolute; } @media screen and (max-width: 767px) {   .dso-list-button.dso-selected.dso-single-count::after {     inline-size: 0;   } }"}},[257,"dso-list-button",{label:[513],sublabel:[513],count:[514],min:[520],max:[520],checked:[516],disabled:[516],subcontentPrefix:[513,"subcontent-prefix"]}]),h=f,g=function(){"undefined"!=typeof customElements&&["dso-list-button","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((t=>{switch(t){case"dso-list-button":customElements.get(n(t))||customElements.define(n(t),f);break;case"dso-icon":customElements.get(n(t))||a();break;case"dso-icon-button":customElements.get(n(t))||l();break;case"dso-info":customElements.get(n(t))||c();break;case"dso-info-button":customElements.get(n(t))||b();break;case"dso-scrollable":customElements.get(n(t))||u();break;case"dso-selectable":customElements.get(n(t))||p()}}))};export{h as DsoListButton,g as defineCustomElement}

package/dist/components/dso-logo.js

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

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

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,createEvent as o,h as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./i18n.js";import{d as n}from"./icon.js";import{d as r}from"./icon-button.js";import{d}from"./info.js";import{d as c}from"./info-button.js";import{d as l}from"./scrollable.js";import{d as b}from"./selectable.js";import{v as m}from"./v4.js";const f={en:{"dso-map-base-layers":{background:"Background"}},nl:{"dso-map-base-layers":{background:"Achtergrond"}}},h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoBaseLayerChange=o(this,"dsoBaseLayerChange",7),this.selectableRefs={},this.group=m(),this.text=i((()=>this.host),f)}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>!e.disabled&&!0===this.previousBaselayers?.find((s=>s.id===e.id))?.disabled)).forEach((e=>{this.selectableRefs[e.id]?.toggleInfo(!1)})),this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs)delete this.selectableRefs[e];return t("fieldset",{key:"8021adc45a3a8964cd2fb229844204f75190a728",class:"form-group dso-radios"},t("legend",{key:"5413e633389032190f8894a96ca44a505074c4f1",class:"sr-only"},"Achtergrond"),t("div",{key:"cd74d34e240fec9aa2decfae7dbd9404cc4852f3",class:"dso-label-container"},t("span",{key:"3816e67c6f3c4bdc84dab60a04ed4b77ffbfe116",class:"control-label","aria-hidden":"true"},this.text("background"))),t("div",{key:"940d382bb243fc7ff7d66f53f2d6a14839a881cc",class:"dso-field-container"},this.baseLayers.map((e=>t("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?t("p",{slot:"info"},e.info):null)))))}get host(){return this}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}"}},[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]),p=h,u=function(){"undefined"!=typeof customElements&&["dso-map-base-layers","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((e=>{switch(e){case"dso-map-base-layers":customElements.get(a(e))||customElements.define(a(e),h);break;case"dso-icon":customElements.get(a(e))||n();break;case"dso-icon-button":customElements.get(a(e))||r();break;case"dso-info":customElements.get(a(e))||d();break;case"dso-info-button":customElements.get(a(e))||c();break;case"dso-scrollable":customElements.get(a(e))||l();break;case"dso-selectable":customElements.get(a(e))||b()}}))};export{p as DsoMapBaseLayers,u as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as o,h as t,transformTag as a}from"@stencil/core/internal/client";import{i}from"./i18n.js";import{d as n}from"./icon.js";import{d as r}from"./icon-button.js";import{d as l}from"./info.js";import{d as c}from"./info-button.js";import{d}from"./scrollable.js";import{d as b}from"./selectable.js";import{v as m}from"./v4.js";const f={en:{"dso-map-base-layers":{background:"Background"}},nl:{"dso-map-base-layers":{background:"Achtergrond"}}},h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoBaseLayerChange=o(this,"dsoBaseLayerChange",7),this.selectableRefs={},this.group=m(),this.text=i((()=>this.host),f)}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>!e.disabled&&!0===this.previousBaselayers?.find((s=>s.id===e.id))?.disabled)).forEach((e=>{this.selectableRefs[e.id]?.toggleInfo(!1)})),this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs)delete this.selectableRefs[e];return t("fieldset",{key:"484811640eda82f3e6b2a2e354216cbd2ee62e80",class:"form-group dso-radios"},t("legend",{key:"190c62ae5665eb16c9a5383602eff770be0e3d94",class:"sr-only"},"Achtergrond"),t("div",{key:"48359a8884c27c49366a618603b7c875fed7bf01",class:"dso-label-container"},t("span",{key:"9437465960fa44beec6331e79609af3c51ec1051",class:"control-label","aria-hidden":"true"},this.text("background"))),t("div",{key:"a5e04948d139028b8b6d514551be1f220ae4ce77",class:"dso-field-container"},this.baseLayers.map((e=>t("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?t("p",{slot:"info"},e.info):null)))))}get host(){return this}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}"}},[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]),p=h,u=function(){"undefined"!=typeof customElements&&["dso-map-base-layers","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((e=>{switch(e){case"dso-map-base-layers":customElements.get(a(e))||customElements.define(a(e),h);break;case"dso-icon":customElements.get(a(e))||n();break;case"dso-icon-button":customElements.get(a(e))||r();break;case"dso-info":customElements.get(a(e))||l();break;case"dso-info-button":customElements.get(a(e))||c();break;case"dso-scrollable":customElements.get(a(e))||d();break;case"dso-selectable":customElements.get(a(e))||b()}}))};export{p as DsoMapBaseLayers,u as defineCustomElement}