@dso-toolkit/core 100.3.1 → 101.0.0

package/dist/components/dso-dropdown-menu-item.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as o,createEvent as t,forceUpdate as n,h as i,Host as c,transformTag as s}from"@stencil/core/internal/client";import{c as r}from"./clsx.js";import{i as a}from"./is-modified-event.js";import{d}from"./icon.js";const b=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoClick=t(this,"dsoClick",7),this.handleClick=e=>{this.dsoClick.emit({originalEvent:e,isModifiedEvent:a(e)})}}async _dsoFocus(){this.anchorOrButtonRef?.focus()}get dropdownMenu(){return this.host.closest("dso-dropdown-menu")}componentWillLoad(){this.dropdownMenu?._getState().then((e=>{this.dropdownMenuState=e,n(this.host)}))}render(){const e=this.dropdownMenuState?.checkable,o=e?!!this.checked:void 0;return i(c,{key:"5a958be40201eb5abc39592736e65938b5c45de1"},i("div",{key:"aa535ff81401a9c12e123e913dd19374cd4713cc",role:"none",class:r([{checkable:e,checked:o}])},"button"===this.type&&i("button",{key:"6ae9656516c19afd1e2c5c22c8678f93d2c41eff",type:"button",role:e?"menuitemradio":"menuitem","aria-checked":o?.toString(),onClick:this.handleClick,ref:e=>this.anchorOrButtonRef=e},e&&o&&i("dso-icon",{key:"8ab417ad11caeb700a8b9650b1c24772e59cc8a3",icon:"check"}),i("slot",{key:"4e7ebcda5cd7ba3469976999bf1e50fd78bf6a9b"})),"link"===this.type&&this.href&&i("a",{key:"3ac7e35aa1db310ec3816e2814c3ab3e7b078701",href:this.href,role:e?"menuitemradio":"menuitem","aria-checked":o?.toString(),onClick:this.handleClick,ref:e=>this.anchorOrButtonRef=e},e&&o&&i("dso-icon",{key:"be9f20d4269a8dad7df6f8a843b91fb6da46e70d",icon:"check"}),i("slot",{key:"a2396cb075a7f91a8d3a766e3509a34eac7f7367"}))))}get host(){return this}static get style(){return":host{display:block}a:visited{color:#191919}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}button{background-color:transparent;border:0;border-radius:0;text-align:inherit;inline-size:100%}a,button{text-decoration:none}a:hover,a:focus-visible,a:active,button:hover,button:focus-visible,button:active{text-decoration:underline}a,button{clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding-block:3px;padding-inline:20px;text-decoration:none;white-space:nowrap}a:hover,a:focus,button:hover,button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}a dso-icon,button dso-icon{margin-inline:-12px 4px}.checkable:not(.checked) a,.checkable:not(.checked) button{padding-inline-start:40px}.checked a:not(:focus),.checked button:not(:focus){background-color:#39870c;color:#fff}"}},[257,"dso-dropdown-menu-item",{type:[513],href:[513],checked:[516],_dsoFocus:[64]}]),h=b,l=function(){"undefined"!=typeof customElements&&["dso-dropdown-menu-item","dso-icon"].forEach((e=>{switch(e){case"dso-dropdown-menu-item":customElements.get(s(e))||customElements.define(s(e),b);break;case"dso-icon":customElements.get(s(e))||d()}}))};export{h as DsoDropdownMenuItem,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as o,createEvent as t,forceUpdate as n,h as i,Host as c,transformTag as s}from"@stencil/core/internal/client";import{c as r}from"./clsx.js";import{i as d}from"./is-modified-event.js";import{d as a}from"./icon.js";const h=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoClick=t(this,"dsoClick",7),this.handleClick=e=>{this.dsoClick.emit({originalEvent:e,isModifiedEvent:d(e)})}}async _dsoFocus(){this.anchorOrButtonRef?.focus()}get dropdownMenu(){return this.host.closest("dso-dropdown-menu")}componentWillLoad(){this.dropdownMenu?._getState().then((e=>{this.dropdownMenuState=e,n(this.host)}))}render(){const e=this.dropdownMenuState?.checkable,o=e?!!this.checked:void 0;return i(c,{key:"3e62950ca227a74a180bf1f945f8221a2b9ac0fd"},i("div",{key:"3a343d69e9fce9a4ef288798a03a6b475d9fe70f",role:"none",class:r([{checkable:e,checked:o}])},"button"===this.type&&i("button",{key:"fa7dc161a2f76eb3c8cc5cc6612270c9fc48ed34",type:"button",role:e?"menuitemradio":"menuitem","aria-checked":o?.toString(),onClick:this.handleClick,ref:e=>this.anchorOrButtonRef=e},e&&o&&i("dso-icon",{key:"a3cd2eefa6c8285fedef6d6a5141130b9000c9a7",icon:"check"}),i("slot",{key:"d322c46f64ffdeb30b0fe3d789d7d928e635f8dc"})),"link"===this.type&&this.href&&i("a",{key:"067d0ea97bcca792a7e3e21b8958ba7d3a095e58",href:this.href,role:e?"menuitemradio":"menuitem","aria-checked":o?.toString(),onClick:this.handleClick,ref:e=>this.anchorOrButtonRef=e},e&&o&&i("dso-icon",{key:"1b1a699d1de520faef59c3e2ea0db73a1b3102b6",icon:"check"}),i("slot",{key:"43c6db81a62db3367081ceb256b370ed726159f3"}))))}get host(){return this}static get style(){return":host{display:block}a:visited{color:#191919}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}button{background-color:transparent;border:0;border-radius:0;text-align:inherit;inline-size:100%}a,button{text-decoration:none}a:hover,a:focus-visible,a:active,button:hover,button:focus-visible,button:active{text-decoration:underline}a,button{clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding-block:3px;padding-inline:20px;text-decoration:none;white-space:nowrap}a:hover,a:focus,button:hover,button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}a dso-icon,button dso-icon{margin-inline:-12px 4px}.checkable:not(.checked) a,.checkable:not(.checked) button{padding-inline-start:40px}.checked a:not(:focus),.checked button:not(:focus){background-color:#39870c;color:#fff}"}},[257,"dso-dropdown-menu-item",{type:[513],href:[513],checked:[516],_dsoFocus:[64]}]),l=h,b=function(){"undefined"!=typeof customElements&&["dso-dropdown-menu-item","dso-icon"].forEach((e=>{switch(e){case"dso-dropdown-menu-item":customElements.get(s(e))||customElements.define(s(e),h);break;case"dso-icon":customElements.get(s(e))||a()}}))};export{l as DsoDropdownMenuItem,b as defineCustomElement}

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

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as t,forceUpdate as r,h as e,Host as n,transformTag as s}from"@stencil/core/internal/client";import{a,c as i,o as d,f as l,d as c}from"./floating-ui.dom.js";import{c as b}from"./index2.js";import{d as p}from"./icon.js";import{d as f}from"./scrollable.js";import{v as u}from"./v4.js";const m=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.variant="secondary",this.open=!1,this.focusOutListener=o=>{!this.open||o.relatedTarget instanceof t||this.toggleOptions(!1)},this.keyDownHandler=o=>{if(o.target instanceof t&&!o.defaultPrevented&&this.open){switch(o.key){case"Tab":o.shiftKey?this.moveFocusToPrevious(o.target):this.moveFocusToNext(o.target);break;case"ArrowDown":this.moveFocusToNext(o.target,!1);break;case"ArrowUp":this.moveFocusToPrevious(o.target,!1);break;case"Escape":this.escape();break;default:return}o.preventDefault()}},this.escape=()=>{this.button?.focus(),this.toggleOptions(!1)};const{state:r}=b({checkable:!1});this.dropdownMenuState=r}get checkable(){return this.dropdownMenuState.checkable}set checkable(o){this.dropdownMenuState.checkable=o||!1,r(this.host)}dsoClickHandler(o){o.stopPropagation(),this.open&&o.target instanceof t&&this.toggleOptions(!1)}async _getState(){return this.dropdownMenuState}dropdownMenuTabbables(o){const t=this.host.isConnected?Array.from(this.host.querySelectorAll(":scope > dso-dropdown-menu-group > dso-dropdown-menu-item")):[];return o?[this.host,...t]:t}componentDidRender(){if(this.open&&this.button&&this.popoverElement&&!this.cleanUp){const o=this.popoverElement,t=this.button;let r=!0;const e=(t,r)=>{if(o.isConnected){if(this.pendingPopoverConstraints){const t=o.querySelector("dso-scrollable")??o;Object.assign(t.style,{maxHeight:this.pendingPopoverConstraints.availableHeight+"px",maxInlineSize:this.pendingPopoverConstraints.availableWidth+"px"})}Object.assign(o.style,{left:t+"px",top:r+"px"})}},n=a(t,o,(()=>{i(t,o,{strategy:"fixed",middleware:[d(2),l({padding:2}),c({apply:({availableHeight:o,availableWidth:t})=>{this.pendingPopoverConstraints={availableWidth:t,availableHeight:o}}})],placement:"bottom-start"}).then((({x:o,y:t})=>{if(r)return r=!1,void e(o,t);void 0!==this.popoverFrameId&&cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=requestAnimationFrame((()=>{this.popoverFrameId=void 0,e(o,t)}))}))}));this.cleanUp=()=>{void 0!==this.popoverFrameId&&(cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=void 0),n()}}}toggleOptions(o){this.open=o??!this.open,this.popoverElement?.isConnected&&this.popoverElement.togglePopover(this.open),this.open&&requestAnimationFrame((()=>this.moveFocusTo(this.firstItem(!1)))),!this.open&&this.cleanUp&&(this.cleanUp(),this.cleanUp=void 0)}disconnectedCallback(){this.toggleOptions(!1)}get lastItem(){return this.dropdownMenuTabbables(!0).at(-1)}firstItem(o){return this.dropdownMenuTabbables(o)[0]}moveFocusToPrevious(o,t=!0){const r=this.dropdownMenuTabbables(t).findIndex((t=>t===o)),e=this.dropdownMenuTabbables(t)[r-1]??this.lastItem;this.moveFocusTo(e)}moveFocusToNext(o,t=!0){const r=this.dropdownMenuTabbables(t).findIndex((t=>t===o)),e=this.dropdownMenuTabbables(t)[r+1]??this.firstItem(t);this.moveFocusTo(e)}moveFocusTo(o){o&&(o===this.host&&this.button?this.button.focus():"_dsoFocus"in o&&o._dsoFocus())}render(){const o=u();return e(n,{key:"d6eecca58b117e847ed5e2d6c4749ccf1cf45ade",onFocusout:this.focusOutListener,onKeyDown:this.keyDownHandler},this.label&&e("button",{key:"7bd4e3718dd56a7ed820fd7a0bff73299387bca0",id:o,class:"dso-"+this.variant,type:"button",onClick:()=>this.toggleOptions(),"aria-expanded":""+this.open,"aria-haspopup":"menu",ref:o=>this.button=o},this.label,e("dso-icon",{key:"f3db2d02fb532d0dce562de99447be5d2ba93111",icon:this.open?"chevron-up":"chevron-down"})),e("div",{key:"b599fc40124282b4afd1f78e346dd736717ece81",popover:"manual",class:"dso-dropdown-options","aria-labelledby":o,role:"menu",ref:o=>this.popoverElement=o},e("dso-scrollable",{key:"ab2517807d8a940ce8d4fae40f9d657b416724dc"},e("slot",{key:"746e632a7bf1e9e7d585dcf71660ef2944799db8"}))))}get host(){return this}static get style(){return":host(:focus) {   outline: none; }  :host {   display: inline-block; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   letter-spacing: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; } button.dso-primary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-primary:focus, button.dso-primary:focus-visible {   outline-offset: 2px; } button.dso-primary:active {   outline: 0; } button.dso-primary.extern::after, button.dso-primary.download::after {   content: \"\";   display: inline-block; } button.dso-primary {   background-color: var(--_dso-button-primary-background-color, #39870c);   border-color: var(--_dso-button-primary-border-color, #39870c);   color: var(--_dso-button-primary-color, #fff);   float: var(--_dso-button-float-primary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-primary:hover {   background-color: var(--_dso-button-primary-hover-background-color, #275937);   border-color: var(--_dso-button-primary-hover-border-color, #275937);   color: var(--_dso-button-primary-hover-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary:active {   background-color: var(--_dso-button-primary-active-background-color, #173521);   border-color: var(--_dso-button-primary-active-border-color, #173521);   color: var(--_dso-button-primary-active-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary[disabled], button.dso-primary[disabled]:hover {   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);   color: var(--_dso-button-primary-disabled-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary.dso-small {   line-height: 1rem; } button.dso-primary.dso-small dso-icon, button.dso-primary.dso-small.extern::after, button.dso-primary.dso-small.download::after, button.dso-primary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   line-height: 1rem; } button.dso-primary.dso-extra-small dso-icon, button.dso-primary.dso-extra-small.extern::after, button.dso-primary.dso-extra-small.download::after, button.dso-primary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   padding-block: 9px; } button.dso-primary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-primary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-primary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-primary.dso-spinner-left[disabled], button.dso-primary.dso-spinner-right[disabled] {   background-color: #39870c;   border-color: #39870c;   color: #fff; } button.dso-primary.dso-spinner-left::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-primary.dso-spinner-right::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-secondary:focus, button.dso-secondary:focus-visible {   outline-offset: 2px; } button.dso-secondary:active {   outline: 0; } button.dso-secondary.extern::after, button.dso-secondary.download::after {   content: \"\";   display: inline-block; } button.dso-secondary {   background-color: var(--_dso-button-secondary-background-color, #fff);   border-color: var(--_dso-button-secondary-border-color, #39870c);   color: var(--_dso-button-secondary-color, #39870c);   float: var(--_dso-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-secondary:hover {   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);   border-color: var(--_dso-button-secondary-hover-border-color, #275937);   color: var(--_dso-button-secondary-hover-color, #275937);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary:active {   background-color: var(--_dso-button-secondary-active-background-color, #275937);   border-color: var(--_dso-button-secondary-active-border-color, #275937);   color: var(--_dso-button-secondary-active-color, #fff);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);   color: var(--_dso-button-secondary-disabled-color, #afcf9d);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary.dso-small {   line-height: 1rem; } button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   line-height: 1rem; } button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   padding-block: 9px; } button.dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } button.dso-secondary.dso-spinner-left::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-spinner-right::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } button.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; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: \"\";   display: inline-block; } button.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; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: \"\";   display: inline-block; } button.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; } button.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); } button.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); } button.dso-tertiary[disabled], button.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); } button.dso-tertiary.dso-small {   line-height: 1rem; } button.dso-tertiary.dso-small dso-icon, button.dso-tertiary.dso-small.extern::after, button.dso-tertiary.dso-small.download::after, button.dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   line-height: 1rem; } button.dso-tertiary.dso-extra-small dso-icon, button.dso-tertiary.dso-extra-small.extern::after, button.dso-tertiary.dso-extra-small.download::after, button.dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   padding-block: 9px; } button.dso-tertiary {   border: 0;   line-height: 1;   padding-inline: 0;   padding-block: var(--_dso-button-padding-block-tertiary, 0);   background-color: transparent; } button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } button.dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } button.dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } button.dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } button.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; } button.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; } button.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 4px; } button.dso-tertiary dso-icon, button.dso-tertiary span {   vertical-align: middle; } button dso-icon {   margin-inline-start: 8px; } button:not(.dso-tertiary) dso-icon {   margin-inline-end: 0; }  .dso-dropdown-options {   box-sizing: border-box;   margin: 0 !important;   overflow: unset;   background-clip: padding-box;   background-color: #fff;   border-radius: 4px;   border: 1px solid rgba(0, 0, 0, 0.15);   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);   font-size: 1rem;   min-inline-size: 160px;   inline-size: max-content;   padding: 0;   z-index: 220;   --_dso-scrollable-block-size: auto; }  ::slotted(dso-dropdown-menu-group:not(:last-child)) {   border-block-end: 1px solid #e5e5e5;   margin-block-end: 11px;   padding-block-end: 11px; }"}},[257,"dso-dropdown-menu",{checkable:[6660],label:[513],variant:[513],open:[32],_getState:[64]},[[0,"dsoClick","dsoClickHandler"]]]),g=m,h=function(){"undefined"!=typeof customElements&&["dso-dropdown-menu","dso-icon","dso-scrollable"].forEach((o=>{switch(o){case"dso-dropdown-menu":customElements.get(s(o))||customElements.define(s(o),m);break;case"dso-icon":customElements.get(s(o))||p();break;case"dso-scrollable":customElements.get(s(o))||f()}}))};export{g as DsoDropdownMenu,h as defineCustomElement}
+import{proxyCustomElement as o,HTMLElement as t,forceUpdate as r,h as e,Host as n,transformTag as s}from"@stencil/core/internal/client";import{a,c as i,o as d,f as l,d as c}from"./floating-ui.dom.js";import{c as b}from"./index2.js";import{d as p}from"./icon.js";import{d as f}from"./scrollable.js";import{v as u}from"./v4.js";const m=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.variant="secondary",this.open=!1,this.focusOutListener=o=>{this.open&&!this.isInsideDropdownMenu(o.relatedTarget)&&this.toggleOptions(!1)},this.keyDownHandler=o=>{if(o.target instanceof t&&!o.defaultPrevented&&this.open){switch(o.key){case"Tab":o.shiftKey?this.moveFocusToPrevious(o.target):this.moveFocusToNext(o.target);break;case"ArrowDown":this.moveFocusToNext(o.target,!1);break;case"ArrowUp":this.moveFocusToPrevious(o.target,!1);break;case"Escape":this.escape();break;default:return}o.preventDefault()}},this.escape=()=>{this.button?.focus(),this.toggleOptions(!1)};const{state:r}=b({checkable:!1});this.dropdownMenuState=r}get checkable(){return this.dropdownMenuState.checkable}set checkable(o){this.dropdownMenuState.checkable=o||!1,r(this.host)}dsoClickHandler(o){o.stopPropagation(),this.open&&o.target instanceof t&&this.toggleOptions(!1)}async _getState(){return this.dropdownMenuState}dropdownMenuTabbables(o){const t=this.host.isConnected?Array.from(this.host.querySelectorAll(":scope > dso-dropdown-menu-group > dso-dropdown-menu-item")):[];return o?[this.host,...t]:t}componentDidRender(){if(this.open&&this.button&&this.popoverElement&&!this.cleanUp){const o=this.popoverElement,t=this.button;let r=!0;const e=(t,r)=>{if(o.isConnected){if(this.pendingPopoverConstraints){const t=o.querySelector("dso-scrollable")??o;Object.assign(t.style,{maxHeight:this.pendingPopoverConstraints.availableHeight+"px",maxInlineSize:this.pendingPopoverConstraints.availableWidth+"px"})}Object.assign(o.style,{left:t+"px",top:r+"px"})}},n=a(t,o,(()=>{i(t,o,{strategy:"fixed",middleware:[d(2),l({padding:2}),c({apply:({availableHeight:o,availableWidth:t})=>{this.pendingPopoverConstraints={availableWidth:t,availableHeight:o}}})],placement:"bottom-start"}).then((({x:o,y:t})=>{if(r)return r=!1,void e(o,t);void 0!==this.popoverFrameId&&cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=requestAnimationFrame((()=>{this.popoverFrameId=void 0,e(o,t)}))}))}));this.cleanUp=()=>{void 0!==this.popoverFrameId&&(cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=void 0),n()}}}toggleOptions(o){this.open=o??!this.open,this.popoverElement?.isConnected&&this.popoverElement.togglePopover(this.open),this.open&&requestAnimationFrame((()=>this.moveFocusTo(this.firstItem(!1)))),!this.open&&this.cleanUp&&(this.cleanUp(),this.cleanUp=void 0)}disconnectedCallback(){this.toggleOptions(!1)}isInsideDropdownMenu(o){return o instanceof Node&&(this.host.contains(o)||!!this.host.shadowRoot?.contains(o))}get lastItem(){return this.dropdownMenuTabbables(!0).at(-1)}firstItem(o){return this.dropdownMenuTabbables(o)[0]}moveFocusToPrevious(o,t=!0){const r=this.dropdownMenuTabbables(t).findIndex((t=>t===o)),e=this.dropdownMenuTabbables(t)[r-1]??this.lastItem;this.moveFocusTo(e)}moveFocusToNext(o,t=!0){const r=this.dropdownMenuTabbables(t).findIndex((t=>t===o)),e=this.dropdownMenuTabbables(t)[r+1]??this.firstItem(t);this.moveFocusTo(e)}moveFocusTo(o){o&&(o===this.host&&this.button?this.button.focus():"_dsoFocus"in o&&o._dsoFocus())}render(){const o=u();return e(n,{key:"0e2e2c0226bec7638b3d60baab089708191dd6eb",onFocusout:this.focusOutListener,onKeyDown:this.keyDownHandler},this.label&&e("button",{key:"4e11b83883f18b991eab4c219b4bebb2eb1317fb",id:o,class:"dso-"+this.variant,type:"button",onClick:()=>this.toggleOptions(),"aria-expanded":""+this.open,"aria-haspopup":"menu",ref:o=>this.button=o},this.label,e("dso-icon",{key:"7d2d0724c47777fc68d815cc5d92c0d5ac996ab6",icon:this.open?"chevron-up":"chevron-down"})),e("div",{key:"ab88d386a9d8974162728f663bda7e279368f04b",popover:"manual",class:"dso-dropdown-options","aria-labelledby":o,role:"menu",ref:o=>this.popoverElement=o},e("dso-scrollable",{key:"3e1dda4a8dcd2678cdf96a6125124384444051ab"},e("slot",{key:"8954e92ac331853d1dd3d7a0089caf4754cdd3e8"}))))}get host(){return this}static get style(){return":host(:focus) {   outline: none; }  :host {   display: inline-block; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   letter-spacing: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; } button.dso-primary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-primary:focus, button.dso-primary:focus-visible {   outline-offset: 2px; } button.dso-primary:active {   outline: 0; } button.dso-primary.extern::after, button.dso-primary.download::after {   content: \"\";   display: inline-block; } button.dso-primary {   background-color: var(--_dso-button-primary-background-color, #39870c);   border-color: var(--_dso-button-primary-border-color, #39870c);   color: var(--_dso-button-primary-color, #fff);   float: var(--_dso-button-float-primary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-primary:hover {   background-color: var(--_dso-button-primary-hover-background-color, #275937);   border-color: var(--_dso-button-primary-hover-border-color, #275937);   color: var(--_dso-button-primary-hover-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary:active {   background-color: var(--_dso-button-primary-active-background-color, #173521);   border-color: var(--_dso-button-primary-active-border-color, #173521);   color: var(--_dso-button-primary-active-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary[disabled], button.dso-primary[disabled]:hover {   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);   color: var(--_dso-button-primary-disabled-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary.dso-small {   line-height: 1rem; } button.dso-primary.dso-small dso-icon, button.dso-primary.dso-small.extern::after, button.dso-primary.dso-small.download::after, button.dso-primary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   line-height: 1rem; } button.dso-primary.dso-extra-small dso-icon, button.dso-primary.dso-extra-small.extern::after, button.dso-primary.dso-extra-small.download::after, button.dso-primary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   padding-block: 9px; } button.dso-primary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-primary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-primary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-primary.dso-spinner-left[disabled], button.dso-primary.dso-spinner-right[disabled] {   background-color: #39870c;   border-color: #39870c;   color: #fff; } button.dso-primary.dso-spinner-left::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-primary.dso-spinner-right::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-secondary:focus, button.dso-secondary:focus-visible {   outline-offset: 2px; } button.dso-secondary:active {   outline: 0; } button.dso-secondary.extern::after, button.dso-secondary.download::after {   content: \"\";   display: inline-block; } button.dso-secondary {   background-color: var(--_dso-button-secondary-background-color, #fff);   border-color: var(--_dso-button-secondary-border-color, #39870c);   color: var(--_dso-button-secondary-color, #39870c);   float: var(--_dso-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-secondary:hover {   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);   border-color: var(--_dso-button-secondary-hover-border-color, #275937);   color: var(--_dso-button-secondary-hover-color, #275937);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary:active {   background-color: var(--_dso-button-secondary-active-background-color, #275937);   border-color: var(--_dso-button-secondary-active-border-color, #275937);   color: var(--_dso-button-secondary-active-color, #fff);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);   color: var(--_dso-button-secondary-disabled-color, #afcf9d);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary.dso-small {   line-height: 1rem; } button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   line-height: 1rem; } button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   padding-block: 9px; } button.dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } button.dso-secondary.dso-spinner-left::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-spinner-right::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } button.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; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: \"\";   display: inline-block; } button.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; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: \"\";   display: inline-block; } button.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; } button.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); } button.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); } button.dso-tertiary[disabled], button.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); } button.dso-tertiary.dso-small {   line-height: 1rem; } button.dso-tertiary.dso-small dso-icon, button.dso-tertiary.dso-small.extern::after, button.dso-tertiary.dso-small.download::after, button.dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   line-height: 1rem; } button.dso-tertiary.dso-extra-small dso-icon, button.dso-tertiary.dso-extra-small.extern::after, button.dso-tertiary.dso-extra-small.download::after, button.dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   padding-block: 9px; } button.dso-tertiary {   border: 0;   line-height: 1;   padding-inline: 0;   padding-block: var(--_dso-button-padding-block-tertiary, 0);   background-color: transparent; } button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } button.dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } button.dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } button.dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } button.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; } button.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; } button.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 4px; } button.dso-tertiary dso-icon, button.dso-tertiary span {   vertical-align: middle; } button dso-icon {   margin-inline-start: 8px; } button:not(.dso-tertiary) dso-icon {   margin-inline-end: 0; }  .dso-dropdown-options {   box-sizing: border-box;   margin: 0 !important;   overflow: unset;   background-clip: padding-box;   background-color: #fff;   border-radius: 4px;   border: 1px solid rgba(0, 0, 0, 0.15);   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);   font-size: 1rem;   min-inline-size: 160px;   inline-size: max-content;   padding: 0;   z-index: 220;   --_dso-scrollable-block-size: auto; }  ::slotted(dso-dropdown-menu-group:not(:last-child)) {   border-block-end: 1px solid #e5e5e5;   margin-block-end: 11px;   padding-block-end: 11px; }"}},[257,"dso-dropdown-menu",{checkable:[6660],label:[513],variant:[513],open:[32],_getState:[64]},[[0,"dsoClick","dsoClickHandler"]]]),g=m,h=function(){"undefined"!=typeof customElements&&["dso-dropdown-menu","dso-icon","dso-scrollable"].forEach((o=>{switch(o){case"dso-dropdown-menu":customElements.get(s(o))||customElements.define(s(o),m);break;case"dso-icon":customElements.get(s(o))||p();break;case"dso-scrollable":customElements.get(s(o))||f()}}))};export{g as DsoDropdownMenu,h as defineCustomElement}

package/dist/components/dso-grid-column.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as s,createEvent as n,h as e,Host as t,transformTag as o}from"@stencil/core/internal/client";const l=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.dsoClose=n(this,"dsoClose",3),this.overlay=!1,this.overlayActive=!1,this.syncOverlayActive=()=>{this.overlayActive=this.overlay&&(this.mediaQueryList?.matches??!1)},this.handleDialogClick=i=>{if(!this.dialogElement||i.target!==this.dialogElement)return;const{left:s,right:n,top:e,bottom:t}=this.dialogElement.getBoundingClientRect();(i.clientX<s||i.clientX>n||i.clientY<e||i.clientY>t)&&this.dsoClose.emit({originalEvent:i})},this.handleDialogCancel=i=>{i.preventDefault(),this.dsoClose.emit({originalEvent:i})},this.handleDialogClose=i=>{this.dsoClose.emit({originalEvent:i}),this.overlayActive&&this.dialogElement&&!this.dialogElement.open&&this.dialogElement.showModal()}}overlayWatcher(){this.syncOverlayActive()}connectedCallback(){this.mediaQueryList=window.matchMedia("(min-width: 768px)"),this.mediaQueryList.addEventListener("change",this.syncOverlayActive),this.syncOverlayActive()}disconnectedCallback(){this.mediaQueryList?.removeEventListener("change",this.syncOverlayActive),this.mediaQueryList=void 0,this.stopObserving()}componentDidRender(){this.overlayActive?(this.dialogElement&&!this.dialogElement.open&&this.dialogElement.showModal(),this.positionOverlay(),this.startObserving()):this.stopObserving()}positionOverlay(){const i=this.host.parentElement;if(!i?.classList.contains("row"))return void console.warn('Grid Column: overlay requires the column to be a direct child of a "row" element');const s=i.getBoundingClientRect(),n=this.host.getBoundingClientRect(),e=parseFloat(getComputedStyle(this.host).paddingInlineStart)||0;this.host.style.setProperty("--_dso-grid-column-overlay-inset-block-start",n.top+window.scrollY+"px"),this.host.style.setProperty("--_dso-grid-column-overlay-inset-inline-start",s.left+window.scrollX+e+"px"),this.host.style.setProperty("--_dso-grid-column-overlay-inline-size",s.width-2*e+"px")}startObserving(){this.resizeObserver||(this.resizeObserver=new ResizeObserver((()=>this.positionOverlay())),this.resizeObserver.observe(document.body),this.resizeObserver.observe(this.host),this.host.parentElement&&this.resizeObserver.observe(this.host.parentElement))}stopObserving(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0}render(){return e(t,{key:"e02e6fcc5aa1c2e279c36cfab5bf661df6099c49"},this.overlayActive?e("dialog",{class:"grid-column-content",ref:i=>this.dialogElement=i,onClick:this.handleDialogClick,onCancel:this.handleDialogCancel,onClose:this.handleDialogClose},e("slot",null)):e("div",{class:"grid-column-content"},e("slot",null)))}get host(){return this}static get watchers(){return{overlay:[{overlayWatcher:0}]}}static get style(){return":host{display:block;position:relative;min-block-size:1px;padding-inline-end:16px;padding-inline-start:16px;float:inline-start;inline-size:100%}:host([columns~=xs-1]){inline-size:8.3333333333%}:host([columns~=xs-2]){inline-size:16.6666666667%}:host([columns~=xs-3]){inline-size:25%}:host([columns~=xs-4]){inline-size:33.3333333333%}:host([columns~=xs-5]){inline-size:41.6666666667%}:host([columns~=xs-6]){inline-size:50%}:host([columns~=xs-7]){inline-size:58.3333333333%}:host([columns~=xs-8]){inline-size:66.6666666667%}:host([columns~=xs-9]){inline-size:75%}:host([columns~=xs-10]){inline-size:83.3333333333%}:host([columns~=xs-11]){inline-size:91.6666666667%}:host([columns~=xs-12]){inline-size:100%}@media (min-width: 768px){:host([columns~=sm-1]){inline-size:8.3333333333%}}@media (min-width: 768px){:host([columns~=sm-2]){inline-size:16.6666666667%}}@media (min-width: 768px){:host([columns~=sm-3]){inline-size:25%}}@media (min-width: 768px){:host([columns~=sm-4]){inline-size:33.3333333333%}}@media (min-width: 768px){:host([columns~=sm-5]){inline-size:41.6666666667%}}@media (min-width: 768px){:host([columns~=sm-6]){inline-size:50%}}@media (min-width: 768px){:host([columns~=sm-7]){inline-size:58.3333333333%}}@media (min-width: 768px){:host([columns~=sm-8]){inline-size:66.6666666667%}}@media (min-width: 768px){:host([columns~=sm-9]){inline-size:75%}}@media (min-width: 768px){:host([columns~=sm-10]){inline-size:83.3333333333%}}@media (min-width: 768px){:host([columns~=sm-11]){inline-size:91.6666666667%}}@media (min-width: 768px){:host([columns~=sm-12]){inline-size:100%}}@media (min-width: 992px){:host([columns~=md-1]){inline-size:8.3333333333%}}@media (min-width: 992px){:host([columns~=md-2]){inline-size:16.6666666667%}}@media (min-width: 992px){:host([columns~=md-3]){inline-size:25%}}@media (min-width: 992px){:host([columns~=md-4]){inline-size:33.3333333333%}}@media (min-width: 992px){:host([columns~=md-5]){inline-size:41.6666666667%}}@media (min-width: 992px){:host([columns~=md-6]){inline-size:50%}}@media (min-width: 992px){:host([columns~=md-7]){inline-size:58.3333333333%}}@media (min-width: 992px){:host([columns~=md-8]){inline-size:66.6666666667%}}@media (min-width: 992px){:host([columns~=md-9]){inline-size:75%}}@media (min-width: 992px){:host([columns~=md-10]){inline-size:83.3333333333%}}@media (min-width: 992px){:host([columns~=md-11]){inline-size:91.6666666667%}}@media (min-width: 992px){:host([columns~=md-12]){inline-size:100%}}@media (min-width: 1200px){:host([columns~=lg-1]){inline-size:8.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-2]){inline-size:16.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-3]){inline-size:25%}}@media (min-width: 1200px){:host([columns~=lg-4]){inline-size:33.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-5]){inline-size:41.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-6]){inline-size:50%}}@media (min-width: 1200px){:host([columns~=lg-7]){inline-size:58.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-8]){inline-size:66.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-9]){inline-size:75%}}@media (min-width: 1200px){:host([columns~=lg-10]){inline-size:83.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-11]){inline-size:91.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-12]){inline-size:100%}}dialog.grid-column-content{position:absolute;inset-block-start:var(--_dso-grid-column-overlay-inset-block-start);inset-inline-start:var(--_dso-grid-column-overlay-inset-inline-start);inline-size:var(--_dso-grid-column-overlay-inline-size);max-inline-size:none;max-block-size:none;margin:0;border:0;padding:0;background-color:#fff}dialog.grid-column-content::backdrop{background-color:rgba(255, 255, 255, 0.6)}"}},[257,"dso-grid-column",{columns:[513],overlay:[516],overlayActive:[32]},void 0,{overlay:[{overlayWatcher:0}]}]),m=l,h=function(){"undefined"!=typeof customElements&&["dso-grid-column"].forEach((i=>{"dso-grid-column"===i&&(customElements.get(o(i))||customElements.define(o(i),l))}))};export{m as DsoGridColumn,h as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as s,createEvent as n,h as e,Host as t,transformTag as o}from"@stencil/core/internal/client";const l=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.dsoClose=n(this,"dsoClose",3),this.overlay=!1,this.overlayActive=!1,this.syncOverlayActive=()=>{this.overlayActive=this.overlay&&(this.mediaQueryList?.matches??!1)},this.handleDialogClick=i=>{if(!this.dialogElement||i.target!==this.dialogElement)return;const{left:s,right:n,top:e,bottom:t}=this.dialogElement.getBoundingClientRect();(i.clientX<s||i.clientX>n||i.clientY<e||i.clientY>t)&&this.dsoClose.emit({originalEvent:i})},this.handleDialogCancel=i=>{i.preventDefault(),this.dsoClose.emit({originalEvent:i})},this.handleDialogClose=()=>{this.overlayActive&&this.dialogElement&&!this.dialogElement.open&&this.dialogElement.showModal()}}overlayWatcher(){this.syncOverlayActive()}connectedCallback(){this.mediaQueryList=window.matchMedia("(min-width: 768px)"),this.mediaQueryList.addEventListener("change",this.syncOverlayActive),this.syncOverlayActive()}disconnectedCallback(){this.mediaQueryList?.removeEventListener("change",this.syncOverlayActive),this.mediaQueryList=void 0,this.stopObserving()}componentDidRender(){this.overlayActive?(this.dialogElement&&!this.dialogElement.open&&this.dialogElement.showModal(),this.positionOverlay(),this.startObserving()):this.stopObserving()}positionOverlay(){const i=this.host.parentElement;if(!i?.classList.contains("row"))return void console.warn('Grid Column: overlay requires the column to be a direct child of a "row" element');const s=i.getBoundingClientRect(),n=this.host.getBoundingClientRect(),e=parseFloat(getComputedStyle(this.host).paddingInlineStart)||0;this.host.style.setProperty("--_dso-grid-column-overlay-inset-block-start",n.top+window.scrollY+"px"),this.host.style.setProperty("--_dso-grid-column-overlay-inset-inline-start",s.left+window.scrollX+e+"px"),this.host.style.setProperty("--_dso-grid-column-overlay-inline-size",s.width-2*e+"px")}startObserving(){this.resizeObserver||(this.resizeObserver=new ResizeObserver((()=>this.positionOverlay())),this.resizeObserver.observe(document.body),this.resizeObserver.observe(this.host),this.host.parentElement&&this.resizeObserver.observe(this.host.parentElement))}stopObserving(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0}render(){return e(t,{key:"603befb14663a71590e342c590f3ebde4d08be42"},this.overlayActive?e("dialog",{class:"grid-column-content",ref:i=>this.dialogElement=i,onClick:this.handleDialogClick,onCancel:this.handleDialogCancel,onClose:this.handleDialogClose},e("slot",null)):e("div",{class:"grid-column-content"},e("slot",null)))}get host(){return this}static get watchers(){return{overlay:[{overlayWatcher:0}]}}static get style(){return":host{display:block;position:relative;min-block-size:1px;padding-inline-end:16px;padding-inline-start:16px;float:inline-start;inline-size:100%}:host([columns~=xs-1]){inline-size:8.3333333333%}:host([columns~=xs-2]){inline-size:16.6666666667%}:host([columns~=xs-3]){inline-size:25%}:host([columns~=xs-4]){inline-size:33.3333333333%}:host([columns~=xs-5]){inline-size:41.6666666667%}:host([columns~=xs-6]){inline-size:50%}:host([columns~=xs-7]){inline-size:58.3333333333%}:host([columns~=xs-8]){inline-size:66.6666666667%}:host([columns~=xs-9]){inline-size:75%}:host([columns~=xs-10]){inline-size:83.3333333333%}:host([columns~=xs-11]){inline-size:91.6666666667%}:host([columns~=xs-12]){inline-size:100%}@media (min-width: 768px){:host([columns~=sm-1]){inline-size:8.3333333333%}}@media (min-width: 768px){:host([columns~=sm-2]){inline-size:16.6666666667%}}@media (min-width: 768px){:host([columns~=sm-3]){inline-size:25%}}@media (min-width: 768px){:host([columns~=sm-4]){inline-size:33.3333333333%}}@media (min-width: 768px){:host([columns~=sm-5]){inline-size:41.6666666667%}}@media (min-width: 768px){:host([columns~=sm-6]){inline-size:50%}}@media (min-width: 768px){:host([columns~=sm-7]){inline-size:58.3333333333%}}@media (min-width: 768px){:host([columns~=sm-8]){inline-size:66.6666666667%}}@media (min-width: 768px){:host([columns~=sm-9]){inline-size:75%}}@media (min-width: 768px){:host([columns~=sm-10]){inline-size:83.3333333333%}}@media (min-width: 768px){:host([columns~=sm-11]){inline-size:91.6666666667%}}@media (min-width: 768px){:host([columns~=sm-12]){inline-size:100%}}@media (min-width: 992px){:host([columns~=md-1]){inline-size:8.3333333333%}}@media (min-width: 992px){:host([columns~=md-2]){inline-size:16.6666666667%}}@media (min-width: 992px){:host([columns~=md-3]){inline-size:25%}}@media (min-width: 992px){:host([columns~=md-4]){inline-size:33.3333333333%}}@media (min-width: 992px){:host([columns~=md-5]){inline-size:41.6666666667%}}@media (min-width: 992px){:host([columns~=md-6]){inline-size:50%}}@media (min-width: 992px){:host([columns~=md-7]){inline-size:58.3333333333%}}@media (min-width: 992px){:host([columns~=md-8]){inline-size:66.6666666667%}}@media (min-width: 992px){:host([columns~=md-9]){inline-size:75%}}@media (min-width: 992px){:host([columns~=md-10]){inline-size:83.3333333333%}}@media (min-width: 992px){:host([columns~=md-11]){inline-size:91.6666666667%}}@media (min-width: 992px){:host([columns~=md-12]){inline-size:100%}}@media (min-width: 1200px){:host([columns~=lg-1]){inline-size:8.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-2]){inline-size:16.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-3]){inline-size:25%}}@media (min-width: 1200px){:host([columns~=lg-4]){inline-size:33.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-5]){inline-size:41.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-6]){inline-size:50%}}@media (min-width: 1200px){:host([columns~=lg-7]){inline-size:58.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-8]){inline-size:66.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-9]){inline-size:75%}}@media (min-width: 1200px){:host([columns~=lg-10]){inline-size:83.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-11]){inline-size:91.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-12]){inline-size:100%}}dialog.grid-column-content{position:absolute;inset-block-start:var(--_dso-grid-column-overlay-inset-block-start);inset-inline-start:var(--_dso-grid-column-overlay-inset-inline-start);inline-size:var(--_dso-grid-column-overlay-inline-size);max-inline-size:none;max-block-size:none;margin:0;border:0;padding:0;background-color:#fff}dialog.grid-column-content::backdrop{background-color:rgba(255, 255, 255, 0.6)}"}},[257,"dso-grid-column",{columns:[513],overlay:[516],overlayActive:[32]},void 0,{overlay:[{overlayWatcher:0}]}]),m=l,h=function(){"undefined"!=typeof customElements&&["dso-grid-column"].forEach((i=>{"dso-grid-column"===i&&(customElements.get(o(i))||customElements.define(o(i),l))}))};export{m as DsoGridColumn,h as defineCustomElement}

package/dist/components/dso-header.js

@@ -1 +1 @@
-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}
+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 p,d as u}from"./floating-ui.dom.js";import{c as m}from"./clsx.js";import{t as c}from"./index.esm.js";import{g as b}from"./get-active-element.js";import{i as g}from"./i18n.js";import{i as v}from"./is-modified-event.js";import{d as f}from"./icon.js";import{d as w}from"./scrollable.js";import{v as x}from"./v4.js";const k={en:{"dso-header":{menuOpen:"Close",menu:"Menu",login:"Log in",logout:"Log out",help:"Help",overflowMenu:"More"}},nl:{"dso-header":{menuOpen:"Sluiten",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:m({"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=g((()=>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}get isMobileViewport(){return window.innerWidth<=480}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),p({padding:this.dropdownOptionsOffset}),u({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:"cb1ed3299e9c55352cab476696bd2d6ad94cbd54","is-compact":this.isCompact},o("div",{key:"218cefd65ca18da0237e39fba0aba06259119254",class:"dso-header"},o("div",{key:"c7681803acf271892e46819e3d9568ebc3ed849a",class:"logo-container"},o("slot",{key:"cba4cf96314214ee2af03501ede754c879d31fec",name:"logo"})),this.renderHeaderSession(),this.isCompact?this.renderCompact():this.renderNormal()))}tabbables(o){const i=this.dropdownElement?c(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)}renderHelp(){return 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"}))}renderLogin(i=!0){return this.loginUrl?o("a",{href:this.loginUrl,class:i?"dso-tertiary":void 0,onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},o("dso-icon",{icon:"user-outline"}),o("span",null,this.text("login"))):o("button",{class:i?"dso-tertiary":void 0,type:"button",onClick:o=>this.clickHandler(o,"login")},o("dso-icon",{icon:"user-outline"}),o("span",null,this.text("login")))}renderLogout(){return 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"))}renderHeaderSession(){return o("div",{class:"dso-header-session"},!this.isCompact&&o(r,null,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.renderLogin()),"loggedIn"===this.authStatus&&o("div",{class:"logout"},this.renderLogout())),this.showHelp&&!this.isMobileViewport&&o("div",{class:"help"},this.renderHelp()))}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"},this.renderMenuToggleContent(this.isMobileViewport,this.open)),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"))),"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},this.renderLogout()),"loggedOut"===this.authStatus&&o("li",{role:"menuitem"},this.renderLogin()),this.showHelp&&this.isMobileViewport&&o("li",{role:"menuitem"},this.renderHelp()))))))}renderMenuToggleContent(i,e){return o(r,null,o("span",null,this.text(e&&i?"menuOpen":"menu")),o("dso-icon",i?{icon:e?"cross":"bars"}:{icon:e?"chevron-up":"chevron-down"}))}renderNormal(){return this.menuItemElementRefs=[],o(r,null,(this.mainMenu.length>0||this.userHomeUrl)&&o("nav",{class:"dso-navbar"},o("ul",{class:m("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:m("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%}@media screen and (min-width: 481px){:host([is-compact]) .dropdown-menu .dropdown-menu-options{inline-size:265px}}: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}@media screen and (max-width: 480px){div[popover]{inset-inline:0 !important;inline-size:100%}div[popover] .dropdown-menu-options{inline-size:100%;max-inline-size:none !important}div[popover]::before{content:"";position:absolute;inset-block-start:-1px;inset-inline:0;border-block-end:1px solid #ccc}div[popover]::after{content:"";position:absolute;inset-block-start:100%;inset-inline:0;block-size:100vh;background-color:rgba(255, 255, 255, 0.8)}}.dso-header{border-block-end:1px solid #e5e5e5;display:flex;flex-wrap:wrap;align-items:center;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;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}@media screen and (min-width: 481px){.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help,.dso-header-session:has(*)+.dropdown{border-inline-start:3px solid #ccc;block-size:20px;margin-inline-start:8px;padding-inline-start:8px}}@media screen and (min-width: 481px){.dso-header-session .help a{gap:4px}}.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;padding-inline-start:0}.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 .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 #ccc;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:focus,.dropdown-menu .dropdown-menu-options ul li button:focus{text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li.dso-active a,.dropdown-menu .dropdown-menu-options ul li.dso-active button{background-color:#275937;color:#fff}.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary,.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary{align-items:center;display:flex;gap:10px}.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary dso-icon,.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary dso-icon{margin-inline-start:0;order:-1}.dropdown-menu .dropdown-menu-options ul li a.dso-tertiary span,.dropdown-menu .dropdown-menu-options ul li button.dso-tertiary span{order:0}.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))||f();break;case"dso-scrollable":customElements.get(d(o))||w()}}))};export{z as DsoHeader,M 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:"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}
+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:"91d00560a3617308d002684f4c67c940b16dc1c7","has-counter":o},o&&t("div",{key:"ed7997c8e77b13b44e5a567ee31116ba937fc6c2",class:"dso-step-counter","aria-hidden":"true"},this.step??t("slot",{key:"4993d27042a6a7839da8fd679625dbe17a1cd3b2",name:"icon"})),t("slot",{key:"bfab78815718775c72114b51730d229c1d2b3615"}))}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-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:"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}
+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:"50e7022a7d8609f707bbc7db0a76e1c875196156"},o("div",{key:"bab113ad4e4f716dd2fbba44e40f6b55573f882b",class:"legend-group-header"},o("slot",{key:"29ef307aed6239c9720b4649c852251082fec38f",name:"heading"}),this.mode&&o("dso-icon-button",{key:"ad3f0111cca63825e5d7fd55b7d7bac220d8da95",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:"0e39fdfe7c793662d53c57c1c790e4e53c168123",name:"options"}),o("slot",{key:"7d8490e439f878271259a5c5bfad62ed5dfe62bd"}))}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}

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 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}
+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:"303c7ddca3e6779ce9bbefa891d09a98daf92afd",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},o("div",{key:"772e960d48c62dd8ed5f035191f39d5676a3290b",class:d("legend-item",{"legend-item-symbol":e})},e&&o("div",{key:"82cc6c2ca9fa5b75cad03185416109d23f6ca086"},o("slot",{key:"401c7d2f991b5718eb9a0187b272fbcf86e6f067",name:"symbol"})),o("div",{key:"29f0e127a2ad71f82132ca6de363de9edf9368dc"},o("slot",{key:"dc21e1f62471652d940f4e78c1417e4f1fb99fac",name:"label"})),this.disabled&&this.disabledMessage&&o("dso-info-button",{key:"1d40419b908d45216c2a83e42b4f675aa4a682cc",label:this.text("disabledInfo"),toggletipPlacement:"bottom"},o("div",{key:"f0ff311f69b6d6a3e0b01f1e66fbfabfd7476b10",slot:"toggletip"},this.disabledMessage)),o("div",{key:"8f8e201b6730f2ac177452b0aed27b1f077375c5",class:"legend-item-right-content"},this.renderRightContent(t,s))),t&&o("div",{key:"190d57da182375676f885799db52faf1db7b3e23",hidden:this.disabled||!this.showOptions,class:"options"},o("slot",{key:"8a69fc826eac7ff7f70ffa0280a5452398bb27dc",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 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}
+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 l}from"./icon.js";import{d as c}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:"6c068495df817506eb9cb36c180014ca2b576e83"},o("div",{key:"d1894347ffa291f9f2a1ea2184f3290c654a26a5",class:"topbar"},o("div",{key:"37770064ed8439b568a1a842c3f9d30a7b1bb5d4",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:"b355c1a19204d9c348e74cd59d628e6fc8aba252",icon:"cross",variant:"tertiary",label:this.text("closeLegend"),class:"close-button",onDsoClick:e=>this.dsoClose.emit({originalEvent:e.detail.originalEvent})})),o("dso-scrollable",{key:"4a92cff1f0be3ac4f0cdb562061a5b39ea374c88",class:"content"},o("div",{key:"e8eaea56938f7d41e344fff4818bef8f18fe54b0",role:"tabpanel",tabIndex:0},o("slot",{key:"358aee3d3b750d7b3794e072444e048a5f5d3960"}))))}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))||l();break;case"dso-icon-button":customElements.get(n(e))||c();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 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}
+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:"d3644ab7e77bf40681ddb59eea4a22888901c570",class:a(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"120cb93aa13da1af6a302568c656b305853e8a99",class:a(["dso-list-button",{"dso-selected":t,"dso-single-count":1===this.count}]),onClick:t=>this.handleSelectClick(t)},r("dso-selectable",{key:"872fff0f578b7dccac9da8277f66043e0b4fb69a",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled},r("span",{key:"d51e140b406f8b44fb25232c299d5a70da078da9"},this.label,this.sublabel&&r("span",{key:"0d20ddc4f3a14c25087bd930329ac1975a93f755",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"681d918e121d94fa4fda584214d4aa5eabd297ca",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"f40f2c952ac87d5b76a8ae320017b14e88ad852c",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"f76a4848772f4bf0a5b8f5946f27ec14299a95fd",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"14eeb4c1c407e60fb291c165766d112a113bc254",class:"subcontent"},r("slot",{key:"eca53ee9df2530e2f7afe2d3c1ea8e3b7c636060",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"9a56f8316ce47ac57857b4ce3decfec62614d06c",class:"dso-input-number"},this.count>1&&r(i,{key:"6700e317b346d22ae2d08cb31edd258882b416d4"},r("dso-icon-button",{key:"a7a057bfbe51b65a06540e0b66d09ee067fd2a0e",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:"7ca7446e17b4b072211999f64e517996896535b2",class:"dso-input-step-counter","aria-hidden":"true"},this.count)),r("span",{key:"ac8205f92db130439d29ef164aca60aa1535fae7",class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.count),r("dso-icon-button",{key:"b926a293e367d9321ec68e8ed4e3ab5716343172",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}

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